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

相关推荐
活宝小娜2 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点2 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow2 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic3 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā3 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727575 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart5 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter