Cristiano前端学习之表单

一、学习路线

二、表单概述

• 1、Form表单是HTML的一个重要部分，负责采集和提交用户输入的信息
• 2、表单主要分为表单标签及表单控件两大类
• 3、表单控件又可细分为表单域和按钮两部分，常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等
• 4、在表单域录入数据后，可通过表单的特殊控件（如提交按钮等）将数据传递给服务器端，由服务器接收表单数据并进行处理

三、表单标签

• 表单标签是一个包含表单元素的区域
  • 可以包含一些表单控件
  • 可以包含其他的HTML标签

	基本语法：	<form action="处理数据程序的URL地址" method="get|post" name="表单名称" … > </form>

• 一个页面可以拥有一个或多个表单标签，标签之间相互独立，不能嵌套
• 用户向服务器发送数据时一次只能提交一个表单中的数据
• 如需同时提交多个表单，需使用JavaScript的异步交互方式来实现

• 3.1 action属性

  • action属性值是Web服务器上数据处理程序的URL地址，或者是Email地址。
    <form action="http://www.itshixun.com/web/login.jsp" ></form> <!--绝对URL-->
<form action="/web/login.jsp" ></form> <!--相对URL-->
<form action="mailto:[email protected]" ></form> <!--Email地址-->

• 3.2 method方法

  • method属性用于设置向服务器发送数据的方式，主要包括以下两种方式：get方式和post方式。
  • get方式：将数据作为URL的一部分发送给服务器。URL由地址部分和数据部分构成，两种之间用问号“？”隔开，数据以“名称=值”的方式成对出现，且数据与数据之间通过“&”符号进行分割 http://www.itshixun.com/web/login.jsp?userName=admin&userPwd=123456
  • post方式：将数据隐藏在HTTP的数据流中进行传输；请求数据不会出现在地址栏中，安全性比get方式要高，并且对数据长度没有限制。
    POST /web/login.jsp HTTP/1.1
Host: itshixun.com
userName=admin&userPwd=123456

• 3.3 id与name属性

  • id属性是表单在网页中的唯一标识
  • 在设计表单页面时，应为每个form表单提供一个合适的id，方便后期的CSS样式表及JavaScript脚本对其引用
  • name属性用来设置表单元素的名称，在页面中也应尽量保持唯一
  • 在早期版本中name属性使用较多，现在多用id属性替代

• 3.4 enctype属性

  • 在表单数据提交之前，需要通过enctype属性说明表单中数据的编码方式
  • 目前浏览器支持的编码方式有三种：application/x-www-form-urlencoded、multipart/form-data和text/plain方式
  • application/x-www-form-urlencoded是默认编码方式，大多数表单数据会采用此种编码方式。在发送数据到服务器之前，所有字符都会进行Unicode编码，并对某些字符进行特殊处理，例如：遇到空格时将被转换成加号（+），其他特殊字符将转换为对应的ASCII格式（即“%XX”格式，由一个百分号和两位代表ASCII码的十六进制数字构成）

• 3.5 target属性

  • target属性用于<a>标签时，用于指明被连接的内容将在哪个框架或浏览器中进行加载；
  • target属性用于<form>标签时，用户提交表单后将在哪个框架或浏览器中显示该表单的处理结果。
  • 在HTML 4.01中，不再推荐使用<form>表单的target属性；
  • 在XHTML 1.0 Strict DTD中，不支持该属性。
  • 在HTML 5中推荐使用formtarget属性来代替。

四、表单域

• 表单域多用于收集网站访问者的信息，一般位于<form></form>标签之间
• 表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素
• 除多行文本框和列表选择框外，大部分表单域使用<input>标签来创建
• input标签的通用属性：
  
• 4.1 单行文本框
  • 通常用来输入一些简单的内容。在HTML中，通过将<input>标签的type属性设为text方式来创建一个单行文本框。
  • <input type="text" name="…" size="…" maxlength="…" value="…" disabled="disabled" readonly="readonly"/>
  • 其中 disabled = "disabled"用于指明文本框的禁用状态，并呈灰色显示
  • readonly = "readonly"用于指定文本框的只读状态
    
• 4.2 密码框
  • 与文本框相似，但在框中输入内容时，显示的不是当前输入的内容而是掩码形式（星号“*”或其他符号）
  • <input type="password" name="…" size="…" maxlength="…" value="…" />
    
• 4.3 单选按钮
  • 单选按钮是指在一组数据中只能选择其中一个选项；在HTML中，通过将<input>标签的type属性设为radio方式来创建一个单选按钮选项
  • <input type="radio" name="…" value="…" checked="checked" />
    其中 ：
    • type="radio"用于指明表单域的类型是单选按钮
    • 具有相同name属性的单选按钮分为一组，一组只能选择一项
    • value属性用于指定该项的值，同一组内的值不应相同
    • checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式
      
• 4.4 复选框
  • 复选框是指在一组数据中允许用户选择一项或多项，各项之间并不互斥
  • 在HTML中，通过将<input>标签的type属性设为checkbox方式来创建一个复选框
  • <input type="checkbox" name="…" value="…" checked="checked"/>
    其中 ：
    • type="checkbox"用于指明表单域的类型是复选框
    • 具有相同name属性的复选框分为一组，组内允许多选
    • checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式
    • 当复选框没有value属性时，如果被选中value值为on，否则value值为off。
      
• 4.5 文件选择框
  • 用户通过表单上传文件时，需要使用文件选择框来选择上传文件；在HTML中，通过将<input>标签的type属性设为file方式来创建一个文件选择框
  • <input type="file" name="…" accept="…"/>
    其中 ：
    • type="file"用于指明表单域的类型是文件选择框
    • accept属性用于指定文件选择窗口的文件类型过滤；点击选择文件按钮时，会在弹出的文件选择窗口中，根据accept指定的类型对文件自动进行过滤
    • 图片的格式包括image/gif、image/jpeg、image/*等格式
      
• 4.6 隐藏域
  • 在网页之间传递数据时，有些数据不希望用户在页面中看到，可以通过隐藏域来实现；在HTML中，通过将标签的type属性设为hidden来创建一个隐藏域。
  • <input type="hidden" name="…" value="…" />
  • 注意：隐藏域的数据虽然不能在浏览器中直接显示，但是可以通过查看源码的方式找到；因此，不要使用隐藏域保存敏感的数据。隐藏数据也可以通过CSS中的display属性或visibility属性来实现。
    
• 4.7 多行文本框
  • 多行文本框是用来输入较长内容的文本输入控件；在HTML中，通过将<textarea>标签创建一个多行文本框，标签之间的内容会在页面加载时显示出来
  • <textarea name="…" rows="…" cols="…" wrap="…" > 文本内容 </textarea>
  • 其中： rows属性用于指定多行文本框的名称
  • cols属性用于指定多行文本框的
  • <textarea>标签的wrap属性用于指定多行文本框的换行方式
    
    
• 4.8 列表选择框
  • 列表选择框允许用户从列表中选择一项或多项。在HTML中，可以通过<select>和<option>标签来创建一个列表框。

			<select name="…" size="…" multiple="multiple">
		   		<option value="…" selected="selected">选项描述内容</option>
		   		 …
			</select>

其中 ：

• 列表选择框使用<select>标签进行定义，一个列表可以包含多个列表项<option>
• size属性用于指定列表选择框显示的行数
• multiple="multiple"属性用于指明当前列表框是否允许按住Ctrl键进行多选，默认只能选择一项
• <option>标签的value属性多用于发送给服务器的选项值
• <option>标签的selected="selected"用于设置当前选项默认被选中
• <option>和</option>标签之间的选项描述内容是显示的列表选择项
  
  
• 4.9 列表选择框
  • 在一个列表选择框中，可以将列表项分为多组，使描述更加清晰。
  • HTML中提供了<optgroup>标签，用于对列表项进行分组；
  • 该标签的label属性用于指定每个分组的名称，且分组名不能被选择；
  • disabled属性用于设置该分组是否被禁用。
    

五、按钮控件

• 表单的按钮有多种功能：可以用于提交表单，也可以用于清除或重置表单，甚至用于触发客户端脚本程序。
• 按钮分为提交按钮、重置按钮、图片按钮和普通按钮，可以通过<input>标签或<button>标签来创建按钮。
  <input type="submit|reset|button|image" name="…" src="…" value="…" />
  其中 ：
  • button表示创建一个普通按钮，当用户点击按钮时，可以触发JavaScript脚本的按钮
  • image表示创建一个图片按钮，点击时也可以提交表单
  • src属性是可选的，当type属性为image时，用来指定图片的URL地址
    
• 在HTML表单中，还可以使用标签创建一个按钮。
  <button type="submit|reset|button" value="…" name="…"> 正文内容 </button>
• button按钮与input按钮相比，提供了更强大的功能和更丰富的内容。<button>与</button>标签之间的内容都是按钮的内容，包含任何可接受的正文内容，例如文本、图片、视频等。

		 <form action="http://www.itshixun.com" method="post">
		    <button type="submit" value="提交内容">提交内容 </button>
		    <button type="reset" value="重置内容">重置内容 </button>
		    <button type="button" value="普通按钮"
		         onclick="alert('可以调用JavaScript脚本!')">普通按钮 </button>
		    <button type="submit" value="提交内容">
		           <img src="../images/submit.jpg" width="100"/>
		    </button> 
		  </form>

六、表单分组

• 常见的分组标签有<fieldset>和<legend>标签

		<form>
		   <fieldset>  /*<fieldset>标签可以看作表单的一个子容器，将所包含的内容以边框环绕方式显示*/
		     <legend>请选择个人爱好</legend>  /*<legend>标签则是为<fieldset>边框添加相关的标题*/
		     表单控件...  
		   </fieldset>
		   ...  
		</form>