第三章学习

1、<label>标签的for属性表示什么?

表示:当鼠标单机标注文本时,焦点对应的表单元素。

2、那些元素自身就有验证功能?

Email、url、number.

3、请用HTM5实现申请表单。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>申请表</title>
	</head>
	<body>
		<p><h2>申请表</h2></p>
		<form action="#" method="post">
			<p>姓名:<input type="text" name="姓名" size="16" maxlength="16"/></p>
			<p>教育程度:<input type="checkbox" name="教育程度" value="硕士" checked/>硕士
			<input type="checkbox" name="教育程度" value="博士"/>博士</p>
			<p>常用邮箱:<input type="email" name="邮箱" size="16" maxlength="16"/></p>
			<p>性别:<input type="radio" name="性别" value="男"checked/>男
			<input type="radio" name="性别" value="女"/>女</p>
			<p>年龄:<input type="text" name="年龄" size="16" maxlength="16"/></p>
			<p>月薪:<input type="text" name="月薪" size="16" maxlength="16"/></p>
			<p>注释:<textarea name="注释" cols="30" rows="5"></textarea></p>
			<p>国际:<select name="国际">
				<option value="澳大利亚">澳大利亚</option>
				<option value="非洲">非洲</option>
				<option value="中国">中国</option>
			</select></p>
			<input type="submit" name="提交" value="提交"/>
			<input type="reset" name="重置" value="重置" />
		</form>
	</body>
</html>

在这里插入图片描述

4、请用HTM5实现电子产品调查表。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>电子产品调查表单</title>
	</head>
	<body>
		<h1>American Metric电子产品调查表</h1>
		<form action="#" method="post">
			<p><label for="xingming">姓名:</label>
				<input type="text" name="姓名" required pattern="[-\w\u4e00-\u9FA5]{2,6}" 
				placeholder="输入必须是2-6为字符" id="xingming"/></p>
				<p><label for="nian">购买日期:</label>
					<input type="text" name="购买日期年" id="nian" required size="4" maxlength="4" />年
				<select name="购买日期月">
					<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="日">
				<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><label for="youxiang">电子邮箱地址:</label>
					<input type="url" name="电子邮箱" placeholder="www.baidu.com" id="youxiang" required />
				</p>
				<p><label for="shoujihaomas">手机号码:</label>
					<input type="text" name="手机号码" id="shoujihaoma" required pattern="1[358]\d{9}" 
						placeholder="输入必须是以13/15/18开头的11位数字" size="40"/>
				</p>
				<p>你是否查看过我们的在线产品目录?
				<input type="radio" name="是否查看过" value="是" checked"/>是
				<input type="radio" name="是否查看过" value="否"/>否</p>
				<p>如果查看过,你对哪些产品有兴趣购买?(选择提供的产品)<br />
				<input type="checkbox" name="产品" value="大屏幕电视机" checked="checked"/>大屏幕电视机
				<input type="checkbox" name="产品" value="音频设备"/>音频设备
				<input type="checkbox" name="产品" value="视频设备"/>视频设备
				<input type="checkbox" name="产品" value="相机"/>相机
				</p>
				<p>在填写订单之前,您还有什么问题、意见或建议?<br />
				<textarea name="提议" cols="30" rows="5">您的输入:</textarea></p>
				<input type="submit" name="提交" value="提交"/>
				<input type="reset" name="重置" value="重置" disabled="disabled"/>
		</form>
	</body>
</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值