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

相关推荐
王文?问6 分钟前
ESP32-S3 实战教程:本地语音识别控制 Web 塔防游戏,从固件到前端完整跑通
前端·游戏·语音识别
Hoshizola20 分钟前
uniapp与蓝牙设备连接详细步骤
前端·uni-app
优雅格子衫25 分钟前
uniapp 拍照相册选取后超级好用的裁剪组件,增加水印完全自定义
开发语言·前端·javascript·uni-app·vue
Dxy123931021629 分钟前
HTML如何写鼠标事件
前端·html·计算机外设
a11177636 分钟前
网页我的世界游戏 MC (html 开源)
游戏·开源·html
AI砖家42 分钟前
前端 JavaScript 异步处理全方案详解:从回调到 Observable
开发语言·前端·javascript
用户713874229001 小时前
构建现代 Web 应用的令牌安全体系:Refresh Token Rotation、HttpOnly Cookie 与 Grace Period 全解析
前端
之歆1 小时前
Day21_电商详情页核心技术实战:从LESS预处理到复杂交互实现
开发语言·前端·javascript·css·交互·less
海鸥两三1 小时前
基于 Vue 3 + 高德地图的网格规划系统实战(有源码)
前端·javascript·vue.js
丷丩1 小时前
MapLibre GL JS第11课:获取鼠标指针坐标
前端·javascript·gis·地图·mapbox·maplibre gl js