html5 智能表单介绍

最新推荐文章于 2021-07-01 08:27:59 发布

原创最新推荐文章于 2021-07-01 08:27:59 发布 · 814 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

19 篇文章

订阅专栏

智能表单介绍

1、XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。

…

</FORM>

2、HTML5提供了多样的输入类型和风格，让设计界面更加丰富

智能表单使用与规范

<input
type="text"
list="mydata"
/>
  
<datalist
id="mydata">
        <option
label="Top1"
value="让子弹飞">
        <option
label="Top2"
value="非诚勿扰2">
        <option
label="Top3"
value="大笑江湖">
        <option
label="Top4"
value="赵氏孤儿">
        <option
label="Top5"
value=“PHP100">
</datalist>
新属性介绍：
autofocus       载入时自动获得焦点
required        必填项目
placeholder     点击input内容消失
pattern         验证正则表达式

智能表单的浏览器支持

实例

<!DOCTYPE html> 
<head>
<meta
charset=utf-8>
<title>HTML5视频教程-canvas</title>
</head>
<body>
<form
action=""
method="get"
id="foo">
邮件<input
type="email"
placeholder="请输入正确mail地址"><br>
网址<input
type="url"><br>
日期<input
type="date"><br>
月份<input
type="month"><br>
 周 <input
type="week"><br>
时间<input
type="time"><br>
数字<input
type="number"><br>
滑动<input
type=range 
min="0"
max="3"
step="1"><br>
搜索<INPUT
type=search
results="n" 
value="搜索"><br>
颜色<INPUT
type=color><br>
正则测试<input
type="text"
pattern="[789]+"
required />
<input
type="text"
list="mydata"
/>
    <datalist
id="mydata">
        <option
label="Top1"
value="656463">
        <option
label="Top2"
value="HTML5">
        <option
label="Top3"
value="Javascript">
        <option
label="Top4"
value="赵氏孤儿">
        <option
label="Top5"
value="初恋这件小事">
</datalist>
<input
type="submit"
value="sub">
</form>
</body>
</html>