首页 / HTML / 了解HTML表单之13个表单控件_html/css_WEB-ITnose

了解HTML表单之13个表单控件_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了了解HTML表单之13个表单控件_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9594字，纯文字阅读大概需要14分钟。

内容图文

目录传统控件

button select option optgroup textarea fieldset legend label

新增控件

datalist keygen output progress meter

前面的话

　　input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、optgroup、textarea、fieldset、label、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件

传统控件

　　button 　　　　　　定义一个按钮

　　select 　　　　　　定义一个下拉列表

　　option 　　　　　　定义下拉列表中的一个选项

　　optgroup 　　　　定义选项组，用于组合选项

　　textarea 　　　　　定义多行的文本输入控件

　　fieldset 　　　　　分组表单内的相关元素

　　legend 　　　　　　定义fieldset元素的标题

　　label 　　　　　　定义input元素的标注

button

　　button元素用来定义一个按钮，button元素内部可以放置文本或图像或其他多媒体内容。但唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为

　　始终为button元素设置type属性，IE7-浏览器的默认类型是button，而其他浏览器的默认类型是submit

　　IE7-提交button元素之间的文本，而其他浏览器则会提交value属性的内容

//IE7-浏览器:按下提交按钮时，URL添加?btn=1//其他浏览器:按下button按钮时，URL添加?btn=2

【属性】

　　autofocus 　　　　规定当页面加载时按钮自动获得焦点

　　disabled 　　　　规定应该禁用该按钮

　　form 　　　　　规定按钮属性一个或多个表单

　　formaction 　　覆盖form元素的action属性

　　formenctype　　覆盖form元素的enctype属性

　　formmethod 　　覆盖form元素的method属性

　　formnovaliadate 覆盖form元素的novalidate属性

　　formtarget 　　覆盖form元素的target属性

　　name 　　　　规定按钮的名称

　　type 　　　　　　规定按钮的类型

　　value 　　　　　　规定按钮的初始值

select

　　select元素用来定义一个下拉列表，包含任意数量的option和optgroup元素

【属性】

　　autofocus 　　　　规定在页面加载后文本区域自动获得焦点

　　disabled 　　　　规定禁用该下拉列表

　　form 　　　　　　规定文本区域所属的一个或多个表单

　　multiple 　　　　规定可选择多个选项

　　name 　　　　　　规定下拉列表的名称

　　size 　　　　　　规定下拉列表中可见选项的数目

　　[注意]size不可为0，默认为1

【默认样式】

chrome/safari    border: 1px solid;    box-sizing: border-box;firefox    padding: 1px;    box-sizing: border-box;IE9+    border: 1px solid;    box-sizing: border-box;IE8-    border: 1px solid;

　　[注意]IE8-浏览器box-sizing:content-box;而其他浏览器box-sizing:border-box

【默认宽高】

chrome    width:65px;    height:16px;firefox    width:54px;    height:21px;safari    width: 56px;    height: 15px;IE8+    width:74px;    height:17px;

　　[注意]safari浏览器无法设置高度

option

　　option元素定义下拉列表中的一个选项

　　option元素有两种应用场景，除了用于下拉列表select外，还可以用于选项列表datalist中

　　详细信息移步至此

【属性】

　　disabled 　　　　　　规定此选项应在首次加载时被禁用

　　label 　　　　　　　定义当使用optgroup时所使用的标注，替代option元素内容

　　　　[注意]firefox不支持label属性

　　selected 　　　　　　规定选项在首次显示在列表中时表现为选中状态

　　value 　　　　　　定义送往服务器的选项值

　　　　[注意]当设置value值时，服务器提交的是value的值；否则提交给服务器的是option的元素内容

【默认样式】

chrome    padding: 0 2px 1px;

　　[注意]option无法设置margin、padding、border等盒模型样式

optgroup

　　optgroup元素定义选项组，用于组合选项

　　[注意]optgroup无法设置margin、padding、border等盒模型样式

【属性】

　　label 　　　　　　　为选项组规定描述(必须)

　　disabled 　　　　　规定禁用该选项组(可选)

textarea

　　textarea定义多行的文本输入控件，文本区可容纳无限数量的文本

　　[注意]浏览器不允许textarea嵌套textarea

【默认样式】

chrome/firefox/safari/IE    padding: 2px;    border: 1px solid;

【默认宽高】

chrome    width: 137px;    height: 30px;firefox    width: 181px;    height: 51px;safari    width: 181px;    height: 32px;IE9+    width: 160px;    height: 30px;

　　[注意]IE8-浏览器宽高设置不包含滚动条；其他浏览器宽高设置包含滚动条

【样式重置】

overflow: auto;resize: none;float: left;outline: none;

【属性】

　　name 　　　　规定文本区的名称

　　disabled 　　　规定禁用该文本区

　　[注意]IE7-浏览器不支持通过setAttribute('disabled','')的写法，必须设置为setAttribute('disabled','disabled')

　　readonly 　　规定文本区为只读

　　[注意]IE7-浏览器不支持通过javascript设置readonly属性

测试内容

　　form 　　　规定文本区域所属的一个或多个表单

　　[注意]IE浏览器不支持该属性

　　autofous 　　规定在页面加载后文本区域自动获得焦点

　　[注意]IE9-浏览器不支持该属性

　　required 　　规定文本区域是必填的

　　[注意]IE9-浏览器和safari浏览器不支持该属性

　　placeholder 　规定描述文本区域预期值的简短提示

　　[注意]IE9-浏览器不支持该属性

　　maxlength 　　规定文本区域的最大字符数

　　[注意]IE9-浏览器不支持该属性

　　cols 　　规定文本区内的可见列数

　　rows 　　规定文本区内的可见行数

　　[注意]可以用cols和rows来规定textarea的尺寸，但更好的办法是使用CSS的height和width属性

　　wrap 　　规定当在表单中提交时，文本区域中折行如何处理

　　当wrap="soft"，表示表单提交时，虽然文字在屏幕上折行，但提交的数据里不会有换行符(默认值)；而当wrap="hard"，表示表单提交时，提交的数据包含文本换行符%0D%0A

//hard:?test=111111111111111111111%0D%0A1#//soft:?test=1111111111111111111111111111#

fieldset

　　fieldset元素用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示fieldset

【默认样式】

chrome/firefox/safari    display:block;    margin: 0 2px;    border: 2px groove threedface;    padding: 5px 12px 10px;IE9+    display: block;    margin: 0 2px;    border: 1px solid;    padding: 3px 3px 4px;IE8    display: block;    margin: 0 2px;    border: 1px solid;    padding: 1px 3px 4px;IE7-    display: block;    border: 1px solid;    padding: 1px 3px 4px;

【属性】

　　disabled　　　　禁用fieldset

　　form 　　　　　　规定fieldset所属的一个或多个表单

　　name 　　　　　规定fieldset的名称

legend

　　legend元素用于定义fieldset元素的标题

    健康信息    身高：    体重：

label

　　label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上

　　label元素有两种用法：一种是使用for属性，另一种是将表单控件嵌套到label内部。但IE6浏览器只识别使用for属性的方法

【属性】

　　for 　　　　规定label绑定到哪个表单元素

　　form 　　　规定label字段所属的一个或多个表单

　　[注意]label标签的for属性要与相关元素的id属性相同

使用for方法
Male
Female使用嵌套方法
Male
Female

新增控件

　　datalist 　　　　定义输入域的选项列表

　　keygen 　　　　定义密钥对生成器，用于生成密钥

　　output 　　　　用于显示计算的结果

　　progress 　　用于显示进度(前进量)

　　meter 　　　　用于显示度量(剩余量)

datalist

　　datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输入域，需要把输入域的list属性引用datalist的id。option元素一定要设置value属性

　　[注意]IE9-浏览器及safari浏览器不支持

keygen

　　keygen规定用于表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器

　　[注意]safari和IE不支持该属性，chrome部分支持该属性

【属性】

　　autofocus 　　　　使用keygen字段在页面加载时获得焦点

　　challenge 　　　如果使用，则将keygen的值设置为在提交时询问

　　disabled 　　　　禁用keygen字段

　　form 　　　　　　定义该keygen字段所属的一个或多个表单

　　keytype 　　　　定义keytype，rsa生成RSA密钥(默认)

　　name 　　　　　定义keygen元素的唯一名称

//firefox: 1->usr_name=1&security=MIIBOjCBpDCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA1HUwmm%2B75QTnuDXC%0D%0AnUsL8cD8KkncFnA6TRaJttYss0Oi6dVzOPOtdK0O7wxD4%2BIhjSMZRD%2FddKFciZw0%0D%0AURyAimXxe%2FlDKmR3Nb1SzmqA7RJnns%2FA%2BduiYeeIIiMSL2ydUOvQvVFYMtaDkWra%0D%0AtpQfeWv1Hjz9hb7HlGzOUbtGrAECAwEAARYAMA0GCSqGSIb3DQEBBAUAA4GBAJ0I%0D%0ATWv7CdcNzqkaq5OpN6GHWtrlIpD5UAL%2FOiFDICb%2F8PFgV7FQk0MaGwj5XzQfEu4B%0D%0A6YlAbyz2l91I9%2FJW6Oerru5wL646OpvnTvD2U%2FzByU%2FHWp0BRNeDqntMAsGvzl6D%0D%0AoNsHTwLjDUGYVILge4syfcQVRpFRZiyVRaNlIJT9#

output

　　output元素用于显示计算的结果，这是一个语义化标签，定义不同类型的输出，比如脚本的输出

　　[注意]IE浏览器不支持该属性

【属性】

　　for 　　　　定义输出域相关的一个或多个元素

　　form 　　定义输入字段所属的一个或多个元素

　　name 　　定义对象的唯一名称

progress

　　progress元素用来标示任务的进度或进程

　　[注意]IE9-浏览器及safari浏览器不支持

【属性】

　　max 　　　　规定任务一共需要多少工作

　　value 　　　规定已经完成多少工作

下载进度：

meter

　　meter元素用于显示剩余容量或剩余库存

　　[注意]IE浏览器及safari浏览器不支持

【属性】

　　form 　　　　规定meter元素所属的一个或多个表单

　　high 　　　　规定被视作高的值的范围

　　low 　　　　规定被视作低的值的范围

　　max 　　　　规定范围的最大值

　　min 　　　　规定范围的最小值

　　optimum 　　规定度量的最优值

　　value 　　　规定度量的当前值(必需)

　　[注意]min 小于 low 小于 high 小于 max

库存量：

内容总结

以上是互联网集市为您收集整理的了解HTML表单之13个表单控件_html/css_WEB-ITnose全部内容，希望文章能够帮你解决了解HTML表单之13个表单控件_html/css_WEB-ITnose所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/404002.html

来源：【匿名】

【上一篇】12个网页实用的CSS框架_html/css_WEB-ITnose 【下一篇】PHP 和 HTML

更多 ►

【了解HTML表单之13个表单控件_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章

HTML表单

表单基础结构 1、表单介绍表单是HTML中很重要的一部分，主要功能是用来收集用户信息。用户提交表单后会将信息传送给服务器，实现用户与web服务器之间的交互。语法: <form> 表单元素（文本框、单选框、复选框、按钮、列表……） </form>*表单本身是不可见的，只有表单元素可见，所有的元素要写在表单内。 Form标签中，以下标签实现表单元素添加：标签描述<input>表单输入标签<select>菜单和列表标签<o...

html5 form表单常用标签【代码】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <form><input type="email"><input type="submit"><input type="tel"><input type="submit"><input type="url"><input type="submit"><input type="search"><input type="submit"><input type="r...

HTML 表单按钮【图】

本文链接：https://blog.csdn.net/ixygj197875/article/details/79933991 （本次随笔仅作为学习用途）表单按钮　　1. 表单按钮一般分为三类，分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用，普通按钮则可以在网页的任何地方使用。　　2. 从本质上讲，表单按钮也是表单控件，之所以把它分离出来，单独介绍，是因为它的功能比较特别。提交按钮用于把表单数据发送到服务器，重置按钮用于重置整个表单的数据...

03-HTML表单【代码】

1、input表单输入元素，type属性，<input type="">text：文字域 password：密码域file：文件域checkbox：复选域radio：单选域button：按钮submit：提交按钮reset：重置按钮hidden：隐藏域image：图像域 2、单选按钮（radio）<form> nan<input type="radio" name="sex" value="man">　　//value不显示，但会发送到服务器 nv<input type="radio" name="sex" value="woman">　　//单选按钮name值必须一样 bm<input type="radio" name=...

html5 表单的新增type属性【代码】

<form action=""> 用户名：<input type="text" name="userName"> <br> 密码：<input type="password" name="userPwd"> <br>  邮箱：<input type="email"> <br> <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。...

html+css学习笔记 5[表格、表单]

表格 —— 默认样式重置表格标签： table 表格 thead 表格头 tbody 表格主体 tfoot 表格尾 tr 表格行 th 元素定义表头 td 元素定义表格单元表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充单元格合并rowspan 属性规定单元格可横跨的行数。 <td rowspan="2"></td>colspan 属性规定单元格可...

HTML1118,表格与表单【代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>表格与表单</title></head><body><table bgcolor="#00FF33" align="center" border="0" width="400" height="500" cellpadding="0" cellspacing="0"> 边框为零可去掉<...

html表单输入框css样式美化特效源代码下载【图】

html表单输入框css样式美化源代码，响应鼠标动作原文：html表单输入框css样式美化特效源代码下载源代码下载地址：http://www.zuidaima.com/share/1550463335926784.htm 源代码截图：原文：http://blog.csdn.net/springmvc_springdata/article/details/38975963

HTML5表单

1.<form>定义了一个表单。表单中的输入控件必须包含在form元素的标记对内。 2.<from action=“表单处理程序的url” method=“get|post”> 3.<from>属性，元素设定同时使用name和id属性。 4.input：使用type定义不同的控件，文本、口令、复选框、单选框、提交、重置、隐藏域、图像。 5.select和option：组合使用，创建下拉列表。 6.多行输入文本框：textarea 7.文本框：<input type=“text” value=“文本” size=“” maxlenth=“”...

HTML 5 表单

================================HTML 5 表单===============================================------新增input类型 input标签新增type属性值 1.search（搜索框）2.email（邮件地址输入框）3.url( url地址输入框）4.tel(电话号码输入框）5.number（数字输入框）6.range（滑动条）7.date（日期选择）8.month（月份选择）9.week（周选择）10.time（时间选择）11.datetime-local（日期时间）12.datetime（包含时区）13.co...

解决html表单提交后页面自动刷新的问题【代码】

今天在做How2J上的一个js小练习时，发现在使用<button>按钮提交表单后，使用js改变的页面元素只是出现了一下后立即消失了。通过仔细研究才了解到：在表单的提交按钮如果没有type属性，在点击提交按钮后页面会自动刷新，导致使用js改变的页面元素被刷新掉了。解决方法：使用<input type="button"></inpu>代替<button>按钮后解决。错误代码：<form><input type="text" id="input1"/><div id="d1" style="color: greenyellow"></div><...

HTML5 学习笔记表单属性【代码】【图】

HTML5新的表单属性HTML5 的form和input 标签添加了几个新的属性<form>新属性autocompletenovalidateinput 新属性autocompleteautofocusform formactionformenctypeformmethodformnovalidateformtargetheight and widthlistmin and maxmultiplepattern (regexp)placeholderrequiredstepautocomplete属性autocomplete属性规定form或input域应该拥有自动完成功能当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项提示...

bootstrap风格的html5表单验证示例

http://blog.csdn.net/sweetsuzyhyf/article/details/8809087原文：http://www.cnblogs.com/liushiyong1/p/3568580.html

html5表单及新增的改良元素【代码】

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><form id="testform"><input type="submit" /></form><textarea form="testform"></textarea> <br /><hr /><form id="form1" action="test.aspx"><input type="submit" name="s1" value="内部提交到test2" formact...

html5中form表单新增属性以及改良的input标签元素的种类【代码】

在HTML5中，表单新增了一些属性，input标签也有了更多的type类型，有些实现了js才能实现的特效，但目前有些浏览器不能全部支持。下面是一些h5在表单和input标签上的一些改动。<!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" />  <style> input[type="search"] {-webkit-appearance: textfield;} ...

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / 了解HTML表单之13个表单控件_html/css_WEB-ITnose

了解HTML表单之13个表单控件_html/css_WEB-ITnose

内容导读

内容图文

前面的话

传统控件

button

select

option

optgroup

textarea

fieldset

legend

label

使用for方法

使用嵌套方法

新增控件

datalist

keygen

output

progress

meter

内容总结

内容备注

内容手机端

【了解HTML表单之13个表单控件_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章

HTML - 相关标签

CSS - 相关标签

WEB - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程