html5表单的新增元素和属性


formaction:

<body><formid="testform"><inputtype="text"></form><textareaform="testform"></textarea><formid="testform2"><inputtype="submit"name="s1"value="v1"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp<inputtype="submit"name="s2"value="v2"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp<inputtype="submit"name="s3"value="v3"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp</form></body>


formmethod:

<formid="testform3"><inputtype="submit"name="s1"value="v1"formmethod="post"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp<inputtype="submit"name="s2"value="v2"formmethod="get"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp<inputtype="submit"name="s3"value="v3"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp</form>


formenctype

<formid="testform"><inputtype="text"formenctype="text/plain"><inputtype="text"formenctype="multipart/form-data"><inputtype="text"formenctype="application/x-www-form-urlencoded"></form>


formtarget

<formid="testform2"><inputtype="submit"name="s1"value="v1"formtarget="_blank"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp<inputtype="submit"name="s2"value="v2"formtarget="_self"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp<inputtype="submit"name="s3"value="v3"formtarget="_parent"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp<inputtype="submit"name="s2"value="v2"formtarget="_top"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp<inputtype="submit"name="s3"value="v3"formtarget="_framename"formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp</form>


autofocus

<form><inputtype="text"autofocus><inputtype="text"></form>


required

<formaction="http://localhost:8080/hellojsp/test01.jsp"><inputtype="text"required="required"><buttontype="submit">signin</button></form>


labels

<script>functionvalidate(){vartxtName=document.getElementById("txt_name");varbutton=document.getElementById("btnvalue");varform=document.getElementById("testform");if(txtName.value.trim()==""){varlabel=document.createElement("label");label.setAttribute("for","txt_name");form.insertBefore(label,button);txtName.labels[1].innerHTML="inputname";txtName.labels[1].setAttribute("style","font-size:9px;color:red");}}</script><formid="testform"><labelid="label"for="txt_name">name</label><inputtype="text"id="txt_name"><inputtype="button"id="btnvalue"value="验证"onclick="validate()"></form>


control

<body><script>functionsetValue(){varlabel=document.getElementById("label");vartextbox=label.control;textbox.value="001000"}</script><form><labelid="label">邮编<inputid="txt_zip"maxlength="6"><small>输入六位数字</small></label><inputtype="button"value="默认值"onclick="setValue()"></form></body>


placeholder

<body><inputtype="text"placeholder="username"></body>


list的AutoComplete

<form><inputtype="text"name="greeting"autocomplete="on"list="greetings"><datalistid="greetings"><optionvalue="html">html</option><optionvalue="jsp">jsp</option><optionvalue="java">java</option><optionvalue="c">c</option></datalist></form>


pattern正则验证

<formaction="http://localhost:8080/hellojsp/test01.jsp"><inputpattern="[A-Z]{3}"name="part"><inputtype="submit"></form>


SelectionDirection

<body><script>functionAD(){varcontrol=document.forms[0]['text'];varDirection=control.selectionDirection;alert(Direction);}</script><form><inputtype="test"name="text"><inputtype="button"value="click"onclick="AD()"></form></body>

复选框的indeterminate

<body><inputtype="checkbox"indeterminateid="cb">属性测试<script>varcb=document.getElementById("cb");cb.indeterminate=true;</script></body>


p_w_picpath提交按钮的height,width属性

<body><formaction="test.jsp"method="post">name<inputtype="text"name="name"><inputtype="p_w_picpath"src="img/qi.png"alt="编辑"width="50"height="50"></form></body>


html改良的Input元素

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><!--url类型--><form><inputname="url"type="url"value="http://www.baidu.com"><inputtype="submit"value="signin"></form><!--email类型--><form><inputname="email"type="email"value="thystar@163.com"><inputtype="submit"value="signin"></form><!--date类型--><form><inputtype="date"name="date"value=""><inputtype="submit"value="signin"></form><!--time类型--><form><inputtype="time"name="time"value=""><inputtype="submit"value="signin"></form><!--datetime类型--><form><inputtype="datetime"name="datetime"value=""><inputtype="submit"value="signin"></form><!--datetime-local类型--><form><inputtype="datetime-local"name="datetime-local"value=""><inputtype="submit"value="signin"></form><!--month元素--><form><inputtype="month"name="month"value=""><inputtype="submit"value="signin"></form><!--week--><form><inputtype="week"name="week"value=""><inputtype="submit"value="signin"></form><!--number--><script>functionsum(){varn1=document.getElementById("num1").valueAsNumber;varn2=document.getElementById("num2").valueAsNumber;document.getElementById("res").valueAsNumber=n1+n2;}</script><form><inputtype="number"name="number"value="0"min="0"max="100"step="5"><inputtype="submit"value="signin"><!--jisuanqi--><inputtype="number"id="num1">+<inputtype="number"id="num2">=<inputtype="number"id="res"readonly><inputtype="button"value="计算"onclick="sum()"></form><!--range元素--><inputname="range"type="range"value="25"min="0"max="100"step="5"><!--search--><inputtype="search"><!--tel--><inputtype="tel"><!--color--><inputtype="color"onchange="document.body.style.backgroundColor=document.getElementById('curColor').textContent=this.value;"><spanid="curColor"></span><!--output元素的追加--><script>functionvc(){varnum=document.getElementById("range").value;document.getElementById("output").value=num;}</script><formid="textform"><inputid="range"type="range"value="25"min="0"max="100"step="5"onchange="vc()"><outputid="output">10</output></form><!--表单验证--><script>functioncheck(){varemail=document.getElementById("email0");if(email.value==""){alert("inputemail");returnfalse}elseif(!email.checkValidity()){alert("emailiswrong");returnfalse;}}</script><formid="tv"onsubmit="check()"novalidate="true"><labelfor="email0">Email</label><inputname="email0"type="email"id="email0"><inputtype="submit"></form></body></html>







j极客学院：http://www.jikexueyuan.com/course/772.html