1窑眯、action
使用HTML來構(gòu)建可以跟服務(wù)器交互的Web表單(form)，通過給你的form元素添加一個action屬性來達到此目的嗦随。
action屬性的值指定了表單提交到服務(wù)器的地址列荔。
例如：

<form action="/submit-cat-photo">
   <input type="text" placeholder="cat photo URL"> 
</form>

output:

action&placeholder

2、submit
讓我們來為你的form添加一個submit
(提交)按鈕枚尼，點擊這個按鈕贴浙，表單中的數(shù)據(jù)將會被發(fā)送到你通過action
屬性指定的地址上。

<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
  <button type="submit">submit</button>
</form>

action&submit

3署恍、required
當(dāng)你設(shè)計表單時崎溃，你可以指定某些選項為必填項(required)，只有當(dāng)用戶填寫了該選項后盯质，用戶才能夠提交表單袁串。
例如，如果你想把一個文本輸入字段設(shè)置為必填項呼巷，在你的input元素中加上required屬性就可以了囱修，你可以使用：
<input type="text" required>

<form action="/submit-cat-photo">
  <input type="text" required placeholder="cat photo URL">
  <button type="submit">Submit</button>
</form>

如果不輸入文本會提示

required

4、單選radio
單選就是你只能在多個選項中選擇一個王悍，就好比你有很多追求者破镰，但卻只能選擇一個結(jié)婚。
多選一的場景就用radio button(單選按鈕)
單選按鈕只是input輸入框的一種類型。
每一個單選按鈕都應(yīng)該嵌套在它自己的label(標(biāo)簽)元素中鲜漩。
注意：所有關(guān)聯(lián)的單選按鈕應(yīng)該使用相同的name屬性源譬。
下面是一個單選按鈕的例子：
<label><input type="radio" name="indoor-outdoor"> Indoor</label>

<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
  <br>
  <label><input type="radio" name="indoor-outdoor">indoor</label>
  <label><input type="radio" name="indoor-outdoor">outdoor</label>
</form>

output:

Paste_Image.png

5、復(fù)選checkbox
當(dāng)你在大學(xué)選課時孕似，面對幾百門課程踩娘，而因為時間和精力，你只能從中選擇十幾門喉祭。
這樣的場景就用checkboxes（復(fù)選按鈕）养渴。
復(fù)選按鈕是input的輸入框的另一種類型。
每一個復(fù)選按鈕都應(yīng)該嵌套進label元素中臂拓。
所有關(guān)聯(lián)的復(fù)選按鈕應(yīng)該具有相同的name屬性厚脉。
下面是復(fù)選按鈕的例子：
<label><input type="checkbox" name="personality"> Loving</label>

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <br>
  <label>
    <input type="checkbox" name="personality">good
  </label>
  <label>
    <input type="checkbox" name="personality">nice
  </label>
  <label>
    <input type="checkbox" name="personality">wonderful
  </label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

output:

checkbox

6习寸、checked
使用checked屬性胶惰，你可以設(shè)置復(fù)選按鈕和單選按鈕默認(rèn)被選中。
為此霞溪，只需在input元素中添加屬性checked
<input type="radio" name="test-name" checked>

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

output:

checked