表单提示信息的实现方法

最新推荐文章于 2023-11-15 10:41:33 发布

weixin_33910434

最新推荐文章于 2023-11-15 10:41:33 发布

阅读量991

点赞数

初看这段代码很没有技术含量，但还是让我学到了东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* 核心就是设置label左浮动，表单为块级，然后使用定位把提示信息定位到需要位置 */
    /* 浮动的元素也可以设置对齐方向 */
    /* 浮动后,其后面的元素会出现浮动环绕 */
        fieldset {
            border: none;
        }
        input[type="text"]{
            display: block;
            width: 20em;
        }
        label {
            float: left;
            width: 5em;
            text-align: right;
        }
        fieldset div {
            position: relative;
        }
        fieldset div span {
            position: absolute;
            /* 因为有换行 */
            left:22em;
        }
    </style>
</head>
<body>
    <fieldset>
        <form>            
            <div>
                <label for="love">我的爱好：<span>请输入你的爱好</span></label>
                <input type="text" name="" id="love">
            </div>
            <div>
                <label for="demo">姓名：<span>请输入相关信息</span></label>
                <input type="text" name="" id="demo">
            </div>
        </form>
            
    </fieldset>
</body>
</html>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33910434

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单提示信息的实现方法

初看这段代码很没有技术含量，但还是让我学到了东西&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;style type="te
复制链接

扫一扫