表单标签(input控件，leabel,textarea,select,form)

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

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常需要一些说明性的文字 ,提示用户进行填写和操作。
表单域：相当于一个容器，容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的ur地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

(1)input控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    单行文本框:<input type="text" maxlength="6" value="用户名"/><br />
    密码输入框:<input type="password" ><br />
    单选按钮　:<input type="radio">　　　　
    性别:<input type="radio" name="sex" />女<input type="radio" name="sex" checked="checked"/>男<br />
    <!-- 单选框如果是一组,通过相同的name值来实现 -->
    复选框　　:<input type="checkbox">　　　　
    爱好:
    <input type="checkbox" name="hobby"> 唱
    <input type="checkbox" name="hobby"> 跳
    <input type="checkbox" name="hobby"> rap<br />
    普通按钮　:<input type="button" value="百度一下"><br />
    提交按钮　:<input type="submit"><br />
    重置按钮　:<input type="reset"><br />
    图像形式的提交按钮:<input type="image" src="#"><br />
    文件域　　:上传头像<input type="file"><br />
</body>
</html>

input控件效果展示：

(2)lable标签：

作用：用于绑定一个表单元素，当点击label标签时，被绑定的表单元素会获得输入焦点。
使用方法：

用label 直接进行包裹input。
如果label里有多个表单,想定位到某个,可以通过for id的格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h3>lable标签的使用</h3>
    <!-- 1.用label标签包裹input -->
    <label>输入账号:<input type="text" /></label> <br />
    <!-- 2.如果label里有多个表单,想定位到某个,可以通过for id的格式-->
    <label for="two">
        输入账号:<input type="text"> <br />
        输入密码:<input type="text" id="two" <br />
    </label>
</body>
</html>

leabel标签效果显示：

(3)textarea控件(文本域)

textarea标签语法：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <textarea name="" id="" cols="30" rows="10">
        请输入留言
    </textarea>
</body>
</html>

textarea效果显示：

(4)下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    籍贯
    <select name="" id="">
        <option >北京</option>
        <option selected="selected">上海</option>
        <option >成都</option>
        <option >东京</option>
    </select>
</body>
</html>

下拉菜单效果展示：

注意:

中至少应包含一对。
在option中定义selected="selected"时，当前项即为默认选中项。

(5)表单域(form)

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

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

action:在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的ur地址。
method：用于设置表单数据的提交方式，其取值为get或post。
name：用于指定表单的名称，以区分同一个页面中的多个表单。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form action="xxx.php" method="post" name="userMessage">
        单行文本框:<input type="text" maxlength="6" value="用户名"/><br />
        密码输入框:<input type="password" ><br />
        单选按钮　:<input type="radio">　　　　
        性别:<input type="radio" name="sex" />女<input type="radio" name="sex" checked="checked"/>男<br />
        <!-- 单选框如果是一组,通过相同的name值来实现 -->
        复选框　　:<input type="checkbox">　　　　
        爱好:
        <input type="checkbox" name="hobby"> 唱
        <input type="checkbox" name="hobby"> 跳
        <input type="checkbox" name="hobby"> rap<br />
        普通按钮　:<input type="button" value="百度一下"><br />
        提交按钮　:<input type="submit"><br />
        重置按钮　:<input type="reset"><br />
        图像形式的提交按钮:<input type="image" src="#"><br />
        文件域　　:上传头像<input type="file"><br />        
    </form>
</body>
</html>

表单域效果展示：