--- # System prepended metadata title: HTML 表單 input tags: [HTML] --- # HTML 表單 input ###### tags: `HTML` ### 表單基本語法 ```htmlmixed=
``` :::info method的值有 GET 與 POST 兩種 * GET 較快，但資料會顯示在網址列，適合搜尋使用 * POST 較安全，適合個資或內容較多的資料 ::: * 輸入欄位 <input> ```htmlmixed= ``` ![](https://i.imgur.com/ktuhjp0.png) |typr|| |---|---| |button |定義可點擊按鈕（多數情況下，用於通過JavaScript 啟動腳本）。| |checkbox| 定義復選框。| |file |定義輸入字段和"瀏覽"按鈕，供文件上傳。| |hidden |定義隱藏的輸入字段。| |image |定義圖像形式的提交按鈕。| |password |定義密碼字段。該字段中的字符被掩碼。| |radio |定義單選按鈕。| |reset |定義重置按鈕。重置按鈕會清除表單中的所有數據。| |submit |定義提交按鈕。提交按鈕會把表單數據發送到服務器。| |text |定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為20 個字符。| --- ==練習:帳號密碼的登入欄位== ```htmlmixed=

帳號：

密碼：

``` ==練習:單選與多選框、預設選項== ```htmlmixed=

性別： Rock Pop Jazz

興趣： 慢跑 游泳 球類 其他

``` 顯示樣式: ![](https://i.imgur.com/hvlb9r3.png) --- ### 範圍點選 label * 若要使用<label> 標籤，<input> 輸入欄位就必須設定 id 欄位編號，因為<label> 標籤就是根據 id 屬性值來對應。 * 每個label對應一個input 格式如下: ```htmlmixed= ``` ==練習:使用<label>== ```htmlmixed=



``` :::success 精簡版寫法:只要用label包住頭尾就可以了
    • ::: --- ### 表單下拉選項 select ==練習下拉選項:== ```htmlmixed=

    請選擇季節：

    ``` 顯示樣式: ![](https://i.imgur.com/AT0FjqO.png) --- ### 多選 mulpitle ctrl+滑鼠左鍵多選 ==練習多選:== ```htmlmixed= 請選擇季節：
    ``` 顯示樣式: ![](https://i.imgur.com/kZpoLEE.png) --- ### 文字區域 textarea ```htmlmixed=
    ``` 顯示樣式: ![](https://i.imgur.com/EZVvSiD.png) --- ### 表單群組元件：<fieldset>、<legend> 可以幫表單分區塊的標籤~ ==表單分區練習:== ```htmlmixed=
    登入資訊

    登入資訊

    ``` 顯示樣式: ![](https://i.imgur.com/nAuvrYP.png) --- ### HTML5新增格式 ![](https://i.imgur.com/YHKrX4P.png) ![](https://i.imgur.com/y8f7tq5.png) * maxlength * 元素的 maxlength 屬性用來限制輸入欄位的可輸入字數(the number of characters) `` * pattern 驗證格式 參考 1.第一個字必須為大小寫英文或數字 2.前三個字必須為大小些英文或數字 3.全部都必須為大小寫英文或數字 4.驗證內容為電子郵件 :::info HTML 正規表示法 可參考 https://bit.ly/2Rmtn1T ::: ==練習HTML5新增語法== ```htmlmixed=
    基本資料

    姓名:

    搜尋:

    信箱:

    信箱2:

    網址:

    電話:

    數字:

    日期:

    時間:

    程度:

    顏色:

    ```