《HTML5程序设计及实践》课件第3章 HTML5表单

第3章HTML5表单目录新的表单域新的表单域属性新的form元素新的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类型的表单域，用于输入应该包含数值的信息。在代码里可以设定输入数值的范围、初始值和步进单位。<form>

数字:<inputtype="number"name="txtnumber"min="1"max="10"step="2"value="3"> <inputtype="submit"value="提交"></form>range类型range类型的表单域，用于输入应该包含数值的输入域。<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>目录新的表单域新的表单域属性新的form元素新的form属性autofocus属性mark元素用于强调文档中的一部分文档，以高亮背景显示<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属性用于指定当前输入域所属的表单，可以指定该输入域属于多个表单，不同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提交时，浏览器会根据该地址请求消息处理，该属性会覆盖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”按钮，当设置按钮的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>

指定大小：<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程序设计"> <optionvalue="JavaEE程序设计"> <optionvalue="ASP.NET程序设计"> </datalist> </form>min和max属性min和max属性用于指定表单域的输入值范围，这两个属性只能应用于类型为number、range、date、datetime、datetimelocal、month、time和week类型的表单域<form>

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

分数:<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属性用于给表单域设置一个正则表达式，用于限制用户输入的内容，该属性可以应用于text、search、url、tel、email和password类型的表单域。<form> <inputtype="text"pattern="^[0-9]*$"> <input type="submit"value="提交"></form>placeholder属性placeholder属性指定一个字符串，作为一个描述显示在表单域中，该提示信息一般是浅灰色，与用户输入信息有所区别，当用户输入信息后，该提示信息消失。<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属性用于指定表单域的数值间隔，该属性可以应用于number、range、date、datetime、datetime-local、month、time和week类型的表单域<form>

数字:<inputtype="number"name="txtnumber"step="5"> <inputtype="submit"value="提交"></form>目录新的表单域新的表单域属性新的form元素新的form属性datalist元素datalist元素用于辅助表单中文本框输入，它定义一个列表选项，文本框的list属性设置为datalist的id，文本框就会具有自动完成的特性，当用户在文本框输入值时，datalist元素的内容以列表的形式显示在文本框底部。<form>

教材名称：<inputlist="books"> <datalistid="books"> <optionvalue="JavaSE程序设计"> <optionvalue="JavaEE程序设计"> <optionvalue="ASP.NET程序设计"> </datalist> </form>keygen元素kegen元素提供了一种新的基于浏览器的安全认证模式，当表单提交时会生成两个密钥，一个是私钥，一个是公钥，其中私钥存储在客户端，公钥与表单数据一起发送到服务器端，服务器端可以根据该公钥对客户端进行验证。<formaction="../jsp/infoget.jsp">

请输入密码:<inputtype="password"name="txtpwd"/><br>

请选择加密强度:<keygenname="key"><br> <inputtype="submit"value="提交"/></form>output元素outp