HTML 第三章 作业

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>

猜你喜欢

转载自blog.csdn.net/lyar1225/article/details/83344002