完整教程：HTML——表单类的标签【头歌educoder】

文章目录

1. 表单元素——文本框
2. 表单元素——密码框
3. 表单元素——单选框
4. 表单元素——多选框
5. 表单元素——checked属性
6. 表单元素——disabled 属性
7. 表单元素——label 标签
8. 表单元素——下拉列表
9. 表单元素——文本域
10. 表单元素——提交按钮
11. 表单元素的综合案例

1. 表单元素——文本框

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

效果如下：
在这里插入图片描述

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

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

例子如下：

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

效果如下：
在这里插入图片描述
这里type=“text”，表示普通文本的输入。

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

<!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
      </head>
      <body>
        <!-- ********* Begin ********* -->
          <input type="text" name="nickName"/>
          <!-- ********* End ********* -->
          </body>
        </html>

2. 表单元素——密码框

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

效果如下：
在这里插入图片描述

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

例子如下：

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

<!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
      </head>
      <body>
        <!-- ********* Begin ********* -->
          <input type="password" name="check" value="123"/>
          <!-- ********* End ********* -->
          </body>
        </html>

3. 表单元素——单选框

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

要求：对每一个选项使用

标签进行换行。

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

效果如下：
在这里插入图片描述
相关知识
一般在填写个人信息的时候，都会选择性别，只能选择男或女，这里就用到了单选框。

你可以使用来创建一个单选框，需要注意的是：同一组单选框的name属性的值要一样。

例子如下：

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

<!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
      </head>
      <body>
        1. HTML是什么语言？(单选题)<br>
          <!-- ********* Begin ********* -->
          <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>
    <!-- ********* End ********* -->
    </body>
  </html>

4. 表单元素——多选框

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

要求：对每一个选项使用

标签进行换行。

效果如下：
在这里插入图片描述

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

5. 表单元素——checked属性

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

要求：对每一个选项使用

标签进行换行。

效果如下：
在这里插入图片描述
相关知识
checked属性

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

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

例子如下：

< input type=“checkbox” name=“hobby” />足球

< input type=“checkbox” name=“hobby” checked=“checked”/>篮球

< input type=“checkbox” name=“hobby”/>乒乓球

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

6. 表单元素——disabled 属性

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

要求：对每一个选项使用

标签进行换行。

效果如下：
在这里插入图片描述

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

7. 表单元素——label 标签

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

标签的for属性值为user，创建一个文本框，name属性的值为user；
标签的for属性值为pwd，创建一个密码框，name属性的值为password。

input标签的id注意要和label标签的for属性值一致。

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

效果如下：

在这里插入图片描述

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

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

例子如下：

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

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

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

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

效果如下：
在这里插入图片描述

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

9. 表单元素——文本域

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

效果如下：
在这里插入图片描述

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

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

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

效果如下：
在这里插入图片描述

<!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>
    <!-- ********* Begin ********* -->
        <input type="submit" value="submit">
        <!-- ********* End ********* -->
        </body>
      </html>

11. 表单元素的综合案例

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

这里标签要按照规定格式来写，因为有

标签，会自动换行，就不用
标签了。

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

其他要求如下：

用户名：添加类.common；
昵称：添加类.common；
性别：name属性的值为sex，禁用保密；
男：标签的for属性的值为male；
女：标签的for属性的值为female；
保密：标签的for属性的值为other；
教育程度：添加类.common，默认选中本科；
选项有：高中，中专，大专，本科，硕士，博士，其他；
婚姻状况：name属性的值为state，默认选中未婚；
未婚：标签的for属性的值为single；
已婚：标签的for属性的值为married；
保密：标签的for属性的值为secret；
兴趣爱好：name属性的值为hobby，默认选中看电影；
踢足球：标签的for属性的值为football；
打篮球：标签的for属性的值为basketball；
看电影：标签的for属性的值为film；
描述自己的特点：添加类.common，字符最大长度为20；
提交：添加空，用来占位，添加类.common，value值为提交。

要求：像“用户名、昵称”这些采用标签包裹文本，而‘男、女’这些单选框和多相框采用标签包裹文本。

效果如下：

在这里插入图片描述

<!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">
          <!-- ********* Begin ********* -->
            <!-- 用户名 -->
              <div>
              <span>用户名：</span>
                  <input type="text" id="username" class="common" name="username">
                </div>
                <!-- 昵称 -->
                  <div>
                  <span>昵称：</span>
                      <input type="text" id="nickname" class="common" name="nickname">
                    </div>
                    <!-- 性别 -->
                      <div>
                      <span>性别：</span>
                      <label for="male"><input type="radio" id="male" name="sex" value="male"> 男</label>
                      <label for="female"><input type="radio" id="female" name="sex" value="female"> 女</label>
                      <label for="other"><input type="radio" id="other" name="sex" value="other" disabled> 保密</label>
                      </div>
                      <!-- 教育程度 -->
                        <div>
                        <span>教育程度：</span>
                            <select id="education" class="common" name="education">
                          <option value="highschool">高中</option>
                          <option value="technical">中专</option>
                          <option value="college">大专</option>
                          <option value="undergraduate" selected>本科</option>
                          <option value="master">硕士</option>
                          <option value="doctor">博士</option>
                          <option value="other">其他</option>
                          </select>
                        </div>
                        <!-- 婚姻状况 -->
                          <div>
                          <span>婚姻状况：</span>
                          <label for="single"><input type="radio" id="single" name="state" value="single" checked> 未婚</label>
                          <label for="married"><input type="radio" id="married" name="state" value="married"> 已婚</label>
                          <label for="secret"><input type="radio" id="secret" name="state" value="secret"> 保密</label>
                          </div>
                          <!-- 兴趣爱好 -->
                            <div>
                            <span>兴趣爱好：</span>
                            <label for="football"><input type="checkbox" id="football" name="hobby" value="football"> 踢足球</label>
                            <label for="basketball"><input type="checkbox" id="basketball" name="hobby" value="basketball"> 打篮球</label>
                            <label for="film"><input type="checkbox" id="film" name="hobby" value="film" checked> 看电影</label>
                            </div>
                            <!-- 描述自己的特点 -->
                              <div>
                              <span>描述自己的特点：</span>
                              <textarea id="intro" class="common" name="intro" maxlength="20"></textarea>
                              </div>
                              <!-- 提交按钮 -->
                                <div>
                                <span></span>
                                    <input type="submit" id="submitBtn" class="common" name="submit" value="提交">
                                  </div>
                                  <!-- ********* End ********* -->
                                  </form>
                                </body>
                              </html>

posted @ 2026-02-11 14:31 yangykaifa 阅读(61) 评论(0) 收藏举报

刷新页面返回顶部