0
给我们留言吧!
时间：2023-07-24 23:09:01 | 来源：网站运营
时间：2023-07-24 23:09:01 来源：网站运营
HTML5创建表单（下）：
在线咨询
text、password、radio、button、submit等。除了基本属性外，HTML5中还有一些高级属性，包括url、eamil、time、range、search等。对于这些高级属性的支持，不同的浏览器可能支持程度不一样，本文主要以Chrome查看效果。url属性url属性和前面介绍的一样，用于对网页网址的说明，显示为在文本框中输入url地址。主要是用于验证url的值，代码格式如下：1<input type = "url" name = "userurl1" />对于上述的url属性，用户还可以通过普通属性设置url输入框，例如可以使用max属性设置其最大值，min属性设置其最小值，step属性设置合法的数字间隔、利用value属性规定其默认值。这普通属性对于另外的高级属性中也适用，后面不再重复。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的高级使用</title> 6</head> 7<body> 8<form> 9请输入网址：<br>10<input type="url" name="userurl">11</form>12</body>13</html>email属性URL属性类似，email属性主要用于让浏览者输入E-mail地址。在提交表单时会自动验证E-mail的值，代码格式如下：1<input type = "email" name = "user_email" />看一个例子1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的高级使用</title> 6</head> 7<body> 8<form> 9邮箱：10<input type="email" name="user_email" />11<br/>12<input type="submit" value="submit">13</form>14</body>15</html>单击【submit】，如果邮箱不合法，则会出现如上提示。date和timesdate选取日、月、年month选取月、年week选取周、年time选取时间datetime选取时间、日、月、年datetime-local选取时间、日、月、年 （本地时间）date为例，代码格式如下：1<input type = "date" name = "user_date" />看一个例子1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的高级使用</title> 6</head> 7<body> 8<form> 9请输入日期：10<input type="date" name="user_date"><br/>11<br/>12<input type="submit" value="submit">13</form>14</body>15</html>number属性和range属性number属性提供了一个输入数字的输入类型。用户可以直接输入数字或者通过单击微调框中的按钮选择数字，代码格式如下：1<input type = "number" name = "number_1" />建议在用number属性时用max属性和min属性规定输入数字的最大值和最小值。range属性提供了一个可以滚动的控件，与number属性用法差不多。，代码格式如下：1<input type = "range" name = "range_1" min = " " max = " "/>看如下一个例子：1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的高级使用</title> 6</head> 7<body> 8<form> 9请输入次数：10<input type="number" name="shuzi"/>次<br/>11成绩排名：12<input type="range" name="ran" min="1" max="10"/>13<br/>14<input type="submit" value="submit">15</form>16</body>17</html>required属性required属性规定必须在提交之前填写输入域（也就是说不能空）。required属性几乎可以用于所有属性。例子在如下的综合示例给出。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>用户反馈页面</title> 6</head> 7<h1 align="center">用户反馈标单</h1> 8<form> 9<p>姓 名10 <input type="text" required></p>11 <p>性 别12 <input type="radio" name="sex" value="man">男13 <input type="radio" name="sex" value="woman">女</p>14 <p>年 龄15 <input type="text"></p>16 <p>联系电话17 <input type="text" required></p>18 <p>电子邮件19 <input type="email" name="user_eamil" required></p>20 <p>联系地址21 <input type="text" required></p>22 <p>请输入您对网站的建议<br>23 <textarea name="建议" cols="50" rows="5"></textarea></p>24 <input type="submit" name="submit" value="提交">25 <input type="reset" name="reset" value="重置">26</form>27<body>28</body>29</html>这效果可以说很丑陋，因为我们仅仅只使用了HTML5，也是可以原谅的。下此准备开始介绍CSS3，让它来帮助我们美化。关键词：创建
