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属性值:

相关推荐
烛阴1 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者2 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
vivi_and_qiao2 小时前
HTML的form表单
java·前端·html
骑驴看星星a3 小时前
Vue中的scoped属性
前端·javascript·vue.js
四月_h3 小时前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
qq_427506083 小时前
vue3写一个简单的时间轴组件
前端·javascript·vue.js
雨枪幻。4 小时前
spring boot开发:一些基础知识
开发语言·前端·javascript
lecepin4 小时前
AI Coding 资讯 2025.8.27
前端·ai编程
TimelessHaze5 小时前
拆解字节面试题:async/await 到底是什么?底层实现 + 最佳实践全解析
前端·javascript·trae
执键行天涯5 小时前
从双重检查锁定的设计意图、锁的作用、第一次检查提升性能的原理三个角度,详细拆解单例模式的逻辑
java·前端·github