HTML5 表单标签

现实中的表单，类似我们去银行办理信用卡填写的单子

目的是为了收集用户信息

在我们的网页中，我们需要跟用户进行交互 收集用户资料 此时也需要填写表单

在HTML中 一个完整的表单通常有表单控件(也称为表单元素) 、提示信息和表单域3个部分构成

表单控件: 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等

提示信息: 一个表单中通常还需要包含一些文字说明，提示用户进行填写

表单域: 相当于一个容器，用来容纳所有表单控件和提示信息,可以通过他定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法,如果不定义表单域,表单中的数据就无法传送到后台服务器

input控件（重点）

在上面的语法中, <input /> 标签为单标签，type 属性为其最基本的属性，其取值有多重，用于指定不同控件类型，除了 type 属性之外 <input /> 标签还可以定义很多其他属性 其常用属性如下图所示 :

注意 : 单选框 如果是一组 我们通过相同的 name 值 来实现 ：

性别: <input type="radio" name="sex"> 女 <input type="radio" name="sex" /> 男 <br />

注意 : 复选框 可以同时选择多个

爱好: <input type="checkbox" name="hobby" />篮球 <input type="checkbox" name="hobby" />足球

注意 : 默认选中项 只需要在属性中添加 checked=“checked” 默认选中性别女 代码如下 :

性别:<input type="radio" name="sex" checked="checked" /> 女

input 按钮组

搜索: <input type="button" value="搜索" />

最多字符数和文本值 maxlength = " 6 " 最多字符数为 6
value = “789” 在input框中的显示为789

示例

lable标签

label 标签为 input 元素定义标注 (标签)

作用: 用于绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获得输入焦点

那么 我们如何绑定元素呢?

for 属性规定 label 与哪个表单元素绑定

1. 用label直接进行包裹input标签
<label> 输入账号: <input type="text" /> </label>
2. 如果label里面有多个表单 想定位到某个地方 可以通过for id 的格式来进行
<label for="two"> 输入账号: <input type="text" /> <input type="text" id="two"/> </label>

textarea控件(文本域)

如果需要输入大量的信息, 就需要用到textarea标签，通过textarea控件可以轻松的创建多行文本输入框 其基本语法格式如下 :

<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>

下拉菜单

使用 select 控件定义下拉菜单的基本语法格式如下：

<select>
	<option> 选项1 </option>
	<option> 选项2 </option>
	<option> 选项3 </option>
	...
</select>

注意 :

1. <select></select>中至少应包含一对<option></option>
2. 在option中定义 selected="selected" 时, 当前项即为默认选中项

表单域

在 HTML 中 form标签被用于定义表单域，即创建一个表单。以实现用户信息的收集和传递 form 中的所有内容都会被提交给服务器，创建表单的基本语法格式如下 :

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

常用属性 :

1. Action

   在表单收集到信息后, 需要将信息传递给服务器进行处理 action 属性用于指定接收并处理表单数据的服务器程序的 url 地址

2. method

   用于设置表单数据的提交方式 其取值为 get 或 post

3. name

   用于指定表单的名称 以区分同一个页面中的多个表单

注意 : 每个表单都应该有自己的表单域