表单的作用
收集用户提供的信息，提交给服务器
常见表单元素
<form> <input> <label> <button> <option> <select> <textarea> 等
构成一个表单的基本结构
<form action="">
<input type="text">
<input type="submit" value="">
</form>
<input>元素包含其他可用于创建表单元素，必须被<form></form>包裹,放置在<form></form>外的表单元素输入的信息是无法被收集，从而不能提交给服务器
通过一个例子来展示HTML表单，剖析表单元素常见属性及值的正确使用
查看代码
<form>元素
<form>：表示了文档中的一个区域，这个区域包含有交互控制元件(由其他表达元素构成 )，用来向web服务器提交信息。
常用属性：
action：当前数据提供给后端服务器的地址或是后端接口
method： post get
post：HTTP post方法；表单数据会包含在表单体内然后发送给服务器.
get：HTTP get方法；表单数据会附加在 action 属性的URI中，并以 '?'作为分隔符, 然后这样得到的 URI 再发送给服务器.
(get与post提交数据的区别请看文末,实际情况下都是设置post)
<input>元素
常用属性
input.type ：text password radio checkbox submit button
①. type="text" 输入单行字段
<label for="username">姓名 ：</label>
<input type="text" name="username" placeholder="请输入用户名">
②. type="password" 输入值被遮盖的单行文本字段,多用于密码
<label for="password" >密码 ：</label>
<input type="password" name="password">
③. type="radio" 单选按钮
同一组单选框按钮的name属性的值相同；且必须使用 value 属性定义此控件被提交时的值
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
④. type="checkbox" 复选框
同一组复选按钮的name属性的值可以相同也可以不相同；但是必须使用 value 属性定义此控件被提交时的值
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="journey">旅游
<input type="checkbox" name="hobby" value="sport">运动
⑤. type="submit" 提交表单的按钮
⑥. type="button" 按钮
type=submit 和<button>(button的类别type="button"也只是一个纯粹的按钮)可以提交数据，无论是<input>或是<button>其类型值为type=button不能提交数据(type=button只是提供一个纯粹的按钮)
⑦. type="hidden" 不会显示在页面上，但它的值会被提交到服务器(点击提交在Network可以看到数据type="hidden"所隐藏的数据)。
<input type="hidden" name="csrf" value="345623fdsd">
<!-- 点击提交在Network可以看到name："csrf" value："345623fdsd"-->
主要用途是:
- 暂存信息，为服务器提供使用表单存储状态信息的方法。
将在提交表单时使用相应属性定义的名称/值对传递回服务器
跟踪提交编辑表单时需要更新的数据库记录。 - 用于存储和提交安全秘钥对。提高网站的安全性，解决CSRF的一种现实方式
⑧. type="file"让用户选择文件上传。使用 accept 属性可以定义控件可以选择的文件类型。
( <input type="file" accept="image/jpeg">,会弹出一个文件选择窗口，accept的值指定文件的类型和格式，只有符合指定格式的文件才能选取。当然实际情况下不可能只指定一种格式的图片，多个格式可以使用逗号,连接accept="image/png, image/jpeg, image/gif, image/jpg"，或者使用accept="image/*"方法只要是图片类型的都符合要求，但是无疑会增加浏览器的负担，不推荐使用)
⑨.
type="reset"将表单的内容清除的按钮。<input type="reset" value="reset">重置
常用属性input.placeholder
提示用户输入框的应该输入的内容。
<input id="username" type="text" name="username" placeholder="请输入用户名">
常用属性input.disable
布尔属性表示此表单控件不可用，禁用的控件的值在提交表单时也不会被提交，被禁用。（type 属性为 hidden，此属性将被忽略）
(不需要给disabled设置值)
常用属性input.checked
type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态.
<input type="radio" name="sex" value="male" checked>
(不要给
checked赋值，赋值不会出错但是是画蛇添足，反而容易导致误解)
<label>元素为HTML表单的小部件提供标签
常用属性
for
标准写法：
<label for="password" >密码 ：</label>
<input id="password" type="password" name="password">
简写方式：
<label>姓名 ：
<input type="text" name="username" placeholder="请输入用户名">
</label>
可标记的 form相关元素的id，给<input>一个关联，for的属性值等于想关元素id的值，在这个实例当点击姓名和密码就可以进行用户名和密码的输入，不需要点击输入框
<option> <select>元素
<select> 元素是一种表单控件，可创建选项菜单，菜单内的选项为<option>
<select>常用属性
name：控件名称(不能省略)
<option>常用属性元素
常用属性
<option>如果是<select>的后代，则selected不需要跟任何值，该项就是默认选择选择的一项(默认选择的只能一项)
<option value="oppo" selected>oppo</option>
①value属性的内容，是实际提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。（不能省略这个属性）
②selected这个布尔属性表明，这个选项初始被选中(默认选中)
<button>元素
常用属性
type：submit name
submit: 此按钮将表单数据提交给服务器。<button>如果未指定属性，或者属性值为空或无效值，默认会升级为type="submit"。
name：button的名称，与表单数据一起提交。
reset：此按钮重置所有组件为初始值。
<textarea>元素 表示一个多行纯文本编辑控件
<textarea name="judgement" cols="6" rows="7"></textarea>
常用属性
name：元素的名称，必须填进去
cols：文本域的可视宽度，必须为正数
rows：元素的输入文本的行数（显示的高度）
注：表单元素有如有name属性的,不能省略。省略name属性
导致表单数据虽然提交，但是实际上很多数据并么有上传服务器，等于白写。
post和 get方式提交数据的区别
- 表象不同，
get把提交的数据url可以在地址栏，post不显示(在浏览器的Network会显示) - 原理不同，
get是把信息拼接组成新的URL各个变量之间通过&连接，添加到action所指向的URL后面。表单数据会附加在action属性的URI中，并以'?'作为分隔符，post是放入http请求体中 - 提交数据量不同，
get最多提交1k数据，如果拼接后的url信息特别长浏览器的限制,信息会被自动截断造成信息的不完整。post理论上无限制，受服务器限制 -
get提交的数据在浏览器历史记录中，安全性不好 - 场景不同，
get重在 "要"向后台要数据,post重在"给"侧重传送数据
版权声明：本文为博主原创文章，未经博主许可不得转载
