5.3 表单高级元素的使用

除了上述基本属性外，HTML5中还有一些高级属性，包括url、email、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 email属性

与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 email属性的效果

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 55.2中的浏览效果如图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.0中的浏览效果如图5-14所示。用户可以直接输入数字，也可以单击微调按钮选择合适的数字。

图5-14 number属性的效果

技巧提示

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

5.3.5 range属性

range属性可以显示一个滚动的控件。和number属性一样，用户可以使用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）

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

图5-16 required属性的效果

本周热推：
Dreamweaver CS4网页制作入门、进阶与提高HTML网页设计案例指导Dreamweaver CS5+ASP动态网站设计实用手册网页设计实用教程Dreamweaver CS5网页制作
上一章目录下一章