web前端开发与应用——创建输入控件

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:定义日期时间选择域