form标签

form标签，即表单，发送get或post请求然后刷新页面。

<form action="/xxx" method="post"></form>

form的属性：

1. action：action指发送的方向。

2. autocomplete:自动给出建议。

示例：

  <form action="/xxx" method="post" autocomplete="on"></form>
  <input name="username">

3. method：控制用get还是post。

4. target：提交到指定页面，类似a标签的target。

事件

onsubmit

提示

1. 一般不监听input的click事件
2. form里面的input要有name
3. form的类型有post和get
4. form里要放一个type=submit才能触发submit事件

   <input type="submit">
   

5. 虽然input内是submit，但是系统会自动更改为提交，可以用values或button改变。
6. input和button的区别是inout内不能有更多标签，只能纯文本，但是button可以。
7. 不写type默认是submit，而且必须要有submit

input标签

input标签用于让用户输入。

input的属性

常见的type类型有：

1. text：文本，如果加入required则必须填写才能提交。
2. button：按钮
3. checkbox：多选

     <input name="check" type="checkbox">选项1
     <input name="check" type="checkbox">选项2
     <input name="check" type="checkbox">选项3
   

• 当你输入<input type="checkbox" checked>时，因为有checked所以会默认被勾选。

4. coloe：选颜色
5. password：密码
6. radio：通过取相同的name即可实现单选。

     <input name="gender" type="radio">男
     <input name="gender" type="radio">女
   

7. file：上传文件

• 加上multiple可以上传多个文件

    <input name="gender" type="file" mutiple>
  

8. hidden：隐藏，可以用于js给机器输入。
9. 其他。例如：email、number、search、tel、name、autofocus、checked、disabled、maxlength、pattern、value、placeholder、onchange（用户改变）、onfocus（用户聚焦）、onblur（用户失去聚焦）等等

textarea标签

textarea是用户输入时的区域，但是用户可以自由拖动，此时要加上style="resize:none"后用户就无法自由拖动输入区域。

select标签

select标签可以用于选择。

<select name="" id="">
  <option value="">请选择</option>
  <option value="1">11</option>
  <option value="2">22</option>
</select>

• 当用户单击该label时会聚焦到id为username的表元素

  <label for="username">cheer</label>
  <br>
  <input name="check" type="checkbox" id="username">cheer!!

单击cheer时会勾选cheer！！