HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
下面介绍表单常见元素的简单用法。

1.form元素

HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单，是表单的外壳

常用属性：

action:表单提交的地址
method:提交表单的方法，一般有get和post两种方式，

区别:

1.表象不同，get把提交的数据url可以看到，post看不到
2.原理不同，get 是拼接 url， post 是放入http 请求体中
3.提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
4.get提交的数据在浏览器历史记录中，安全性不好
5.场景不同，get 重在 "要", post 重在"给"

target:在何处打开action
enctype:

application/x-www-form-urlencoded：在发送前编码所有字符（默认）
text/plain：空格转换为"+"加号，但不对特殊字符编码
multipart/form-data：使用包含文件上传控件的表单时，必须使用该值

2.input元素

input 元素通过 type 属性来设置不同的input 类型。<input> 元素是最重要的表单元素。

2.1文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用户名">
</div>

效果：

placeholder的参数可以作为输入的提示（提示用户输入内容和格式），与value不同，placeholder并不是input中真的内容，在输入时placeholder会消失而不是代替。

2.2 密码域

<div class="password">
    <label for="password">密码</label>
    <input id="password" type="password" name="password" placeholder="请输入密码">
</div>

效果：

密码域的输入框会对输入信息做掩码处理。

2.3 复选框

<div class="hobby">
    <label for="hobby">爱好</label>
    <input type="checkbox" name="hobby" value="dota">dota
    <input type="checkbox" name="hobby" value="travel">旅游
    <input type="checkbox" name="hobby" value="pet">宠物
</div>

效果：

name 属性为相同的复选框元素会被分到同一个分组。复选框的 value 值是必须有的，否则后台接收到数据无法识别究竟勾选了什么值。可以对 input 标签增加 checked 属性实现预选。

2.4 单选按钮

<div class="sex">
    <label>性别</label>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女
</div>

效果：

单选按钮和复选框一样，通过相同的name 属性值来识别同一组按钮，value 属性是必需的。可以对 input 标签增加 checked 属性实现预选。value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释：value 属性无法与 <input type="file"> 一同使用。

2.5 下拉列表

<div class="section">
   <lable for="mycar">我的car：</lable>
            <select id="mycar" name="mycar">
                <option value="audi">奥迪</option>
                <option value="benz">奔驰</option>
                <option value="saab" selected>萨博</option>
            </select>
</div>

效果：

option 的 value 属性是必需的，可以对 option 设置 selected 属性实现预选择。

2.6 提交按钮

<input type="submit" value="提交">

效果：

2.8 重置按钮

<input type="reset" />

效果：

重置按钮会清空表单中填写的内容

2.9 打开文件

<div class="file">
      <input type="file" name="myfile" accept="image/png">
</div>

效果：

accept="image/png"，只接受png格式文件，可设置选择的文件格式

3.label 元素

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用户名">
</div>

label 元素为 input 元素定义标注，当鼠标选择该标签时，关联的元素控件会获得焦点，for 属性与关联元素的 id 属性要相同。

4. textarea 元素

<div class="textarea">
        <textarea name="article">
          ddd
        </textarea>
 </div>

效果：

展示输入框，可以拉选大小

HTML 表单的用法