HTML——表单类的标签

最新推荐文章于 2025-01-10 12:25:13 发布

usrname为username

最新推荐文章于 2025-01-10 12:25:13 发布

阅读量9.7k

点赞数 18

CC 4.0 BY-SA版权

分类专栏： educoder 文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_54327001/article/details/121345947

educoder 专栏收录该内容

3 篇文章

订阅专栏

这篇博客详细介绍了HTML中的表单元素，包括文本框、密码框、单选框、多选框、checked属性、disabled属性、label标签、下拉列表、文本域和提交按钮的使用方法，并通过实例展示了它们的实现。此外，还提供了一个包含多种表单元素的综合案例，涵盖了用户信息输入、性别选择、教育程度、婚姻状况等多个方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第1关：表单元素——文本框

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

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

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

第2关：表单元素——密码框

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

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

    <!-- ********* End ********* -->
</body>
</html>

第3关：表单元素——单选框

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

这里type="radio"，表示单选框。

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

第4关：表单元素——多选框

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

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

这里type="checkbox"，表示多选框。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    婚姻状况:<br>
    <!-- ********* Begin ********* -->

<p><input type="radio" name="marry"  checked="checked"/>未婚</p>
<p><input type="radio" name="marry"/>已婚</p>
    <!-- ********* End ********* -->
</body>
</html>

第6关：表单元素——disabled 属性

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

<!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="disabled">困难</p>
    <!-- ********* End ********* -->
</body>
</html>

第7关：表单元素——label 标签

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

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

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

第8关：表单元素——下拉列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    选择版块：
    <!-- ********* Begin ********* -->

<select>
    <option >问答</option>
    <option >分享</option>
    <option >招聘</option>
    <option selected="selected">客户端测试</option>
</select>
        
	<!-- ********* End ********* -->
</body>
</html>

第9关：表单元素——文本域

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

如何添加宽、高呢？用<style></style>标签包裹，里面填写样式即可。

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

第10关：表单元素——提交按钮

你可以使用<input type="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关：表单元素的综合案例

笔记

类的名字是common，不是.common
<span>用户名：</span>
每一部分外面都是div标签
<input type="radio" id="male" name="sex"/>

<label for="male">男</label>
<label for="single" name="state">

<input type="radio" checked="checked" id="single"/>未婚

</label>这两种写法结果是相同的，确保文本在label标签内即可
<span>

</span>的作用是什么

<!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" class="common">
    </div>
    
    <div>
    <span>昵称：</span>
    <input type="text" class="common">
    </div>
 
<div>
<span>性别：</span>
<input type="radio" id="male" name="sex"/>
<label for="male">男</label>  
<input type="radio" id="female"/>
<label for="female" name="sex">女</label>
<input type="radio" id="other" disabled="disabled"/>
<label for="other" name="sex">保密</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>
 
<!-- ********* End ********* -->
</form>
</body>
</html>