9、HTML表单

HTML表单

表单是html里面，前端和服务器进行交互的一种非常重要的方式，它是和服务器交互的一种机制。

什么是表单？

收集不同类型的用户输入，发送或者提交给服务器。

举个简单的例子：

你在马路上碰到一个大妈，大妈要你帮她做个问卷调查，你拿到问卷调查那一刻，就是你看到表单的那一刻；然后你拿起笔开始填这个问卷调查，就是你在做用户输入，输入这个表单；然后你填完了，你把这个问卷调查给了大妈，就相当于你把这个表单发送给了服务器；之后至于这个大妈拿你这个表单去干嘛了，比方说给你发垃圾短信，跟你就没什么太大关系了，就相当于说表单提交给了服务器之后，服务器还会再去做一系列的操作。这就是浏览器（或者说用户）和服务器进行交互的一种机制。

根据这个逻辑，表单就分为了两大部分：

输入：内容

文本（普通文本、密码）
单选框
多选框
下拉框

提交：提交按钮

提交就是把东西发送给服务器，这就涉及到发送的过程，发送的过程中浏览器要与服务器进行通讯，接下来就讲讲浏览器怎么样去和服务器进行做通讯。

首先我们来了解一下常用的协议：

http协议：超文本传输协议，它主要是保证客户机（浏览器）和服务器之间的通信。
- http协议的最基本模式：请求-应答模式
  
  过程：浏览器主动发起请求 —》服务器接受请求 —》服务器自身做处理 —》结果返回浏览器 —》浏览器根据结果展示内容
  
  （服务器开好了就一直在那里，你不去请求它，服务器是不会为你做什么事情的）
- 浏览器常用的请求方式：GET请求，POST请求（这两个请求的相关内容在后文会涉及到，这里先不展开说）

< form > 标签——表单根标签

上图就是表单的最基本结构，这就相当于，大妈找你填问卷调查的时候，问卷调查的那张纸。

< input > 标签及type属性

< input > 标签——用来声明允许用户输入数据的 input 控件，用于搜集用户信息，它规定了用户可以在其中输入数据的输入字段。

< input > 标签在 < form > 标签中使用。
type属性——规定< input > 标签中输入字段的形式。

根据不同的 type 属性值，输入字段拥有很多种形式。

属性值：text（文本），password（密码），radio（单选框），checkbook（复选框），submit（提交按钮），…

文本类型 < input > 标签 & 密码类型 < input > 标签

效果：

文本类型&密码类型 < input > 标签的name属性

name属性——规定 < input > 元素的名称，用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。

注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

效果：

提交前

提交后

可以看到提交的值

没有定义name属性，提交后

只能看到多了一个问号，并不能看到值

注意：输入密码时，虽然输入框中的字符以实心圆点的形式呈现，看似是保密的，但是实际上只是你从输入框中看不到具体字符，它在浏览器上依旧是明文，浏览器会以明文的形式提交。要保证浏览器传输给服务器的时候密码是密文，就涉及到加密，涉及到用JavaScript做一些更多的操作，这就等到学JavaScript的时候再详细讲解。

单选框类型 < input > 标签及单选框类型 < input > 标签的name属性

name属性——①规定 < input > 元素的名称，

②用于在 JavaScript 中引用元素，

③或者在表单提交后引用表单数据，

④在提交表单时传递它们的值。

⑤用于给单选框分组，同组内选项框互斥（即只能选择一个，一旦选中其中一个，其他几个自动变为未选中状态）

注：单选框（radio）必须成组（2个以上）使用才有意义，而“组”是通过name属性来建立的，凡是name相同的就是同组。同组的单选框，只有一个会处在选中状态，其他的会自动呈现为未选中状态。

name属性相同（即分组相同）