1. form标签
A. 用form标签创建一个表单，表单中所有内容都要在form标签之间。
B. form标签常用属性有name、action、method、target和enctype
name：用于区分不同表单，同时也可以防止表单提交到后台后出现混乱。
action：用于定义表单提交的地址，也就是处理表单搜集到的数据送到哪里处理（没理解，有待后续深入研究）。
method：用于定义使用http的哪种方法提交表单数据，可取get（默认值）和post（没理解，有待后续深入研究）。
target：和标签a的target属性一样（没理解，有待后续深入研究）。
enctype：用于定义编码方式，一般采用默认，即不需要设置。
C. 表单对象就是放在form标签内的对象，
表单对象有三种：input、textarea、select和option。其中，select和option要配合使用，类似于ul和li。
对于需要和服务器交互的表单对象，一定要放在form标签内，否则也可以放在form标签外。
2. input标签
input标签是自闭合标签，属性值type不同会有不同的显示状态，type属性常用取值如下：
type="text"：单行文本框
type="password"：密码文本框
type="button"：普通按钮
type="reset"：重置按钮
type="submit"：提交按钮
type="image"：图像形式的提交按钮
type="radio"：单选按钮
type="checkbox"：复选按钮
type="hidden"：隐藏字段
type="file"：文件上传
2.1. 单行文本框，type="text"
A. type=”text“时，还有以下三个属性可以使用：
value：单行文本框的默认值
size：单行文本框的长度，以字符为单位
maxlength：单行文本框中最多可以输入的字符数
e.g. <form>
年龄：<input type="text" value="18" size="10" maxlength="3" />
</form>
2.2. 密码文本框，type="password"
A. 当input标签的type=”password“时，同样可以使用value、size和maxlength三个属性，具体含义值和type="text"的含义相同，只不过文本框中的字符不可见。
e.g. <form>
密码：<input type="password" value="password" size="7" maxlength="6" />
</form>
2.3. 单选按钮，type="radio"
A. 当input标签的type="radio"时，必须设置name属性和value属性。
name：用于区分不同radio选项的分组，同组（选项间互斥）内的选项name值必须相同，如果不同会出现可以同时选择多个的现象
value：用于定义选中该选项时对应的值，该值常用于向后台传输。
e.g.
<form>
性别:
<input type="radio" name="male" value="男"/>男
<input type="radio" name="male" value="女"/>女<br />
属于:
<input type="radio" name="range" value="00后"/>00后
<input type="radio" name="range" value="90后"/>90后
<input type="radio" name="range" value="其他"/>其他
</form>
2.4. 复选框，type="checkbox"
A. 和单选按钮radio不同，checkbox由于可以多选，所以不需要设置name属性
B. 复选框必须使用id属性，同时在标签label中指定对应的id
C. checked属性取值为”checked“时，默认选中该项
e.g. <form>
亲属:
<input type="checkbox" id="id1" value="v1" checked="checked"/><label for="id1">爸爸</label>
<input type="checkbox" id="id2" value="v2"/><label for="id2">妈妈</label>
</form>
2.5. 按钮
2.5.1. 普通按钮，type="button"
A. 普通按钮一般需要配合javascript基本实现表单，value属性值就是显示在按钮上的值。
2.5.2. 提交按钮type="submit"和重置按钮type="reset"
A. 分别用于提交和重置当前表单（form）的数据，value属性的含义和普通按钮含义一样。
e.g. <form>
姓名：<input type="text" size="20" maxlength="10" /><br />
年龄： <input type="text" size="5" maxlength="5" /><br />
<input type="reset" value="reset" /><br />
<input type="submit" value="submit" />
</form>
2.5.3. 图片按钮，type="img"
A. 需要设置src属性指定图片位置，其他和普通按钮一样
e.g. <input type="image" src="q.jpeg" οnclick="alert('click')" />
注：前端开发中如果能用css，则尽量用css，少用图片按钮，因为传输图片的数据量比较大。
2.6. 隐藏域，type="hidden"
A. 用于传送数据，但不想被用户看到的场景，value属性值就是待传输的数据。
e.g. <input type="hidden" value="10"/>
2.7. 文件域，type="file"，
A. 常用于上传文件，浏览器中会显示一个按钮和文字提示（是否选择了文件）
e.g. <input type="file" value="aa"/>
3. textarea标签
e.g. <form>
<textarea rows="3" cols="10">默认值</textarea>
</form>
4. 下拉列表，select和option配合使用
A. option标签中value属性值用于向后台返回选择该option对应的值。
e.g. <select>
<option value="golang">Golang</option>
<option value="C++">C++ </option>
<option value="python">Python</option>
</select>
B. select默认内只显示一个option值，可通过size属性更改
e.g. <select size="2">
<option>Golang</option>
<option>C++ </option>
<option>Python</option>
</select>
C. select默认只能选择一个option，可通过multiple属性更改为选多个，实际使用时按住ctrl键就可以多选。
e.g. <select multiple="multiple">
<option>Golang</option>
<option>C++ </option>
<option>Python</option>
</select>
来源：CSDN
作者：码农学院
链接：https://blog.csdn.net/weixin_40633131/article/details/104267677