-
2021-06-14 03:30:55
HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入框(INPUT type=password),单选输入框(INPUT type=radio),复选输入框(INPUT type=checkbox),重置按钮、提交按钮、隐藏域、等等。
一、文本域
二、密码域
密码跟文本框类似,但是在里面输入的内容显示为圆点。
三、单选按钮
男人: Male
女人: Female
四、复选框
五、按钮
六、重置按钮
当点击重置按钮时,重置按钮所在的表单将全部清空,而其他表单不受影响。
七、提交按钮
当点击提交按钮时,浏览器将自动提交表单。
八、隐藏域
隐藏域在浏览器中并不显示,仅仅为保存一些不太重要的资料而存在。
九、上传域
十、图片按钮
十一、下拉列表
0
1
2
例如:
属性:disabled,可选值:disabled ,说明:规定禁用该下拉列表。
十二、label
abel 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。例如,当将单选按钮放在label内。则点击label内的文字也会触发单选按钮,而不必只是点中小圆点。
例如:
男人
女人
十三、禁用(disabled)与只读(readonly)
禁用和只读属性。readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去。
禁用文本框:
只读文本框:
十四、TextArea
十五、fieldset 定义域
fieldset用于给表单元素分组,legend用于设置分组标题。
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签,这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域,包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮,包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
更多相关内容 -
常见的表单元素有哪些?各有什么属性?
2019-05-29 19:52:11【常见的表单元素有哪些?各有什么属性? 】 大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。 表单元素是允许用户在表单中(比如:文...这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【常见的表单元素有哪些?各有什么属性? 】
大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。
表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的元素,最主要的作用就是收集信息。表单元素是页面中不可缺少的元素,在最新的H5中,表单元素也新增了一些属性,在页面构建中发挥了重要的作用。一般来说,表单包含如下几个部分:
1. 提示信息:表单中包含的说明性文字
2. 表单控件:包含了具体的表单功能项
3. 表单域:容纳所有表单控件和提示信息
常用的表单元素,包括:
1. form: 定义供用户输入的表单。
2. fieldset: 定义域。即输入区加有文字的边框。
3. legend:定义域的标题,即边框上的文字。
4. label:定义一个控制的标签。如输入框前的文字,用以关联用户的选择。
5. input: 定义输入域,常用。可设置type属性,从而具有不同功能。
6. textarea: 定义文本域(一个多行的输入控件),默认可通过鼠标拖动调整大小。
7. button: 定义一个按钮。
8. select: 定义一个选择列表,即下拉列表。
9. option: 定义下拉列表中的选项。
接下来是对这些表单元素的具体分析。
<form name="" action="" method="get">……</form>
name : 表单名称;action : 用来指定表单处理程序的位置(url);method : 定义表单结果从浏览器传送到服务器的方式,默认为"get"(也可以是post)
<input type="" name="" value="" size="">
name:控件名称;value:input控件默认文本值;size:input控件在页面中的显示宽度(必须是正整数)
input常用type属性如下:
1. text:单行文本输入框,可以通过正整数的size控制框长度。
2. password:密码输入框。
3. radio:单选按钮,同一组的单选按钮必须要有相同的name。
4. checkbox:复选框,同一组的单选按钮必须要有相同的name。
5. button:普通按钮。
6. submit:提交按钮,每出现一次,一个 Submit 对象就会被创建。
7. reset:重置按钮,会重置当前表单中全部的内容。
8. image:图像形式的提交按钮,写法是“”。
9. hidden:隐藏域,隐藏字段对于用户是不可见的。
10. file:文件域,用于文件上传。
<select size="" multiple="multiple">
<option hidden>选项1</option>
……
</select>
size:下拉菜单的可见选项数;multiple:多选。
在最新的html5中,有一些表单的新增属性,多用于js,如
datalist : 定义填写一个input时,提示几个option用于提示。可通过input的list特性与此元素作关联。
output : 表示计算的结果。可通过for特性与其它能够影响运算的元素(如input)作关联。
还有一些新增的type属性:
1. search:input会呈现为搜索框(与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容)。
2. tel:编辑电话号码的控件,提交时换行符会自动从输入框中去掉。
3. url:编辑url的控件,提交时换行符与首位的空格都将自动去除。
4. email:可输入一个邮件地址。
5. color : 选择颜色的控件。
6. date : 选择年月日的控件。
此外,还有time、datetime、datetime-local、month、week、number、range类型。
html5中input新增的一些较常用的特性:
1. list:关联datalist所用的该datalist的id(即datalistform外建立,通过list关联即可)。
2. pattern:一个正则表达式,用于检查控件的值,可作用于text、search、tel、url、email类型的input。
3. form:一个字符串(为关联的form表单的id),用于表明该input属于哪个form表单(作用类似list)。
4. formmethod:表明使用GET还是POST,能覆盖form表单的method。仅在type为image或submit,且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。
5. readonly:一个boolean值,表明该input值是否能被用户修改,可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。
6. maxlength:type为text、emal、search、password、tel或url(都为文本)时允许输入的最大字符个数。
7. autocomplete:浏览器是否根据之前提交的输入情况对此input自动填值(即以option形式匹配之前的输入值),取值on或off,默认on。如在登陆页面不想显示上一个登陆的用户名等时,可设置为off。
参考文献
1. html元素-表单元素及实用属性:http://blog.csdn.net/qq_19865749/article/details/52490882" target="_blank"
2. W3School HTML 表单 : http://www.w3school.com.cn/html/html_forms.asp" target="_blank"
3. HTML5-input元素新特性 :http://blog.csdn.net/garvisjack/article/details/63683201#Menu3-date
相关ppt见:https://ptteng.github.io/PPT/PPT/css-04-%E8%A1%A8%E5%8D%95.html#/
腾讯视频:https://v.qq.com/x/page/o05246f2ah7.html
问题整理
1. 使用input上传文件或图片应该怎么办
涉及到angularjs,可参考插件https://github.com/nervgh/angular-file-upload
2. input为什么不使用闭合标签
input为自闭和标签,详见W3C标准
3. type="number"在输入框右侧有上下箭头可以加减数字,怎么去掉箭头?
使用type="tel"时没有右侧上下箭头
-
js 使FORM表单的所有元素不可编辑的示例代码
2020-10-26 19:47:38使FORM表单的的所有元素不可编辑的方法有很多,在本文将为大家详细介绍下,js是如何做到的,感兴趣的朋友不要错过 -
vue 实现input表单元素的disabled示例
2021-01-19 20:56:34重点是怎么在Vue组件中实现 checkbox的disabled, 哈 这个肯定是需要使用元素绑定的 Vue做这个操作可以实现disabled input元素的传递, 这个就很秒了 解决 <input type=checkbox :disabled= > 具体解决方案如下... -
HTML表单元素、表单控件
2020-10-18 15:54:23CSS-01 ...(1)表单元素 (2)表单控件 表单就是从浏览器向服务器传输数据的手段 表单元素: 用来声明数据提交的范围,只有在此元素内的数据可以提交给服务器。 定义表单:使用成对的<form>&lHTML表单元素、表单控件
HTML工作原理
HTML是部署在服务器上的文本文件根据HTTP协议,浏览器发出请求给服务器,服务器做出响应,给浏览器返回一个HTML浏览器解释执行HTML,从而显示出内容
HTML部署在服务器上,运行在浏览器上表单
表单用于显示、收集信息,并提交信息到服务器
表单二要素:- (1)表单元素
- (2)表单控件——
<input>
元素中的,各个type属性值
表单元素 表单控件 input text——文本框 label——管理表单中的文本 password——密码框 select——下拉选 radio——单选按钮 textarea——文本域 checkbox——多选按钮 - hidden——隐藏文本域 - file——文件上传组件 - submit——提交按钮 - reset——重置按钮 - button——普通按钮 新增表单控件 email url search——此类型表示输入的将是一个搜索关键字 number / range——不同的数字输入模式 color——让用户通过颜色选择器选择一个颜色值,并反馈到value中 date——日期和时间选择器 表单就是从浏览器向服务器传输数据的手段
-
定义表单:使用成对的
<form></form>
标记,表示要将此元素中所涵盖的控件中的数据传输给服务器 -
主要属性:
(1)action:表单提交的URL
(2)method:指出表单数据提交的方式
(3)enctype:表单数据进行编码的方式
input元素 :他们之间用type属性区分。
- 1、文本框:
<input type="text"/>
- 2、密码框:
<input type="password"/>
主要属性:
(a)value属性:由访问者自由输入的任何文本
(b)maxlength属性:限制输入的字符数
(c)readonly属性:设置文本控件只读
(d)name属性:当提交form时,name作为元素标识被发送到服务器 - 3、单选框:
<input type="radio"/>
- 4、复选框:
<input type="checkbox"/>
主要属性
(a)value:文本,当提交form时,如果选中了此按钮,那么value就被发送到服务器
(b)name:用于实现分组,一组单选框或者复选框的名称必须相同
(c)checked:设置选中
(d)id:元素的唯一标识,相当于元素的身份证号。任何元素都可以有id,程序员有义务保障元素的id不重复。id属性与<label></label>
标签配合,可用于使选项后的文字可被点击来选中选项。
效果:
- 5、隐藏域:
<input type="hidden"/>
在表单中包含不希望用户看见的信息 - 6、文件选择框:
<input type="file"/>
选择要上传的文件
- 7、提交按钮:
<input type="submit"/>
传送表单数据给服务器端或其它程序处理 - 8、重置按钮:
<input type="reset"/>
清空表单的内容并把所有表单控件设置为最初的默认值 - 9、普通按钮:
<input type="button"/>
用于执行客户端脚本,没有任何功能,需通过js定义功能。
主要属性:
value:按钮的名字
其他元素(3个);
1、
<label>
: 用来管理表单中的文本,可以将文本与控件绑定在一起,从而增加了控件的受力面积。
语法:<label for="控件ID">文本</label>
主要属性:- for:设置该文本所关联的控件ID,关联后点击标签等同于点
击控件
id:元素的唯一标识,相当于元素的身份证号。任何元素都可以有id,程序员有义务保障元素的id不重复。
- 2、
<select>
: 下拉选
selected:默认选中
- 3、
<textarea>
:文本域
相当于多行文本框
语法:
<textarea>文本</textarea>
主要属性:
cols:指定文本区域的列数
rows:指定文本区域的行数
readonly:只读
-
最常用的表单控件input元素的30个元素属性
2020-01-15 21:59:38form元素只是一个数据获取元素的容器,而容器内的元素称为表单控件。最常用的表单控件是input元素 accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统...form元素只是一个数据获取元素的容器,而容器内的元素称为表单控件。最常用的表单控件是input元素
accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性
autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性
传统属性
name
name属性用于规定input元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过javascript引用表单数据
注意:只有设置了name属性的表单元素才能在提交表单时传递它们的值
type
type属性用来规定input元素的类型
注意:如果input元素没有设置type属性,或者设置的值在浏览器中不支持,那么输入类型会变成type=“text”
accept
accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型,然而它只是建设性的,并很可能被忽略,它接受逗号分隔的MIME类型
注意:该属性只能与type="file"配合使用
<input type="file" accept="image/gif,image/jpeg,image/jpg">
alt
alt属性为图像输入规定替代文本,功能类似于image元素的alt属性,为用户由于某些原因无法查看图像时提供备选信息
注意:alt属性只能与type="image"的input元素配合使用
<input type="image" src="#" alt="测试图片">
checked
checked属性规定在页面加载时应该被预先选定的input元素,也可以在页面加载后,通过javascript进行设置
注意:checked属性只能与type="radio"或type="checkbox"的input元素配合使用
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧 (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划) <input type="radio" name="radio" value="1" checked> <input type="radio" name="radio" value="2"> <input type="checkbox" name="checkbox" value="1"> <input type="checkbox" name="checkbox" value="2"> <script> var oInput = document.getElementsByTagName('input'); for(var i = 0,len = oInput.length; i < len; i++){ oInput[i].onmouseover = function(){ this.checked = 'checked'; } } </script>
disabled
disabled属性规定应该禁用input元素。被禁用的字段是不能修改的,也不可以使用tab按键切换到该字段,但可以选中或拷贝其文本
[注意1]disabled属性无法与type="hidden"的input元素一起使用
[注意2]对于IE7-浏览器必须设置为disabled=“disabled”,而不可以直接设置disabled,否则使用javascript控制时将失效
<button id="btn1">输入域可用</button> <button id="btn2">输入域不可用</button> <input id="test" disabled value="内容"> <script> btn1.onclick = function(){ test.removeAttribute('disabled'); } btn2.onclick = function(){ test.setAttribute('disabled','disabled'); } </script>
readonly
readonly属性规定输入字段为只读。只读字段是不能修改的,但用户仍然可以使用tab按键切换到该字段,还可以选中或拷贝其文本
readonly属性可与type="text"或"password"的input元素配合使用
注意:IE7-浏览器不支持使用javascript控制readonly属性
<button id="btn1">输入域只读</button> <button id="btn2">输入域可读写</button> <input id="test" value="内容" readonly> <script> btn1.onclick = function(){ test.setAttribute('readonly','readonly'); } btn2.onclick = function(){ test.removeAttribute('readonly'); } </script>
maxlength
maxlength属性规定输入字段的最大长度,以字符个数计
注意:该属性只能与type="text"或type="password"的input元素配合使用
<input maxlength="6"> <input type="password" maxlength="6">
size
size属性对于type="text"或"password"的input元素是可见的字符数;而对于其他类型,是以像素为单位的输入字段宽度
注意:由于size属性是一个可视化的设计属性,推荐使用CSS来代替它
<input size="1"> <input type="password" size="2">
src
src属性作为提交按钮显示的图像的URL
注意:src属性只能且必须与type="image"的input元素配合使用
<form action="#"> <input name="test"> <input type="image" src="https://demo.xiaohuochai.site/submit.jpg" width="99" height="99" alt="测试图片"> </form>
value
value属性为input元素设定值。对于不同的输入类型,value属性的用法也不同:
type=“button”、“reset”、"submit"用于定义按钮上的显示的文本
type=“text”、“password”、"hidden"用于定义输入字段的初始值
type=“checkbox”、“radio”、"image"用于定义与输入相关联的值
[注意1]type="checkbox"或"radio"必须设置value属性
[注意2]value属性无法与type="file"的input元素一起使用
<button id="btn1">1</button> <button id="btn2">2</button> <input id="test"> <script> btn1.onclick = btn2.onclick =function(){ test.value=this.innerHTML; } </script>
新增属性
autocomplete
autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时,浏览器基于之前键入过的值,显示出在字段中填写的选项
autocomplete属性适用form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
注意:IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效
<input name="test1" autocomplete="on"> <input name="test2" autocomplete="off"> 专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧 (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
autofocus
autofocus属性规定在页面加载时,域自动地获得焦点
autofous属性适用于button、input、keygen、select和textarea元素
<input name="test1"> <input name="test2" autofocus>
novalidate
novalidate属性规定在提交表单时不验证form或input域
novalidate属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
注意:IE9-浏览器不支持
height
height属性用于规定image类型的input标签的图像高度
注意:该属性只适用于image类型的input标签
width
width属性用于规定image类型的input标签的图像宽度
注意:该属性只适用于image类型的input标签
//http://127.0.0.1/form.html?test=123&x=38&y=57# <form action="#"> <input name="test"> <input type="image" src="submit.jpg" width="99" height="99"> </form>
list
大多数输入类型包含一个属性list,它和一个新元素datalist结合使用,这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示,而是为其他元素的list属性提供数据
list属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
注意:IE9-浏览器及safari浏览器不支持
min
min属性规定输入域所允许的最大值
max
max属性规定输入域所允许的最小值
step
step属性为输入域规定合法的数字间隔
min、max、step属性适用于以下类型的input元素:date pickers、number、range
<input type="number" min="0" max="10" step="0.5" value="6" />
<input type="range" min="0" max="10" step="0.5" value="6" />
multiple
multiple属性规定按住ctrl按键,输入字段可以选择多个值
该属性适用于type="email"和"file"的input元素
注意:该属性IE9-浏览器不支持
<button id="btn1">打开文件多选</button> <button id="btn2">关闭文件多选</button> <br><br> <input id="test" type="file" multiple> <script> btn1.onclick = function(){ test.setAttribute('multiple',''); }; btn2.onclick = function(){ test.removeAttribute('multiple'); }; </script>
pattern
pattern属性规定用于验证input域的模式。模型pattern是正则表达式
pattern属性适用于以下类型的input元素:text、search、url、tel、email、password
注意:IE9-浏览器及safari浏览器不支持
<form action="#"> <input pattern="\d{3}"> <input type="submit"> </form>
placeholder
placeholder属性提供占位符文字,描述输入域所期待的值。占位符会在输入域为空时显示出现,在输入域获得焦点时消失
placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password
注意:IE9-浏览器不支持
<form action="#"> <input type="tel" placeholder="请输入数字" pattern="\d{11}"> <input type="submit"> </form>
要修改placeholder的颜色需要使用::placeholder
::placeholder{color:green;}
required
required属性规定必须在提交之前填写输入域(不能为空)
required属性适用于以下类型的input元素:text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file
注意:IE9-浏览器及safari浏览器不支持
<form action="#"> <input required> <input type="submit"> </form>
form
form属性规定输入域所属的一个或多个表单,form属性必须和所属表单的id
form属性适用于所有input标签的类型,若需要引用一个以上的表单时,用空格分隔
注意:IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效
<form id="form" action="#"> <input type="submit"> </form> <input name="test" form="form">
表单重写属性
表单重写属性允许重写form元素的某些属性设定。其中,formnovalidate适用于button或input元素,而其他属性适用于submit或reset的button或input元素
formaction
重写表单的action属性
<form action="#" > First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="提交" /><br /> <input type="submit" formaction="#" value="以管理员身份提交" /> </form>
formenctype
重写表单的enctype属性
<form action="#" method="post"> First name: <input type="text" name="fname" /><br /> <input type="submit" value="提交" /> <input type="submit" formenctype="multipart/form-data" value="以multipart/form-data编码提交" /> </form>
formmethod
重写表单的method属性
<form action="#" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="提交" /> <input type="submit" formmethod="post" formaction="#" value="使用POST提交" /> </form> 专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧 (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
formnovalidate
重写表单的novalidate属性
<form action="#" method="get"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="提交" /><br /> <input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" /> </form>
formtarget
重写表单的target属性
<form action="#"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="提交" /> <input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" /> </form>
-
表单元素样式自定义
2018-01-15 11:42:24原理:在需要自定义样式的表单元素外包装一层dom元素,然后控制dom的外观。 便捷:不需要有什么特殊的布局要求直接在您需要修改外观的表单元素上添加置顶类名即可。 兼容:自定义样式无兼容问题。 取值:使用原表单... -
下列属于表单控件的是
2021-06-13 11:26:05下面关于表单控件基本操作的陈述中,哪个是正确的下面关于表单控件基本操作的陈述中,哪个是正确的 搜索资料 我来答 分享 微信扫一扫 网络繁忙请稍后重试 新浪微博 QQ空间 举报 浏览14 次 本地图片 图片表单控件名... -
表单及表单新增元素(示例代码)
2021-06-10 15:14:29要想更好运用表单就要了解表单的的更多元素与属性,首先看看对表单基本了解。表单的基本了解 元素用于用户输入数据的收集 元素是最重要的表单元素,有许多type其中是用于向表单处理程序提交表单的按钮。 元素元素... -
HTML里的form表单元素总结
2021-05-24 20:54:37元素通常是用来采集用户输入信息的表单控件,也可以包含其他元素,如段落、标题等。但是,不能包含另一个<from>元素,即<from>元素不能嵌套。 补充:method属性--------method属... -
H5新增表单元素、控件
2019-09-24 18:51:43• HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下。 • ①email、②url、③number、④range • ⑤Date pickers (date, month, week, time, datetime, datetime-local) • ... -
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
2020-07-30 19:05:54注意: 表单元素最常用的是input 在input框选中时显示的样式 2.css的元素显示模式 html元素一般分为块元素和行内元素 (1)块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③... -
HTML 5新增表单元素(案例详解)
2019-04-09 15:35:58datalist元素定义输入框的选项列表,选项列表是通过该元素内的option元素进行创建的。 该元素与input元素配合使用,来定义input可能的值。 要把这个datalist元素定义的选项列表绑定到输入框,将input元素的list属性... -
html5(新增input类型新增表单元素&新增表单属性&HTML5自带表单验证)
2019-03-13 22:50:17这是表单元素的一个属性,可以用于表单验证,该属性主要利用validityState对象,描述元素的有效状态;validityState对象,代表元素是否通过验证,它提供了一些属性,可以用于描述指定元素的验证状态。 语法:表单... -
HTML 表单元素的基本样式
2018-02-22 17:48:53表单元素的样式CSS 表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。根据功能的不同,input 元素又包括 text... -
块级元素和内联元素及可变元素汇总
2021-01-19 21:22:13块元素(block element) p – 段落 pre – 格式化文本 table – 表格 ol – 排序表单 ul – 非排序列表 address – 地址 blockquote – 块引用 center – 居中对齐块 div – 常用块级 ... -
[HTML5]:所有表单元素的使用方式(附元素属性)
2017-09-10 18:36:59在HTML文档中,表单用于在网页中收集用户输入的数据,负责数据采集功能,表单元素有如下标签。 定义一个表单,用于申明采集数据的区域范围。里面可以嵌套其他表单元素 -
关于使用element表单进行动态表单验证的问题(表单元素显示隐藏)
2020-11-05 16:49:36关于element表单进行动态表单验证的问题 这篇文章主要是对我在使用element表单验证时遇到的一个验证失败的问题总结。 业务: 页面上点击新增时弹出一个对话框,对话框有由form表单和切换按钮构成,打开或关闭切换... -
网页中常见的元素有哪些
2021-06-17 13:58:21网页中的常见元素主要包括以下几种类型:文本、图象、动画、视频音乐、超链接、表格、表单和各类控件等。1、文本:文字能准确地表达信息的内容和含义,且同样信息量的文本字节往往比图象小,比较适合大信息量的网站... -
功能强大的jquery.validate表单验证插件
2021-01-19 16:07:36本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体... 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点击、获取焦点、失去焦点等事件,并设置这些事件对应的执行函数; 3).css样式 -
html元素 —— 表单元素及实用属性
2016-09-09 22:08:28一、常用表单元素 :定义供用户输入的表单。 :定义域。即输入区加有文字的边框。 :定义域的标题,即边框上的文字。 :定义一个控制的标签。如输入框前的文字,用以关联用户的选择。 :定义输入域,常用。可设置type... -
layui框架form表单 - 页面元素的按钮开关控制
2020-07-06 11:33:32下面是layui,form表单 - 页面元素开关按钮控制函数,可做参考: functionchangeOneSwitch(){ if($("input").prop('checked')){ //如果当前是选中,执行此代码 $("input").prop('checked',false) }else{ //如果... -
H5--新增表单元素&控件&属性&事件
2019-09-24 19:06:56HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容: 接下来依次介绍下H5 新增的表单控件类型,所有案例均用谷歌浏览器展示 1、type=“email” 限制用户输入为邮箱类型(即输入内容... -
Vue学习系列 -- v-model指令与表单元素学习
2019-05-26 22:39:25这一节我们主要要学习的就是v-model指令,v-model用于表单类元素上双向绑定数据。 常见的表单元素就是input textarea 单选按钮 双选按钮 下拉列表等。这里,我做了一个简单的注册表单信息提交demo,并将用户提交的... -
HTML form表单新增元素
2017-08-30 21:44:50相信大家对html中表单不陌生吧,下面我们来聊一下在H5里面表单新增的元素和废弃元素。 4表单相关新增元素和属性 4.1表单元素新增和废弃的属性 表单新增的属性可以分成2类: 提交类:提交给服务器设置的相关... -
jQuery使用之标记元素属性用法实例
2020-10-24 21:01:27主要介绍了jQuery使用之标记元素属性用法,实例分析了jQuery如何控制页面,包含元素的属性、css样式风格、DOM模型、表单元素和事件处理等使用技巧,需要的朋友可以参考下