HTML5和CSS3開發第三章課後作業
阿新 • • 發佈：2019-02-14
1，用HTML5實現申請表表單。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>申請表</title> </head> <body> <h2>申請表</h2> <form method="post" action="#"> <p> <label for="name">姓名：</label> <input type="text" id="name" name="names"> </p> <p> 教育程度： <input type="checkbox" name="jiaoyu" value="碩士" checked/>碩士 <input type="checkbox" name="jiaoyu" value="博士"/>博士 </p> <p> <label for="email">常用郵箱：</label> <input type="email" id="email" name="emails"/> </p> <p> 性別： <input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女 </p> <p> <label for="age">年齡：</label> <input type="number" id="age" name="ages"> </p> <p> <label for="monthMoney">月薪：</label> <input type="text" id="monthMoney" name="monthMoneys" size="12"> </p> <p> <label for="fuzhu">附註：</label> <textarea name="fuzhus" id="fuzhu" cols="25" rows="3" placeholder="請在這裡輸入附註"></textarea> </p> <p> 國籍 <select name="nationality"> <option value="澳大利亞" selected>澳大利亞</option> <option value="美國">美國</option> <option value="日本">日本</option> <option value="新加坡">新加坡</option> </select> </p> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </body> </html>
2，用HTML5實現電子產品調查表表單。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>電子產品調查問卷</title> </head> <body> <h2>American Metric 電子產品調查表</h2> <form action="#" method="post"> <P> <label for="name">姓名：</label> <input type="text" id="name" name="names" placeholder="輸入必須是2~6的字元" minlength="2" maxlength="6"> </P> <p> <label for="date">購買日期：</label> <input type="text" id="date" name="butdate" size="12">年 <select name="month"> <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="date"> <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 </select>日 </p> <p> <label for="email">電子郵箱地址：</label> <input type="email" id="email" name="emails" placeholder="www.baidu.com"> </p> <p> <label for="cardNumber">手機號碼：</label> <input type="text" id="cardNumber" name="cardNumbers" size="30" placeholder="輸入必須是以13/15/18開頭的11位數字"> </p> <p> 您是否檢視過我們的線上產品目錄? <input type="radio" name="show" value="是" checked>是 <input type="radio" name="show" value="否">否 </p> <p> 如果檢視過，您對哪些產品有興趣購買？（選擇提供的產品）<br/> <input type="checkbox" name="product" value="大螢幕電視機">大螢幕電視機 <input type="checkbox" name="product" value="音訊裝置">音訊裝置 <input type="checkbox" name="product" value="視訊裝置">視訊裝置 <input type="checkbox" name="product" value="相機">相機 </p> <p> 在填寫訂單之前，您還有什麼問題、意見或建議？<br/> <textarea name="opinion" cols="40" rows="3">您的輸入：</textarea> </p> <input type="submit" value="提交"> <input type="reset" value="重置" disabled> </form> </body> </html>