1、action
使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。
action属性的值指定了表单提交到服务器的地址。
例如：

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

output:

action&placeholder

2、submit
让我们来为你的form添加一个submit
(提交)按钮，点击这个按钮，表单中的数据将会被发送到你通过action
属性指定的地址上。

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

action&submit

3、required
当你设计表单时，你可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。
例如，如果你想把一个文本输入字段设置为必填项，在你的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
单选就是你只能在多个选项中选择一个，就好比你有很多追求者，但却只能选择一个结婚。
多选一的场景就用radio button(单选按钮)
单选按钮只是input输入框的一种类型。
每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
注意：所有关联的单选按钮应该使用相同的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、复选checkbox
当你在大学选课时，面对几百门课程，而因为时间和精力，你只能从中选择十几门。
这样的场景就用checkboxes（复选按钮）。
复选按钮是input的输入框的另一种类型。
每一个复选按钮都应该嵌套进label元素中。
所有关联的复选按钮应该具有相同的name属性。
下面是复选按钮的例子：
<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属性，你可以设置复选按钮和单选按钮默认被选中。
为此，只需在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