目录
表单
1、表单语法
分别把method的值设置为get和post,然后提交表单,查看页面效果;通过演示可看到method设置不同值时,表单数据在地址栏显示的不同情况
总结:post方式提交的数据安全性要明显高于get方式提交的数据。因此在实际开发中通常采用post方式提交表单数据。
2、13个表单元素
1、文本框
2、密码框
向密码框中输入字符时,显示的效果,密码字符以黑色实心的圆点来显示。
3、单选按钮
同一组单选按钮,name属性值必须相同,才能在选中单选按钮时达到互斥
4、复选框
同一组复选框,根据需要可设置name属性值相同
5、下拉列表框
一个<select>中至少包含一个<option>
希望在页面加载时有默认选中的选中项,则必须使用selected属性,如果没有默认选中项则第一个选项默认被选中;改变size的值和selected默认值
6、按钮
7、多行文本域
8、文件域
在表单中使用文件域时,必须设置表单的“enctype”编码属性为“multipart/form-data”,表示将表单数据分为多部分提交
9、邮箱
会自动验证Email地址格式是否正确
10、网址
会自动验证URL地址格式是否正确
11、数字
12、滑块
type值为range即为滑块。
13、搜索框
3、表单的高级应用
在某些注册页面或本图片中订单信息页面,必须同意一些条款按钮才能使用
隐藏域:
在浏览器中看不到隐藏域,但是在提交表单时可以看到隐藏域的内容被提交至服务器
只读、禁用:
W3C HTML5标准中,规定对于布尔类型的属性,属性值可以省略
表单元素的标注:
- 增强鼠标的可用性
- 自动将焦点转移到与该标注相关的表单元素上
4、表单的初级验证
表单验证的好处
(1)减轻服务器的压力。
(2)保证数据的可行性和安全性。
在客户端就对表单进行验证是非常有必要的
表单初级验证的方法
placeholder
提示语默认显示,当文本框中输入内容时提示语消失
required
pattern
用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单(javascript会深入)
5、小结