04、HTML5新添表单元素、新添form属性、新增input属性

最新推荐文章于 2023-10-10 14:45:31 发布

桑榆暮霭

最新推荐文章于 2023-10-10 14:45:31 发布

阅读量394

点赞数 1

分类专栏： HTML系列文章标签： HTML5

本文链接：https://blog.csdn.net/jihong10102006/article/details/80594616

版权

HTML系列专栏收录该内容

27 篇文章 0 订阅

订阅专栏

元素	说明
output	标签定义不同类型的输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- oninput 触发事件输出，parseInt（）转换成整型-->
    <form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" id="a">+
        <input type="number" id="b">=
        <output id="x"></output>
    </form>
</body>
</html>

效果图如下：
这里写图片描述

新添form属性

属性	说明
autocomplete	form或input域名自动完功能：即记得之间输入的内容，能在下面提示
novalidate	提交表单时不验证form或者input域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="demo.php" autocomplete="off" novalidate>
        <p>用户名：<input type="text" name="name1"></p>
        <p>邮箱：<input type="email" name="name2"></p>
        <p><input type="submit"></p>
    </form>
</body>
</html>

新增input属性

属性	说明
autofocus	页面加载时自动获得焦点
required	规定输入域不能为空
placeholder	提供一种提示，描述输入域所期待的值
pattern	规定验证input域的模式（正则表达式）
height、width	仅适用于image类型的input标签的图像高度和宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="demo.php" autocomplete="off" >
        <p>用户名：<input type="text" name="name1" autofocus></p>
        <p>邮箱：<input type="email" name="name2" required></p>
        <p>邮箱：<input type="email" name="name3" placeholder="不能缺少@符号"></p>
        <p>描述：<input type="text" pattern="[a-zA-Z]{3}"></p>
        <p><input type="submit"></p>
        <p>
            <input type="image" src="picture.jpg" width="100" height="100">
        </p>
    </form>
</body>
</html>

桑榆暮霭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04、HTML5新添表单元素、新添form属性、新增input属性

元素说明 output 标签定义不同类型的输出&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&
复制链接

扫一扫

专栏目录