你知道HTMl表单中的细节吗？

╰+攻爆jí腚メ 2022-12-26 10:09 222阅读 0赞

--------------------

## 前言 ##

### **欢迎观看~** ###

![20201204140343999.jpg][]

# 1.html表单介绍 #

## 1、HTML 表单简介 ##

**表单是一个包含表单元素的区域。**

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

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

--------------------

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

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

### input标签 ###

### 2.1输入框 ###

**type：text**

功能：允许用户输入文本。

例如：登陆qq 、微信、支付宝的账号输入框

![20201204152236442.png][]

**常用属性**:

*  value : 未输入之前的默认文本。
 *  placeholder：未输入之前的提示内容。
 *  maxlength：文本区域最多可以输入的字符数。
 *  minlength:文本区域最少应该输入的字符数。
 *  autofocus：页面加载后自动获取焦点。
 *  disabled 禁用
 *  readonly 用户只能读，不能更改。
 *  required 作用是用户必填此项

**例如：**

实现结果：![20201204145216711.png][]

--------------------

### 2.2密码字段 ###

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

<form>

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

</form>

浏览器显示效果如下:

Password:

**注意:密码字段字符不会明文显示，而是以星号或圆点替代。**

--------------------

### 2.3单选按钮（Radio Buttons） ###

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

name：名称 可以分组

如果不设置name属性，浏览器不知道哪些单元框是一组，不能做到单选的效果。给同一组单选按钮，添加一个相同的name属性值，才可以做到单选。

**代码如下：**

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

**浏览器显示效果如下**:

Male  
Female

**实例：**

**![20201204163756425.png][]**

性别：
                <input type="radio" name="xb">男
                <input type="radio" name="xb">女

### **2.31**重置按钮 ###

<input type="reset">定义重置按钮

点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。

**普通**： type button 配合js完成一些操作

--------------------

### 2.32提交按钮(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>

浏览器显示效果如下:

Username:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html\_form\_action.php" 的页面。该页面将显示出输入的结果

![20201204191358444.png][]

### 2.4复选框（Checkboxes） ###

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

浏览器显示效果如下:

I have a bike  
I have a car

案例：

![20201204145527791.png][]

爱好：
                <input type="checkbox" value="1" name="hobby">打游戏
                <input type="checkbox" value="2" name="hobby"> 唱歌
                <input type="checkbox" value="3" name="hobby">听歌
                <input type="checkbox" value="4" name="hobby">学习

--------------------

写累了~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]

### 2.5文本域（Text Fields） ###

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

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

浏览器显示如下：

First name:  
Last name:

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

实例：

人简历：
                <br>
                <textarea name="" id="" cols="30" rows="10">
                    我是亚索
                </textarea>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1][]

--------------------

### 2.6下拉菜单 ###

### 标签定义及使用说明 ###

<select> 元素用来创建下拉列表。

<select> 元素中的 [<option>][option] 标签定义了列表中的可用选项。

--------------------

**提示和注释**

**提示：**<select> 元素是一种表单控件，可用于在表单中接受用户输入。

HTML5 增加了一些新的属性。

### 属性 ###

New ：HTML5 中的新属性。

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/att-select-autofocus.html" rel="nofollow">autofocus</a>New</td> 
   <td>autofocus</td> 
   <td>规定在页面加载时下拉列表自动获得焦点。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/att-select-disabled.html" rel="nofollow">disabled</a></td> 
   <td>disabled</td> 
   <td>当该属性为 true 时，会禁用下拉列表。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/att-select-form.html" rel="nofollow">form</a>New</td> 
   <td><em>form_id</em></td> 
   <td>定义 select 字段所属的一个或多个表单。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/att-select-multiple.html" rel="nofollow">multiple</a></td> 
   <td>multiple</td> 
   <td>当该属性为 true 时，可选择多个选项。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/att-select-name.html" rel="nofollow">name</a></td> 
   <td><em>text</em></td> 
   <td>定义下拉列表的名称。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/att-select-required.html" rel="nofollow">required</a>New</td> 
   <td>required</td> 
   <td>规定用户在提交表单前必须选择一个下拉列表中的选项。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/att-select-size.html" rel="nofollow">size</a></td> 
   <td><em>number</em></td> 
   <td>规定下拉列表中可见选项的数目。</td> 
  </tr> 
 </tbody> 
</table>

实例：

![20201204164616267.png][]

--------------------

## 2.6隐藏域 ##

type：hidden

作用：提交一下不需要用户看到的数据到服务器。

隐藏域对用户是不可见。

应用场景：修改数据时

# #

--------------------

## 2.7<label> 标签 ##

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

--------------------

**提示和注释**

**提示:**"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2][]

[20201204140343999.jpg]: /images/20221120/314276b0edaa4c3cba309eb7cd3c0a9a.png
[20201204152236442.png]: /images/20221120/b3ec23458c7848a38ec21db65561a385.png
[20201204145216711.png]: /images/20221120/7ee62951434f418aa6294a027e1252f0.png
[20201204163756425.png]: /images/20221120/448872d33b9b4f79994f6c9603029258.png
[20201204191358444.png]: /images/20221120/93726989221945338cf8ab86c2b1eb73.png
[20201204145527791.png]: /images/20221120/3ea126f61de54ab6a4a13495c28fe265.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/5518eeb233ee4cea84eb4089494fc1cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1]: /images/20221120/61f25d2c1e5740c1b5244ab308b76b9f.png
[option]: https://www.runoob.com/tags/tag-option.html
[20201204164616267.png]: /images/20221120/3439b504b08c4b179b5e15ee6783f639.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2]: /images/20221120/6a54a77435f04ae395c250830a52a364.png