# HTML 表單 input ###### tags: `HTML` ### 表單基本語法 ```htmlmixed= <form action="表單資料處理目的地" method="傳送方式"> ``` :::info method的值有 GET 與 POST 兩種 * GET 較快，但資料會顯示在網址列，適合搜尋使用 * POST 較安全，適合個資或內容較多的資料 ::: * 輸入欄位 &lt;input&gt; ```htmlmixed= <input type="輸入欄位類型" name="欄位名稱" value="按鈕名稱文字"> ``` ![](https://i.imgur.com/ktuhjp0.png) |typr|| |---|---| |button |定義可點擊按鈕（多數情況下，用於通過JavaScript 啟動腳本）。| |checkbox| 定義復選框。| |file |定義輸入字段和"瀏覽"按鈕，供文件上傳。| |hidden |定義隱藏的輸入字段。| |image |定義圖像形式的提交按鈕。| |password |定義密碼字段。該字段中的字符被掩碼。| |radio |定義單選按鈕。| |reset |定義重置按鈕。重置按鈕會清除表單中的所有數據。| |submit |定義提交按鈕。提交按鈕會把表單數據發送到服務器。| |text |定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為20 個字符。| --- ==練習:帳號密碼的登入欄位== ```htmlmixed= <body> <form action="login.php" method="POST"> <p>帳號：<input type="text" name="username"></p> <p>密碼：<input type="password" name="password"></p> <p><input type="submit" value="登入"><input type="reset" value="重置"></p> </form> </body> ``` ==練習:單選與多選框、預設選項== ```htmlmixed= <body> <form action="login.php" method="POST"> <p> 性別： <input type="radio" name="music" value="rock" checked>Rock <input type="radio" name="music" value="Pop">Pop <input type="radio" name="music" value="Jazz">Jazz </p> <p> 興趣： <input type="checkbox" name="sport" value="jog">慢跑 <input type="checkbox" name="sport" value="swin">游泳 <input type="checkbox" name="sport" value="balls">球類 <input type="checkbox" name="sport" value="other">其他 </p> </from> </body> ``` 顯示樣式: ![](https://i.imgur.com/hvlb9r3.png) --- ### 範圍點選 label * 若要使用&lt;label&gt; 標籤，&lt;input&gt; 輸入欄位就必須設定 id 欄位編號，因為&lt;label&gt; 標籤就是根據 id 屬性值來對應。 * 每個label對應一個input 格式如下: ```htmlmixed= <label for="欄位編號">顯示名稱</label> <input type=" " name=" " id="欄位標號"> ``` ==練習:使用&lt;label&gt;== ```htmlmixed= <form action="/action_page.php"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form> ``` :::success 精簡版寫法:只要用label包住頭尾就可以了 <li><label><input id="btnRemember" type="checkbox" checked="checked" tabindex="4" /><span class="note">記住帳號</span></label></li> ::: --- ### 表單下拉選項 select ==練習下拉選項:== ```htmlmixed= <body> <form> <p> 請選擇季節： <select name="season"> <option name="spring">春天</option> <option name="summer">夏天</option> <option name="autumn">秋天</option> <option name="winter">冬天</option> </select> </p> </from> </body> ``` 顯示樣式: ![](https://i.imgur.com/AT0FjqO.png) --- ### 多選 mulpitle ctrl+滑鼠左鍵多選 ==練習多選:== ```htmlmixed= <body> <form> 請選擇季節： <select name="season" size="4" multiple> <option name="spring">春天</option> <option name="summer">夏天</option> <option name="autumn">秋天</option> <option name="winter">冬天</option> </select> </form> </body> ``` 顯示樣式: ![](https://i.imgur.com/kZpoLEE.png) --- ### 文字區域 textarea ```htmlmixed= <body> <form> <textarea name="pop" id="pop" cols="33" rows="10"> 一個一個的試題　輕輕放在你的生命裏 遇到問題　 你是習慣平心靜氣　感恩珍惜　 還是習慣滿腹怒氣　埋天怨地 如果你對上天的一切安排　 人生的所有際遇　都心存感激滿懷謝意 相信你所面臨的壓力　 必將啟發你無窮的潛力 如果你對命運的一切佈局　 生活的所有點滴　都當作打擊滿懷敵意 就算你的腳本 是喜劇　 也可能演出令人遺憾嘆息的悲劇 好壞全都掌握在自己手裏　 除非你放棄　除非你不爭氣 一步一步會留下足跡　 一言一行會留下成績　 努力不懈會創造良機　 主敬存誠會創造奇蹟 </textarea> </from> </body> ``` 顯示樣式: ![](https://i.imgur.com/EZVvSiD.png) --- ### 表單群組元件：&lt;fieldset&gt;、&lt;legend&gt; 可以幫表單分區塊的標籤~ ==表單分區練習:== ```htmlmixed= <body> <form> <fieldset> <legend>登入資訊</legend> <p> <label for="username">帳號:</label> <input type="text" name="username" id="username"> </p> </fieldset> <fieldset> <legend>登入資訊</legend> <p> <label for="username">帳號:</label> <input type="text" name="username" id="username"> </p> </fieldset> </form> </body> ``` 顯示樣式: ![](https://i.imgur.com/nAuvrYP.png) --- ### HTML5新增格式 ![](https://i.imgur.com/YHKrX4P.png) ![](https://i.imgur.com/y8f7tq5.png) * maxlength * <input> 元素的 maxlength 屬性用來限制輸入欄位的可輸入字數(the number of characters) `<input type="text" maxlength="5">` * pattern 驗證格式 參考 1.第一個字必須為大小寫英文或數字 <input type="text" pattern="[a-zA-Z0-9]"> 2.前三個字必須為大小些英文或數字 <input type="text" pattern="[a-zA-Z0-9]{3}"> 3.全部都必須為大小寫英文或數字 <input type="text" pattern="[a-zA-Z0-9]*"> 4.驗證內容為電子郵件 <input type="text" name="email2" pattern="[a-z0-9._%+-]=@[a-z0-9.-]=\.[a-z]{2,4}$"> :::info HTML 正規表示法 可參考 https://bit.ly/2Rmtn1T ::: ==練習HTML5新增語法== ```htmlmixed= <body> <form action=""> <fieldset> <legend>基本資料</legend> <p>姓名:<input type="text" name="username" placeholder="請輸入姓名" required autofocus></p> <p>搜尋:<input type="search" name="search" placeholder="輸入關鍵字"></p> <p>信箱:<input type="email" name="email" placeholder="abc@mail.com"></p> <p>信箱2:<input type="text" name="email2" placeholder="abc@mail.com" pattern="[a-z0-9._%+-]=@[a-z0-9.-]=\.[a-z]{2,4}$"></p> <p>網址:<input type="url" name="url" placeholder="請輸入網址"></p> <p>電話:<input type="tel" name="tel" placeholder="連絡電話" autocomplete="off"></p> <p>數字:<input type="number" name="number" min="1" max="21" step="3"></p> <p>日期: <input type="date" name="date"></p> <p>時間: <input type="time" name="time"></p> <p>程度: <input type="range" name="range"></p> <p>顏色: <input type="color" name="color"></p> <!-- 傳送資料 --> <p><input type="submit" value="送出"> <input type="reset" value="重置"> </p> </fieldset> </form> </body> ```