form表单的用法

form主要用于采集和提交用户输入的信息并向服务器传输数据。
例如一个简单的用户登录例子如下：

   <form action="/" method="post">
    <div>
        <label for="name">姓名：</label>
        <input type="text" id="name">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password">
    </div>
<input type="submit">
</form>

表单主要有控件和属性这两个要素组成。
表单的属性如下和用法如下：

属性|值|作用
-|-|
accept-charset|MIME_type|用于规定服务器可处理的表单数据字符集。
action|URL|用于规定当提交表单时向何处发送表单数据。
autocomplete|on/off|规定是否启用表单的自动完成功能。
enctype|1.application/x-www-form-urlencoded 2.multipart/form-data 3.text/plain|规定在发送表单数据之前如何对其进行编码。
method|get/post|规定用于发送 form-data 的 HTTP 方法。
name|form_name|规定表单的名称。
novalidate|novalidate|如果使用该属性，则提交表单时不进行验证。
target|_blank/_self/_parent/_top/framename|规定在何处打开 action URL。

表单要包含一些控件，用于收集用户输入的数据。
表单常用的控件和用法如下：
1.文本域text,用户可以在文本域写入文本。

<form>
   名：<input type="text" name="firstname">
   姓：<input type="text" name="lastname">
</form>

2.密码域password,用于创建HTML的密码域。

<form>
    用户：
    <input type="text" name="user">
    <br />
    密码：
    <input type="password" name="password">
</form>

3.复选框checkbox，用户可以选中或取消选取复选框,多选

<form>
    旅游：
   <input type="checkbox" name="lvyou">
   宠物：
   <input type="checkbox" name="chongwu">
</form>

4.单选按钮radio,当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态

<form>
   男性：
   <input type="radio" checked="checked" name="Sex" value="male" />
   <br />
   女性：
   <input type="radio" name="Sex" value="female" />
</form>

name要一致才是同一组。
5.下拉列表，selected="selected"为选中状态。

<form>
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected="selected">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

6.文本域textarea,用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。

<textarea name="" id="" cols="30" rows="10">
   输入字符数不受限制
</textarea>

7.按钮button,可以对按钮上的文字进行自定义。

<form>
  <input type="button" value="下一步">
</form>

8.submit，用于提交表单信息，带有输入框和提交按钮的表单如下代码：

<form action="action_page.php">
   姓名:
   <input type="text" name="fname" >
   密码:
   <input type="password" name="password" >
   <input type="submit" value="提交">
</form> 

action的值表示向此页面发送表单数据。