1.<label>
标签的for属性表示什么?
用该标号 表述 对应的 输入项 对象
2.哪些元素自身就有验证功能
email : 电子邮箱文本框,跟普通的没什么区别,当输入不是邮箱的时候,验证通不过。移动端的键盘会有变化
tel : 电话号码
url : 网页的URL
search : 搜索引擎。chrome下输入文字后,会多出一个关闭的X
range : 特定范围内的数值选择器,min、max、step( 步数 )
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月
3.请用HTML5实现申请表表单,要求教育程度,默认选中硕士
国籍,有美国,澳大利亚,日本,新加坡,默认选中澳大利亚
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>申请表</title>
</head>
<body>
<h1>申请表</h1>
<form action="" method="post">
姓名:<input type="text" name="name" id="name" size="30" />
<p>
教育程度:
<input type="checkbox" name="check" id="check" checked />硕士
<input type="checkbox" name="check" id="check" />博士
</p>
<p>
常用邮箱:
<input type="email" name="email" id="email" />
</p>
<p>
性別:
<input type="radio" name="gen" id="gen" value="男" checked/>男
<input type="radio" name="gen" id="gen" value="女" />女
</p>
<p>
年齡:<input type="text" name="text" id="text" />
</p>
<p>
月薪:
<input type="text" name="text" id="text" size="10" />
</p>
<p>
附注:
<textarea name="textarea" rows="5 " cols="30">请在这里键入附注</textarea>
</p>
<p>
国籍:
<select name="guoji">
<option value="">澳大利亚</option>
<option value="1">美国</option>
<option value="2">日本</option>
<option value="3">新加坡</option>
</select>
</p>
<input type="submit" name="tijiao" value="提交" />
<input type="reset" name="chongzhi" value="重置" />
</form>
</body>
</html>
4.请用HTML5实现电子产品调查表表单
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子产品调查问卷</title>
</head>
<body>
<h1>American Metric 电子产品调查表</h1>
<form action="#button" method="post">
姓名:<input type="text" name="text" id="text" placeholder="输入必须是2~6位字符" pattern="[_\w\u4E00-\u9FA5]{2,6}" required/>
<p>
购买日期:<input type="text" name="text" id="text" size="4" maxlength="4"> 年
<select name="select">
<option value="">[选择月份]</option>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>月
<select name="select">
<option value="">[选择日期]</option>
<option value="1">1号</option>
<option value="2">2号</option>
<option value="3">3号</option>
<option value="4">4号</option>
<option value="5">5号</option>
<option value="6">6号</option>
<option value="7">7号</option>
<option value="8">8号</option>
<option value="9">9号</option>
<option value="10">10号</option>
<option value="11">11号</option>
<option value="12">12号</option>
<option value="13">13号</option>
<option value="14">14号</option>
<option value="15">15号</option>
<option value="16">16号</option>
<option value="17">17号</option>
<option value="18">18号</option>
<option value="19">19号</option>
<option value="20">20号</option>
<option value="21">21号</option>
<option value="22">22号</option>
<option value="23">23号</option>
<option value="24">24号</option>
<option value="25">25号</option>
<option value="26">26号</option>
<option value="27">27号</option>
<option value="28">28号</option>
<option value="29">29号</option>
<option value="30">30号</option>
<option value="31">31号</option>
</select>
</p>
<p>
电子邮件:
<input type="email" name="email" id="email" placeholder="www.baidu.com" required />
</p>
<p>
手机号码:
<input type="text" name="text" id="text" placeholder="输入必须是以13/15/18开头的11位数字" pattern="1[358]\d{9}" required/>
</p>
<p>
您是否查看过我们的在线产品目录?
<input type="radio" name="radio" id="radio" checked/>是
<input type="radio" name="radio" id="radio" />否
</p>
如果查看过,您对哪些产品有兴趣购买?(选择提供的产品)
<p>
<input type="checkbox" name="checkbox" id="checkbox" />大屏幕电视机
<input type="checkbox" name="checkbox" id="checkbox" />音频设备
<input type="checkbox" name="checkbox" id="checkbox" />视频设备
<input type="checkbox" name="checkbox" id="checkbox" />相机
</p>
在填写订单之前,您还有什么问题、意见或建议?
<p>
<textarea name="text" rows="4" cols="38">您的输入:</textarea>
</p>
<input type="submit" value="提交"/>
<input type="reset" value="重置" disabled/>
<a href="javascript:window.close();"><input type="button" value="退出" /></a>
</form>
</body>
</html>