HTML——表单类的标签【头歌educoder】

文章目录

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

1. 表单元素------文本框

任务描述

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

效果如下：

相关知识

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

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

例子如下：

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

效果如下：

这里type="text"，表示普通文本的输入。

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

html 复制代码

<!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"/>

html 复制代码

<!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"/>

html 复制代码

<!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。

要求：对每一个选项使用

标签进行换行。

效果如下：

html 复制代码

<!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"/>乒乓球

html 复制代码

<!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，禁用难度系数为困难的选项。

要求：对每一个选项使用

标签进行换行。

效果如下：

html 复制代码

<!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" />

html 复制代码

<!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值。

效果如下：

html 复制代码

<!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。

效果如下：

html 复制代码

<!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。

效果如下：

html 复制代码

<!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值为提交。

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

效果如下：

html 复制代码

<!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>