HTML標籤之form,input,button,table

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.