前端开发_HTML5_标签部分(六)

一、表单(form)

1.表单概述

   表单标签是和后台数据交互的一种重要的方式，在网页中使用表单的频率非常的高。一般表单标签中会包含多个控件便于用户在页面输入数据，然后通过指定的方式把数据提交给后台，实现前后台的数据交互。

2.表单标签 - form
  (1)、该标签的作用:该标签可以生成一个表单,定义一些表单的相关信息。

  (2)、标签语法

form标签的语法:

<form name="表单的名称" id="表单的id" action="表单数据提交的地址" method="get/post">
      表单的元素信息
</form>	

(3).form表单提交action属性的两种方式get/post

get方式提交的特点
   a:get提交数据的时候,表单数据会附加在url之后。
   b:get提交数据比post提交数据速度快
   c:get提交数据的时候提交的数据量有限制
   d:get是form数据提交的默认提交方式
		   
post方式提交的特点
   a:post提交数据的时候，表单数据和url是分开发送的。
   b:post提交数据的时候，没有提交数据量的上限
   c:post提交比get慢
   d:由于post没有显示表单的数据，所以post方式比get方式更加安全

(4)、form表单种的表单元素

         input标签是一个重要的标签，可以演化成多种不同功能的表单元素。通过type属性指定即可。

①、文本输入框(input/type=text)
      A:该标签的作用:提供给用户输入信息的单行文本域。
        
      B:输入框语法

<input name="输入框名称" type="text" value="输入框的值"/>

②、密码框(input/type=password)

      A:该标签的作用:提供给用户输入信息的密码文本域，在设置为密码的时候，输入的信息就会被加密，使用"."来代替输入的信息。
        
      B:标签语法

<input name="密码框名称" type="password" value="密码框的值"/>

③:文本域:textArea
      A:该标签的作用:提供给用户输入信息的多行文本域。可以输入多行文本信息。
       
      B:标签语法

  <textArea name="文本域名称" cols="列数" rows="行数">
        文本域内容
  </textArea>
      
   属性说明:
      通过cols指定列数，通过rows指定行数。

④:单选按钮(input/type=radio)
      A:该标签的作用:在页面产生单选按钮。
        
      B:标签语法

<input name="密码框名称" type="radio" value="密码框的值"/>
      
说明: 
   name:用于指定单选按钮的选择项目，如果是同一种类型中欧进行单选操作，这一个 时候就需要把所列举的单 
        选框的name属性设置为一致。
  value:单选按钮选择的值，这一个值是传递我们从页面获取到的数据值。
checked:设置是否选中属性

⑤:复选按钮(input/type=checkBox)
      A:该标签的作用:在页面上产生复选框,提供多个可选择项。
        
      B:标签语法

<input name="密码框名称" type="checkBox" value="密码框的值"/>
      
 说明: 
   checked:设置是否选中属性
      type:设置为复选框选项
      name:设置复选框按钮

⑥:按钮 (button)
      A:按钮一般情况分为三种:提交按钮、重置按钮和普通按钮
      B:实现按钮控件的语法:

<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="普通按钮" />
      
 说明:
 提交按钮:提交按钮type="submit",可以把数据提交到指定的url地址
 重置按钮:重置按钮type="reset"，可以把表单中输入的数据全部清空(除了默认设置)
 普通按钮:普通按钮type="button",没有特殊的功能，需要和javascript结合才会有效果。

二、表单的数据验证

1.概述:我们在使用页面实现前后端数据交互的时候，需要做数据校验，确保输入数据的正确性和有效性，这一个时候就需要使用表单的数据校验功能。主要分为非空校验和数据的合法性校验。

2.数据校验

(1)、非空验证 
       非空验证是指在表单进行数据提交之前，需要先判断一下输入的数据和是否为空，那么这一个时候就需要陷阱非空验证，非空验证使用:required="required"
       
 (2)、数据类型验证
       数据类型验证保证后台获取的数据是准确且有效的。常见的数据验证如下:
       type="number":确保输入的数据是数字类型。
       type="email" :确保输入的数据是email数据类型
       type="date"  :确保输入的数据是日期数据类型

三、实现表单数据提交的代码和效果

<form action="" method="post" >
	<p>用户名: <input type="text" id="uname" /></p>
	<p>密&nbsp;&nbsp;&nbsp;码: <input type="password" id="uname" /></p>
	<p>性&nbsp;&nbsp;&nbsp;别: 
	   男<input type="radio" name="sex" checked="checked"/>
	   女<input type="radio" name="sex" />
	</p>
	<p>爱&nbsp;&nbsp;&nbsp;好: 
	   学习<input type="checkbox" name="hobby"/>
	   读书<input type="checkbox" name="hobby"/>
	   赚钱<input type="checkbox" name="hobby"/>
	   跑步<input type="checkbox" name="hobby"/>
	</p>
	<p>个人简介:</p>
	   <textarea rows="10" cols="30">请输入个人简介...</textarea>
	<p>
	<input type="submit" id="" name="" />
	<input type="reset" value="重置" />
	</p>
</form>