HTML学习笔记--表单标签

这篇博客详细介绍了HTML中的表单元素,包括input标签的各种type属性,如text、radio、checkbox、file,以及select下拉菜单、textarea文本域、label标签的使用。此外,还探讨了语义化标签在布局中的应用。
摘要由CSDN通过智能技术生成

HTML学习笔记–表单标签

input标签及其type属性

input标签运用场景

在网页中显示一个收集用户信息的表单,如登录,注册,身份认证等。

标签名

input通过type属性值得不同,以展现不同效果。

type属性值及其说明

type属性值 说明
text 生成一个文本框,用于输入单行文本
password 生成一个密码框,用于输入密码
radio 生成一个单选框,用于进行多项选择选取在其中一项
checkbox 生成一个多选框,用于选取多项选择
file 文件选择,用于提交或上传文件
submit 提交按钮,用于提交功能
reset 重置按钮,用于重置界面
button 普通按钮,配合js添加相应功能
type的text值

在网页中显示输入单行的表单控件。

相关常用属性

placeholder占位符,显现出输入文本框的提示信息。

代码展示
<body>
    <!-- 1.文本框:text -->
    昵称:<input type="text" placeholder="请输入您的昵称">
</body>
运行效果

在这里插入图片描述

同理密码框(type=“password”)也可以以此方法进行设置

type的radio值

在网页中显示多选一的表单控件。

相关常用属性

name

表示分组,有相同属性的单选框分为一组,一组中只能有一个被选中。

checked

表示默认选中。

代码展示
  性别:<input type="radio" name="sex"><input type="radio" name="sex"><input type="radio" name="sex">保密
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值