form

• 如果form表單裡邊沒有提交按鈕，就無法提交這個form，除非使用JS

     <form action="users" method="POST">
           <input type="text" name="username">
           <input type="password" name="userpassword">
           <input type="submit" value="提交">
       </form>

複製程式碼

• form使用的是post請求
• form中的內容是form發起的post請求的第四部分（就是key）
• 第四部分使用utf-8編碼

form和a的區別

• form使用的是post請求
• a使用的是get請求
• get預設會把引數放在查詢引數裡邊
• post預設會把引數放在第四部分裡邊（form data）
• 可以通過給url直接加引數讓post也有查詢引數

       <form action="users?chaxuncanshu=555" method="POST"></form>
複製程式碼

• 不可能讓get請求有第四部分

form標籤和a標籤相同

同樣使用target的4屬性

<form action="users?chaxuncanshu=555" method="POST" target="_blank">

複製程式碼

input

提交按鈕的寫法

必須寫上name

<input type="text" name="username">
<input type="password" name="userpassword">
複製程式碼

必須寫上name否則提交伺服器的時候不會帶上值

type型別怎樣才是提交

           <input type="submit" value="提交">
複製程式碼

可以提交

           <input type="button" value="提交">
複製程式碼

不可以提交

label的for和input的ID是一對

 <input type="checkbox" id="xxx"><label for="xxx">愛我</label>

複製程式碼

此時點選愛我文字也可以勾選框

label包裹input

<label >愛我<input type="checkbox" ></label>
複製程式碼

<label>賬號<input type="text" name="username"></label>
複製程式碼

高階用法，可以省去for和ID

多選框

關鍵詞：checkbox name同一類

必須寫上name否則提交伺服器的時候不會帶上值

喜歡的水果<label>香蕉<input type="checkbox" name="fruit" value="banana"></label>
         <label>橘子<input type="checkbox" name="fruit" value="orange"></label>
複製程式碼

提交的時候這樣都可以提交上去

單選框

關鍵詞： type = radio，有同一個name

選擇一款手機購買
<label>xiaomi<input type="radio" name="only" value="xiaomi"></label>
<label>huawei<input type="radio" name="only" value="huawei"></label>
複製程式碼

下拉框

單選

<select name="group" id="">
    <option value="1">第一組</option>
    <option value="2" selected>第二組</option>
    <option value="3" disabled>第三組</option>
    <option value="4">第四組</option>
</select>
複製程式碼

屬性：多選

多選

<select name="group" id="" multiple>
複製程式碼

button

• if type=button，則為button按鈕無法提交
• 如果button沒寫type，則自動升級為submit可以提交

table

tips

0. 

2.

3.

4.

5.