Saber2pr's Blog

表单输入

基于 Web 的表单创建交互式控件,以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件,具体取决于设备和 user agent。

应用场景

按钮、复选框、颜色选择器、年月周日时间选择器、邮箱格式输入、文件上传、数字输入、密码输入、单选按钮、范围值滑动选择器、重置按钮、搜索框、提交按钮、

<input type="text" />

控件类型 type

  1. button:无缺省行为按钮。

  2. checkbox: 复选框。

必须使用 value 属性定义此控件被提交时的值。

使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态(大多数平台上,显示为一条穿过复选框的水平线)。

  1. color:HTML5 用于指定颜色的控件。

  2. date:HTML5 用于输入日期的控件(年,月,日,不包括时间)。

  3. datetime-local:HTML5 用于输入日期时间控件,不包含时区。

  4. email:HTML5 用于编辑 e-mail 的字段。

合适的时候可以使用 :valid 和 :invalid CSS 伪类。

  1. file:此控件可以让用户选择文件。

使用 accept 属性可以定义控件可以选择的文件类型。

  1. hidden:不显示在页面上的控件,但它的值会被提交到服务器。

  2. image:图片提交按钮。

必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。

还可以使用 height 和 width 属性以像素为单位定义图片的大小。

  1. month:HTML5 用于输入年月的控件,不带时区。

  2. number: HTML5 用于输入浮点数的控件。

  3. password:一个值被遮盖的单行文本字段。

使用 maxlength 指定可以输入的值的最大长度。

  1. radio:单选按钮。

必须使用 value 属性定义此控件被提交时的值。

使用 checked 必须指示控件是否缺省被选择。

在同一个”单选按钮组“中,所有单选按钮的 name 属性使用同一个值; 一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。

  1. range:HTML5 用于输入不精确值控件。

如果未指定相应的属性,控件使用如下缺省值: min:0 max:100 value:min + (max-min)/2,或当 max 小于 min 时使用 min step:1

  1. reset:用于将表单所内容设置为缺省值的按钮。

  2. search:HTML5 用于输入搜索字符串的单行文本字段。

换行会被从输入的值中自动移除。

  1. submit:用于提交表单的按钮。

  2. tel:HTML5 用于输入电话号码的控件;

换行会被自动从输入的值中移除 A,但不会执行其他语法。

可以使用属性,比如 pattern 和 maxlength 来约束控件输入的值。

恰当的时候,可以应用 :valid 和 :invalid CSS 伪类。

  1. text:单行字段;

换行会将自动从输入的值中移除。

  1. time:HTML5 用于输入不含时区的时间控件。

  2. url:HTML5 用于编辑 URL 的字段。

用户可以输入空白或无效的地址。换行会被自动从输入值中移队。

可以使用如:pattern 和 maxlength 样的属性来约束输入的值。

恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。

  1. week:HTML5 用于输入一个由星期-年组成的日期,日期不包括时。

常用属性

autocomplete: 自动填充

autofocus: 当表单被呈现在网页上时,焦点会自动落在此元素上

disabled: 禁用

list: 指向一个 id 为 list 属性值的 datalist 元素, 为这个 input 元素提供建议值

name

readonly: 不能被编辑

required: 只有当此 input 元素有值时,整个表单才能提交

tabindex: 一个数字,相当于序号,当用户按键盘 Tab 键时,焦点会按序号从小到大落在对映的元素上

当此值为-1 时,表示焦点永远不会通过 Tab 键落在此元素上

value: 当前的值

accept: MIME 类型