一、表单


二,常用表单元素
1.文本框(text)
可用于输入用户名等用途。

2.密码框(password)
用于输入密码,输入的内容会变成小圆点。

3.单选按钮(radio)
性别选择等可以用到单选按钮。

4.复选框(checkbox)
用于多项选择。

5.下拉列表(select和option)


6.按钮(submit,reset,image)


7.邮箱(email)
会自动验证Email地址格式是否正确。

8.网址(url)
会自动验证Url地址格式是否正确。

9.数字(number)
min:最小数字。max:最大数字。step:数字间隔。

10.滑块(range)
min:滑动的最小数字。max:滑动的最大数字。step:一次能滑多少数字。

11.搜索框(search)
搜索功能的输入框。

三、表单的高级应用
1.表单的隐藏域(hidden)
定义:隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。
作用:当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

2.只读(readonly)和禁用(disabled)
只读:要求某些数据可见但不能进行修改。
禁用:当使用者满足某个条件后才能使用,如只有同意注册协议后用户才能点击注册按钮。

3.表单元素的标注(label)
label标签的for属性对应的id与表单元素id一致,而id属性是给label标签和表单元素进行关联使用的。

四、表单的初级验证
1.文本输入框内容提示(placeholder)
描述文本框引导用户该输入什么内容。

2.必填项(required)
规定文本框填写内容不能为空,否则不允许用户提交表单。

3.正则表达式(pattern)
用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单。

网友评论