html表单

表单

一，表单的初步认识

说到表单,就不由自主地联想到了 web 开发的时候前端与服务器端的两种 HTTP 通讯方式。

• get
• post

它们的区别网上一搜一大堆，如：Get 和 Post 区别，这里就简单介绍一下了。get方式主要用于从服务端==查询和获取==资源，请求参数包含在 URL 中通过浏览器地址栏传输；post则多用于从客户端==提交==信息到服务器端，过程多用到表单 form。

form表单是 html 中非常重要的一组标签元素。透彻的理解它对于以后的开发工作非常重要！

• 表单分为表单元素与控件元素二部分
• 表单元素仅一个: <form>
• 表单控件元素,根据类型不同,有多个

二，表单的深入理解

• 前面提到在一组表单中，表单元素仅有一个<form>,其余的全部为其控件元素。
• 以下主要介绍表单元素与其一些控件元素的基本属性，以便于对其有个较为全面的认识与理解

1，表单元素<form>

1.1 常用属性

序号	属性	描述
1	action	表单提交的 URL 地址(处理表单请求的脚本)
2	method	表单提交类型:GET/POST
3	enctype	设置表单提交数据的编码方式
4	name	表单唯一名称,与 ID 同义
5	target	打开请求 URL 的方式,如果_blank

1.2 请求类型method

• web 请求方式有二种: 超链接与表单提交
• 超链接就是使用<a>标签发起请求,其实就是GET请求
• GET: 默认提交类型,表单数据以查询字符串形式附加到 URL 上
• POST: 请求内容在请求体中
• 请求类型属性action的取值

序号	允许值	描述
1	GET	默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
2	POST	表单数据放在请求体中发送,数据量更大也更安全

1.3 编码方式enctype

序号	允许值	适用场景	描述
1	application/x-www-form-urlencoded	key=value	默认值,使用 URL 编码,GET/POST 均适合
2	multipart/form-data	文件上传	采用二进制流处理,会把文件域中的内容封装到请求参数中,适合大文件
3	text/plain	电子邮件	如action="mailto:URL

1.4 表单名称name

序号	功能	描述
1	标识表单元素	与id一样,用来唯一标识该表单元素
2	绑定表单元素	用于表单控件元素的 form 属性,用来绑定所属表单
3	访问表单元素	快捷访问内部控件元素,如form.input.value

1.5 打开方式target

序号	允许值	描述
1	_self	默认值,当前窗口打开提交的 URL
2	_blank	新窗口打开提交的 URL
3	_parent	父窗口打开提交的 URL
4	_top	顶层窗口打开提交的 URL

2，控件元素

2.1 <input>

• 单行文本框（对应文本域）
• 单选按钮
• 复选框
• 提交按钮，普通按钮，重置按钮等

2.1.1 常用属性

序号	属性	描述
1	type	控件类型,如文本框, 复选框…
2	name	请求参数的名称,对应于脚本处理的变量名
3	value	请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4	form	控件所属表单
5	placeholder	仅限输入框text和password,输入框的提示信息
6	list	仅限输入框text和password,下拉框智能提示
7	autocomplate	仅限输入框text和password,自动完成(历史记录)
8	maxlength	仅限输入框text/password, 允许输入最大字符数量
9	checked	仅限单选框radio, 复选框checkbox(布尔属性)
10	readonly	元素只读,但通过 JavaScript 可修改(布尔属性)
11	disabled	元素禁用,(布尔属性)
12	autofocus	自动获取焦点,一个表单仅限一个控件
13	src	仅限图像域images, 图像 URL 地址
14	width	仅限图像域images, 图像宽度
15	height	仅限图像域images, 图像高度

2.1.2 type类型

• 常用类型

序号	类型	描述
1	<input type="text">	单行文本框 (默认值)
2	<input type="password">	密码输入框
3	<input type="radio">	单选框
4	<input type="checkbox">	复选框
5	<input type="image">	图像域/提交表单
6	<input type="file">	文件上传域
7	<input type="hidden">	隐藏域(仅以服务端可见)

• html5 新增类型

序号	类型	描述
1	<input type="email">	电子邮件
2	<input type="data">	日期
2	<input type="data">	日期
4	<input type="datetime-local">	本地日期时间
5	<input type="tel">	电话号码
6	<input type="url">	URL 地址
7	<input type="number">	数值
8	<input type="range">	范围拖动条
9	<input type="search">	搜索框/移动
10	<input type="color">	拾色器

2.1.3 常用事件属性

序号	事件属性	描述
1	onfocus	获取焦点时触发
2	onblur	失去焦点时触发
3	onchange	失去焦点,且值发生变化时触发
4	oninput	值发生变化(不等失去焦点)时触发
5	onkeydown	按下键盘时触发
6	onkeyup	抬起键盘时触发
7	onclick	鼠标单击时触发
8	onselect	选择内容文本时触发

2.2 下拉列表<select> 、<option>

下拉列表与叫下拉框, 可以理解为单选按钮与复选框的二合一。与<input> 不同的是所要向服务端提交的‘名-值’对在两个标签元素中（select>name，option>value），而 input 的名和值是同”一个标签元素”的不同属性

2.2.1 常用属性

• select 常用属性

序号	属性	描述
1	name	请求参数的名称,对应于脚本处理的变量名
2	size	初始下拉选项的个数
3	multiple	全部展开下拉选项

• option 常用属性

序号	属性	描述
1	value	定义送往服务器的选项值
2	selected	设置选项的初始选中状态

2.3 文本域<textarea>

• 在 html 中，<textarea>标签是用来定义一个多行的文本输入控件，在文本输入域中可以输入任意长度的文本。文本默认字体是等宽字体（Courier），可以通过 css 来改变
• 在实际应用中，一般会通过 cols 属性和 rows 属性来设置 textarea 控件的尺寸大小（使用 css 的 height 和 width 属性来设置更佳）

2.3.1 常用属性

序号	属性	描述
1	cols	文本区域内可见的列数（值：number）
2	rows	文本区域内可见的行数（值：number）
3	name	文本区域的名称,对应于脚本处理的变量名
4	maxlength	文本区域允许的最大字符数（值：number）

2.4 按钮 <button>

• 提交按钮（默认值），用于向服务端提交数据
• 普通按钮，它的点击行为自定义,通常用来通过脚本来提交
• 重置按钮，重置按钮, 而将表单 控件的值还原到默认值,并非清空

2.4.1 常用属性

序号	属性	描述
1	type	按钮的类型 submit(提交按钮)，button（普通按钮）,reset（重置按钮）
2	formaction	将 form 中的action属性移动到 button 重新定义
3	formmethod	将 form 中的method属性移动到 button 重新定义

button 和 input 的比较，引用某位同学的博文：
表单中按钮控件元素实现有两个:input 和 Button，类型主要有普通按钮、提交按钮和重置按钮，Button 默认类型是提交按钮。
input 和 button 都可以实现按钮功能，type=submit 时都会被提交，type=”button” 是就是单纯的按钮，不会提交数据！只不过 button 是一个容器空间，可以容纳其他标签，input 则不可以。
可通过重置表单属性改变按钮的提交行为。如表单中实现 Get 的登录和 Post 的注册
控件元素的 form 可绑定指定 ID 的表单元素，当然 form 属性不仅 Button 和 input 有，其它大部分控件元素都有，使用前可查看文档。目前 MDN 中只介绍绑定一个表单 ID，而菜鸟教程和 W3School 介绍可以绑定多个，使用空格隔开，经测试无效。

三，演示

1，部分源码

<form
  action="regist.php"
  method="POST"
  class="register"
  enctype="application/x-www-form-urlencoded"
>
  <label for="username">用户:</label>
  <!--控件-->
  <!--用户名-->
  <input
    type="text"
    name="username"
    id="username"
    value=""
    placeholder="至少输入6位"
    autofocus
    required
  />
  <!--电话-->
  <label for="tel">电话:</label>
  <input
    type="tel"
    name="tel"
    id="tel"
    value=""
    placeholder="11位有效数字"
    required
  />
  <!--邮箱-->
  <label for="email">邮箱:</label>
  <input
    type="email"
    name="email"
    id="email"
    value=""
    placeholder="demo@mail.com"
    required
  />
  <!--密码-->
  <label for="email">密码:</label>
  <input
    type="password"
    name="password"
    id="password"
    value=""
    placeholder="8~16位有效数字，必须包含数字，字母和下划线"
    required
  />
  <!--单选按钮-->
  <label for="secret">性别:</label>
  <div>
    <input type="radio" name="sex" id="relady" value="relady" /><label
      for="relady"
      >男</label
    >
    <input type="radio" name="sex" id="lady" value="lady" /><label for="lady"
      >女</label
    >
    <input type="radio" name="sex" id="secret" value="secret" checked /><label
      for="secret"
      >保密</label
    >
  </div>
  <!--复选框-->
  <label for="#">爱好:</label>
  <div>
    <input type="checkbox" name="hobby[]" id="photo" value="photo" /><label
      for="photo"
      >摄影</label
    >
    <input
      type="checkbox"
      name="hobby[]"
      id="programme"
      value="programme"
    /><label for="programme">编程</label>
    <input
      type="checkbox"
      name="hobby[]"
      id="travel"
      value="travel"
      checked
    /><label for="travel">旅行</label>
  </div>
  <label for="user-pic">图片上传:</label>
  <div>
    <!-- 隐藏域name= MAX_FILE_SIZE属性可以限制上传文件的大小 -->
    <input type="hidden" name="MAX_FILE_SIZE" value="8000" />
    <!-- accept 属性可以选定上传文件的类型 -->
    <!-- type=file时 value属性不能赋值 -->
    <input
      type="file"
      name="user_pic"
      id="user-pic"
      value=""
      accept=".doc,.jpg,.png"
    />
    <div class="user-pic"></div>
  </div>
  <label for="">文件上传:</label>
  <div>
    <!-- 隐藏域name= MAX_FILE_SIZE属性可以限制上传文件的大小 -->
    <input type="hidden" name="MAX_FILE_SIZE" value="8000" />
    <!-- accept 属性可以选定上传文件的类型 -->
    <!-- type=file时 value属性不能赋值 -->
    <input type="file" name="user_resume" id="user-resume" />
    <div class="user-resume"></div>
  </div>
  <!--下拉列表-->
  <!-- option中label属性的优先级要大于标签内文本 -->
  <!-- multiple 和 size属性可以让表单拥有和复选框一样的功能 -->
  <label for="edu">学历:</label>
  <!-- <select name="edu" id="edu" multiple size="9"> -->
  <select name="edu" id="edu">
    <option value="1">小学</option>
    <option value="2">初中</option>
    <option value="3" selected>专科</option>
    <option value="4">本科</option>
    <option value="5">硕士</option>
    <!-- <option value="6" label="成人不再教育">成人再教育</option> -->
    <option value="6">成人再教育</option>
  </select>
  <!-- 文本域 -->
  <label for="">备注</label>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button>提交</button>
</form>

2，效果

四，总结

• 单选按钮要确保返回值唯一,所以 name 属性必须相同
• 复选框变量名通常使用数组的格式
• 表单以名值对的方式提交数据到服务器.通常名和值都是同”一个元素”的不同属性，但是 select 的变量名与值在二个元素中

• 上传文件时表单的 method属性 必须是 POST，enctype属性等于 multipart/form-data ，还有特别要注意，上传文件时不能给 value 属性赋值，在上传图片或简历之类的文件时需要预览的话要给一个占位符（一个 div，让其能够有地方显示）

• 表单的按钮可以用input标签或者button效果一样