HTML(6)——表单

目录

input标签基本使用

input标签占位

单选框radio

上传文件file

下拉菜单

文本域

label标签

按钮


input标签基本使用

input标签type属性值不同,则功能不同

<input type="...">

type属性值 说明
text 文本框,用于输入单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件

input标签占位

<input type="..." placeholder="提示信息">,文本框和密码框都可使用。

单选框radio

属性名 作用 说明
name 控件名称 控件分组,同组只能选中一个
checked 默认选中 属性名和属性值相同,简写为一个单词

上传文件file

默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能。

<input type="file" multiple>

下拉菜单

标签:select嵌套option,select是下拉菜单整体,option是菜单的每一项,select表示默认选中,否则默认选中第一个。

<select>

<option>北京</option>

<option>上海</option>

<option>广州</option>

<option>深圳</option>

<option selected>怀化</option>

</select>

文本域

作用:多行输入文本的表单控件

标签:textarea,双标签

label标签

作用:网页中,某个标签的说明文本,可以增大表单控件的点击范围。

写法一:

label标签只包裹内容,不包裹表单控件。

设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man">

<labelfor="man">男</label>

写法二:

使用label标签包裹文字和表单控件,不需要属性
<label><input type="radio">女</label>

按钮

标签:

<button type="">按钮</button>

type属性值 说明
submit 提交按钮,点击后可以提交数据到后台(默认功能)
reset 重置按钮,点击后将表单控件恢复默认值
button 普通按钮,默认没有功能,一般配合JavaScript使用

需要放到form表单标签中才可使用

相关推荐
掘金酱几秒前
2025年度稀土掘金影响力榜单发布!
前端·人工智能·后端
GISer_Jing24 分钟前
AI编程革命:Trae如何重塑前端开发
前端·前端框架·aigc·ai编程
豌豆学姐29 分钟前
Sora2 视频生成 API 如何对接?附可直接使用的开源前端项目
前端·人工智能·开源·aigc·php
cz追天之路37 分钟前
华为机考 ------ 计算某字符出现次数
前端·javascript·华为机考
毕设源码-朱学姐43 分钟前
【开题答辩全过程】以 基于Web酒店管理的设计与实现为例,包含答辩的问题和答案
前端
talenteddriver1 小时前
Java Web:http请求在springboot项目中的传递层级(自用笔记)
java·前端·spring boot·http
咘噜biu1 小时前
Java后端和前端的接口数据加密方案(椭圆曲线集成加密方案)
java·前端·安全·aes·密钥协商ecdh·椭圆曲线集成加密方案
CodeSheep1 小时前
百度又一知名产品,倒下了!
前端·后端·程序员
阿芯爱编程1 小时前
前端面试题linux操作
前端·面试
Bug.ink1 小时前
BUUCTF——WEB(4)
前端·网络安全·靶场·ctf·buuctf