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表单标签中才可使用

相关推荐
突然暴富的我几秒前
html三级菜单
前端·html
性野喜悲31 分钟前
vue通过后台返回的数字显示不同的文字内容,多个内容用、隔开
前端·javascript·vue.js
袁亦袁35 分钟前
通过属性透传,iview Table组件实现自适应高度
javascript·vue.js·iview
武汉前端开发蓝风1 小时前
前端Debugger时复制的JS对象字符转JSON对象
前端·javascript·json·debugger
爱编程的鱼1 小时前
HTML如何在图片上添加文字
前端·javascript·html
顶顶年华正版软件官方1 小时前
关键帧功能怎么使用 关键帧控制视频特效怎么用 会声会影视频剪辑软件教程
前端·javascript·音视频·学习方法·关键帧·会声会影教程·视频剪辑软件
来之梦2 小时前
uniapp自定义富文本现实组件(支持查看和收起)
前端·javascript·uni-app
森叶2 小时前
Electron开发 - 如何在主进程Main中让node-fetch使用系统代理
前端·javascript·electron
睿麒2 小时前
前端八股文 说一说样式优先级的规则是什么?
前端
甜兒.2 小时前
禹神electron学习~
javascript·学习·electron