创建输入控件
文章目录
第1关: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:定义日期时间选择域。
通关知识
1、在表单中插入单选按钮的HTML代码是(D)。
A、<input type="submit" >
B、< input type="button" >
C、< input type="reset" >
D、<input type=“radio”>
2、HTML代码<input type="text" name="foo" size="20">表示(B)。
A、创建一个单选框
B、创建一个单行文本输入区域
C、创建一个提交按纽
D、创建一个使用图象的提交按纽
3、对于标签<input type=*>,如果希望实现密码框效果,* 值是(C)。
A、hidden
B、text
C、password
D、submit
4、下列选项中,用于设置input控件在首次加载时为禁用的属性是(A)。
A、disabled
B、checked
C、required
D、autofocus
5、设置表单中密码框的最大长度为15正确的属性设置是(D)
A、size=15
B、max=15
C、maxsize=15
D、maxlength=15
第2关:创建文本框
相关知识
文本框的设置
在input标签中,将type属性设置为text,可显示单行文本框。使用name
属性来规定input
元素的名称,它可以对提交到服务器后的表单数据进行标识。使用size
属性可规定文本框的宽度,使用maxlength
属性可规定控件允许输入的最多字符数。
示例如下:
姓名:<input type="text" name="userName" size="20" maxlength="16"/>
效果如下:
编程要求
请在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 创建一个单行文本框
- 文本框的名称为“yourname"
- 文本框的宽度为15
- 文本框中最多输入字符数为5
通关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>设置单行文本框</title>
</head>
<body>
<form>
姓名:
<!-- ********* Begin ******* -->
<input type="text" name="yourname" size="15" maxlength="5" />
<!-- ********* End ********* -->
</form>
</body>
</html>
第3关:创建密码框
相关知识
密码框的设置
在input标签中,将type属性设置为password,可显示密码框。使用name
属性来规定input
元素的名称,它可以对提交到服务器后的表单数据进行标识。使用size
属性可规定密码框的宽度,使用value
属性可规定密码的初值。 示例如下: 密码:<input type="password" name="check" size="20" value="123"/>
效果如下: 密码:
编程要求
请在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 创建一个密码框
- 密码框的名称为“yourpassword"
- 文本框的宽度为15
- 密码初值为“12345”
通关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>设置密码框</title>
</head>
<body>
<form>
姓名:
<input type