html5学习笔记(5)

html5表单的新增元素和属性

formaction:

1 2 3 4 5 6 7 8 9 10 11 12

< 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:

1 2 3 4 5

< 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

1 2 3 4 5

< 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

1 2 3 4 5 6 7 8

< 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

1 2 3 4

< form >      < input  type = "text"  autofocus>      < input  type = "text" > </ form >

required

1 2 3 4

< form  action = "http://localhost:8080/hellojsp/test01.jsp" >      < input  type = "text"  required = "required" >      < button  type = "submit" >sign in</ button > </ form >

labels

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

< 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

1 2 3

< body >      < input  type = "text"  placeholder = "user name" > </ body >

list的AutoComplete

1 2 3 4 5 6 7 8 9

< form >      < input  type = "text"  name = "greeting"  autocomplete = "on"  list = "greetings"  >      < datalist  id = "greetings"  style = "display: none" >          < option  value = "html" >html</ option >          < option  value = "jsp" >jsp</ option >          < option  value = "java" >java</ option >          < option  value = "c" >c</ option >      </ datalist > </ form >

pattern正则验证

1 2 3 4 5

< form  action = "http://localhost:8080/hellojsp/test01.jsp" >            < input  pattern = "[A-Z]{3}"  name = "part" >      < input  type = "submit" > </ form >

SelectionDirection

1 2 3 4 5 6 7 8 9 10 11 12 13

< 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

1 2 3 4 5 6 7

< body >      < input  type = "checkbox"  indeterminate  id = "cb" >属性测试      < script >          var cb = document.getElementById("cb");          cb.indeterminate = true;      </ script > </ body >

image提交按钮的height,width属性

1 2 3 4 5 6

< body >      < form  action = "test.jsp"  method = "post" >          name< input  type = "text"  name = "name" >          < input  type = "image"  src = "img/qi.png"  alt = "编辑"  width = "50"  height = "50" >      </ form > </ body >

html改良的Input元素

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108

<!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