初學HTML5表單制作——以電子產(chǎn)品調(diào)查表為例
-代碼實現(xiàn)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電子產(chǎn)品調(diào)查表</title>
</head>
<body>
<h2>American Metric 電子產(chǎn)品調(diào)查表</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位數(shù)字" pattern="1[358]\d[9]" maxlength="11" /><br/><br/>
您是否查看過我們的在線產(chǎn)品俊柔？
<input type="radio" value="yes" checked />是
<input type="radio" value="no" />否<br/><br/>
如果查看過，您對那些產(chǎn)品有興趣購買？（選擇提供的產(chǎn)品）<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運行結果：
電子產(chǎn)品調(diào)查表效果圖
