1. 表单分类
- 注册
- 登录
- 搜索框
2. 基础表单
-
form 表单
action: 提交地址
method:提交的方式(post) -
提交请求:
携带的参数
key: 控件的name。这个属性不要忘记
get:携带参数,参数可以在url中看到,不安全,大小有限
https://www.baidu.com/?username=kuangshen&password=123456
post:参数不可见、安全,大小没有限制 (表单提交常用方式post) -
输入框均要写在表单内
input 标签
name: 必须写上
type:
text : 文本框
password: 密码框
submit: 提交按钮
reset: 重置 -
案例代码
-
运行结果
3. 表单元素
- 所有表单元素都要写在form表单中,必须加上name属性,否则提交的时候取不到值。
(1)文本框
- type=“text”
value :文本框默认的初始值
size: 文本框的长度
maxlength: 文本框的最大输入长度
(2)密码框
- type=“password”
size: 密码框的长度
(3)单选按钮
- type=“radio”
value: 表单提交的值
name: 名字相同,则自动分组,必须要分组
checked: 默认选中
disabled: 禁用
注意事项:默认没有值,需要在input type=“radio” 后增加单选框的属性
(4)多选框
- type=“checkbox”
name: 必填项,如果是分组,则名称一致
value: 表单提交的值
checked: 默认选中
disabled: 禁用
注意事项:默认没有值,需要再input type=“checkbox” 后增加多选框的属性
(5)下拉列表框
-
select
name: 组件名字 必填
size: 显示的数量,默认为1- option: 选项
value 必填
option标签中间写下拉框的值
selected: 默认选中
- option: 选项
(6)按钮
- value:按钮上的文字
(7)文本域
(8)文件域
- 表单,需要支持提交复杂文件
- 当使用文件域file时,必须在form的标签中说明编码方式“enctype=“multipart/form-data”。这样,服务器才能接收到正确的信息。
(9)邮箱
(10)网址
(11)数字
- 商品数量,计数 type=“number”
最小值 min
最大值 max
步长 step
(12)滑块
(13)搜索框
- 总运行页面
4. 表单应用
(1)隐藏域
(2)只读和禁用
(3)标注
- 通过 for=“name” 来链接到 表单中的指定ID
- 运行页面
(4)初级表单验证
- 进行初级表单验证的原因
- 默认提示
– placeholder=“必须是url格式” 默认提示,告诉用户应该这么做
- 必填
–required必须要填写这个字段
- 正则表达式
- 运行页面
5. 案例练习
- 人人网的原注册页面
- 案例代码
- 测试结果
不足:
(1)生日只能一个个数字手动填写
(2)验证的图片不会添加