《HTML5程序設(shè)計及實踐》課件第3章 HTML5表單

第3章HTML5表單目錄新的表單域新的表單域?qū)傩孕碌膄orm元素新的form屬性Color類型color類型的表單域用于選擇顏色<form>

請選擇一個你喜歡的顏色:<inputtype="color"name="txtcolor"><br> <inputtype="submit"></form>date類型date類型的表單域，用于選擇日期。其語法格式如下：<form>

日期:<inputtype="date"name="txtdate"> <inputtype="submit"value="提交"></form>datetime-local類型datetime-local用于選擇本地時間<form>

日期時間:<inputtype="datetimelocal"name="txtdatetime"> <inputtype="submit"value="提交"></form>month類型month類型的表單域，用于選擇月份<form>

月份:<inputtype="month"name="txtmonth"> <inputtype="submit"value="提交"></form>week類型week類型的表單域，用于選擇周<form>

周:<inputtype="week"name="txtweek"> <inputtype="submit"value="提交"></form>time類型time類型的表單域，用于選擇時間。<form>

時間:<inputtype="time"name="txttime"> <inputtype="submit"value="提交"></form>email類型email類型的表單域，用于輸入應該包含e-mail地址的輸入域<form>

電子郵件:<inputtype="email"name="txtemail"> <inputtype="submit"value="提交"></form>url類型url類型表單域用于輸入包含URL地址信息<form> URL:<inputtype="url"name="txtURL"> <inputtype="submit"value="提交"></form>number類型number類型的表單域，用于輸入應該包含數(shù)值的信息。在代碼里可以設(shè)定輸入數(shù)值的范圍、初始值和步進單位。<form>

數(shù)字:<inputtype="number"name="txtnumber"min="1"max="10"step="2"value="3"> <inputtype="submit"value="提交"></form>range類型range類型的表單域，用于輸入應該包含數(shù)值的輸入域。<form>

范圍:0<inputtype="range"name="txtrange"min="0"max="10"value="5">10 <inputtype="submit"value="提交"></form>search類型search類型用于搜索域，比如站點搜索或Google搜索<form>

查詢:<inputtype="search"name="txtsearch"> <inputtype="submit"value="提交"></form>目錄新的表單域新的表單域?qū)傩孕碌膄orm元素新的form屬性autofocus屬性mark元素用于強調(diào)文檔中的一部分文檔，以高亮背景顯示<formaction="#"method="post"> <p> 1:<inputtype="text"name="txt1"/></p> <p> 2:<inputtype="text"name="txt2"

autofocus/></p> <p> 3:<inputtype="text"name="txt3"/></p> <inputtype="submit"value="提交"/></form>form屬性form屬性用于指定當前輸入域所屬的表單，可以指定該輸入域?qū)儆诙鄠€表單，不同form之間用空格分開。<formaction="#"id="form1"> <p> 姓名:<inputtype="text"name="txtName"/></p> <inputtype="submit"value="提交"/></form><p> 年齡:<inputtype="text"name="txtage"

form="form1"/></p>formaction屬性formaction屬性一般用于submit按鈕，指向一個url地址。當form提交時，瀏覽器會根據(jù)該地址請求消息處理，該屬性會覆蓋form的aciton屬性。<formaction="../jsp/info.jsp"method="post"> <p> 姓名:<inputtype="text"name="txtname"/></p> <p> 密碼:<inputtype="password"name="txtpwd"/></p> <inputtype="submit"value="提交方式1"/> <inputtype="submit"value="提交方式2"

formaction="../jsp/infoWelcome.jsp"/></form>formenctyppe屬性formenctyppe屬性重新指定該表單域的編碼方式。下面的示例中，表單的enctype屬性默認值是“application/x-www-form-urlencoded”，“二進制”按鈕的編碼行為重新定義為"multipart/form-data"<formaction="../jsp/infoenctype.jsp"method="post"> <p> 姓名:<inputtype="text"name="txtname"/></p> <p> 密碼:<inputtype="password"name="txtpwd"/></p><inputtype="submit"value="字符編碼"/> <inputtype="submit"value="二進制"

formenctype="multipart/form-data"/></form>formenctyppe屬性JSP代碼<%

intlen=request.getContentLength();

bytebuffer[]=new

byte[len]; InputStreamin=request.getInputStream();

inttotal=0;

intonce=0;

while((total<len)&&(once>=0)){ once=in.read(buffer,total,len); total+=once; } ByteArrayOutputStreambaos=newByteArrayOutputStream(); baos.write(buffer); Stringstr=baos.toString(); baos.close(); out.println(str);%>formenctyppe屬性formmethod屬性formmethod屬性用于指定表單的提交模式，該屬性可以應用于submit和image類型的表單域，當表單域的formmethod屬性與表單的method屬性沖突時，以表單域的formmethod屬性為準<formaction="../jsp/infoget.jsp"method="get"> <p> 姓名:<inputtype="text"name="txtname"/></p> <p> 密碼:<inputtype="password"name="txtpwd"/> </p> <input type="submit"value="提交"> <inputtype="submit"formmethod="post"formaction="../jsp/infopost.jsp"value="以post方式提交"></form>formnovalidate屬性formnovalidate屬性作用于“submit”按鈕，當設(shè)置按鈕的formnovalidate屬性時，按鈕提交時會覆蓋表單的novalidate屬性，不進行表單域輸入驗證。<form>

電子郵箱:<inputtype="email"name="txtemail"> <input type="submit"value="提交"> <inputtype="submit"formnovalidatevalue="不驗證提交"></form>formtarget屬性formtarget屬性可以作用于“submit”和“image”類型的表單域，用于指定表單提交時的目標窗口，表單域的formtarget屬性會覆蓋表單的target屬性。<formaction="../jsp/info.jsp"method="get"> <p> 姓名:<inputtype="text"name="txtname"/></p> <p> 密碼:<inputtype="password"name="txtpwd"/></p> <input type="submit"value="提交"> <inputtype="submit"formtarget="_blank"value="提交到新窗口"></form>height和width屬性height和width屬性用于指定表單域的大小，當前只能應用于image類型的表單域。<form>

電子郵箱:<inputtype="email"name="txtemail"><br><br>

原始大小：<inputtype="image"src="../img/submit.jpg"alt='submit'value="提交"><br>

指定大?。?lt;inputtype="image"src="../img/submit.jpg"alt='submit'width="69"height="39"value="提交"> </form>list屬性list屬性用于指定表單域的下拉列表選項，其值等于datalist的id值<form>

教材名稱：<inputlist="books"> <datalistid="books"> <optionvalue="JavaSE程序設(shè)計"> <optionvalue="JavaEE程序設(shè)計"> <optionvalue="ASP.NET程序設(shè)計"> </datalist> </form>min和max屬性min和max屬性用于指定表單域的輸入值范圍，這兩個屬性只能應用于類型為number、range、date、datetime、datetimelocal、month、time和week類型的表單域<form>

考試日期:<inputtype="date"min="2015-01-01"><br>

分數(shù):<inputtype="number"max=100min=0></form>multiple屬性multiple屬性是布爾類型的，可以作用于file和email類型的表單域，file類型表單域具有該屬性時，可以選擇多個文件，email類型表單域具有該屬性時，可以輸入多個email郵箱地址。<formaction="../jsp/infomultiple.jsp"method="post">

選擇文件：<inputtype="file"name="inptfile"multiple><br>

電子郵箱：<inputtype="email"name="inputemail"multiple><br> <input type="submit"value="提交"></form>pattern屬性pattern屬性用于給表單域設(shè)置一個正則表達式，用于限制用戶輸入的內(nèi)容，該屬性可以應用于text、search、url、tel、email和password類型的表單域。<form> <inputtype="text"pattern="^[0-9]*$"> <input type="submit"value="提交"></form>placeholder屬性placeholder屬性指定一個字符串，作為一個描述顯示在表單域中，該提示信息一般是淺灰色，與用戶輸入信息有所區(qū)別，當用戶輸入信息后，該提示信息消失。<form> <p>姓名:<inputtype="text"name="txtname"placeholder="請輸入姓名"/></p> <p>密碼:<inputtype="password"name="txtpwd"placeholder="請輸入密碼"/> </p> <inputtype="submit"value="提交"/></form>required屬性required屬性用于指定表單域必須在提交之前輸入值，該屬性可以應用于text、search、url、tel、email、password、datepickers、number、checkbox、radio和file類型的表單域。<form> <p> 姓名:<inputtype="text"name="txtname"required/></p> <p> 密碼:<inputtype="password"name="txtpwd"required/></p> <inputtype="submit"value="提交"/></form>step屬性step屬性用于指定表單域的數(shù)值間隔，該屬性可以應用于number、range、date、datetime、datetime-local、month、time和week類型的表單域<form>

數(shù)字:<inputtype="number"name="txtnumber"step="5"> <inputtype="submit"value="提交"></form>目錄新的表單域新的表單域?qū)傩孕碌膄orm元素新的form屬性datalist元素datalist元素用于輔助表單中文本框輸入，它定義一個列表選項，文本框的list屬性設(shè)置為datalist的id，文本框就會具有自動完成的特性，當用戶在文本框輸入值時，datalist元素的內(nèi)容以列表的形式顯示在文本框底部。<form>

教材名稱：<inputlist="books"> <datalistid="books"> <optionvalue="JavaSE程序設(shè)計"> <optionvalue="JavaEE程序設(shè)計"> <optionvalue="ASP.NET程序設(shè)計"> </datalist> </form>keygen元素kegen元素提供了一種新的基于瀏覽器的安全認證模式，當表單提交時會生成兩個密鑰，一個是私鑰，一個是公鑰，其中私鑰存儲在客戶端，公鑰與表單數(shù)據(jù)一起發(fā)送到服務器端，服務器端可以根據(jù)該公鑰對客戶端進行驗證。<formaction="../jsp/infoget.jsp">

請輸入密碼:<inputtype="password"name="txtpwd"/><br>

請選擇加密強度:<keygenname="key"><br> <inputtype="submit"value="提交"/></form>output元素outp