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
autofocus
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
placeholder
<body> <inputtype="text"placeholder="username"> </body>list的AutoComplete
<form> <inputtype="text"name="greeting"autocomplete="on"list="greetings"> <datalistid="greetings"style="display:none"> <optionvalue="html">html</option> <optionvalue="jsp">jsp</option> <optionvalue="java">java</option> <optionvalue="c">c</option> </datalist> </form>pattern正则验证
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>image提交按钮的height,width属性
<body> <formaction="test.jsp"method="post"> name<inputtype="text"name="name"> <inputtype="image"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极客学院：
相关文章
精彩导读
热门资讯
关注我们
