编写表单的多个步骤,显示器快速照相 二零一四-08-29 上午5.50.05.png

一、form属性

1.autocomplete

  • on 可选 依照输入音讯筛选
  • off 无可选、提示消息

2.elements

  • 该表单子孙表单空间(除图片按钮)
    如:button,fieldset,input,keygen,object,output,select,textarea
  • 归属于该表单的表单控件(除图片按钮)
    elements是动态节点集合
屏幕快照 2016-08-29 下午5.44.19.png

3.length
等价于 elements.length
用来表示节点成分蕴含元素的个数

1.表单成分

编纂表单的多少个步骤:营造表单,服务器端处理,配置表单

以披萨预约表单为例

图片 1

图片 2

营造表单

营造完表单,须求劳务器端提供对应的接口处理用户提交的数据。

服务器端处理的着力信息:

https://pizza.example.com/order    服务器端提供的接口地址

application/x-www-form.urlencoded       服务器端接收的数量必要大家用 U库罗德L
格局编码

custname,custtel,custemail,size,topping,delivery      
接口接受的参数音讯

图片 3

配备表单

form 成分中的 method 定制请求方式,action
钦点服务器端用来接收数据的接口地址,enctype 内定提交数据的名号

有别于种种按钮,用 value
做属性标识,能够给几个控件钦命相同名称,服务器端根据是不是交由了对应的
value 值判断用户是还是不是选择了相应的抉择框。

注解表单:用户必须提供的音信,在要素上加码 required
属性。若提交表单时未提供相应新闻,现身提示音讯告诉用户。

form 元素

form 的属性标识 form 的不等风味。

1.name

经过 document.form API使用,用 name 获得 form 的节点成分

2.autocomplete

有 on 和 off 三个值,为 on 时在填充进程中会现身输入过的值作为候选,off
则不出现。

神迹设为 off
还会现出提醒音信,与浏览器设置有关(密码和表单——自动填写设置),能够在不须求私下认可填写的
input 框中装置 autocomplete = “new-password”

3.elements 

elements 集合是动态节点集合

(1)该表单子孙表单控件(除图片按钮)

表单控件:button,田野(field)set,input,keygen,object,output,select,textarea

图表按钮:<input type = “image”>

(2)归属于该表单的表单控件

<p><label><input name=’d’
form=’f’></label></p>

有 input 成分的 form 属性内定这一个因素归属于 id 为 f 的表单,也在
elements 集合中。

4.length

等价于 elements.length 首要用于标识节点集合里面所富含的成分的个数

5.用 form 取到表单控件的不二法门

form.elements[index]          form.elements[name]

form[index]                         form[name]

6.form[name]

通过名称作为索引取到 input 成分

回到 id 或 name 为内定名称的表单控件(除图片按钮)

假设结果为空,则赶回 id 为钦点名称的 img 成分

万一有两个同名成分,则赶回那个要素的节点集合

只要用钦定名称取过该因素,则不管该因素的 id 只怕 name
怎么变化,只要节点还在页面上,均可利用原名称获得该因素。

7.form 的 reset() 接口

可重置元素:input,keygen,output,select,textarea

触发布单 reset 事件,阻止该事件的暗许行为可撤废重置

要素重置时不再触发成分上的 change 和 input 事件

label 元素

<label for=’txtId’ form=’formId’> 七个属性 htmlFor control form

for 属性将标签关联到现实表单控件,钦点 for 现在,浏览器会自动生成
control 属性,用来标识当前以此 label 关联的表单控件的节点

form 属性表示 label 所归属的表单,由浏览器动态变化。

1.htmlFor

波及表单控件激活行为

可提到成分:button,input(除hidden外),keygen,meter,output,progress,select,textarea

label 和表单控件关联以往,点击 label 的一言一动和表单控件的行为保持一致。

2.control

只要钦赐了 for 属性,则为该 for 属性对应 Id 的可提到成分

如若没有点名 for 属性,则为率先个子王永珀涉嫌成分

3.form

关系归属表单(全体表单控件都有其一个性)

可提到元素:button,田野先生set,input,keygen,label,object,output,select,textarea

只读属性,不可在先后中修改

select 元素

select 成分的属性与接口

name 表单提交时的名目,form.element 中用名字做索引值取节点

value 第1个当选选项的值,没有当选为空

multiple 多选控制

options 全体选项集合

selectedOptions 选中采取集合

selectedIndex 第3个当选选项的目录,没选中重返 -1

add(element[,before]) 在内定地点在此以前添加选项,没钦赐参照物在结尾添加

remove([index]) 删除有些选项

optgroup 属性

disabled 当前分组全体选项不可选

label 必须有,对分组表明

option 属性

disabled 当前采取不可选

label 对选用表达

value 提交表单时的数据消息

text 展现在页面上用户观看的文字

index 当前甄选索引值

selected 表示选拔是或不是被入选

defaultSelected 表示暗许情况下抉择是不是被选中

select 选项操作

创建选项:

document.createElement                new
Option([text[,value[,defaultSelected[,selected]]]])

添加选项:insertBefore                   select.add

除去选项:removeChild                  select.remove

textarea 元素

name 表单提交时的称谓,form.element 中用名字做索引值取节点

value 用户输入新闻

select() 全选当前输入内容

selectStart 选中剧情的先导地方,没选中内容再次来到光标地方

selectEnd 选中剧情的终止地方,没选中内容再次回到光标地点

selectDirection 重返选取的大方向,可设置 forward,backward

setSelectionRange(start,end[,direction]) 可用程序选中某个内容

setRangeText(replacement[,start,end[,mode]]) 用来安装某些范围的内容

selectDirection 用来支配键盘上 shift + 方向键 选拔内容的一举一动,当
selectDirection 为 forward 时,Shift + 方向键 操作 selectEnd 地点;为
backward 时操作 selectStart 地点。

领会HTML表单之13个表单控件,html表单13控件

贰 、如何获取form下的节点

显示屏快速照相 二零一五-08-29 早上5.49.43.png

显示屏快速照相 2016-08-29 早晨5.50.05.png

  • form[name]

    • 回来id或name为制定名称的表单控件(除图片按钮)

    • 只要结果为空,则赶回id为钦赐名称的img成分

    屏幕快照 2016-08-29 下午5.54.45.png

-   如果有多个同名元素,则返回这些元素的动态节点集合

-   一旦用指定名称取过该元素,则不管该元素的id或者name怎么变化,只要节点还在页面上均可使用原名称获取该元素

目录

价值观控件 button select option optgroup textarea 田野(field)set legend label
新增控件 datalist keygen output progress meter

三、form方法

  • reset()
    可重置成分:input,keygen,output,select,textarea
    触宣布单reset事件,阻止该事件的暗中认可行为可打消重置
    要素重置时不再触发成分上的change和input事件
  • submit()
  • checkValidity()

2.表单验证

表达成分

可验证元素:button,input,select,textarea

以下情形不做评释:

input 元素,type 属性为 hidden,reset,button

button 元素,type 属性为 reset,button

input 元素或 textarea 元素有 readonly 属性

用作 datalist 子节点的成分

设置了 disabled 属性的要素

注脚涉及到的性质,接口(每3个可验证成分都可调用)

willValidate:标明成分在表单提交时是或不是被认证

checkValidity():用来证实成分,通过验证重返 true,不然触发元素上的
invalid 事件

validity:用于存款和储蓄验证结果

validationMessage:用于体现验证的十二分新闻

setCustomValidity(message):传入自定义音讯用来安装卓殊情状下要展现怎么的消息

validity
存款和储蓄验证进度中只怕波及的错误消息(这几个值用于判断值是或不是由此 )

valueMissing:设置了 required 没有 value,值为 true 验证战败

typeMismatch:value 与使用 type 不符

patternMismatch:value 与 pattern 不匹配

tooLong:value 长度超越 maxlength 内定的尺寸

tooShort:value 长度小于 minlength 钦点的尺寸

rangeUnderflow:value 值小于 min 钦赐的值

rangeOverflow:value 值大于 max 钦赐的值

stepMismatch:value 值不吻合 step 钦定的值

badInput:输入不完全

customError: 使用 setCustomValidity 设置了自定义错误

valid:符合验证条件,true 表示验证通过

自定义格外

图片 4

明确命令禁止验证

在表单成分上添加 novalidate
属性,禁止表单提交时对表单的可验证成分做表单验证

后边的话

  input成分无疑是2个大幅和复杂性的成分,但它并不是绝无仅有的表单控件。还有button、select、option、optgroup、textarea、田野(field)set、label、legend那多少个观念表单控件,datalist、progress、meter、output、keygen那五个新增表单控件

四、label

htmlFor

  • 事关表单控件激活行为
  • 可提到成分:button,input(hidden除此之外),keygen,meter,output,progress,select,textarea
    control
  • 假若内定了for属性,则为该for属性对应的ID的可提到成分
  • 假定没有点名for属性,则为率先个子刘奕鸣涉嫌成分
    form
  • 关系归属表单
  • 可提到成分:button,田野(field)set,input,keygen,label,object,output,select,textarea
  • 只读属性,不可在程序中修改
    label.setAttribute(‘form’,’newFormId’);

3.表单提交

隐式提交

如:聚焦在输入框时按回车提交表单

满意以下任一条件

表单有非禁止使用的交给按钮

没有交给按钮时,不超越2个因素,类型为
text,search,url,email,password,date,time,number 之一

交付进度

浏览器依照表单 enctype 钦点的值创设要提交的数据结构

行使 method 钦点的方式发送数据到 action 钦命的对象

浏览器创设提交数据

从可提交成分中提取数据组装成钦命数据结构的长河

可提交成分:button,input,keygen,object,select,textarea

编码格局(enctype)

application/x-www-form-urlencode[默认]  数据格式为用 & 分隔的键值对

multipart/form-data 字节流格式,抢先四分之二文件上传格局

text/plain 用换行符分隔的键值对,用于阅读

特别案例

name = ‘isindex’ && type = ‘text’

编码格局为 application/x-www-form-urlencode

用作表单的第三个成分

交付时只发送 value 值,不分包 name

name = ‘_charset_’ && type = ‘hidden’

从未设置 value 值

付给时 value 自动用当下付出的字符集填充(_charset_=UTF-8)

能够透过调用 form 上的 submit() 用程序提交表单 form.submit()

onsubmit

表单提交事件

交付从前的数目表明

掣肘事件的私下认可行为可裁撤表单提交 event.preventDefault()

历史观控件

  button       定义一个按钮

  select        定义叁个下拉列表

  option       定义下拉列表中的三个增选

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

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

  田野同志set        分组表单内的相关要素

  legend       定义田野同志set成分的标题

  label         定义input成分的标号

五、input

  • type
  • 控件外观
  • 数据类型
  • 默认为text

> 

显示屏快照 2014-08-29 早晨11.01.24.png

今非昔比type所援救属性有差异:
>

荧屏快速照相 二〇一四-08-29 清晨11.02.36.png

显示器快速照相 贰零壹伍-08-29 晚上11.03.48.png

  • 地面图片预览

  • onchage

  • accept

    可选值:audio/* video/* image/* 不带“;”的MIME type
    以“.”开始的文件后缀名 借使是多少个项目用逗号分隔

    • multiple
    • files

    显示器快照 二零一六-08-30 中午11.12.29.png

button

  button成分用来定义多个按钮,button成分内部能够放置文本或图像或其余多媒体内容。但唯一禁止行使的成分是图像投射,因为它对鼠标和键盘敏感的动作会苦恼表单按钮的作为

  始终为button成分设置type属性,IE7-浏览器的私下认可类型是button,而别的浏览器的暗中同意类型是submit

  IE7-提交button成分之间的文书,而别的浏览器则会交到value属性的情节

//IE7-浏览器:按下提交按钮时,URL添加?btn=1
//其他浏览器:按下button按钮时,URL添加?btn=2
<form action="#" >
<button value="2" name="btn">1</button>
<input type="submit">
</form>

【属性】

  autofocus     规定当页面加载时按钮自动获取主题

  disabled       规定应该剥夺该按钮

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

  formaction        覆盖form元素的action属性

  formenctype     覆盖form元素的enctype属性

  formmethod     覆盖form元素的method属性

  formnovaliadate    覆盖form元素的novalidate属性

  formtarget       覆盖form元素的target属性

  name          规定按钮的名号

  type        规定按钮的门类

  value       规定按钮的初始值

六、select

案例:

显示屏快速照相 2014-08-30 早上11.54.20.png

属性

显示屏快速照相 二〇一五-08-30 中午11.58.49.png

  1. 开创选项
  • document.createElement

  • new Option([text[,value[,defaultSelected[,selected]]]])

    document.createElement(‘option’); 等价于 new Option();
    new Option(‘1.2 节点操作’,’1.2′); 等价于
    var option = document.createElement(‘option’);
    option.value=’1.2′;
    option.textContent=’1.2 节点操作’;
    都生成
    <option value=”1.2″>1.2 节点操作</option>

  1. 添加选项
  • insertBefore

  • select.add

    在1.1前插入1.0实例:

    荧屏快速照相 贰零壹肆-08-30 晌午12.19.03.png

  1. 删去选项
  • removeChild
  • select.remove

>删除1.2

显示器快速照相 二零一六-08-30 深夜12.30.42.png

  1. 级联下拉采用器
  • on change
  • remove
  • add

成效如下:

荧屏快照 二零一五-08-30 清晨12.34.11.png

实现:

显示屏快速照相 2015-08-30 早上12.36.42.png

荧屏快速照相 二〇一四-08-30 深夜12.37.40.png

荧屏快速照相 2014-08-30 早晨12.41.29.png

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浏览器不也许设置高度

七、 textarea

荧屏快速照相 贰零壹陆-08-30 早上12.46.26.png

  • @输入提醒

    • on input
    • selectionStart
    • setRangeText

    福寿年高范例

    显示器快照 2015-08-30 下午12.52.08.png

option

  option元素定义下拉列表中的二个摘取

  option成分有三种选择场景,除了用于下拉列表select外,还足以用于选项列表datalist中

  详细音讯移步至此

【属性】

  disabled       规定此选项应在第二次加载时被剥夺

  label       
  定义当使用optgroup时所利用的标注,替代option成分内容

    [注意]firefox不支持label属性

  selected       规定选项在第2次展现在列表中时展现为当选状态

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

    [注意]当设置value值时,服务器交由的是value的值;否则提交给服务器的是option的成分内容

【暗中同意样式】

chrome
    padding: 0 2px 1px;

  [注意]option不或者设置margin、padding、border等盒模型样式

⑧ 、 别的成分

  • fields
  • button
  • keygen
  • output
  • progress
  • meter

optgroup

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

  [注意]optgroup不能够设置margin、padding、border等盒模型样式

【属性】

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

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

<button id="btn1a" type="button">启用</button>
<button id="btn1b" type="button">禁用</button>
<button id="btn2a" type="button">可多选</button>
<button id="btn2b" type="button">不可多选</button>
<button id="btn3a" type="button">size=1</button>
<button id="btn3b" type="button">size=2</button>
<button id="btn3c" type="button">size=3</button>
<button id="btn3d" type="button">不设置size</button>    
<form action="#">
    <br><br>
    <select name="test" id="select"> 
        <optgroup label="num">
            <option value="11" disabled>1</option>
            <option value="22" selected>2</option>
            <option value="33">3</option>
            <option value="44" label="word">4</option>        
        </optgroup>
        <optgroup  label="word">
            <option>a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>        
        </optgroup>
        <optgroup  label="汉字" disabled>
            <option value="一个">一</option>
            <option value="二个">二</option>
            <option value="三个">三</option>
            <option value="四个">四</option>        
        </optgroup>    
    </select>
    <input type="submit">    
</form>
<script>
var select = document.getElementById('select');
btn1a.onclick = function(){
    select.removeAttribute('disabled');
}    
btn1b.onclick = function(){
    select.setAttribute('disabled','');
}
btn2a.onclick = function(){
    select.setAttribute('multiple','');
}
btn2b.onclick = function(){
    select.removeAttribute('multiple');
}
btn3a.onclick = function(){
    select.setAttribute('size','1');
}
btn3b.onclick = function(){
    select.setAttribute('size','2');
}
btn3c.onclick = function(){
    select.setAttribute('size','3');
}
btn3d.onclick = function(){
    select.removeAttribute('size');
}
</script>

⑨ 、验证元素

荧屏快速照相 二零一四-08-30 清晨7.27.01.png

验证

显示屏快速照相 2015-08-30 上午7.35.09.png

validity

显示器快照 二〇一六-08-30 晚上7.40.44.png

自定义12分(十分景况自定义)

  • oninvalid
  • setCustomValidity
    明令禁止验证
  • novalidate

textarea

  textarea定义多行的文件输入控件,文本区可容纳Infiniti数量的文书

  [注意]浏览器不一样意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属性

<input id="btn1" type="button" value="禁用">
<input id="btn2" type="button" value="启用">
<input id="btn3" type="button" value="只读">
<input id="btn4" type="button" value="读写">
<textarea id="test">测试内容</textarea>
<script>
btn1.onclick = function(){
    test.setAttribute('disabled','');
};
btn2.onclick = function(){
    test.removeAttribute('disabled');
};    
btn3.onclick = function(){
    test.setAttribute('readonly','readonly');
};
btn4.onclick = function(){
    test.removeAttribute('readonly');
};
</script>

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

  [注意]IE浏览器不帮忙该属性

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

  [注意]IE9-浏览器不帮助该属性

  required   
规定文本区域是必填的

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

  placeholder  规定描述文本区域预期值的大约提醒

  [注意]IE9-浏览器不帮衬该属性

<input id="btn1" type="button" value="placeholder='123'">
<input id="btn2" type="button" value="placeholder='abc'">
<input id="btn3" type="button" value="必填">
<input id="btn4" type="button" value="可不填">
<form action="#">
    <textarea id="test" placeholder="测试内容"></textarea>    
    <input type="submit">
</form>
<script>
var test = document.getElementById('test');
btn1.onclick = function(){
    test.setAttribute('placeholder','123');
};
btn2.onclick = function(){
    test.setAttribute('placeholder','abc');
};    
btn3.onclick = function(){
    test.setAttribute('required','');
};
btn4.onclick = function(){
    test.removeAttribute('required');
};
</script>

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

  [注意]IE9-浏览器不协理该属性

<input id="btn1" type="button" value="0">
<input id="btn2" type="button" value="1">
<input id="btn3" type="button" value="6">
<input id="btn4" type="button" value="默认">
<textarea id="test"></textarea>    
<script>
btn1.onclick = function(){
    test.setAttribute('maxlength','0');
};
btn2.onclick = function(){
    test.setAttribute('maxlength','1');
};    
btn3.onclick = function(){
    test.setAttribute('maxlength','6');
};
btn4.onclick = function(){
    test.removeAttribute('maxlength');
};
</script>

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

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

  [注意]可以用cols和rows来规定textarea的尺码,但更好的法子是运用CSS的height和width属性

<form action="#">
    cols:<input id="cols" pattern="\d" placeholder="请输入0-9的数字"><br>
    rows:<input id="rows" pattern="\d" placeholder="请输入0-9的数字">
    <input id="set" type="submit" value="设置">    
    <textarea id="test"></textarea>        
</form>

<script>
var cols = document.getElementById('cols');
var rows = document.getElementById('rows');
var test = document.getElementById('test');
var set = document.getElementById('set');
set.onclick = function(){
    test.setAttribute('cols',cols.value);
    test.setAttribute('rows',rows.value);
};
</script>

  wrap    规定当在表单中提交时,文本区域中折行怎样处理

  当wrap=”soft”,表示表单提交时,即使文字在荧屏上折行,但付出的数据里不会有换行符(默许值);而当wrap=”hard”,表示表单提交时,提交的数目包蕴文本换行符%0D%0A

//hard:?test=111111111111111111111%0D%0A1#
//soft:?test=1111111111111111111111111111#
<form action="#">
    <input id="hard" type="button" value="wrap:hard">
    <input id="soft" type="button" value="wrap:soft(默认)">
    <input id="set" type="submit" value="设置">    
    <textarea id="test" name="test"></textarea>        
</form>
<script>
var hard = document.getElementById('hard');
var soft = document.getElementById('soft');
var test = document.getElementById('test');
var set = document.getElementById('set');
hard.onclick = function(){
    test.setAttribute('wrap','hard');
}
soft.onclick = function(){
    test.setAttribute('wrap','soft');
}
</script>

fieldset

  田野同志set成分用于将表单内的连带因素分组,进步可访问性,多数浏览器用四个不难易行的边框来呈现田野set

【暗许样式】

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       规定田野(field)set所属的三个或五个表单  

  name     
 规定fieldset的名称

legend

  legend成分用于定义田野set成分的题目

<fieldset>
    <legend>健康信息</legend>
    身高:<input type="text" />
    体重:<input type="text" />
</fieldset>

label

  label成分为input元素定义标注,建立文字标签与表单控件的关系。在label成分内点击文本会触发此控件,采取该公文时浏览器会自动把热点转到和标签相关的表单控件上

  label成分有二种用法:一种是选用for属性,另一种是将表单控件嵌套到label内部。但IE6浏览器只辨认应用for属性的措施

【属性】

  for     
规定label绑定到哪个表单成分

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

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

<h4>使用for方法</h4>
<label for="male">Male</label>
<input type="radio" name="sex1" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex1" id="female" />
<h4>使用嵌套方法</h4>
<label>Male<input type="radio" name="sex2" /></label>
<br />
<label>Female<input type="radio" name="sex2"  /></label>

新增控件

  datalist     定义输入域的选项列表

  keygen     定义密钥对生成器,用于转移密钥

  output     用于呈现总结的结果

  progress      用于体现速度(前进量)

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

datalist

  datalist成分规定输入域的选项列表,列表是透过datalist内的option成分创造的。若是急需把datalist绑定到输入域,须求把输入域的list属性引用datalist的id。option元素一定要设置value属性

  [注意]IE9-浏览器及safari浏览器不扶助

<form action="#">
    <input list="list" name="input">
    <datalist id="list">
        <option value="1">
        <option value="2">
        <option value="3">
    </datalist>
</form>

keygen

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

  [注意]safari和IE不接济该属性,chrome部分帮助该属性

【属性】

  autofocus     使用keygen字段在页面加载时取得核心

  challenge       假使选取,则将keygen的值设置为在提交时了然

  disabled       禁用keygen字段

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

  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#
<form action="#">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security"  />
    <input type="submit" />
</form>

output

  output成分用于体现总计的结果,那是贰个语义化标签,定义分裂类别的出口,比如脚本的出口

  [注意]IE浏览器不帮助该属性

【属性】

  for     定义输出域相关的二个或五个成分

  form      定义输入字段所属的四个或几个元素

  name     定义对象的绝无仅著名称

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0<input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

progress

  progress元素用来标示职务的快慢或进度

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

【属性】

  max      规定任务一共要求多少办事

  value      规定已经形成多少办事

<input id="btn" type="button" value="开始下载">
下载进度:<progress id="test" value="0" max="100"></progress>
<script>
var oTimer;
btn.onclick = function(){
    if(oTimer){
        return;
    }
    oTimer = setInterval(function(){
        test.value++;
        if(test.value >= test.max){
            clearInterval(oTimer);
        }
    },50);     
}
</script>

meter

  meter成分用于展现剩余体量或剩余仓库储存

  [注意]IE浏览器及safari浏览器不帮忙

【属性】

  form      规定meter成分所属的二个或四个表单

  high      规定被当做高的值的界定

  low        规定被看成低的值的限定

  max      规定限制的最大值

  min       规定限制的最小值

  optimum   规定度量的最优值

  value      规定衡量的当下值(必需)

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

<input id="btn" type="button" value="增加库存">
库存量:<meter id="test" value="10" min="0" low="30" optimum="60" high="80" max="100" ></meter>
<script>
var oTimer;
btn.onclick = function(){
    if(oTimer){
        return;
    }
    oTimer = setInterval(function(){
        test.value++;
        if(test.value >= test.max){
            clearInterval(oTimer);
        }
    },50);     
};
</script>

http://www.bkjia.com/Javascript/1098849.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1098849.htmlTechArticle了解HTML表单之13个表单控件,html表单13控件 目录
古板控件button select option optgroup textarea 田野先生set legend
label新增控件datalist keygen output progress…

相关文章