表单的作用

收集用户提供的信息，提交给服务器

常见表单元素

<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 重在"给"侧重传送数据

---

版权声明：本文为博主原创文章，未经博主许可不得转载

原著是一个有趣的人,若有侵权,请通知删除