表单标签

1、表单目的：收集用户信息。

2、一个表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分组成。

3、表单域：包含表单元素的区域，<form></form>标签用于定义表单域，<form>会把它范围内的表单元素提交给服务器。

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

4、input：

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

input的type类型：

1. 文本域：type="text"
2. 密码域：type="password"
3. 复选框：type="checkbox"
4. 单选按钮：type="radio"
5. 简单的下拉列表：

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

6. 另一个下拉列表：

   <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>

7. 文本域(Textarea)：

   <textarea rows="10" cols="30">

8. 创建按钮：

   <input type="button" value="Hello world!">

9. 围绕数据的Fieldset：

    <fieldset>
       <legend>健康信息</legend>
       身高：<input type="text" />
       体重：<input type="text" />
     </fieldset>

10. 带有输入框和确认按钮的表单

    <form action="/demo/demo_form.asp">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form>
    
    <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

11. 带有复选框的表单：

    <form name="input" action="/html/html_form_action.asp" method="get">
    I have a bike:
    <input type="checkbox" name="vehicle" value="Bike" checked="checked" />
    <br />
    I have a car:
    <input type="checkbox" name="vehicle" value="Car" />
    <br />
    I have an airplane:
    <input type="checkbox" name="vehicle" value="Airplane" />
    <br /><br />
    <input type="submit" value="Submit" />
    </form>
    
    <p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

12. 带有单选按钮的表单：

    <form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
    </form>

13. 从表单发送电子邮件：

    <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
    
    <h3>这个表单会把电子邮件发送到 W3School。</h3>
    姓名：<br />
    <input type="text" name="name" value="yourname" size="20">
    <br />
    电邮：<br />
    <input type="text" name="mail" value="yourmail" size="20">
    <br />
    内容：<br />
    <input type="text" name="comment" value="yourcomment" size="40">
    <br /><br />
    <input type="submit" value="发送">
    <input type="reset" value="重置">
    
    </form>

5、button：普通按钮，结合javascript使用

6、submit：提交按钮，会把表单域提交到服务器。

7、label标签：点击一块区域就可以进行选中。

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>