你我学习网
完成笔记链接：https://www.niwoxuexi.com/blog/web/article/1245
——3 表单——
24.表单标签form：
<form method="post" action="login.html" enctype="text/plain"> 表单内容 </form>
(1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。
(2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。
(3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+，但不对特殊字符编码。
24.表单元素：
(1)表单元素<input>标签的属性：
type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)
(2)列表框<select><option>标签：
<select>中至少包含一个<option>。在<option>有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。
(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如<input type="image" src="图片路径"/>
(4)多行文本域：不能用value属性赋初始值
<textarea name="标识名" cols="显示的列数" rows="显示的行数"> 自我评价 </textarea>
(5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等
<input type="number" name="num" min="0" max="100" step="10"/>
(6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值
<input type="range" name="range" min="0" max="100" step="10"/>
(7)search搜索框:在任意页面中用于输入搜索关键词的文本框
<input type="search" name="sousuo" />
(8)文件域：多用于文件上传
<input type="file" name="files"/> <input type="submit" name="upfiles" value="上传"/>
(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。
(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。
<input type="hidden" name="userid" value="20"/>
(11)表单元素 只读属性readonly、禁用disabled
(12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。
(13)表单元素的标注label：当鼠标单击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。
<label for="female">女</label> <input type="radio" name="sex" id="female" />
24.HTML5表单新标签
- <form>供用户输入的表单
- <input> 输入域
- <textarea> 文本域 (多行输入)
- <label> 定义 <input> 元素的标签，一般为输入标题
- <fieldset> 定义一组相关的表单元素，并使用外框包含起来
- <legend> 定义 <fieldset> 元素的标题
- <select> 下拉选项列表
- <optgroup> 选项组
- <option> 下拉列表中的选项
- <button> 点击按钮
- <datalist> 指定一个预先定义的输入控件选项列表
- <keygen> 定义了表单的密钥对生成器字段
- <output> 计算结果
25.表单验证
(1)好处：减轻服务器的压力；保证数据的可行性和安全性。
(2)placeholder:为文本框提示用户输入
<input type="text" name="name" placeholder="请输入你的姓名"/>
(3)required：规定文本框不能为空
<input type="email" name="email" required/>
(4)pattern：输入的内容必须符合正则表达式自定义的规则
<input type="text" name="tel" required pattern="^1[35]\d{9}"/>规定以13、15开头的11位数字