HtML5 form表单

       开始 学html的时候使用的是会html4,之前的form表单是将所有的表单数据写在form里面,在这里面会将所有的表单数据写入在一起,html5,可以将数据表单写在任何地方,只需要在里面假如form属性就可以了。使用也很简单,记得之前学easyUI的时候,可以完成数据表单的数据的效验,但是在html和jsp比如非空这样的效验只能通过js或者止呕呢个发送到服务器进行数据的 效验。在html5中可以直接的使用不同的类型和属性,完成表单的效验等操作。

1.form表单便于排版的方便,可以脱离form,是使用桁架简单,创建一个表单,然后使用一个id,然后创建标签,可以指定form,属性,然后指定到这个标签。如果未设置form的就不会将数据提交到服务器。将页面中的数据可以放在不同的位置上,排版比较方便。

2。举例:

 <form action=“http://loclhost:8080/2.html” id="register" method="get"></form
     用户名:<input type="text" name="user" value="" form="register"/>
     密  码:<input type="password" name="pwd" value="" form="register"/>
     日  期: <select name="year" form="register">
      <option value="1990">1990</option>
      <option value="1991">1991</option>
      <option value="1992">1992</option>
      <option value="1993">1993</option>
      <option value="1994">1994</option>
      <option value="1995">1995</option>
    </select>
    <input type="submit" value="zhuce" form="register"/>

上面将加入form属性的表单进行提交。

3.只能表单的使用:"email"、"url"、"date"、"time"、"month"、"week"、"number"、"ranger"、"search"、"color"

邮箱:<input type="email" name="youxiang" form = "register"/><br/>
 url:<input type="url" name="url" form = "register"/><br/>
 date:<input type="date" name="date" form = "register"/><br/>
 month:<input type="month" name="month" form = "register"/><br/>
 week:<input type="week" name="week" form = "register"/><br/>
 number:<input type="number" name="number" form = "register"/><br/>
滑动条:<input type="range" name="range" max="5" step="2" form = "register"/><br/>
 search:<input type="search" name="search" form = "register"/><br/>
 color:<input type="color" name="color" form = "register"/><br/>

4.属性:Required:必填    、placeholder 默认值、autofocus:自动聚焦,patten:正则(可以不用在js中效验了,直接 在HTML中写正则)

邮箱:<input type="email" name="youxiang" form = "register" Required/><br/>
 或者:
 邮箱:<input type="email" name="youxiang" form = "register" Required="Required"/><br/>
<!--  默认值是给用户看的,不是传递给服务器的 
   这样的话,字是灰色的。
 -->
 默认值:<input type="email" name="morenzhi" form = "register" placeholder="输入用户名" value=""  /><br/>

 邮箱:<input type="email" name="youxiang1" form = "register" autofocus="autofocus"/><br/> 
   默认值:<input type="email" name="youxiang" form = "register" patten="正则表达式" placeholder="输入用户名" value="" /><br/>

5.AutoComplete列表:是用来给我们做提示使用的。

提示可以使用ajax,HTML5中有一个datalist列表给input提供一系列的提示。

<input type="text" name="aotu" value="" list="movie"/> 
 <datalist id="movie">
   <option>html1</option>
   <option>html2</option>
   <option>html3</option>
   <option>html4</option>
   <option>html5</option>
   <option>html6</option>
 </datalist>  

 

posted @ 2018-01-12 23:04  kwdeep  阅读(760)  评论(0编辑  收藏  举报