目录
参见:https://blog.csdn.net/JBY2020/article/details/109591677
form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
<style>
*{
margin-top: 0;
}
div{
width: 400px;
background-color: rgba(63, 173, 209, 0.301);
border-radius: 5px;
margin: auto;
}
input{
text-align: center;
}
fieldset{
border: gold solid 3px;
border-radius: 3px;
margin: 3px;
}
legend{
color: lime;
text-align: center;
}
</style>
</head>
<body>
<div>
<form action="">
<p>用户名:<input type="text" value="jbr123" placeholder="请输入用户名" maxlength="8"></p>
<p>密 码:<input type="password" placeholder="请输入密码" maxlength="12"></p>
<p> 邮 箱:<input type="email" placeholder="请输入邮箱"></p>
<p>金 额:<input type="number" style="width: 245px;" placeholder="请输入金额" value="0.01" step="0.01" min="0.01" max="10000.00" maxlength="8"> 元</p>
<p>数 量:<input type="range" min="0" max="100" step="10" value="0"></p>
<p>日 期:<input type="date"></p>
<p>时 间:<input type="time"></p>
<p>月 份:<input type="month"></p>
<p>周  :<input type="week"></p>
<p>日期时间:<input type="datetime-local"></p>
<p>颜 色:<input type="color"></p>
<p>文 件:<input type="file"></p>
<p>多个文件:<input type="file" multiple></p>
<p>单 选:<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label></p>
<p>选择一个国家:
<select name="东亚" id="">
<optgroup label="共产主义">
<option value="China" selected>中国</option>
<option value="North Korea">朝鲜</option>
</optgroup>
<optgroup label="资本主义">
<option value="South Korea">韩国</option>
<option value="Japan">日本</option>
<option value="Mongolia">蒙古</option>
</optgroup>
</select>
</p>
<p>评论一下:<textarea name="" id="" cols="20" rows="10"></textarea></p>
<fieldset>
<legend>几种按钮</legend>
<p>图片按钮:<input type="image" style="width: 10%; height: 10%;" src="https://res.shiguangkey.com/file/2021/4/26/16194074076299399996942.jpg?x-oss-process=image/format,jpg" alt="这是一个图片按钮"></p>
<p>点击按钮:<input type="button" value="请点击"></p>
<p>提交按钮:<input type="submit" value="提交"></p>
<p>重置按钮:<input type="reset" value="重置"></p>
</fieldset>
</form>
</div>
</body>
</html>
浏览器在网页上专门用来划分出一个用来存储表单元素的区域的form标签元素,这个元素是一个块元素。
form标签的两个重要的属性:
action属性,内部是一个链接,指明要提交表单信息的服务器地址来发送表单数据。
method属性,内部存储着该表单向目标服务器传输数据时采用的方式。
form表单中的常用标签
input标签
input标签在form元素中使用,用来展示用户可以输入数据的元素。input是行内块元素。
input标签最终的表现形式和传输至服务器的数据类型,取决于type属性。type属性内部是存储着该input元素输入信息的类别(如文字,单选,邮箱,电话号码,多选框等)。input标签的name属性内部存储着该input元素的名称。
文本输入框:
type属性值:
text:文本输入框
email:邮箱输入框
password:密码输入框,用户输入密码为密文显示
number:数字
range:滑动条
date:日期
time:时间
month:月份
week:择周
datetime-local:日期时间
color:颜色
file:选择文件,默认是选择单个文件,如果需要选择多个文件的时候,添加multiple属性即可。
radio:单选,name=“表单元素的名称” value=“该按钮选项给服务器传输的数据值”。
checkbox:name=“表单元素的名称” value=“该按钮选项给服务器传输的数据值”
label元素:扩大用户选中input元素的区域,点击关联的文字就可选择,不只是单单去点击按钮选择,for属性的存储的对应input元素的id名称,如在单选中选择时,不使用label关联元素,只能点击选择框选择,而不能点击关联的文字选择。
image:图片形式的按钮
button:普通按钮
submit:提交按钮
reset:重置按钮
常用属性
placeholder属性:占位符,placeholder=“请输入用户名”,占位符的作用是在用户尚未输入信息时,在输入框中显示提示信息,该信息在用户点击输入框并输入任意信息后会自动消失
value属性:默认的输入内容,用户在输入的时候需要手动清除后才能输入其他内容
min属性:限制输入的最小值
max属性:限制输入的最大值
maxlength属性:限制输入内容的长度
step属性:设置输入数字的步长
select标签
select为下拉选择,创造一个下拉选项列表,select中的name值表示这个下拉选项列表的名称。
option标签:是包含在select中的下拉列表选项,option中的value值表示用户选择这个选项后,表单向服务器发送的数据,option元素中如果有一个selected的单词,这表示,该选项为此下拉选项列表的默认选择
optgroup标签是包含在select标签中的,用来包裹option标签,可以对下拉列表选项分组。
textarea标签
用来创造一个文本输入区域,rows属性表示这个文本输入区域默认的高,cols属性表示这个文本输入区域默认的宽,这里的宽高指的是字符
fieldset标签
可以将表单内的相关元素分组,会在相关表单元素周围绘制边框
legend 标签包裹在fieldset标签中,为fieldset元素定义标题
表格
标签
表格中的最基本元素行和列,创建的时候是先行后列,并且列元素标签只能包裹在行元素标签中
表格标签:table
表头标签:th
行标签:tr,只有行的话不会在网页内容中间展示任何的效果,一个表格至少需要行和列同时出现
列标签:td,
表格名称标签:caption,
给表格分区域的标签:
- 表头区域标签:thead
- 表身区域标签:tbody
- 表尾区域标签:tfoot
一个表格我们可以用thead,tbody,tfoot分成三大模块,这三大模块从上往下的排列顺序为thead->tbody->tfoot,该顺序与代码中的三个模块位置无关
属性
border-collapse:边框分隔(collapse,separate)
border-spacing:边框间距
表格的其他属性见:https://blog.csdn.net/JBY2020/article/details/109591677