1.QQ注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QQ注册验证</title>
</head>
<body>
<img src="img/bg_chs.png" />
<h1>注册账号</h1>
<form method="post" action="">
<p>
昵称<input type="text"name="cc"max="10"min="4" pattern="[-\w\u4E00-\u9FA5]{4,10}"required/>长度为4~10个字符
</p>
<p>
密码<input type="password"name="aa"max="16"min="6" pattern="[\dA-Za-z]{6,16}" required/>长度为6~16个字符
</p>
<p>
确认密码<input type="password"name="aa"max="16"min="6" required/>长度为6~16个字符
</p>
<p>
手机号码<input type="number"name="bb"maxlength="11" pattern="1[3578]\d{9} " required/>以13|5|7|8开头
</p>
<p>
邮箱<input type="email"name="ee" required/>
</p>
<p>
年龄<input type="number"name="age"pattern="\d|[1-9]\d|1[0-2]\d"required />
</p>
<p>
<input type="image"src="img/btn.bmp" />
</p>
</form>
</body>
</html>
2.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子产品调查问卷</title>
</head>
<body>
<h1>American Metric 电子产品调查表</h1>
<form method="post"action="">
姓名:
<input type="text" name="usename" placeholder="输入必须是2~6为字符" max="6"min="2"required />
<p>
购买日期:
<input type="text"name="year"size="4"maxlength="4" required/>年
<select name="mon">
<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="day">
<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" placeholder="www.baidu.com" required/>
</p>
<p>
手机号码:
<input type="number"placeholder="输入必须是以13/15/18开头的11为数字"size="40" required/>
</p>
<p>
您是否查看过我们的在线产品目录?
<input type="radio"checked />是
<input type="radio" />否
</p>
<p>
如果查看过,您对哪些产品有兴趣购买?(请选择提供的商品)<br />
<input type="checkbox"name="shop" />大屏幕电视机
<input type="checkbox"name="shop" />音频设备
<input type="checkbox"name="shop" />视频设备
<input type="checkbox"name="shop" />相机
</p>
在填写订单之前,您还有什么问题、建议或意见?<br />
<p>
<textarea name="text"cols="40"rows="4"required>您的输入:</textarea>
</p>
<p>
<input type="submit"name="button"value="提交" />
<input type="reset"name="Reset"value="重置" disabled/>
</p>
</form>
</body>
</html>
`