HTML表单

表单

一、表单的作用

1、使用表单的目的是为了收集用户信息。
2、在网页中，如果我们需要跟用户交互，收集用户资料，此时就需要表单。

二、表单元素书写方式

下面展示一些 内联代码片。

<input type="属性值" value="你好" />

1、input 输入的意思
2、<input / >标签为单标签
3、type属性设置不同的属性值用来指定不同的控件类型
4、除了type属性还有别的属性
`

三、表单的active属性和method属性是什么

1、收集的用户信息怎么传递给服务器？
答：通过form表单域
2、目的：
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

3、常用属性：
每个表单都应该有自己表单域。后面学 ajax 后台交互的时候，必须需要form表单域。

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

四、get和post请求的区别

1、GET在浏览器回退时是无害的，而POST会再次提交请求。
2、GET请求会被浏览器主动cache，而POST不会，除非手动设置。
3、GET请求只能进行url编码，而POST支持多种编码方式。
4、GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
5、GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
6、对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
7、GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

五、相关控件及type属性的属性值

属性值	名称	描述
radio	单选框	定义单选按钮
checkbox	复选框	定义复选框
text	文本框	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
password	密码框	定义密码字段，该字段中的字符被掩码
file	文件上传框	定义输入字段和浏览按钮供文件上传
submit	提交按钮	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	重置按钮	定义重置按钮，重置按钮会表单中所有数据
button	按钮	定义可点击按钮，（多数情况下，用于通过js启动脚本）
select	下拉选择框	定义下拉选择框
textarea控件	文件区域	通过textarea控件可以轻松地创建多行文本输入框.cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用

六、表单元素的name属性和value属性有什么作用

1、value属性

①value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
②Name和value是每个表单元素都有的属性值，主要给后台人员使用
③Name表单元素的名字，要求单选按钮和复选框都要有相同的name值。

用户名:<input type="text"  name="username" value="请输入用户名">

2、name属性

①name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
⑴name属性后面的值，是我们自己定义的。
⑵radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
⑶name属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。
②Name是表单元素名字，这里性别单选按钮必须有相同的名字，才可以实现多选一（radio、checkbox中定义相同的名字）单选按钮和多选按钮名字必须相同。

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

七、label标签如何使用

1、label 标签为 input 元素定义标注（标签）。
2、label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
3、作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

4、如何绑定元素呢

第一种用法就是用label标签直接包含input表单， 适合单个表单选择
第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。

  第一种
  <label> 用户名： 
    <input type="radio" name="usename" value="请输入用户名">   
  </label>
  
  第二种
  <label for="sex">男</label>
  <input type="radio" name="sex"  id="sex">

本文章来源于观看pink老师视频做的笔记，如侵权，请联系删除