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

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

output:

action&placeholder

2、submit
讓我們來為你的form添加一個(gè)submit
(提交)按鈕，點(diǎn)擊這個(gè)按鈕，表單中的數(shù)據(jù)將會(huì)被發(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è)計(jì)表單時(shí)，你可以指定某些選項(xiàng)為必填項(xiàng)(required)，只有當(dāng)用戶填寫了該選項(xiàng)后，用戶才能夠提交表單。
例如，如果你想把一個(gè)文本輸入字段設(shè)置為必填項(xiàng)，在你的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>

如果不輸入文本會(huì)提示

required

4、單選radio
單選就是你只能在多個(gè)選項(xiàng)中選擇一個(gè)，就好比你有很多追求者，但卻只能選擇一個(gè)結(jié)婚。
多選一的場(chǎng)景就用radio button(單選按鈕)
單選按鈕只是input輸入框的一種類型。
每一個(gè)單選按鈕都應(yīng)該嵌套在它自己的label(標(biāo)簽)元素中。
注意：所有關(guān)聯(lián)的單選按鈕應(yīng)該使用相同的name屬性。
下面是一個(gè)單選按鈕的例子：
<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é)選課時(shí)，面對(duì)幾百門課程，而因?yàn)闀r(shí)間和精力，你只能從中選擇十幾門。
這樣的場(chǎng)景就用checkboxes（復(fù)選按鈕）。
復(fù)選按鈕是input的輸入框的另一種類型。
每一個(gè)復(fù)選按鈕都應(yīng)該嵌套進(jìn)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