html5表单的新增元素和属性
成都创新互联从2013年创立,先为东山等服务建站,东山等地企业,进行企业商务咨询服务。为东山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
formaction:
<body> <form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea> <form id="testform2"> <input type="submit" name="s1" value="v1" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp <input type="submit" name="s2" value="v2" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp <input type="submit" name="s3" value="v3" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp </form> </body>
formmethod:
<form id="testform3"> <input type="submit" name="s1" value="v1" formmethod="post" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp <input type="submit" name="s2" value="v2" formmethod="get" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp <input type="submit" name="s3" value="v3" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp </form>
formenctype
<form id="testform"> <input type="text" formenctype="text/plain"> <input type="text" formenctype="multipart/form-data"> <input type="text" formenctype="application/x-www-form-urlencoded"> </form>
formtarget
<form id="testform2"> <input type="submit" name="s1" value="v1" formtarget="_blank" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp <input type="submit" name="s2" value="v2" formtarget="_self" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp <input type="submit" name="s3" value="v3" formtarget="_parent" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp <input type="submit" name="s2" value="v2" formtarget="_top" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp <input type="submit" name="s3" value="v3" formtarget="_framename" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp </form>
autofocus
<form> <input type="text" autofocus> <input type="text"> </form>
required
<form action="http://localhost:8080/hellojsp/test01.jsp"> <input type="text" required="required"> <button type="submit">sign in</button> </form>
labels
<script> function validate(){ var txtName=document.getElementById("txt_name"); var button=document.getElementById("btnvalue"); var form = document.getElementById("testform"); if(txtName.value.trim()==""){ var label=document.createElement("label"); label.setAttribute("for", "txt_name"); form.insertBefore(label, button); txtName.labels[1].innerHTML="input name"; txtName.labels[1].setAttribute("style", "font-size:9px;color:red"); } } </script> <form id="testform"> <label id="label" for="txt_name">name</label> <input type="text" id="txt_name"> <input type="button" id="btnvalue" value="验证" onclick="validate()"> </form>
control
<body> <script> function setValue(){ var label = document.getElementById("label"); var textbox = label.control; textbox.value = "001000" } </script> <form> <label id="label" >邮编 <input id="txt_zip" maxlength="6"> <small>输入六位数字</small> </label> <input type="button" value="默认值" onclick="setValue()"> </form> </body>
placeholder
<body> <input type="text" placeholder="user name"> </body>
list的AutoComplete
<form> <input type="text" name="greeting" autocomplete="on" list="greetings" > <datalist id="greetings" > <option value="html">html</option> <option value="jsp">jsp</option> <option value="java">java</option> <option value="c">c</option> </datalist> </form>
pattern正则验证
<form action="http://localhost:8080/hellojsp/test01.jsp"> <input pattern="[A-Z]{3}" name="part"> <input type="submit"> </form>
SelectionDirection
<body> <script> function AD(){ var control = document.forms[0]['text']; var Direction = control.selectionDirection; alert(Direction); } </script> <form> <input type="test" name="text"> <input type="button" value="click" onclick="AD()"> </form> </body>
复选框的indeterminate
<body> <input type="checkbox" indeterminate id="cb">属性测试 <script> var cb = document.getElementById("cb"); cb.indeterminate = true; </script> </body>
p_w_picpath提交按钮的height,width属性
<body> <form action="test.jsp" method="post"> name<input type="text" name="name"> <input type="p_w_picpath" src="img/qi.png" alt="编辑" width="50" height="50"> </form> </body>
html改良的Input元素
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <!-- url类型--> <form> <input name="url" type="url" value="http://www.baidu.com"> <input type="submit" value="sign in"> </form> <!-- email类型--> <form> <input name="email" type="email" value="thystar@163.com"> <input type="submit" value="sign in"> </form> <!-- date类型--> <form> <input type="date" name="date" value=""> <input type="submit" value="sign in"> </form> <!-- time类型--> <form> <input type="time" name="time" value=""> <input type="submit" value="sign in"> </form> <!-- datetime类型--> <form> <input type="datetime" name="datetime" value=""> <input type="submit" value="sign in"> </form> <!-- datetime-local类型--> <form> <input type="datetime-local" name="datetime-local" value=""> <input type="submit" value="sign in"> </form> <!-- month元素--> <form> <input type="month" name="month" value=""> <input type="submit" value="sign in"> </form> <!-- week--> <form> <input type="week" name="week" value=""> <input type="submit" value="sign in"> </form> <!-- number--> <script> function sum(){ var n1 = document.getElementById("num1").valueAsNumber; var n2 = document.getElementById("num2").valueAsNumber; document.getElementById("res").valueAsNumber = n1+n2; } </script> <form> <input type="number" name="number" value="0" min="0" max="100" step="5"> <input type="submit" value="sign in"> <!-- jisuanqi--> <input type="number" id="num1"> + <input type="number" id="num2"> = <input type="number" id="res" readonly> <input type="button" value="计算" onclick="sum()"> </form> <!-- range元素--> <input name="range" type="range" value="25" min="0" max="100" step="5"> <!-- search--> <input type="search"> <!-- tel--> <input type="tel"> <!-- color--> <input type="color" onchange="document.body.style.backgroundColor=document.getElementById('curColor').textContent=this.value;"> <span id="curColor"></span> <!-- output元素的追加--> <script> function vc(){ var num = document.getElementById("range").value; document.getElementById("output").value = num; } </script> <form id="textform"> <input id="range" type="range" value="25" min="0" max="100" step="5" onchange="vc()"> <output id="output">10</output> </form> <!-- 表单验证--> <script> function check(){ var email=document.getElementById("email0"); if(email.value==""){ alert("input email"); return false }else if(!email.checkValidity()){ alert("email is wrong"); return false; } } </script> <form id="tv" onsubmit="check()" novalidate="true"> <label for="email0">Email</label> <input name="email0" type="email" id="email0"> <input type="submit"> </form> </body> </html>
j极客学院:http://www.jikexueyuan.com/course/772.html
当前题目:html5学习笔记(5)
标题链接:https://www.cdcxhl.com/article44/pppehe.html
成都网站建设公司_创新互联,为您提供静态网站、商城网站、微信公众号、品牌网站设计、Google、定制开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联