您的位置：首页 > Web前端 > HTML5

HTML5 智能form表单新属性

2013-09-10 09:28 507 查看
XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。 html5中确实添加了不少的新的属性，给我们省去了好大的功夫去判断。

<FORM id=foo>

…

</FORM>

<INPUT … form="foo">

智能表单使用与规范

<input type=email  … 限制用户输入email格式

<input type=url  … 限制用户输入网址格式

<input type=date  … 限制用户输入日期格式

<input type=time  … 限制用户输入时间格式

<input type=month  … 限制用户输入月份格式

<input type=week  … 限制用户输入周格式

<input type=number  … 限制用户输入数字格式

<input type=range  … 一个滑动条效果

<input type=search  … 搜索格式 results="n"

<input type=color  … 选择颜色格式

*********************************************自己练习的代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        input

        {

             width:200px;

             height:20px;

        }

    </style>

</head>

<body>

 <form action="" method="get" id="foo">

     邮件：<input type="email" placeholder="请输入正确的邮箱地址"/><!--电子邮箱--><br />

     网址  <input type="url" /><!--网址--><br />

     日期：<input type="date" /><!--网址--><br />

     月份：<input type="month" /><!--网址--><br />

     周：<input type="week" /><!--网址--><br />

     时间：<input type="datetime" /><!--网址--><br />

     数字：<input type="number"/><!--网址--><br />

     滑动：<input type="range" min="0" max="100" step="1"><br />

     搜素：<input type="search" results="n" value="搜索"><br />

     颜色：<input type="color" /><br />

     <input type="text" pattern="[789]+" required />正则表达式<br />

     <datalist id="mydata">

         <option label="top1" value="asp.net"></option>

          <option label="top2" value="C#"></option>

          <option label="top3" value="ado"></option>

          <option label="top4" value="server"></option>

          <option label="top5" value="ajax"></option>

     </datalist>

       <input type="submit" value="sub" />

 </form>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航