HTML 第三章 作業
阿新 • • 發佈：2018-12-19
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>