HTML表单标签

HTML表单标签作用:收集用户信息,例如登录、注册、搜索等场景。

1. input标签

语法:<input type="...">

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

占位文本

作用:提示信息

<input type="..." placeholder="提示信息">

2. 单选框radio

单选radio需要通过name属性来分组。

html 复制代码
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女

3.多选框checkbox

多选框也叫复选框,默认选中:checked。

html 复制代码
<input type="checkbox" checked">内容

4. 上传文件file

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

html 复制代码
<input type="file" multiple>

5. 下拉菜单

语法:标签:select嵌套option,select是下拉菜单整体,option是下拉菜单的每一项。

html 复制代码
<select>
 <option>北京</option>
 <option>上海</option>
 <option>广州</option>
 <option>深圳</option>
 <option selected>武汉</option>
</select>

6. 文本域

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

标签:<textarea>默认提示文字</textarea>

7. label标签

作用:网页中,某个标签的说明文本

增大点击范围:用label标签绑定文字和表单控件的关系,增大表单控件的点击范围。

  • 写法1:

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

设置label标签的for属性值和表单控件的id属性值相同。

html 复制代码
<input type="radio" id="man"><label for="man">男</label>
  • 写法2:

使用label标签包裹文字和表单控件,不需要属性。

html 复制代码
<label><input type="radio">女</label>

8. 按钮button标签

语法:<button type="">按钮</button>

type属性值:

相关推荐
yume_sibai33 分钟前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript
Hyyy1 小时前
很多Desktop都在上的Computer Use是什么
前端·llm
慢功夫1 小时前
开篇:VS Code 为什么不是一个普通 React App
前端·visual studio code
你挚爱的强哥1 小时前
Vue2 实现 1.5s 十连击监听(连续点击若干次),封装通用可复用点击检测工具,不用 data!Vue 封装通用连击监听方法,支持自定义时长与点击次数
前端·javascript·vue.js
huashengzsj2 小时前
Shopify个人建站如何搭建独立站:从零开始的完整指南
前端·网络·人工智能
程序猿小泓2 小时前
从 Claude Code 学 Agent Harness:一个前端工程师的 AI Agent 学习笔记
前端·人工智能·学习
柒和远方3 小时前
从审计日志到可下载证据包:事务型 Outbox、租约 fencing 与保留水位
前端·后端·架构
minglie13 小时前
npm ali-oss库依赖冲突
前端·npm
CryptoPP3 小时前
BSE股票K线数据接入实战:从接口调用到前端图表展示
大数据·前端·网络·人工智能·websocket·网络协议
Random_index5 小时前
#Vue3篇: Vue 项目发版后如何提示用户刷新?基于 package.json 版本号的前端更新检测方案
前端·vue.js·json