jsp的onchange表单及其他新增和改进元素

希望大家喜好

1、表单内元素的form属性

在H4中，表单的从属元素必须书写在表单的内部，而在H5中，可以把它们书写在页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id

jsp的onchange表单及其他新增和改进元素 React

</form>

上述代码中，input被写在form表单中，不用再为它指定form属性，textarea元素被书写在form表单之外，但它从属于form表单，以是将form表单的id指定给textarea元素的form属性。

2、表单内元素的formaction属性

在H4中，一个表单内的所有元素只能通过表单的action属性统一提交到另一个页面，而在H5中，可以为所有的提交按钮，诸如：<input type=\"大众submit\"大众>/<input type=\公众image\"大众>/<button type=\"大众submit\公众>等增加不用的formaction属性，使得在单击不同的按钮时可以将表单提交到不同的页面。

<input type=\"大众submit\"大众 name=\"大众s1\"大众 value=\公众v1\"大众 formaction=\"大众s1.jsp\"大众>提交到s1.jsp

<input type=\"大众submit\公众 name=\"大众s2\公众 value=\公众v2\"大众 formaction=\"大众s2.jsp\"大众>提交到s1.jsp

<input type=\公众submit\"大众 name=\"大众s3\"大众 value=\公众v3\"大众 formaction=\"大众s3.jsp\"大众>提交到s1.jsp

</form>

3、表单元素内的formmethod属性

在H4中一个表单内只有一个action属性用来对表单内所有元素统一指定提交到页面，以是每个表单也只有一个method属性来统一指定提交方法，在H5中，可以利用formmethod属性来对每个表单元素分别指定不同的提交方法。

姓名：<input type=\公众text\"大众 name=\"大众name\"大众>

姓名：<input type=\公众text\公众 name=\"大众name\公众>

</form>

4、表单元素内的formenctype属性

在H4中，表单元素只有一个enctype属性，该属性用于指定在表单发送到做事器之前该当对表单内的数据进行编码。

表单元素的enctype属性值

application/x-www-form-urlcoded：在发送前编码所有字符，当表单元素的action属性值为get时，浏览器用x-www-form-urlcoded的编码办法把表单数据转换成一个字符串，如“?name=1=value=1&name2=value2……”，然后把这个字符串添加到提交的目标URL地址的后面，使其成为新的目标URL地址；该属性为表单元素的enctype属性的默认属性值

multipart/form-data：不对字符编码，在利用包含文件上传控件的表单时，必须利用该值；

text/plain：表单数据中的空格被转换为\公众+\"大众加号，但不对表单数据中的分外字符进行编码；

</form>

5、表单元素内的formtarget属性

在H4中，表单属性具有一个target属性，该属性用于指定在何处打开表单提交后须要加载的页面

_blank：在新的浏览器窗口打开

_self：target属性默认值，在相同的框架(frame)中打开

_parent：在当前框架(frame)的父框架(frame)中打开

_top：在当前浏览器窗口中打开

framename：在指定的框架(frame)中打开

6、表单元素内的autofocus属性

为文本框，选择框加上autofocus属性，当画面打开时，该空间会自动得到光标焦点。
目前做到这一点须要利用javascript，比如：“control.focus()”。
autofocus属性的利用方法如下:

一个页面中只能有一个空间具有autofocus属性，从实用角度上来说，不要滥用该属性，笔者强烈建议当一个页面以利用某个控件为目的的时候，才对该控件利用autofocus属性，如：搜索页面的搜索文本框

7、表单内元素的required属性

在H5中央脏等的required属性可以在大多数输入用元素(除了隐蔽元素，图片元素按钮)上，在提交时，如果元素内容为空缺，则不许可提交，同时在浏览器中显示信息提示笔墨，提示用户必须输入内容。

8、表单内元素的label属性

在H5中为所有可利用标签(label元素)的表单元素(包括非隐蔽的input元素，(type属性值不即是hidden)，button元素，output元素，select元素，textare元素，meter元素，progress元素以及keygen元素)定义一个labels属性，属性值为一个NodeList工具，代表该元素所绑定的标签元素所有的凑集，代表该元素所绑定的标签元素所构成的凑集。

9、表单内元素control属性

在H5中，可以在标签(label)内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。

function setValue(){

var label = document.getElementById(\"大众label\"大众);

var textbox = label.control;

textbox.value=\"大众000000\"大众;

}

<form>

邮编：<input type=\"大众text\"大众 id=\公众text_zip\"大众 maxlength=\公众6\"大众>

<small>请输入六位数字</small>

</label>

</form>

10、文本框的placeholder属性

placeholder是指文本框处于未输入状态时显示的输入提示。

如果须要变动placeholder属性的CSS样式，则可以利用以下方法：

input:-moz-placeholder{

color:blue;

}

input:-webkit-input-placeholder{

color:blue;

}

12、文本框的autocomplete属性

赞助输入所用的自动完成功能，是一个既节省输入韶光又十分方便的功能，在H5之前，由于谁都可以瞥见输入的值，以是在安全方面存在毛病，只要利用autocomplete属性，也可以在安全性方面得到很好的掌握；

对付autocomplete属性，可以指定“on”、“off”与“”(不指定)这三个值，在不进行指定时，利用浏览器的默认值(取决于各个浏览器决定)。
把该属性设为“on”时，可以显示指定候补数据的数据列表。
利用datalist元素与list属性供应候补输入的数据列表，在实行自动完成时，可以将datalist元素中的数据作为候补输入的数据在文本框中自动显示。

13、文本框的pattern属性

在H5中，对input元素利用pattern属性，并且将属性值设为某个格式的正则表达式时，在提交时会对这些进行检讨，检讨其内容是否符合给定格式。
当输入的内容不符合给定的格式时，则不许可提交，同时在浏览器中显示信息提示笔墨，提示输入的内容必须符合给定的格式。

<form>

请输入指定格式的内容<input type=\公众text\"大众 pattern=\公众[0-9][a-z]{3}\"大众 name=\"大众pattern\"大众>

</form>

P.S.：一个数字三个字母

14、文本框的selectionDirection属性

针对input元素以及textarea元素，H5增加了selectionDirection属性，当用户在这两个元素中用鼠标选取部分笔墨时，可以用过该属性来获取选取方向，当用户正向选取笔墨时，该属性值为“forward”，当用户反向选取笔墨时，该属性值为\"大众backward\"大众，当用户没有选取任何笔墨时，该属性值为“forward”。

15、对复选框的indeterminate属性

对复选框checkbox来说，过去只有选取与非选取两种状态，在H5中，可以在javascript脚本代码中对该元素利用indeterminate属性，以解释复选框处于“尚未明确是否选取”状态。

在javascript脚本代码中，利用布尔类型的值对indeterminate属性进行赋值，。
当属性值为true时，浏览器中的复选框将显示为不明状态。
须要把稳的是，indeterminate属性与checked属性是两种不同的属性。
如果只考虑将indeterminate属性与checked属性结合利用可能会被认为复选框具有“两个属性值均为false”、两个属性值均为“true”与“checked=fasle、indeterminate=false”这4种状态，但实际上复选框只具有选取、非选取与不明这三种状态，因此，在javascript脚本代码中对复选框的状态进行判断时，该当先判断复选框的indeterminate属性值，然后判断复选框的checked属性值；

if(checkbox.indeterminate){

//复选框处于不明状态

}else{

if(checkbox.checked){

//复选框处于选取状态

}else{

//复选框处于非选取状态

}

16、image提交按钮的height属性与width属性

针对类型为image的input元素(用于表单提交的图片按钮)，H5新增了以下两个属性

height：用于指定图片按钮这种图片的高度

width：用于图片按钮中图片的宽度

17、textarea元素的maxlength属性与wrap属性

针对textarea属性，H5增加了maxlengtj属性以及wrap属性——

maxlength：利用整型数值进行设定，用于限定textarea元素中可输入的笔墨的个数

wrap：可指定属性值为soft与hard，当属性值为hard时，如果向textarea元素中输入的笔墨个数超出利用textarea元素的cols属性所限定的每行中可现实笔墨个数而导致笔墨换行时(把稳不是用户通过按回车或其他方法的换行标志)，提交表单时会在换行处加入一个换行标志。
当属性值为soft时不加入换行标志。
当设定wrap属性值为hard时，必须指定cols属性值

18、大幅度增加与改良input元素的种类

19、output元素的追加

在H5中，追加了新的元素output。
output元素定义不同类型的输出，比如打算结果或者脚本的输出。
output元素必须从属于某个表单，也便是说，必须将它书写在表单内部或者对他添加form属性。

function value_change(){

var number = document.getElementById(\"大众range1\"大众).value;

document.getElemetById(\公众output1\公众).value=number;

}

</script>

</form>

20、取消验证

有两种方法取消表单验证——

第一种方法是利用form元素的novalidate属性来关闭全体表单验证。
当全体表单的第二部分须要验证的内容比较多且想先提交表单的第一部分内容时，可以利用这种方法。
先把novalidate属性设为true，关闭表单验证，提交第一部分内容，然后在提交第二部分时再把它设为false，打开表单验证，提交第二部分内容。

第二种方法是利用input元素或是submit元素的formnovalidate属性，利用这个属性可以让单个input元素失落效，当表单的第二部分须要验证的元素数量很少时，可以利用这些元素的formnovalidate，让表单验证对这些元素失落效。

21、显示验证

除了对input元素添加属性进行元素内容有效性的自动验证外，在H5中，form元素与input元素(包括select元素与textarea元素)都具有一个checkValidity方法。
调用该方法，可以显式的队表单内所有元素内容或者单个元素进行有效性验证。
checkValidity方法将验证结果用boolean的形式进行返回。

其余还要提到的是，在H5中，form元素与input元素都还存在一个validity属性，该属性返回一个ValidityState工具。
该工具具有很多属性，个中最大略的、最主要的属性为valid属性，它表示表单内所有元素是否有或单个input元素内容是否有效。

22、新增的figure元素与figcaption元素

figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部，可以书写在figure元素内的其他从属元素的前面或者后面。
一个figure元素内最多只许可放置一个figcaption元素，但许可放置多个其他元素。