input元素
HTML5中的input元素拥有很多种样式,该章节就是详细介绍input输入框的各种功能和属性。
type=text
当input元素的type属性值为text时,可用的额外属性有
maxlength、size--文本框的大小value、placeholder--初始占位符list--下拉框显示readonly、disabled--只读和禁用输入框pattern--输入验证的正则表达式(下一章讲解)required--要求用户必须输入(下一章讲解)
maxlength、size--文本框的大小
maxlength表示文本框最多能输入多少个字符
size表示文本框最多能显示多少个字符
value、placeholder--初始占位符
value在输入框中设置一个默认值
placeholder设置一段提示文字
list--下拉框显示
list属性的值是一个datalist元素的id值。设置后,用户点击输入框时会显示出datalist中的数据供用户选择。
Fruit:<input list="fruitlist" id="fave" name="fave"/>
<datalist id="fruitlist">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</datalist>
readonly、disabled--只读和禁用输入框
readonly和disabled都是input的属性。前者在显示上没有区别,后者输入框会变灰。在传输表单时,disabled的输入框内的数据不会传输。
pattern--输入验证的正则表达式
required--要求用户必须输入
type=password
该格式用于输入密码,输入的数据会变成实心黑球。
type=submit、reset、button
以上三种格式都会将输入框变成一个button按钮。
submit用于将表单传输rest用于将输入框恢复成默认button用于自定义按钮
type=number
该输入框只能输入数字。还可以使用list设置下拉框选择;min属性设置最小值;max属性设置最大值;step设置上下调节的步长;value设置初始数字。
type=range
该输入框用于选取一定范围内的数字,滑动选取。属性与type=number一致。
type=checkbox
表示多选框。特有属性有checked、required、value。
typy=radio
表示单选框,多个多选框必须使用同一个name。特有属性有checked、required、value。
type=email、tel、url
代表输入框输入的内容分别为邮箱地址、电话号码、网址。特有属性有list、maxlength、pattern、placeholder、readonly、required、size、value。
type=datetime、datetime-local、data、month、time、week
表示输入时间时期等。特有属性有list、max、min、readonly、required、step、value。
type=color
表示获取输入的颜色。
type=search
表示搜索框,并没有什么作用。
type=hidden
隐藏输入框
type=image
显示一个表现为图片的确认按钮。
type=file
表示上传文件,特有属性有accept、required。使用此属性值时,父元素的表单编码类型必须为可传输文件的multipart/form-data