一、Form表单的使用场景
From表单是连接用户和数据的核心组件，一般运用在页面的登录注册
二、表单的语法以及常用属性
1.表单语法
<!--
method 属性中规定如何发送表单数据；常用值：get | post
action 属性表示向何处发送表单数据
-->
<form method = "post" action = "#">
<p>用户名：<input type = "text" name = "uaername" /></p>
<p>密码：<input type = "password" name = "password"/></p>
<p>
<input type = "submit" name = "Submit" value = "提交"/>
<input type = "reset" name = "Reset" value = "取消"/>
</p>
</form>
备注：在实际网页开发中通常采用post方式提交表单数据
2.input输入框语法以及常见属性
<!--
type 属性填写元素类型
name 属性为元素名称
value 属性为元素的默认值
<lable>标签 在表单中，文本内容一般用<lable>标签包裹
-->
<lable>姓名：</lable><input type = "text" name = "fname" value = "张三"/>
三、表单各类标签元素
1.文本框 （text）
<!--
type="text" 设置为文本框
size 为文本框的长度
maxlength 为文本框最多可输入的字符
-->
<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>
2.密码框 （password）
设置后密码框的内容为小黑点
<!--
type="password" 设置为密码框
name 为密码框的名称
size 为密码框的长度
-->
<input type="password" name="pass" size="20" />
3.单选按钮 （radio）
注意：单选框name的值为一样，因为男女两个单选框为一个组
<!--
type="radio" 设置为单选框
value 为单选框的值
checked 表示默认单选框的内容
-->
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女
4.复选框 （checkbox）
注意：复选name的值为一样，因为几个复选框为一个组
<!--
type="checkbox" 设置为复选框
checked 表示默认复选的内容
-->
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
5.列表框 （select、option）
<!--
select 表示列表框
option 表示有每一个选项
selected = "select" 表示默认选中的内容
-->
<select name="职业" id="" size="1">
<option value="护士">护士</option>
<option value="老师" selected = "select">老师</option>
<option value="军人">军人</option>
</select>
6.按钮 （button、image、submit、reset）
<!--
type="button" 设置为普通按钮
type="image" 设置为图片按钮
type="submit" 设置为提交按钮
type="reset" 设置为重置按钮
value 为按钮上显示的文字
-->
<input type="button" name="butButton" value="普通按钮"/>
<input type="image" name="imgButton" src="./image/btn.bmp">
<input type="submit" name="subButton" value="submit提交按钮">
<input type="reset" name="butReset" value="reset取消按钮">
7.多行文本域 （textarea）
<!--
textarea 为多行文本域标签
cols="x" 表示显示的行数
rows="y" 表示显示的列数
-->
<textarea name="showText" id="" cols="30" rows="10">文本内容</textarea>
8.文件域 （file）
<!--
type="file" 设置为文件域
enctype="multipart/form-data" 为表单编码属性
-->
<form method="GET" action="#" enctype="multipart/form-data">
<p>
<input type="file" name="files">
<input type="submit" name="upload" value="上传"/>
</p>
</form>
9.邮箱 （email）
注意：设置为邮件属性框后，会自动验证email地址格式是否正确
<!--
type="email" 设置为邮件属性
-->
<label>邮箱：</label><input type="email" name = "email">
10.网址 （url）
注意：设置为网址属性框后，会自动验证URL地址格式是否正确
<!--
type="url" 设置为网址属性
-->
<label>请输入你的网址：</label><input type="url" name="userUrl"/>
11.数字 （number）
<!--
type="number" 设置为数字框格式
min 表示数字框允许的最小值
max 表示数字框允许的最大值
step 为合法的数字间隔，表示每增加或嫌少一次的单位间隔
-->[图片上传中...(image.png-73ad9-1589282458339-0)]
<label>请输入数字：</label><input type="number" name = "num" min="0" max="100" step="10"/>
12. 滑块 （range）
<!--
type="range" 设置为滑块框
min 表示允许的最小值
max 表示允许的最大值
step 为合法的数字间隔
-->
<input type="range" name="range1" min="0" max="10" step="2"/>
13.搜索框 （search）
<!--
type="search" 设置为搜索框
-->
<label>请输入搜索的关键字：</label><input type="search" name="sousuo"/>
四、表单的高级属性
1.表单的隐藏域 （hidden）
定义：隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。
作用：当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上
<!--
type="hidden" 设置表单的隐藏域
-->
<input type="hidden" value="666" name="userid"/>
2.表单的只读和禁用 （readonly、disabled）
只读：要求某些数据可见但不能进行修改。
禁用：当使用者满足某个条件后才能使用，如只有同意注册协议后用户才能点击注册按钮。
技巧：W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略
<!--
readonly 属性设置文本只读
disabled 属性设置文本禁用
-->
<input type="text" name="name" value="张三" readonly/>
<input type="submit" value="提交" disabled>
3.表单元素的标注 （lable）
用途：增强鼠标的可用性
点击lable标签包裹的内容时，自动将焦点转移到与该标注相关的表单元素上
<!--
1.id="xxx" 先设置input标签id元素
2.for="xxx" 然后在lable标签里用for属性去找到对应的框的id
-->
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
<br/>
<label for="userName">用户名:</label><input type="text" id="userName" name="userName" >
四、表单的初级验证
表单验证的好处：(1)减轻服务器的压力，避免服务器崩溃；(2)保证数据的可行性和安全性
1.文本输入框内容提示（placeholder）
(1)提示语默认显示，当文本框中输入内容时提示语消失
(2)适合于input标签：text，search，url，email和password等类型
<!--
placeholder = "text" 在text区域输入需要提示的文本即可
-->
<input type="search" name="find" placeholder="请输入要搜索的关键字"/>
2.必填项（required）
(1)规定文本框填写内容不能为空，否则不允许用户提交表单
(2)适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<!--
required 设置文本为必填
-->
<input type="text" name="username" required/>
3.正则表达式 （pattern）
注意：规定文本框填写内容不能为空，否则不允许用户提交表单
<!--
required 设置文本必填
pattern 设置文本符合正则表达式，第一位数字是1；第二位数字为3，5，8；后面为9位随意的data数字
-->
<label>电话号码：</label><input type="text" name="phone" required pattern="^1[358]\d{9}"/>
五、HTML语义化
1.html语义化
在使用html编程时，根据内容选择合适的标签（代码语义化），增加可读性与SEO（搜索引擎）。
2.为什么要语义化
(1)为了在没有CSS的情况下也能呈现出很好地内容结构、代码结构；
(2)提高用户体验；
(3)有利于SEO；
(4)方便其他设备渲染网页；
(5)便于团队开发和维护。
3.HTML语义化注意事项
(1)Html编码时要保持父子标签之间一个Tab键的缩进；
(2)在语义不明显时，既一个用于布局的div声明前后都有注释；
(3)尽可能少的使用无语义的可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
(4)不要使用纯样式标签，如：b、font、u等，改用css设置。
(5)需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式），strong默认样式是加粗（不要用b），em是斜体（不用i）；
(6)使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
(7)每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来
