HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通（视频教学版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

5.3 表单高级元素的使用

除了上述基本属性外，HTML5中还有一些高级属性，包括url、eamil、time、range、search等。对于部分高级属性，IE 11.0浏览器暂时还不支持，下面将用Opera 11.60浏览器查看效果。

5.3.1 url属性

url属性用于说明网站网址，显示为在一个文本框中输入URL地址，在提交表单时会自动验证url的值。代码格式如下：

<input type="url" name="userurl"/>

另外，用户可以使用普通属性设置url输入框，例如可以使用max属性设置其最大值、min属性设置其最小值、step属性设置合法的数字间隔、value属性规定其默认值。对于另外的高级属性中同样的设置不再重复讲述。


【例5.11】（实例文件：ch05\5.11.html）

<!DOCTYPE html>
<html>
<body>
<form>
<br/>
请输入网址：
<input type="url" name="userurl"/>
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-11所示，用户即可在文本框中输入相应的网址。如果输入的url格式不准确，按Enter键后就会弹出提示信息。

图5-11 url属性的效果

5.3.2 eamil属性

与url属性类似，email属性用于让浏览者输入E-mail地址，在提交表单时会自动验证email域的值。代码格式如下：

<input type="email" name="user_email"/>

【例5.12】（实例文件：ch05\5.12.html）

<!DOCTYPE html>
<html>
<body>
<form>
<br/>
请输入您的邮箱地址：
<input type="email" name="user_email"/>
<br />
<input type="submit" value="提交">
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-12所示，用户即可在文本框中输入相应的邮箱地址。如果用户输入的邮箱地址不合法，单击【提交】按钮后会弹出图中的提示信息。

图5-12 eamil属性的效果

5.3.3 date和Times

HTML5新增了一些日期和时间输入类型，其中包括date、datetime、datetime-local、month、week和time，它们的具体含义如表5-1所示。

表5-1 日期和时间输入类型

上述属性的代码格式类似，以date属性为例，代码格式如下：

<input type="date" name="user_date" />

【例5.13】（实例文件：ch05\5.13.html）

<!DOCTYPE html>
<html>
<body>
<form>
<br/>
请选择购买商品的日期：
<br />
<input type="date" name="user_date"/>
</form>
</body>
</html>

在Opera 11.60中浏览效果如图5-13所示，用户单击输入框中的下三角按钮，即可在弹出的窗口中选择需要的日期。

图5-13 date属性的效果

5.3.4 number属性

number属性提供了一个输入数字的输入类型，用户可以直接输入数字或通过单击微调框中的按钮选择数字。代码格式如下：

<input type="number" name="shuzi" />

【例5.14】（实例文件：ch05\5.14.html）

<!DOCTYPE html>
<html>
<body>
<form>
<br/>
此网站我曾经来
<input type="number" name="shuzi"/>次了哦！
</form>
</body>
</html>

在Opera 11.60中浏览效果如图5-14所示，用户可以直接输入数字，也可以单击微调按钮选择合适的数字。

图5-14 number属性的效果

技巧提示

强烈建议用户使用min和max属性规定输入的最小值和最大值。

5.3.5 range属性

range属性可以显示一个滚动的控件，用户可以使用max、min和step属性设置控件的范围。代码格式如下：

<input type="range" name="" min="" max="" />

其中min和max属性分别控制滚动控件的最小值和最大值。


【例5.15】（实例文件：ch05\5.15.html）

<!DOCTYPE html>
<html>
<body>
<form>
<br/>
英语成绩公布了！我的成绩名次为：
<input type="range" name="ran" min="1" max="10"/>
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-15所示，用户可以拖曳滑块选择合适的数字。

图5-15 range属性的效果

技巧提示

默认情况下，滑块位于滚珠的中间位置。如果用户指定的最大值小于最小值，则允许使用反向滚动轴，目前浏览器对这一属性还不能很好地支持。

5.3.6 required属性

required属性规定必须在提交之前填写输入域（不能为空）。required属性适用于以下类型的输入属性：text、search、url、email、password、date、pickers、number、checkbox、radio等。


【例5.16】（实例文件：ch05\5.16.html）

<!DOCTYPE html>
<html>
<body>
<form>
下面是输入用户登录信息
<br />
用户名称
<input type="text" name="user" required="required">
<br />
用户密码
<input type="password" name="password" required="required">
<br />
<input type="submit" value="登录">
</form>
</body>
</html>

在IE 11.0中浏览效果如图5-16所示，如果用户只输入密码就单击【登录】按钮，则会弹出图中的提示信息。

图5-16 required属性的效果

上一章目录下一章