HTML--表单类的标签

柔光的暖阳◎ 2021-05-16 20:37 575阅读 0赞

### HTML--表单类的标签 ###

*  1.表单元素——文本框
 *   *  1.1任务描述
     *  1.2相关知识
     *   *  代码文件
 *  2.表单元素——文本框
 *   *  2.1任务描述
     *  2.2相关知识
     *   *  代码文件
 *  3.表单元素——单选框
 *   *  3.1任务描述
     *  3.2相关知识
     *   *  代码文件
 *  4.表单元素——多选框
 *   *  4.1任务描述
     *  4.2相关知识
     *   *  代码文件

# 1.表单元素——文本框 #

## 1.1任务描述 ##

本关任务：创建一个`input`标签， `type`类型为`text`，`name`属性值为`nickName`。

效果如下：  
![在这里插入图片描述][20210317234058450.png]

## 1.2相关知识 ##

一般在网站上填写个人信息的时候，会输入姓名、昵称等信息，这里用到的就是`<input>`标签。

你可以使用`<input>`标签来创建一个输入框，使用`type`属性来指定`input`元素的类型，使用`name`属性来规定`input`元素的名称，它可以对提交到服务器后的表单数据进行标识。

例子如下：

姓名：<input type="text" name="userName"/>

效果如下：  
![在这里插入图片描述][20210317234229922.png]  
这里`type="text"`，表示普通文本的输入。

注意：`<input type="text"/>` 是以`/>`结尾的。

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        
        昵称:<input type="text" name="nickName"/>
    
    
        
    </body>
    </html>

# 2.表单元素——文本框 #

## 2.1任务描述 ##

本关任务：创建一个`input`标签， `type`类型为`password`，`name`属性值为`check`，`value`值为`123`。

效果如下：  
![在这里插入图片描述][20210317235050815.png]

## 2.2相关知识 ##

你可以使用`<input>`标签来创建一个输入框，使用`type`属性来指定`input`元素的类型为密码框，其输入框的值为`value`属性的值。

例子如下：

密码：<input type="password" name="pwd" value="123456"/>

效果如下：  
![在这里插入图片描述][20210317235215631.png]

可以发现： 密码框的值是以圆点表示的，不会明文显示。

这里`type="password"`，表示密码的输入。

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        
        密码:<input type="password" name="check" value="123"/>
    
    
        
    </body>
    </html>

# 3.表单元素——单选框 #

## 3.1任务描述 ##

本关任务：创建一组单选框，`name`属性值为`question`。

要求：对每一个选项使用`<p>`标签进行换行。

注：这里及后面遇到的文本都是中文符号，比如`：`，是中文符号的`：`。

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

## 3.2相关知识 ##

一般在填写个人信息的时候，都会选择性别，只能选择男或女，这里就用到了单选框 。

你可以使用`<input type="radio"/>`来创建一个单选框，需要注意的是：同一组单选框的`name`属性的值要一样。

例子如下：

男：<input type="radio" name="sex"/>
    女：<input type="radio" name="sex"/>

效果如下：  
![在这里插入图片描述][20210317235759588.png]  
这里`type="radio"`，表示单选框。

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        1. HTML是什么语言？(单选题)<br>
        
        <p><input type="radio" name="question"/>A：高级文本语言
        </p>
        <p><input type="radio" name="question"/>B：超文本标记语言
        </p>
         <p><input type="radio" name="question"/>C：扩展标记语言
        </p>
        <p><input type="radio" name="question"/>D：图形化标记语言
        </p>
    
            
        
    </body>
    </html>

# 4.表单元素——多选框 #

## 4.1任务描述 ##

本关任务：创建一组多选框，`name`属性值为`relax`。

要求：对每一个选项使用`<p>`标签进行换行。

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]

## 4.2相关知识 ##

一般在填写个人信息的时候，都会有选择兴趣爱好，是可以选择多个的，这里就用到了多选框 。

你可以使用`<input type="checkbox"/>`来创建一个多选框。

需要注意的是：同一组多选框的`name`属性的值要一样。

例子如下：

<input type="checkbox" name="hobby" />足球  <br>
    <input type="checkbox" name="hobby"/>篮球   <br>
    <input type="checkbox" name="hobby"/>乒乓球

效果如下：  
![在这里插入图片描述][20210318000128337.png]  
这里`type="checkbox"`，表示多选框。

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        休闲方式:<br>
        
        <p>
            <input type="checkbox" name="relax"/>逛街<br>
        </p>
        <p>
            <input type="checkbox" name="relax"/>看电影<br>
        </p>
        <p>
            <input type="checkbox" name="relax"/>宅
        </p>
    
            
        
    </body>
    </html>

[20210317234058450.png]: /images/20210516/c215f9479b684bc493e4e1b7ace5b039.png
[20210317234229922.png]: /images/20210516/435f8f0cefe44803afa30b56d7aa57b1.png
[20210317235050815.png]: /images/20210516/92aac5479da44c22abd5a00ec8f7bfa7.png
[20210317235215631.png]: /images/20210516/f80a074d995242d1a1225f094a616eae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/6800d7b2e0ed4b2d88329fd8699beb80.png
[20210317235759588.png]: /images/20210516/92f00f7f9f7a43538d58a69dc838a0b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20210516/633983da18914403a79403e4d8dd43b3.png
[20210318000128337.png]: /images/20210516/a59d598832a74bd3ba1df231c52a2152.png