H5中的label、textarea、select标签
一、 label标签
1，如果你想让点击input输入框左边的文字就可以让输入框获取焦点，就可以使用label标签把文字和input包裹起来。
2，如果label里面有多个表单，想定位到某个，可以通过 for id的格式来实现。
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><label>姓名：<input type="text"></label><br/><br/><br/><label for="two">电话： <input type="number"> <input type="number" id="two"></label>
</body>
</html>预览
二、textarea标签
该标签用于创建可以输入多行的文本框，文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。
属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | autofocus | 使文本框获取焦点 |
| cols | number | 指定文本域内可见的列数 |
| rows | number | 指定文本域内可见的行数 |
| disabled | disabled | 禁用文本区域 |
| form | form_id | 定义文本区域所属的一个或多个表单。 |
| maxlength | number | 允许输入的最大字数 |
| name | text | 文本的名称 |
| placeholder | text | 文本的剪短提示 |
| readonly | readonly | 文本只读 |
| required | required | 文本为必填项 |
| wrap | soft或者hard | soft时：在表单提交时，textarea中的文本不换行。默认值，hard：在提交表单时，textarea中的文本换行（包含换行符），当使用“hard”时，必须指定cols属性。 |
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action=""><textarea rows="10" cols="20" placeholder="说出您的感想～" autofocus></textarea><input type="submit"></form></body>
</html>预览：
三、select 标签
用来创建下拉列表，列表项用option定义，select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提交给服务器时包括 name 属性。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | autofocus | 获取焦点 |
| disabled | disabled | 禁止点击选择 |
| form | form_id | 定义select所属的表单 |
| multiple | multiple | 设置为可多选 |
| name | name | 定义下拉列表的名字 |
| required | required | 提交表单时必须选择一个 |
| size | number | 规定下拉选项的可见数量 |
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
选择你喜欢的四大名著之一：
<select autofocus size="1"><option>西游记</option><option>红楼梦</option><option>水浒传</option><option>三国演绎</option>
</select>
<br/><br/><br/><br/>
选择你喜欢的职业：
<select size="3" multiple><option>老师</option><option>医生</option><option>会计</option><option>厨师</option><option>护士</option><option>飞行员</option><option>空姐</option><option>程序员</option><option>产品经理</option>
</select>
</body>
</html>预览：
H5中的label、textarea、select标签相关推荐
- php 修改select标签,JS修改input,textarea,select标签的可读可写属性
通过JS修改input,textarea,select标签的可读可写属性 首先,控制input,与textarea只读属性是 readonly 在js中 可以这样去改变,这里要注意js中O要大写 re ...
- 有关在html中修改select标签的option selected默认选中属性实现
着急想要解决办法的朋友可以直接看最后的内容:} 一般我们使用select标签时大概都会使用到option标签来填充下拉框中的内容 只有几个固定的内容写死在页面还好,可能是这样的: <select ...
- 总结HTML中不经常使用的标签
参考链接:HTML参考手册 过时的标签: 全部浏览器均兼容的标签 1.<abbr></abbr>标记一个缩写 The <abbr title="People's ...
- html select样式修改,select标签的默认样式修改
在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通 ...
- 第一篇-Html标签中head标签，body标签中input系列，textarea和select标签
第十四周课程(1-12章节) HTML 裸体 CSS 穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...
- label标签在H5中的应用
一.label标签的作用 label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单内容上. 在HTML中标签不会向用户展示任何特殊内容,它的作用是把自己与其他标 ...
- html5 video js控制摄像头的焦距,H5中使用video标签实现选择摄像头功能的示例
H5中使用video标签实现选择摄像头功能的示例 发布时间:2020-12-05 10:48:03 来源:亿速云 阅读:91 作者:小新 小编给大家分享一下H5中使用video标签实现选择摄像头功能的 ...
- struts2中s:select标签的使用
1 静态生成 <s:select name="user.sex" list="#{'0':'男','1':'女'}" label="性别&quo ...
- struts中select标签的使用
1 静态生成 <s:select name="user.sex" list="#{'0':'男','1':'女'}" label="性别&quo ...
最新文章
- python 元组是有序不可变的类型
- 【解决线程安全问题：通过Lock锁对象】
- 35. Leetcode 328. 奇偶链表 (链表-双指针)
- 微型计算机课程介绍,微机原理及应用课程教学大纲教案
- Java NIO教程
- 初学C遇到的一些知识点汇总
- devops_将DevOps带到教室
- Unity搭建简单的图片服务器
- 把杀某程序封装成sh
- PostgreSQL“ DESCRIBE TABLE”
- Linux学习笔记（12）
- java中的银行界面开发_ATM机银行项目java图形界面
- ART艺术作品相关公开数据集
- 图像融合算法及多视角（多源）信息融合总结
- 保角变换法matlab编程,保角变换法.ppt
- Mac Android Studio Flutter环境配置之第一个Futter项目
- DataX Transformer 源码分析及 UDF 扩展与使用
- Django入门-6：视图-HttpReqeust对象
- 目标检测经典论文——R-CNN论文翻译：Rich feature hierarchies for accurate object detection and semantic segmentation
- Python的列表、元组、字典