HTML+CSS动态显示表单栏位标题

最新推荐文章于 2024-07-15 11:41:19 发布

无知的圆

最新推荐文章于 2024-07-15 11:41:19 发布

阅读量459

点赞数

分类专栏： HTML&CSS 前端文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_45904930/article/details/114448650

版权

本文介绍如何使用HTML和CSS创建一个动态表单，表单栏位标题在聚焦时移出显示为深色，失去焦点时返回并变为浅灰色。当输入框有文字且失去焦点时，标题会自动隐藏。同时，当在密码输入框中输入内容后，会显示登入按钮。

摘要由CSDN通过智能技术生成

实现效果

建构一个模拟的“登入表单”，有一个用户名称和密码两个输入框，输入框里有一个浅灰色的标题，当聚焦到输入框时，该标题就会移动到输入框之外并显示为深色，当失去焦点时，标题回到输入框并恢复浅灰色。

而当输入框里有文字时，失去焦点时标题文字就会自动隐藏。

当密码输入框内输入密码以后，右边就会出现一个登入的按钮

实现方法

建构表单的HTML代码与CSS代码

处理输入框标题在聚焦与失焦的位置

在栏位输入文字后将标题隐藏，以及显示登入按钮

代码

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>用户登录</h2>
    <div class="row">
        <input type="text" id=

最低0.47元/天解锁文章