初学HTML5表单制作——以电子产品调查表为例
-代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子产品调查表</title>
</head>
<body>
<h2>American Metric 电子产品调查表</h2>
<form action="">
姓名：<input type="text" size="20" placeholder="输入必须是2-6位字符" maxlength="6" /><br/><br/>
购买日期：<input type="text"/>年
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>月
<select name="" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>日<br/><br/>
电子邮箱地址：<input type="url" size="30" placeholder="www.baidu.com" /><br/><br/>
手机号码：<input type="text" size="40" placeholder="输入必须是以13/15/18开头的11位数字" pattern="1[358]\d[9]" maxlength="11" /><br/><br/>
您是否查看过我们的在线产品？
<input type="radio" value="yes" checked />是
<input type="radio" value="no" />否<br/><br/>
如果查看过，您对那些产品有兴趣购买？（选择提供的产品）<br/>
<input type="checkbox" />大屏幕电视机
<input type="checkbox" />音频设备
<input type="checkbox" />视频设备
<input type="checkbox" />相机<br/><br/>
在填写订单之前，您还有什么问题、意见或建议？<br/>
<textarea name="" id="" cols="60" rows="5">您的输入：</textarea><br/><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
-WebStorm运行结果：
电子产品调查表效果图
网友评论