html5表单控件和表单域

一、表单控件

1.1 认识表单

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

提示信息：一个表单中通常包含一些说明性文字，提示用户进行填写和操作

表单域：相当于一个容器，用来容纳所有的表单空间和提示信息，可以通过它定义处理表单数据所有的程序的url地址，
以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传输到后台服务器

1.2 input控件

是一个单标签，type属性为其最基本的属性，其取值有很多种，用于指定不同的控件类型。除了type属性之外，标签还有其他很多种属性，常用的属性如下表所示：

属性	属性值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选框
type	checkbox	复选框
type	button	普通按钮
type	submit	提交按钮
type	reset	重置按钮
type	image	图片形式的提交按钮
type	file	文件域
name	用户自定义名字	控件的名称
value	用户自定义	input控件中默认的文本值
size	正整数	input控件在页面中显示的宽度
checked	checked	定义选择控件时默认选中的项
maxlength	正整数	控件允许输入的最多字符的个数

1.2.1 文本框与密码框

<p>用户名：<input type="text" > p>
<p>密  码：<input type="password" >p> 

1.2.2 单选框和复选框

<p>性  别：<input type="radio" name="sex" >女
          <input type="radio" name="sex"> 男
p>


<p>爱好：
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">足球
        <input type="checkbox" name="hobby">排球
p>

1.2.3 默认选中表单属性

checked="checked" 默认选中属性

<input type="radio" name="sex"  checked="checked">女

1.2.4 input按钮组

      	<input type="button" value="普通按钮"/> <br/>
      	<input type="submit" value="提交按钮"/> <br/>
      	<input type="reset" value="重置按钮"/> <br/>
      	 <br/>
上传头像：<input type="file"/> <br/>

1.2.5 最对字符数和文本值

<p>密码：<input type="password" maxlength="12">p> 
<input type="button" value="普通按钮"/>      

1.2.6 label标签

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

如何绑定元素：for属性规定label标签与那个表单元素绑定

1、 
 	<label >输入账号：<input type="text">label>
2、 
	 <label for="two">输入账号：<input type="text" id="one"> <input type="text" id="two">label>

1.2.7 textarea控件（文本域）

需要输入大量的信息，就需要使用到控件，通过该控件可以轻松的创建多行文本输入框，使用方式如下：

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

1.2.8 下拉菜单

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

     四川
     重庆
     贵州
     上海

注意事项:

1、标签至少包含一对

2、在option中定义 selected=“selected” 时，当前项即为默认选中项

二、表单域

作用：收集表单信息，并且提交给服务器；表单域是看不见的

<form action="www.baidu.com"  method="get" name="uid">
     <p>用户名：<input type="text">p>
     <p>密 码：<input type="password">p>
     <p><input type="submit" value="提交">p>
     <p><input type="reset" value="重置">p>
form>

常用属性：

1. action 在表单收集到信息后，需要将信息提交到服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址
2. method 用于设置表单提交数据的方式，取值为get或者是post。get提交会明文显示在地址栏，建议用post方式提交
3. name 用于指定表单的名称，以区分同一个页面的不同表单