学习任务

      制作含有input标记的各种属性的网页

学习目标

      1.熟悉input标记type属性的各种常用类型

      2.熟悉input标记的placeholder属性

观看视频

1. Input标记的type属性

浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件，其基本语法格式如下：

<input type="控件类型"/>

（1）单行文本输入框<input type="text" />

单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。

（2）密码输入框<input type="password" />

密码输入框用来输入密码，其内容将以圆点的形式显示。

（3）单选按钮<input type="radio" />

单选按钮用于单项选择，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。

（4）复选框<input type="checkbox" />

复选框常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性，指定默认选中项。

（5）普通按钮<input type="button" />

普通按钮常常配合javaScript脚本语言使用，初学者了解即可。

（6）提交按钮<input type="submit" />

提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用value属性，改变提交按钮上的默认文本。

（7）重置按钮<input type="reset" />

当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用value属性，改变重置按钮上的默认文本。

（8）图像形式的提交按钮<input type="image" />

图像形式的提交按钮用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址。

（9）隐藏域<input type=" hidden" />

隐藏域对于用户是不可见的，通常用于后台的程序，初学者了解即可。

（10）文件域<input type="file" />

当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。

（11）email类型<input type="email" />

email类型的input元素是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。

（12）url类型<input type="url" />

url类型的input元素是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器；如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。

（13）tel类型<input type="tel" />

tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和pattern属性配合使用。

（14）search 类型<input type="search" />

search 类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，例如站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。

（15）color类型<input type="color" />

color类型用于提供设置颜色的文本框，实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击color类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。

（16）number类型<input type="number" />

number类型的input元素用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。

（17）range类型<input type="range" />

range类型的input元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。

（18）Date pickers类型<input type= date, month, week…" />

Date pickers类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期，具体如下表所示。

2. Input元素的其他属性

（1）autofocus属性

在HTML5中，autofocus属性用于指定页面加载后是否自动获取焦点，将标记的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。

（2）form属性

       在HTML5之前，如果用户要提交一个表单，必须把相关的控件元素都放在表单内部，即<form>和</form>标签之间。在提交表单时，会将页面中不是表单子元素的控件直接忽略掉。使用form属性，控件可以在任意位置，只需为这个控件指定其form属性为该表单的id即可。

（3）list属性

通过datalist元素实现数据列表的下拉效果。而list属性用于指定输入框所绑定的datalist元素，其值是某个datalist元素的id。

（4）multiple属性

multiple属性指定输入框可以选择多个值，该属性适用于email和file类型的input元素。multiple属性用于email类型的input元素时，表示可以向文本框中输入多个E-mail地址，多个地址之间通过逗号隔开；multiple属性用于file类型的input元素时，表示可以选择多个文件。

（5）min、max和step属性

HTML5中的min、max和step属性用于为包含数字或日期的input输入类型规定限值，也就是给这些类型的输入框加一个数值的约束，适用于date、pickers、number和range标签。具体属性说明如下：

（6）pattern属性

pattern属性用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配。pattern属性适用于的类型是：text、search、url、tel、email和password的<input/>标记。

常用的正则表达式下载

身份证号的正则表达式

（7）placeholder属性

placeholder属性用于为input类型的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。在输入框为空时显式出现，而当输入框获得焦点时则会消失。

（8）required属性

HTML5中的输入类型，不会自动判断用户是否在输入框中输入了内容，如果开发者要求输入框中的内容是必须填写的，那么需要为input元素指定required属性。required属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。