input控件的属性
input标签是单标签,用于创建采集用户输入信息的表单控件。input控件常用的属性有type、name、value、size、readonly、disabled、checked、maxlength、min。
- type:控件类型,取值为text 、password、radio 、 checkbox 、 button、 submit、 reset、 file image、 hidden等
- name:控件名称,取值由用户定义
- value:控件中默认文本,取值由用户定义。对于不同的input控件类型,value的含义不同,例如button、reset和submit,value定义按钮上显示的文本;text、password和hidden,value定义域的初始值;checkbox、radio、image,value定义与输入相关联的值。
- size:控件在页面中显示宽度,取值正整数
- readonly:控件内容为只读,取值为readonly
- disabled:首次加载页面时禁用该控件(显示为灰色),取值为disabled
- checked:定义选择控件默认值被选中,取值checked
- maxlength:控件允许输入的最多字符数,取值正整数
- min:控件允许输入的最少字符数,取值正整数
HTML5中新增的input属性还有:
- placeholder:用户输入提示,取值由用户定义
- required:输入字段必须填写,取值为required
- autofocus:自动聚焦,取值为autofocus
- pattern:规定输入字段值的模式或格式,取值为正则表达式
input控件的类型
input控件通过type属性的取值设置不同类型,主要有:
- text:定义单行文本框,文本框的默认宽度是20个字符。
-
文本框的设置
在input标签中,将type属性设置为text,可显示单行文本框。使用
name
属性来规定input
元素的名称,它可以对提交到服务器后的表单数据进行标识。使用size
属性可规定文本框的宽度,使用maxlength
属性可规定控件允许输入的最多字符数。示例如下:
姓名:<input type="text" name="userName" size="20" maxlength="16"/>
- password:定义密码框,密码域中的字符会被掩码(显示为星号或原点)。
-
密码框的设置
在input标签中,将type属性设置为password,可显示密码框。使用
name
属性来规定input
元素的名称,它可以对提交到服务器后的表单数据进行标识。使用size
属性可规定密码框的宽度,使用value
属性可规定密码的初值。 -
示例如下:
-
密码:
-
<input type="password" name="check" size="20" value="123"/>
-
效果如下: 密码:
- radio:定义单选按钮,单选按钮允许用户在一定数目的选择项中必须且仅能选取一个。
-
单项选择的设置
在input标签中,将type属性设置为radio,可设置单选框;使用
name
属性来规定input
元素的名称,要求单项选择中的每个选项都具有相同的name;使用value
属性可规定与输入相关联选项值。 -
示例如下:
-
性别:
-
<input type="radio" name="sex" value="man"/>男
-
<input type="radio" name="sex" value="woman"/>女
-
效果如下: 性别:男 女
- checkbox:定义复选框,复选框允许用户在一定数目的选择项中不选、选取一个或多个。
- 在input标签中,将type属性设置为checkbox,可设置多选框;使用
name
属性来规定input
元素的 - 名称,要求多项选择中的每个选项都具有相同的name;使用
value
属性可规定与输入相关联选项值;添加checked属性可将选项设置为默认选项。 - 示例如下:
您喜欢的水果有哪些?<br/>
<input name="Fruit" type="checkbox" value="Fruit1" checked="checked">苹果
<input
name="Fruit" type="checkbox" value="Fruit2">桃子
<input name="Fruit"
type="checkbox" value="Fruit3">香蕉
<input name="Fruit" type="checkbox"
value="Fruit4">梨
<input name="Fruit" type="checkbox" value="Fruit4">其它
- 效果如下: 您喜欢的水果有哪些?
- 苹果 桃子 香蕉 梨 其它
- button:定义按钮,单击按钮时需自行定义行为。button常用于在用户单击按钮时启动JavaScript程序,响应用户。
- submit:定义提交按钮,提交按钮用于向服务器发送表单数据。数据会发送到表单action属性中指定的位置。
- reset:定义重置按钮,重置按钮会清除表单中的所有数据。
-
重置与提交按钮的设置
在input标签中,将type属性设置为reset,可添加重置按钮;将type属性设置为submit,可添加
-
提交按钮;;使用
value
属性可定义按钮上显示的文本。 -
示例如下:
-
<input type="reset"
value="重填"/>
-
<input type="submit" value="确定"/>
- file:定义文件域,包括输入字段和“浏览”按钮,供文件上传。
- image:定义图像形式的提交按钮,需配合src属性和alt属性使用。
- hidden:定义隐藏域,隐藏域对于用户是不可见的,隐藏域通常会存储一个默认值。
HTML5中新增的type取值:
- search:用于搜索域,如站点搜索或Google搜索。search显示为常规的文本框。
- email:定义包含e-mail地址的输入域,在提交表单时,会自动验证email域的值。
- url:定义包含URL地址的输入域,在提交表单时,会自动验证url域的值。
- tel:定义一个电话号码输入域,手机端输入信息时,会弹出拨号键盘。
- number:定义一个数字输入域,可以使用max和min属性规定输入数值的最大值和最小值,让输入的数据在合法值的范围内。也可以使用step属性规定数字的增减间隔。
- range:定义包含一定范围内数字值的输入域,range类型显示为滑动条,默认值范围是0~100。同时可以使用max、min和step属性。
- color:定义颜色选择域,输入时会打开调色板选取颜色。
- date:定义日期选择域,鼠标点击输入框,可以看到浏览器原生的日历框。
- month:定义月份选择域,效果类似date。
- week:定义周选择域,效果类似date。
- time:定义时间选择域。
- datetime-local:定义本地日期时间选择域。
- datetime:定义日期时间选择域