html中input、label、form、textarea、select

表单input：
表单是用来收集信息的，由表单控件(表单元素)、提示信息、表单域构成。

input控件的属性及值：

除以上属性外，input元素type属性还有一个number属性值，此为仅可以填数字，默认是可以选择或者填写任意数字，但是当type属性为number属性值时，可以使用max和min属性来限制数字的取值范围，input更多属性见HTML5

 <input type="number" min="0"> <!-- min属性限定最小值为0 -->

label标签：

label标签是为input标签服务的，用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

 <label> <!-- 1、直接使用label标签包裹要点击的元素获得焦点 -->姓名：<input type="text"></label><label for="name">姓名：</label> <!-- 2、使用label标签的for属性找input元素获得焦点 --><input id="name" type="text"/>

表单域form：

form元素用于创建一个表单，form中的所有内容都会被提交给服务器;默认form标签中需要有一个submit按钮，如果form里面没有submit按钮，那么可以使用button中type属性为submit的button按钮，这个buttont按钮可能不在form表单中，此时可以给type属性值为submit的button添加form属性，值为form表单的id值，如：

  <form action="" method="get" name="" id="userform"> <!-- action属性是指定表单提交给后端的地址，method属性设置提交方式，其属性值有post和get,name属性用来给表单域定义名字，用于区分表单域 -->姓名：<input type="text">年龄：<input type="number" min="0"></form><button type="submit" form="userform">提交</button>

文本域textarea：

input元素只能显示一行内容，textarea元素可以显示多行，一般做留言效果使用，常常被称为富文本域。

  <!-- rows属性限定行数，当行数超过限定后会出现滚动条，cols属性限定的是列数，当超过限定后会换行。 --><textarea cols="20" rows="10"></textarea>

UEditor：
在实际开发中如果需要用到比较复杂的富文本域（类似word的，可以上传视频图片等功能）推荐使用第三方插件，这里推荐大家一款使用的富文本插件：UEditor,使用它可以在网页中实现类似word等编辑，如果想要了解更多及方法请查阅官方文档：http://fex.baidu.com/ueditor/，当然类似的富文本编辑器还有很多，如：CKeditor：https://ckeditor.com/等

富文本编辑器可以自己做，其原理是利用document的execCommand()方法，这个方法实际开发中很少用，已经废弃，所以一般很少有人了解，如果想要了解更多，可阅读官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜单)select：

 <body><select name="" id=""><optgroup value="" label="分组1"><!-- optgroup标签用来分组 -->><option value="">测试1</option><option value="">测试2</option><option value="">测试3</option></optgroup><optgroup value="" label="分组2"><option value="">选项1</option> <!-- select默认选择第一个option，当给option加selected属性时，则会选中此项显示 --><option value="" selected="selected">选项2</option> <!-- selected属性的selected属性值可以省略，其效果不变--><option value="">选项3</option></optgroup></select></body>

块引用标签：

有的时候会引用名人名言等，此时建议使用引用标签，引用标签分为长引用和短引用两种，长引用标签效果是插入换行和外边距，短引用标签的效果是加上虚拟的引号。

 <blockquote>海上生明月，天涯共此时。</blockquote><!-- 长引用标签 --><q>引号</q><!-- 段引用会给内容加上虚拟的引号，这个引号根本不存在。 -->

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

html中input、label、form、textarea、select相关推荐

第一篇-Html标签中head标签，body标签中input系列，textarea和select标签
第十四周课程(1-12章节) HTML 裸体 CSS 穿华丽衣服 Javascript 动起来一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...
H5中的label、textarea、select标签
一. label标签 1,如果你想让点击input输入框左边的文字就可以让输入框获取焦点,就可以使用label标签把文字和input包裹起来. 2,如果label里面有多个表单,想定位到某个,可以通过 ...
php 修改select标签,JS修改input,textarea,select标签的可读可写属性
通过JS修改input,textarea,select标签的可读可写属性首先,控制input,与textarea只读属性是 readonly 在js中可以这样去改变,这里要注意js中O要大写 re ...
reac笔记_13 form表单元素中 input/defaultValue + useState/useRef
目录原生html元素 input属性示例1 示例2 react中受控组件与非受控组件属性 error - input标签value属性使用示例 - useState 示例 - input标签 ...
js 控制表单input，textarea select为只读模式
$("#form input").attr('readonly','readonly'); $("#form textarea").attr('reado ...
css 选座,纯html+css中实现静态选座位效果技巧（input+label使用小技巧）
很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...
element 中input 或者 select 清空无用
element 中input 或者 select 清空无用 ::v-deep .el-input__icon{height: auto; }
HTML中简单的form元素及属性：
HTML中简单的form元素及属性: 1.作用:form表单主要用于收集用户的信息,并将form元素中收集到的内容提交到服务器. 2.input元素中常见的属性: type属性:常见的输入框如下: 名 ...
html 取消只读属性,浅谈html中input只读属性readonly和disable的区别
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textar ...
Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架一.input标签常用属性表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...

html中input、label、form、textarea、select

html中input、label、form、textarea、select相关推荐

最新文章

热门文章