html5學習筆記(5)
html5表單的新增元素和屬性
成都創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為東山等服務建站，東山等地企業(yè)，進行企業(yè)商務咨詢服務。為東山企業(yè)網站制作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)
標題鏈接：http://jinyejixie.com/article44/pppehe.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網站、商城網站、微信公眾號、品牌網站設計、Google、定制開發(fā)
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 虛擬主機和云主機的區(qū)別是什么？ 2021-03-05
- 什么是虛擬主機 2021-11-19
- 網站虛擬主機空間是什么? 2022-10-02
- 如何選擇適合自己網站的虛擬主機? 2023-03-20
- 新手站長如何選擇虛擬主機 2022-08-01
- 如何選擇正確的虛擬主機 2022-12-18
- 香港虛擬主機購買需要注意哪些問題？ 2022-10-02
- 什么是云虛擬主機以及和云服務器之間的區(qū)別 2022-10-03
- 虛擬主機、VPS、獨立服務器之間的區(qū)別是什么？ 2016-07-22
- 虛擬主機和云服務器到底有什么不同之處？ 2016-11-05
- 為什么支持JSP的虛擬主機那么少？ 2016-10-24
- 新手選擇虛擬主機的五大因素 2022-10-08