HTML 表單 input

# HTML 表單 input ###### tags: `HTML` ### 表單基本語法 ```htmlmixed= <form action="表單資料處理目的地" method="傳送方式"> ``` :::info method的值有 GET 與 POST 兩種 * GET 較快，但資料會顯示在網址列，適合搜尋使用 * POST 較安全，適合個資或內容較多的資料 ::: * 輸入欄位 <input> ```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 * 若要使用<label> 標籤，<input> 輸入欄位就必須設定 id 欄位編號，因為<label> 標籤就是根據 id 屬性值來對應。 * 每個label對應一個input 格式如下: ```htmlmixed= <label for="欄位編號">顯示名稱</label> <input type=" " name=" " id="欄位標號"> ``` ==練習:使用<label>== ```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) --- ### 表單群組元件：<fieldset>、<legend> 可以幫表單分區塊的標籤~ ==表單分區練習:== ```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> ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.