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

本文主要是介绍前端开发_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>