form 基礎

<form>
    <!--
文字框
注意：資料要提交到伺服器中，必須要為元素指定一個name屬性值
-->
    文字框 <input type="text" name="username">
    <br><br>
    <!-- 
密碼框
-->
    密碼框 <input type="password" name="password">
    <br><br>

    <!--
單選按鈕
- 像這種選擇框，必須要指定一個value屬性，value屬性最終會作為使用者的填寫的值傳遞給伺服器
- checked 可以將單選按鈕設定為預設選中
-->
    單選按鈕 <input type="radio" name="hello" value="a">
    <input type="radio" name="hello" value="b" checked>
    <br><br>

    <!-- 
多選框
-->
    多選框 <input type="checkbox" name="test" value="1">
    <input type="checkbox" name="test" value="2">
    <input type="checkbox" name="test" value="3" checked>

    <br><br>

    <!-- 下拉列表 -->
    <select name="haha">
        <option value="i">選項一</option>
        <option selected value="ii">選項二</option>
        <option value="iii">選項三</option>
    </select>

    <br><br>
    <!-- 
提交按鈕
-->
    <input type="submit" value="註冊">
</form>
 

input 常見 type

• text
• password
• radio
• checkbox
• botton
• subimit
• reset
• file
• search
• color
• range
• email
• tel
• number
• date
• time

常用屬性

• name
• value
• maxlength 最大長度
• minlength 最小長度
• placeholder 提示文字
• autocomplete="off" 關閉自動補全
• required 有此屬性為 必填
• readonly 將表單項設定為只讀，資料會提交
• disabled 將表單項設定為禁用，資料不會提交
• autofocus 設定表單項自動獲取焦點

自制 search