1200字范文 > 创建输入控件(input控件文本框密码框单项选择多项选择重置与提交按钮的设置)

创建输入控件(input控件文本框密码框单项选择多项选择重置与提交按钮的设置)

时间：2018-11-12 06:36:24

创建输入控件

input控件的相关概念input控件的属性input控件的类型文本框的设置密码框的设置单项选择的设置多项选择的设置重置与提交按钮的设置综合运用相关概念选择题及参考答案选择题参考答案

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：控件内容为只读，取值为readonlydisabled：首次加载页面时禁用该控件（显示为灰色），取值为disabledchecked：定义选择控件默认值被选中，取值checkedmaxlength：控件允许输入的最多字符数，取值正整数min：控件允许输入的最少字符数，取值正整数

HTML5中新增的input属性还有：

placeholder：用户输入提示，取值由用户定义required：输入字段必须填写，取值为requiredautofocus：自动聚焦，取值为autofocuspattern：规定输入字段值的模式或格式，取值为正则表达式

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>

效果图：