第十三章 定制input元素

553 阅读2分钟

input元素

HTML5中的input元素拥有很多种样式,该章节就是详细介绍input输入框的各种功能和属性。

type=text

input元素的type属性值为text时,可用的额外属性有

  • maxlengthsize--文本框的大小
  • valueplaceholder--初始占位符
  • list--下拉框显示
  • readonlydisabled--只读和禁用输入框
  • 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--只读和禁用输入框

readonlydisabled都是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

表示多选框。特有属性有checkedrequiredvalue

typy=radio

表示单选框,多个多选框必须使用同一个name。特有属性有checkedrequiredvalue

type=email、tel、url

代表输入框输入的内容分别为邮箱地址、电话号码、网址。特有属性有listmaxlengthpatternplaceholderreadonlyrequiredsizevalue

type=datetime、datetime-local、data、month、time、week

表示输入时间时期等。特有属性有listmaxminreadonlyrequiredstepvalue

type=color

表示获取输入的颜色。

type=search

表示搜索框,并没有什么作用。

type=hidden

隐藏输入框

type=image

显示一个表现为图片的确认按钮。

type=file

表示上传文件,特有属性有acceptrequired。使用此属性值时,父元素的表单编码类型必须为可传输文件的multipart/form-data