HTML表单的用法

一、HTML表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等，表单使用表单标签 <form> 来设置。

常见表单元素如下：

<form>
  input                      输入元素
  option                     下拉列表
  textarea                   文本域
  submit                     提交按钮
  button                     按钮  
   ..
其他非输入元素
   ..
</form>

二、HTML 表单 - input输入元素

多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

1. 文本域

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

            <form action="/abc" method="post">
                First name：<input type="text" name="firstname">
                Last  name：<input type="text" name="lastname">
            </form>

注意：表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

2. 密码字段

密码字段通过标签<input type="password"> 来定义。

            <form action="/abc" method="post">
                Password: <input type="password" name="pwd">
            </form>

注意：密码字段字符不会明文显示，而是以星号或圆点替代，视浏览器而定到底显示什么。

3. 单选按钮

<input type="radio"> 标签定义了表单单选框选项。

            <form action="/abc" method="post">
                <input type="radio" name="sex" value="male">Male
                <input type="radio" name="sex" value="female">Female
            </form>

4. 复选框

<input type="checkbox"> 定义了复选框。用户需要从若干给定的选择中选取一个或若干选项。

            <form action="/abc" method="post">
                <input type="checkbox" name="vehicle" value="Bike">I have a bike
                <input type="checkbox" name="vehicle" value="Car">I have a car 
            </form>

5. 提交按钮

<input type="submit"> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

            <form action="/abc" method="post">
                Username: <input type="text" name="user">
                <input type="submit" value="Submit">
            </form>

三、HTML 表单 - 非input输入元素

1. 多行文本

<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

            <form action="/abc" method="post">
                <textarea name="article">
                    此处是多行文本区...
                </textarea>
            </form>

2. 按钮

<button> 标签定义一个按钮。
在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

            <form action="/abc" method="post">
                用户名：<inputtype="text" name="Username">
                <button>提交</button>
            </form>


请始终为按钮规定 type 属性。
Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

不推荐在HTML表单里用<button>作为提交按钮。

3. 下拉菜单

用select和option共同组成下拉菜单。<select> 元素用来创建下拉列表，<select> 元素中的<option>标签定义了列表中的可用选项。

提示：

• <select> 元素是一种表单控件，可用于在表单中接受用户输入。
• <option> 标签可以在不带有任何属性的情况下使用，但是通常需要使用 value 属性，此属性会指示出被送往服务器的内容。
• 务必与 select 元素配合使用此标签，否则这个标签是没有意义的。

            <form action="/abc" method="post">
                <select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
            </form>