input控件的相关概念
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个字符。
- password:定义密码框,密码域中的字符会被掩码(显示为星号或原点)。
- radio:定义单选按钮,单选按钮允许用户在一定数目的选择项中必须且仅能选取一个。
- checkbox:定义复选框,复选框允许用户在一定数目的选择项中不选、选取一个或多个。
- button:定义按钮,单击按钮时需自行定义行为。button常用于在用户单击按钮时启动JavaScript程序,响应用户。
- submit:定义提交按钮,提交按钮用于向服务器发送表单数据。数据会发送到表单action属性中指定的位置。
- reset:定义重置按钮,重置按钮会清除表单中的所有数据。
- 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:定义日期时间选择域。
文本框的设置
在input标签中,将type属性设置为text,可显示单行文本框。使用name属性来规定input元素的名称,它可以对提交到服务器后的表单数据进行标识。使用size属性可规定文本框的宽度,使用maxlength属性可规定控件允许输入的最多字符数。
示例如下:
姓名:<input type="text" name="userName" size="20" maxlength="16"/>
效果如下:
密码框的设置
在input标签中,将type属性设置为password,可显示密码框。使用name属性来规定input元素的名称,它可以对提交到服务器后的表单数据进行标识。使用size属性可规定密码框的宽度,使用value属性可规定密码的初值。
示例如下:
密码:<input type="password" name="check" size="20" value="123"/>
效果如下:
单项选择的设置
在input标签中,将type属性设置为radio,可设置单选框;使用name属性来规定input元素的名称,要求单项选择中的每个选项都具有相同的name;使用value属性可规定与输入相关联选项值。
示例如下:
性别:<input type="radio" name="sex" value="man"/>
男<input type="radio" name="sex" value="woman"/>
女
效果如下:
多项选择的设置
在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">其它
效果如下:
重置与提交按钮的设置
在input标签中,将type属性设置为reset,可添加重置按钮;将type属性设置为submit,可添加提交按钮;;使用value属性可定义按钮上显示的文本。
示例如下:
<input type="reset" value="重填"/>
<input type="submit" value="确定"/>
效果如下:
综合运用
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>综合运用</title>
</head>
<body>
<form method="post">
姓名:<input type="text" name="yourname" size="15" maxlength="5"/><br/>
密码:<input type="password" name="password" size="15" value="12345"/><br/>
国庆期间你最喜欢看的电影?<br/>
<input name="Film" type="radio" value="Film1"/>夺冠
<input name="Film" type="radio" value="Film2"/>我和我的祖国
<input name="Film" type="radio" value="Film3"/>姜子牙<br/>
你喜欢的运动是?<br/>
<input name="Sports" type="checkbox" value="sport1" checked="checked">打篮球
<input name="Sports" type="checkbox" value="sport2" >打排球
<input name="Sports" type="checkbox" value="sport3">踢足球
<input name="Sports" type="checkbox" value="sport4">其他<br/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
效果图:
相关概念选择题及参考答案
选择题
1、在表单中插入单选按钮的HTML代码是( )。
A、
B、
< input type=“button” >
C、
< input type=“reset” >
D、
2、HTML代码表示( )。
A、
创建一个单选框
B、
创建一个单行文本输入区域
C、
创建一个提交按纽
D、
创建一个使用图象的提交按纽
3、对于标签,如果希望实现密码框效果,* 值是( )。
A、
hidden
B、
text
C、
password
D、
submit
4、下列选项中,用于设置input控件在首次加载时为禁用的属性是( )。
A、
disabled
B、
checked
C、
required
D、
autofocus
5、设置表单中密码框的最大长度为15正确的属性设置是( )
A、
size=15
B、
max=15
C、
maxsize=15
D、
maxlength=15
参考答案
1、D
2、B
3、C
4、A
5、D