HTML5 智能form表单新属性

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>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值