前端学习笔记76-表单补充

最新推荐文章于 2024-11-06 16:04:23 发布

小欣CZX

最新推荐文章于 2024-11-06 16:04:23 发布

阅读量105

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/116569805

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记76-表单补充

input
submit
- button
- reset
button
color
email
autocomplete属性
readonly属性
disabled属性
autofocus属性

input

submit

这个上一节讲过，不赘述。

button

这个和submit不同，它是一个普通按钮。

reset

这个是重置按钮。

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

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


</head>

<body>

    <form action="target.html">
        <input type="text">
        <!-- 普通按钮 -->
        <input type="button" value="按钮">
        <!--  重置按钮-->
        <input type="reset">
    </form>
</body>

</html>

在这里插入图片描述

button

这个和input一样，有submit、button、reset，且功能一样。

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

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


</head>

<body>

    <form action="target.html">
        <input type="text">
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button type="button">按钮</button>
    </form>
</body>

</html>

在这里插入图片描述
不同的地方是input是自结束标签，而button是成对出现的。所以button里可以放图片等其他东西，用起来更灵活。

color

这个可以在网页选择颜色。

    <form action="target.html">
        <input type="color">
    </form>

在这里插入图片描述
它的缺点就是兼容性。IE好像不支持这个。

email

用这个，当我们输入内容点击提交时，它会判断是不是符合格式。

    <form action="target.html">
        <input type="email">
        <input type="submit">
    </form>

在这里插入图片描述
虽然这个在IE中可以用，但是显示的效果不大一样，所以少用。

autocomplete属性

这个是input的属性
看下图
在这里插入图片描述
当我输入12，并提交后，下次鼠标移入文本框时，会有我上次输入的数据。这个有时候并不是我们需要的，这个时候就可以用autocomplete。

       <input type="text" name="us" autocomplete="off">
       <br>
       <input type="text" name="us">
       <br>
       <input type="submit">

在这里插入图片描述

可以看到，第一个文本框没有提示信息了，但是第二个由于我没有设置autocomplete，所以还有。如何批量处理呢？
写在form里。

    <form action="target.html" autocomplete="off">
       <input type="text" name="us" >
       <br>
       <input type="text" name="us">
       <br>
       <input type="submit"> 
    </form>

在这里插入图片描述

readonly属性

这个为将表单项设置为只读。

    <form action="target.html" autocomplete="off">
       <input type="text" name="us" value="dfaed" readonly>
       <br>
       <input type="text" name="us">
       <br>
       <input type="submit"> 
    </form>

在这里插入图片描述
从结果可以看到，只能读value值，不能输入。

disabled属性

这个是将表单项设置为禁用。
这个和readonly功能差不多。不过当我们点击提交按钮时，readonly可以提交成功，disabled则没有提交。

autofocus属性

设置表单项自动获取焦点。
直接看代码

    <form action="target.html" autocomplete="off">
       <input type="text" name="us" >
       <br>
       <input type="text" name="us" autofocus >
       <br>
       <input type="submit"> 
    </form>