HTML--表单类的标签

╰+攻爆jí腚メ 2021-05-16 20:37 860阅读 0赞

### 表单 ###

*  5.表单元素——checked属性
 *   *  任务描述
     *  相关知识
     *   *  代码文件
 *  6.表单元素——disabled 属性
 *   *  任务描述
     *  相关知识
     *   *  代码文件
 *  7.表单元素——label 标签
 *   *  任务描述
     *  相关知识
     *   *  代码文件
 *  8.表单元素——下拉列表
 *   *  任务描述
     *  相关知识
     *   *  代码文件
 *  9.表单元素——文本域
 *   *  任务描述
     *  相关知识
     *   *  代码文件
 *  10.表单元素——提交按钮
 *   *  任务描述
     *  相关知识
     *   *  代码文件
 *  11.表单元素的综合案例
 *   *  任务描述
     *  相关知识
     *   *  代码文件

# 5.表单元素——checked属性 #

## 任务描述 ##

本关任务：创建一组单选框，`name`属性值为`marry`，默认选中未婚。

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

效果如下：

婚姻状况：  
![在这里插入图片描述][20210318104232704.png]

## 相关知识 ##

**checked属性**

在填写兴趣爱好时，男生基本都喜欢篮球，这时就可以在多选框里默认选择篮球，方便信息的填写，不喜欢的可以不选。

这里在需要添加默认选中的多选框里添加`checked`属性即可，其默认值为`checked`。

例子如下：

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

效果如下：  
![在这里插入图片描述][20210318104444517.png]  
需要注意的是：

只要有`checked`属性就会被默认选中，不管它的值是什么；

不想被默认选中，不添加`checked`属性就可以了。

下面这三种情况都会被选中。

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

效果如下：  
![在这里插入图片描述][20210318104508460.png]  
为了规范书写，一般添加`checked="checked"`就可以了。

`checked` 属性 与 `<input type="checkbox"/>` 或 `<input type="radio"/>` 一起配合使用。

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        婚姻状况:<br>
        
        <p>
            <input type="radio" name="marry" checked="checked"/>未婚<br>
        </p>
        <p>
            <input type="radio" name="marry" />已婚
        </p>
    
    
        
    </body>
    </html>

# 6.表单元素——disabled 属性 #

## 任务描述 ##

本关任务：创建一组单选框，`type`属性值为`radio`，`name`属性值为`degree`，禁用难度系数为困难的选项。

要求：对每一个选项使用

标签进行换行。

效果如下：

难度系数：  
![在这里插入图片描述][20210318105236550.png]

## 相关知识 ##

**disabled属性**

在选择选修课时，热门课程很快就会被选完，后面选课的同学就不能选这门课了。这个该怎么实现呢？

这里在多选框里添加`disabled`属性即可，它会禁用该`input`元素，其默认值为`disabled`。

例子如下：

<input type="checkbox" name="course" disabled="disabled">影视鉴赏  <br>
    <input type="checkbox" name="course">中国语言文学<br>
    <input type="checkbox" name="course">心理学

效果如下：  
![在这里插入图片描述][20210318105517829.png]  
需要注意的是：

只要有`disabled`属性就会被禁用，不管它的值是什么；

不想被禁用，不添加`disabled`属性就可以了。

为了规范书写，一般添加`disabled="disabled"`就可以了。  
由于测试需要，请在标准格式下加上`/`，如下：

注意：本地环境下，两种格式都能正确显示。本关是为了方便测评同学们的代码，所以要求写成带/的模式。

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        难度系数:<br>
        
        <p>
            <input type="radio" name="degree"/>简单<br>
        </p>
        <p>
            <input type="radio" name="degree"/>中等<br>
        </p>
        <p>
            <input type="radio" name="degree" disabled="disabled"/>困难
        </p>
    
            
        
    </body>
    </html>

# 7.表单元素——label 标签 #

## 任务描述 ##

本关任务：实现当点击`<label>`元素内的文本时，焦点会自动定位到与`<label>`标签绑定的表单元素上，要求如下：

1.  `<label>`标签的`for`属性值为`user`，创建一个文本框，`name`属性的值为`user`；
2.  `<label>`标签的`for`属性值为`pwd`，创建一个密码框，`name`属性的值为`password`。
3.  `input`标签的`id`注意要和`label`标签的`for`属性值一致哦。

注： 属性的先后顺序为：`type -- id -- name` 。

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

## 相关知识 ##

`<label>`标签的作用主要是提高用户体验性。当点击`<label>`元素内的文本时，焦点会自动定位到与`<label>`标签绑定的表单元素上。通俗地说，就是点击文本也能选择表单元素。

需要注意的是：`<label>`标签的`for`属性的值要和相应表单元素的`id`的值相同。这样才能把`<label>`标签和表单元素绑定到一起。

例子如下：

QQ空间状态：
    <label for="secret">保密：</label>    
    <input type="radio" id="secret" name="state" /> <br>
    <label for="open">公开：</label>
    <input type="radio" id="open" name="state" />

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        
        <p>
            <label for="user">用户：</label>
            <input type="text" id="user" name="user"/><br>
        </p>
        <p>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" name="password"/>
        </p>
    
            
        
    </body>
    </html>

# 8.表单元素——下拉列表 #

## 任务描述 ##

本关任务：创建一个下拉列表，默认选中客户端测试，没有`value`值 。

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

## 相关知识 ##

你可以使用`<select>`标签用来创建下拉列表，`<option>`标签定义列表中的可用选项。

例子如下：

效果如下：  
![在这里插入图片描述][20210318111140475.png]  
可以发现： 显示的是第一个`<option>`标签里面的内容。如果想默认显示第三个`<option>`里的内容呢？

在要默认显示的`<option>`里添加`selected`属性就可以了。

例子如下：

效果如下：  
![在这里插入图片描述][20210318111251584.png]  
`selected`属性的用法和前面介绍的`checked`属性一样。

为了规范书写，一般添加`selected="selected"`就可以了

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        选择版块：
        
        <select>
            
            <option >问答</option>
            <option >分享</option>
            <option >招聘</option>
            <option selected="selected">客户端测试</option>
        
        </select>
         
    	
    </body>
    </html>

# 9.表单元素——文本域 #

## 任务描述 ##

本关任务：创建一个文本域，最多能输入的字符数为`15`。  
在`<style></style>`标签里设置宽度为`200px`，高度为`120px`。

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

## 相关知识 ##

`<textarea>`标签可以定义多行的文本输入框。用宽（`width`）和高（`height`）来定义输入框的大小，用`maxlength`来定义文本区域最大能输入的字符数。

例子如下：

个人描述：<textarea maxlength="10"></textarea>

效果如下：  
![在这里插入图片描述][20210318112342440.png]  
如何添加宽、高呢？用`<style></style>`标签包裹，里面填写样式即可。

例子如下：

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        
        <style> textarea { width:200px; height:120px; } </style>
    </head>
    <body>
    
        用一句话描述自己的特点：<textarea maxlength="15"></textarea>
        
    </body>
    </html>

# 10.表单元素——提交按钮 #

## 任务描述 ##

本关任务：创建一个提交按钮，其`value`值为`submit`。

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

## 相关知识 ##

你可以使用`<input type="submit"/>`来创建一个提交按钮，用于向服务器端发送数据。

例子如下：

效果如下：  
![在这里插入图片描述][20210318112712495.png]  
因为这里没有提交数据，所以这里没有效果，这里先简单的创建一下提交按钮。

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    
        <label for="user">用户：</label><input type="text" id="user" name="user"/><br>
        <label for="pwd">密码：</label><input type="password" id="pwd" name="password" style="margin-bottom: 10px;"/><br>
    
        
        
            <input type="submit" value="submit">
       
    
    
    
        
    </body>
    </html>

# 11.表单元素的综合案例 #

## 任务描述 ##

本关任务：完成一个表单的创建任务。

这里标签要按照规定格式来写，因为有`<div>`标签，会自动换行，就不用`<br>`标签了。

属性的先后顺序为： `type -- id -- class -- name -- value` ，其他需要添加的属性最后写。

其他要求如下：

*  用户名：添加类.common；
 *  昵称：添加类.common；
 *  性别：name属性的值为sex，禁用保密；
 *  男：`<label>`标签的for属性的值为male；
 *  女：`<label>`标签的for属性的值为female；
 *  保密：标签的for属性的值为other；
 *  教育程度：添加类.common，默认选中本科；
 *  选项有：高中，中专，大专，本科，硕士，博士，其他；
 *  婚姻状况：name属性的值为state，默认选中未婚；
 *  未婚：`<label>`标签的for属性的值为single；
 *  已婚：`<label>`标签的for属性的值为married；
 *  保密：`<label>`标签的for属性的值为secret；
 *  兴趣爱好：name属性的值为hobby，默认选中看电影；
 *  踢足球：`<label>`标签的for属性的值为football；
 *  打篮球：`<label>`标签的for属性的值为basketball；
 *  看电影：`<label>`标签的for属性的值为film；
 *  描述自己的特点：添加类.common，字符最大长度为20；
 *  提交：添加空`<span></span>`，用来占位，添加类.common，value值为提交。
 *  要求：像“用户名、昵称”这些采用`<span>`标签包裹文本，而‘男、女’这些单选框和多相框采用`<label>`标签包裹文本。

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

## 相关知识 ##

本关是一个综合案例，是对前面所学知识的总结和拓展。

前面学的都是表单元素，这些表单元素都是属于表单的， 用`<form></form>`标签包裹。

这里需要添加一些简单的样式，让界面更美观、大方。

因为表单有多个表单元素，所以每个元素都要有间距。这里先小小的做个规定：

*  每个表单元素都用`<div></div>` 标签包裹；
 *  表单元素里的文本都用`<span></span>`标签包裹，对于有`<label>`标签包裹文本的，就不用`<span>`标签了；
 *  `input`元素需要改变宽和高的添加类.com。

例子如下：

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

### 代码文件 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <style> .container{ width: 40%; margin: 20px auto; } .common{ width:230px; height: 30px; } span{ display:inline-block; width: 150px; text-align: right; } div{ margin-bottom: 10px; } </style>
    </head>
    <body>
    
        <form class="container">
        
        <div>
            <span>用户名：</span>
            
                
                <input type="text" class="common"/>
    
            
            
        </div>
    
         <div>
            <span>昵称：</span>
            
                <input type="text" class="common"/>
            
            
        </div>
    
        <div>
            <span>性别：</span>
            <label for="male" name="sex">
                <input type="radio" id="male"/>男
            </label>
            <label for="female" name="sex">
                <input type="radio" id="female"/>女
            </label>
            <label for="other" name="sex">
                <input type="radio" id="other" disabled="disabled"/>保密
            </label>
        </div>
        <div>
            <span>教育程度：</span>
            <select class="common"/>
                
                <option>高中</option>
                <option>中专</option>
                <option>大专</option>
                <option selected="selected">本科</option>
                <option>硕士</option>
                <option>博士</option>
                <option>其他</option>
            </select>
        </div>
        <div>
            <span>婚姻状况：</span>
            <label for="single" name="state">
                <input type="radio" checked="checked" id="single"/>未婚
            </label>
            <label for="married" name="state">
                <input type="radio" id="married"/>已婚
            </label>
            <label for="secret" name="state">
                <input type="radio" id="secret"/>保密
            </label>
        </div>
        <div>
            <span>兴趣爱好：</span>
            <label for="football" name="hobby">
                <input type="checkbox" id="football"/>踢足球
            </label>
            <label for="basketball" name="hobby">
                <input type="checkbox" id="basketball"/>打篮球
            </label>
            <label for="film" name="hobby">
                <input type="checkbox" id="film" checked="checked"/>看电影
            </label>
        </div>
        <div>
            <span>描述自己的特点： </span> 
            <textarea maxlength="20" class="common"></textarea>
        </div>
        <div >
        <span></span>
        <input type="submit" value="提交" class="common"/>
        </div>
    
    </form>
    </body>
    </html>

[20210318104232704.png]: /images/20210516/0b16c395beea4885b30250a33d025c7b.png
[20210318104444517.png]: /images/20210516/e13d76ca136c4d0885a473e8d7dd677c.png
[20210318104508460.png]: /images/20210516/c82550adda7d46278f520a7bb2cecbe3.png
[20210318105236550.png]: /images/20210516/a7877619a6d5460a9a32ba07e7924926.png
[20210318105517829.png]: /images/20210516/fbe55b808f1648dc95d8df92b0a3e533.png
[20210318110252189.png]: /images/20210516/d05ebba67cf14f55b125b2ea94bfab6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/886fa3f38b724fdb9953505a9e3c6ba5.png
[20210318111140475.png]: /images/20210516/b67a9919292f43739fa5f991ca88b21e.png
[20210318111251584.png]: /images/20210516/e8833f71c84149a791f30af4eaee29b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20210516/f76c5b3e3e3849728a9ae5be313a4061.png
[20210318112342440.png]: /images/20210516/e373dc6affee47ef98fa1dc0bec3b9d8.png
[20210318112607603.png]: /images/20210516/6a2089c749964837b2709850f7be3f37.png
[20210318112712495.png]: /images/20210516/2d0d1fe81a2f4b75805f2fe5aac2c61f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20210516/5336e375f887474d8b15be98da7b5fa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20210516/e01b5a923d0442538e253f170ef309fc.png
[20210318113818324.png]: /images/20210516/b713ef89e6e14271bca94978baa75e92.png