第7天：input和label标签

最新推荐文章于 2025-03-15 09:45:00 发布

lelara

最新推荐文章于 2025-03-15 09:45:00 发布

阅读量720

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/lelara/article/details/84577479

html+css 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了HTML中input标签的不同类型，如text、password、radio、checkbox等，并讲解了label标签的使用，尤其是与input配合实现点击文字选择内容的功能。通过示例代码展示了表单元素的创建，包括输入框、单选按钮、复选框和按钮等。

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

今天学的不多，就只学了表单元素中的输入和标签标签。搬了房子，收拾了一下东西，太累了，所以没有学很多。明天还上班，今天就先到这。

一，输入

input标签类型属性有以下几个：
text，password，textarea，radio，checkbox，button，submit，reset
按钮
1，<input type =“button”value =“确定”>
2，<input type =“submit”>提交
3，<input type =“reset”>重置

二，标签标签

选中默认被选择; radio单选名称属性必须一致。
<input type =“radio”name =“sex” id =“nan” checked =“checked”/> <label for =“nan”>男</ label>
<input type =“radio”name =“sex”id =“nv”/> <label for =“nv”>女</ label>

复选框也如同
<input type =“checkbox” id =“kk” /> <label for =“kk”> 10天内免登陆</ label>

所有表单元素都有标签，标签标签作用于选择框和文字，简言之，就是用户点击选择框和文字都可以选择内容

下面是小练习，没有添加样式，有点丑。

<！DOCTYPE html>
<html lang =“en”>
<head>
<meta charset =“UTF-8”>
<title>表单元素</ title>
</ head>
<body>
<div>
用户名：<输入type =“text”> <br/> <br/>
密码：<input type =“password”> <br/> <br/> 性别
：<input type =“radio” name =“sex” id = “nan” checked =“checked” > <label for =“nan”>男</ label>
<input type =“radio” name =“sex” id =“nv”> <label for =“nv”>女< / label> <br/> <br/>
爱好：<input type =“复选框“id =”chi“checked =”checked“> <label for =”chi“>吃</ label>
<input type =”checkbox“id =”shui“checked =”checked“> <label for =”shui “>睡</ label>
<input type =”checkbox“id =”wan“checked =”checked“> <label for =”wan“>玩</ label> <br/> <br/>
城市：<select>
<option value =“”>北京</ option>
<option value =“”>上海</ option>
<option value =“”>广州</ option>
</ select> <br/> <br/>
个人简介：<input type =“textarea”> <br/> <br/>
<input type =“button”value =“确定”>
<input type =“submit”>
<input type =“reset “>
</ div>
</ body>
</ html>

运行效果：