HTML HTML 表单和输入 (stage1-25)

约定不等于承诺〃 2022-06-02 09:13 154阅读 0赞

# 基础篇-HTML 表单和输入 #

#### 1.HTML 表单 ####

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

<form>
    .
    input 元素
    .
    </form>

#### 2.HTML 表单 - 输入元素 ####

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

##### 1)文本域（Text Fields） #####

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

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    </form>

浏览器显示如下：  
![这里写图片描述][SouthEast]  
*注意*:表单本身并不可见。同时，在大多数浏览器中，**文本域的缺省宽度是20个字符**。

##### 2)密码字段 #####

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

<form>
    Password: <input type="password" name="pwd">
    </form>

浏览器显示效果如下:  
![这里写图片描述][SouthEast 1]  
*注意:*密码字段字符不会明文显示，而是以星号或圆点替代。

##### 3)单选按钮（Radio Buttons） #####

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

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

浏览器显示效果如下:  
![这里写图片描述][SouthEast 2]

##### 4)复选框（Checkboxes） #####

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

这里的name是定义了一个组，相当于使用同一个name的属于同一组。  
浏览器显示效果如下:  
![这里写图片描述][SouthEast 3]

##### 5）提交按钮(Submit Button) #####

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

<form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>

浏览器显示效果如下:  
![这里写图片描述][SouthEast 4]  
假如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html\_form\_action.php” 的页面。该页面将显示出输入的结果。

#### 3.HTML 表单标签 ####

其中：new 表示HTML5新标签。

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;form&gt;</code></td> 
   <td align="center">定义供用户输入的表单</td> 
  </tr> 
  <tr> 
   <td><code>&lt;input&gt;</code></td> 
   <td align="center">定义输入域</td> 
  </tr> 
  <tr> 
   <td><code>&lt;textarea&gt;</code></td> 
   <td align="center">定义文本域 (一个多行的输入控件)</td> 
  </tr> 
  <tr> 
   <td><code>&lt;label&gt;</code></td> 
   <td align="center">定义了 元素的标签，一般为输入标题</td> 
  </tr> 
  <tr> 
   <td><code>&lt;fieldset&gt;</code></td> 
   <td align="center">定义了一组相关的表单元素，并使用外框包含起来</td> 
  </tr> 
  <tr> 
   <td><code>&lt;legend&gt;</code></td> 
   <td align="center">定义了 元素的标题</td> 
  </tr> 
  <tr> 
   <td><code>&lt;select&gt;</code></td> 
   <td align="center">定义了下拉选项列表</td> 
  </tr> 
  <tr> 
   <td><code>&lt;optgroup&gt;</code></td> 
   <td align="center">定义选项组</td> 
  </tr> 
  <tr> 
   <td><code>&lt;option&gt;</code></td> 
   <td align="center">定义下拉列表中的选项</td> 
  </tr> 
  <tr> 
   <td><code>&lt;button&gt;</code></td> 
   <td align="center">定义一个点击按钮</td> 
  </tr> 
  <tr> 
   <td><code>&lt;datalist&gt;</code>New</td> 
   <td align="center">指定一个预先定义的输入控件选项列表</td> 
  </tr> 
  <tr> 
   <td><code>&lt;keygen&gt;</code>New</td> 
   <td align="center">定义了表单的密钥对生成器字段</td> 
  </tr> 
  <tr> 
   <td><code>&lt;output&gt;</code>New</td> 
   <td align="center">定义一个计算结果</td> 
  </tr> 
 </tbody> 
</table>

另：  
`<input type="reset">`定义重置按钮。

点击之后会将重置按钮所在的表单中填写的内容清空。

#### 4.实例 ####

**1）创建单选按钮**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建单选按钮</title>
    </head>
    <body>
    <form action="">
        <input type="radio" name="sex" value="male">男<br>
        <input type="radio" name="sex" value="female">女
    </form>
    
    <p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他的同名的单选按钮就不会被选中了。</p>
    
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 5]

**2）复选框**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建复选框</title>
    </head>
    <body>
    <form action="">
        <input type="checkbox" name="a" value="banana">I like eat banana <br>
        <input type="checkbox" name="a" value="apple">I like eat apple
    </form>
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 6]

**3）创建下拉列表：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建下拉列表</title>
    </head>
    <body>
    <p>请选择：</p>
    <form action="">
        <select name="car">
            <option value="volvo">volvo</option>
            <option value="audi">audi</option>
            <option value="saab">saab</option>
            <option value="fiat">fiat</option>
        </select>
    </form>
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 7]

**4）预选下拉列表：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>预选下拉列表</title>
    </head>
    <body>
    <p>请选择：</p>
    <form action="">
        <select name="car">
            <option value="volvo">volvo</option>
            <option value="audi" selected>audi</option>  
            <option value="saab">saab</option>
            <option value="fiat">fiat</option>
        </select>
    </form>
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 8]

**5）文本域：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本域</title>
    </head>
    <body>
    <textarea rows="10" cols="40">
        我是一个文本框
    </textarea>
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 9]

**6）创建按钮**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本域</title>
    </head>
    <body>
    <form action="">
        <input type="button" value="按钮">
    </form>
    
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 10]

**7）带边框的表单**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>带边框的表单创建</title>
    </head>
    <body>
    <form action="">
        <fieldset>
            <legend>个人信息</legend>
            姓名:<input type="text" size="30"><br/>
            地址:<input type="text" size="30"><br/>
            出生日期:<input type="date" size="30">
        </fieldset>
    </form>
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 11]

**8）带有输入框和确认按钮的表单**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>带有输入框和确认按钮的表单</title>
    </head>
    <body>
    <form action="index01.html">
        姓:<input type="text" name="first name" value="lanfang"><br/>
        名:<input type="text" name="last name" value="lv"><br/>
        <input type="submit" value="提交">
    </form>
    <p>点击提交按钮后，网页会跳转至index01.html</p>
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 12]  
点击“提交”按钮后：  
![这里写图片描述][SouthEast 13]

**9）带有复选框的表单：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>带有复选框的表单</title>
    </head>
    <body>
     <form action="index.html" method="get">
         <input type="checkbox" name="car[]" value="car1">i have a bike<br/>
         <input type="checkbox" name="car[]" value="car2">i have a car<br/>
         <input type="submit" value="提交">
     </form>
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 14]

**10）带有单选按钮的表单**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>带有单选框的表单</title>
    </head>
    <body>
    <form action="index002.html" method="get">
        <input type="radio" name="sex" value="man">男<br/>
        <input type="radio" name="sex" value="woman">女<br/>
        <input type="submit" value="提交">
    </form>
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 15]

**11）从表单发送电子邮件**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>从表单发送电子邮件</title>
    </head>
    <body>
    <form action="mailto:591386081@qq.com" method="post" enctype="text/plain">
        name:<br/>
        <input type="text" name="name" value="your name"><br/>
        email:<br/>
        <input type="text" name="mail" value="your email"><br/>
        comment:<br/>
        <input type="text" name="comment" value="your comment" size="50"><br/>
        <input type="submit" value="submit">
        <input type="reset" value="reset">
    </form>
    </body>
    </html>

运行结果：  
![这里写图片描述][SouthEast 16]  
点击submit后，启动邮件发送（发送给591386081@qq.com）这个邮箱。  
点击reset后，清空文本框中的值，恢复至默认状态值。

[SouthEast]: /images/20220602/a69cb3520350467ba026fa57109dc50b.png
[SouthEast 1]: /images/20220602/1d1c6dee51f146ccbda92b03c637a9bd.png
[SouthEast 2]: /images/20220602/e9c93cb7089f4cf581e984f0c99710ca.png
[SouthEast 3]: /images/20220602/0b70d06a934642e9bacc644a03f4d55d.png
[SouthEast 4]: /images/20220602/82209c9bfd3b46908a45d01402e9b87a.png
[SouthEast 5]: /images/20220602/36dd3d3ce72f4d988b4d72315adc88bd.png
[SouthEast 6]: /images/20220602/4b73cc9f90df4773b13d94d9ac2b000a.png
[SouthEast 7]: /images/20220602/de07ea7bbce64cf68192ba5903ff7318.png
[SouthEast 8]: /images/20220602/79c36497ed4449ffb02881001f0bd2ac.png
[SouthEast 9]: /images/20220602/d96465658427430cba39c9f1f46afd17.png
[SouthEast 10]: /images/20220602/389e8c1a367340d88343ce0340b2d46a.png
[SouthEast 11]: /images/20220602/25d379332e1245c19640abc8c5736452.png
[SouthEast 12]: /images/20220602/39585c90d2074ca5a881981e2197cd41.png
[SouthEast 13]: /images/20220602/477800c68ecf4127845ae882e45834a6.png
[SouthEast 14]: /images/20220602/6b816c409544445fbe52977622c228b7.png
[SouthEast 15]: /images/20220602/54dd9c2efa64406bab0cf4a6e7956adf.png
[SouthEast 16]: /images/20220602/b3163e3a86ed47d4a7d15a185e684089.png