web基础·表单标签：input及相关属性

最新推荐文章于 2024-03-19 22:59:36 发布

昔冰_G

最新推荐文章于 2024-03-19 22:59:36 发布

阅读量2k

点赞数 1

分类专栏：前端标签属性基础文章标签： html html5

本文链接：https://blog.csdn.net/qq_38800316/article/details/118269172

版权

前端标签属性基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

（所有的浏览器都支持input标签）

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

属性·type

type="email" 邮箱地址类型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <ul>
            <input type="email">
            <!--type属性值为email，当点击提交submit后，浏览器会自行检测是否符合邮箱格式-->
        </ul>

        <input type="submit" value="提交">
    </form>
</body>

</html>

type="url" 网址类型：//.***

<body>
    <form action="">
        <ul>
            <input type="url">
            <!--type属性值为url，当点击提交submit后，浏览器会自行检测是否符合网址格式-->
        </ul>

        <input type="submit" value="提交">
    </form>
</body>

type="date" 日期类型（可以出小日历的）

<body>
    <form action="">
        <ul>
            <input type="date">
            <!--type属性值为date，是可以出小日历的那种嘞-->
        </ul>

        <input type="submit" value="提交">
    </form>
</body>

type="time" 时间类型（有上下箭头可以对时/分进行调整）

<body>
    <form action="">
        <ul>
            <input type="time">
            <!--type属性值为time，上下箭头可以调整时间-->
        </ul>

        <input type="submit" value="提交">
    </form>
</body>

type="number" 数字类型（只可输入数字，其他字符无法输入）

<body>
    <form action="">
        <ul>
            <input type="number">
            <!--type属性值为number，只可以输入数字、减号（负号）、小数点-->
        </ul>

        <input type="submit" value="提交">
    </form>
</body>

type="color" 颜色类型（会有颜色选择器提供颜色选择）

<body>
    <form action="">
        <ul>
            <input type="color">
            <!--type属性值为color，浏览器会提供颜色选择器来做颜色选择-->
        </ul>

        <input type="submit" value="提交">
    </form>
</body>

其他属性

required="required" 输入不能为空

<body>
    <form action="">
        <ul>
            <input type="email" required="required">
            <!--提交后会提示必填项-->
        </ul>

        <input type="submit" value="提交">
    </form>
</body>

placeholder="等待填补" 占位符/提示文本

<body>
    <form action="">
        <ul>
            <input type="email" placeholder="等待输入">
            <!--会在文本框中有提示，当输入后则消失-->
        </ul>

        <input type="submit" value="提交">
    </form>
</body>

autofocus="autofocus" 光标自动定位

<body>
    <form action="">
        <ul>
            <input type="email" autofocus="autofocus" >
            <!--光标定位-->
        </ul>

        <input type="submit" value="提交">
    </form>
</body>

autocomplete="on"/autocomplete="off" 是否显示历史键入值

需要配合name属性使用

例如:有一个type为email的input标签，这个标签的name值是"email"

第一次输入的值为666@aaa.com；

第二次输入时会提示上一次的666@aaa.com；

如果我们有两个input的name值都是"email"，那么这两个输入框中曾输入的文本内容都会作为历史键入值在这个input文本框上显示出来

例如：一个type为text的input标签、一个type为email的input标签，但是这两个不同类型的input标签的name属性值都是"email"，所以这两个input曾经的键入值都会在name="email"的input文本框'们'中的任意一个被聚焦后显示出来。

那么，如果所有表单元素都不想使用autocomplete功能呢？见下面的方法：

直接给form表单加上自动填充的属性，设置属性值为off就ok咯

<form autocomplete="off"> 
    <!--直接给form表单上加autocomplete="off"就可以关掉整个表单的自动填充了-->
         <input type="text" name="wd"> 
         <input type="email" name="email"> 
</form>

昔冰_G

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
web基础·表单标签：input及相关属性

（所有的浏览器都支持input标签）根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。属性·typetype="email"邮箱地址类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...
复制链接

扫一扫