HTML5新增智能表单标签

最新推荐文章于 2022-06-21 15:12:43 发布

码深

最新推荐文章于 2022-06-21 15:12:43 发布

阅读量245

点赞数

分类专栏： HTML5新增智能表单标签文章标签： HTML5新增智能表单标签

本文链接：https://blog.csdn.net/weixin_43158701/article/details/100854695

版权

HTML5新增智能表单标签专栏收录该内容

0 篇文章 0 订阅

订阅专栏

自动完成：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-`1width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    
<!-- 自动完成 -->
    <input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
    <datalist id="autoNames">
        <option  value="飞龙天惊" ></option>
        <option  value="厚德IT" ></option>
        <option  value="Flydragon" ></option>
    </datalist>
</body>

</html>

效果：

H5新增属性的综合测试，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <fieldset>
                <legend>只能表单演示：请用最新Opera 浏览器</legend>
                <form action="" method="POST" id="form1">
                    <input type="text" autofocus="autofocus" required pattern="\d+" name="auto" placeholder="必填项测试" />
                    <input type="number" name="demoNumber" min="1" max="100" step="2" />
                    <input type="email" placeholder="请输入邮箱" name="mail" />
                    <input type="url" name="url" placeholder="输入正确的网址" />
                    <br />
                    日期：<input type="datetime" name="time" />
                    颜色：
                    <input type="color" name="color" /><br />
                    <br />
                    <input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
                    <output onforminput="value=rangedemo.value">0</output>
                    <br />
                    <input type="submit" value="提交表单" />
                </form>
                表单外的input标签：
                <input type="text" form="form1" name="demo" />
            </fieldset>
</body>
</html>

测试效果图：

码深

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增智能表单标签

自动完成：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-`1width, initial-scale=1.0"> <m...
复制链接

扫一扫