form表單標簽(非常重要，必須掌握)

表單標簽：form(非常重要，必須掌握)

form標簽用於獲取用戶跟瀏覽器交互(包含輸入，選擇，上傳文件等操作)的數據，並將數據打包發給服務端

屬性

• action：控制數據的提交路徑

action=""：默認向當前頁面所在的地址提交數據
action="全路徑"：向當前的絕對路徑的地址提交數據
action="/index/"：后綴文件，將該后綴跟當前頁面的地址進行拼接，並將數據提交到這個頁面中

• method：控制數據的提交方式(也就是請求首行中的請求方式)，默認get

method="get"：提交方式為get方式
method="post"：提交方式為post方式

• enctype：控制數據提交的編碼格式，默認為application/x-www-form-urlencoded

enctype="application/x-www-form-urlencoded"：只能提交數據
enctype="multipart/form-data"：可發送提交文件請求

form中的標簽

input：文本框(百變金剛)，可通過type屬性設置成不同類型的文本框

• type="text" 普通文本框

<p>
    <!--
        labal標簽，通過for="input標簽的id值"
        讓用戶在點擊文本時，直接聚焦到對應的input標簽中
    -->
    <label for="name">用戶名：
        <!--input標簽 type="text"：普通文本框
            value="username"：文本框內默認值是username
            placeholder="用戶名文本框"：沒有填寫內容時，文本框的作用的提示信息
        -->
        <input type="text" id="name" value="username" placeholder="用戶名文本框">
    </label>
</p>

• type="password" 密文文本框 在該文本框輸入任何文本，都會用密文的形式顯示

<p>
    <label for="pwd">密碼：
        <!--input標簽 type="password"：密文文本框，即輸入的內容使用密碼的形式顯示-->
        <input type="password" id="pwd" placeholder="密碼文本框">
    </label>
</p>

• type="date" 日歷文本框

<p>
    <label for="birth">生日：
        <!--input標簽 type="date"：日歷文本框-->
        <input type="date" id="birth">
    </label>
</p>

• type="radio" 單選按鈕

<p>
    <label>性別：
        <!--input標簽 type="radio"：單選按鈕；
            name：屬性，表示標簽名稱，如果多個按鈕的是一組單選按鈕，那么它們的name屬性是一致的
            checked：屬性，表示當前按鈕被選中，這里是一個簡寫方式，正規寫法是checked="checked"
            ps：當屬性值和屬性名一致時，可以直接簡寫成屬性名
        -->
        <input type="radio" name="gender" checked>男
        <input type="radio" name="gender">女
    </label>
</p>

• type="checkbox" 復選按鈕

<p>
    <label>愛好：
        <!--input標簽 type="checkbox"：復選按鈕
            name：屬性，表示標簽名稱，如果多個按鈕的是一組復選按鈕，那么它們的name屬性是一致的
            checked：屬性，表示當前按鈕被選中
        -->
        <input type="checkbox" name="hobby">閱讀
        <input type="checkbox" name="hobby">K歌
        <input type="checkbox" name="hobby">跑步
        <input type="checkbox" name="hobby">畫畫
    </label>
</p>

• type="file" 上傳文件按鈕

<p>
    <label for="open">
        <!--input標簽 type="file"上傳文件按鈕，
            顯示的文本根據不同的瀏覽器顯示不同的結果可以跟系統交互，打開本地的文件
        -->
        <input type="file" id="open">
    </label>
</p>

• type="button" 普通按鈕，沒有任何功能，后期可自定義功能

<!--input標簽 type="button"：普通按鈕，沒有任何功能，后期可自定義功能-->
<label for="button">
    <input type="button" id="button" value="普通按鈕">
</label>

• type="submit" 提交按鈕，將當前按鈕所在form標簽中的數據提交到服務端，請求方式為POST

<!--input標簽 type="submit"：提交按鈕，將當前按鈕所在form標簽中的數據提交到服務端，請求方式為POST-->
<label for="submit">
    <input type="submit" id="submit" value="提交">
</label>

• type="reset"：重置按鈕，將將當前按鈕所在form標簽中的數據清空

<!--input標簽 type="reset"：重置按鈕，將將當前按鈕所在form標簽中的數據清空-->
<label for="reset">
    <input type="reset" id="reset" value="重置">
</label>

button：按鈕

<label for="cancel">
    <!--button標簽 普通按鈕
        跟input標簽type="button"功能類似
        區別：button會刷新頁面，input中的button按鈕不會
    -->
    <button id="cancel">取消</button>
</label>

select：下拉框，跟option搭配使用

<p>
    <label>省份：
        <!--select標簽：下拉框
            multiple：屬性，表示可以下拉框的選項允許多選
            下拉框中的選項通過option標簽表示
        -->
        <select id="provences" multiple>
            <!--option標簽：用來定義下拉列表中的可用選項-->
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">廣州</option>
            <option value="">深圳</option>
            <option value="">武漢</option>
            <option value="">西安</option>
        </select>
    </label>
</p>

textarea：多行文本框

<p>
    <label for="textarea">個人簡介：
        <!--textarea標簽：多行文本框，可以輸入多行記錄
            cols：文本內可顯示的文本寬度，不建議使用這種方式
            rows：文本內可顯示文本的行數，超出后，會出現滾動條
        -->
        <textarea name="" id="textarea" cols="60" rows="10">

        </textarea>
    </label>
</p>