2024最新表单元素以及设置表单样式

阿立聊代码
已于 2024-08-10 18:48:53 修改
阅读量222
点赞数 3
分类专栏：网页设计文章标签：前端 javascript html 表单样式
于 2024-08-10 18:48:17 首次发布
本文链接：https://blog.csdn.net/qq_36324341/article/details/141094666
版权
网页设计专栏收录该内容
30 篇文章 0 订阅
订阅专栏
代码如下：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .stylin_form1 {
            /* 表单整体宽度 */
            width: 14em;
            /* 容器内居中 */
            margin: 20px auto;
            border: 1px solid #bbb7ae;
            padding: 0.5em .5em .15em;
        }

        /* 表单主标题 */
        .stylin_form1 h3 {
            margin: 0px;
            padding: 0 0 .2em .2em;
            font-weight: 600;
            color: #bbb7ae;
        }

        /* 包含控件和标注 */
        .stylin_form1 fieldset {
            margin: 0;
            padding: 0 0 .2em 0;
            width: 100%;
            border: 0;
        }

        .stylin_form1 legend {
            width: 100%;
            padding: .3em 0;
            background-color: #bbb7ae;
        }

        .stylin_form1 legend span {
            display: block;
            font-size: 1em;
            line-height: 1.1em;
            padding: 0 0 0 .4em;
            font-weight: 700;
            color: #fff;
        }

        .stylin_form1 section {
            overflow: hidden;
            /* 强制section 包含表单控件及标注 */
            padding: .2em 0 .4em 0;
            border-bottom: 8px solid #e7e5df;
            /* 根据需要在每个section 间增加间距 */
        }

        .stylin_form1 section:last-child {
            /* 每组最后一个section 没有边框 */
            border-bottom: 0px;
        }

        .stylin_form1 section label,
        /* 表单控件的标注 */
        .stylin_form1 section h4 {
            /* h4 是复选框和单选按钮组的标题 */
            display: block;
            clear: both;
            margin: .3em .3em 0 0;
            /* 右外边距确保标注文本在碰到input 之前会换行 */
            padding-bottom: .1em;
            font-size: .8em;
            font-family: 'Droid Sans';
            font-weight: 400;
            line-height: 1.1;
        }

        .stylin_form1 section label span,
        /* 星号表示必填字段 */
        .stylin_form1 section h4 span {
            font-size: .75em;
            vertical-align: text-top;
            color: #f00;
        }

        .stylin_form1 section p.note {
            /*说明星号是必填字段的文本*/
            font-size: .7em;
            color: #f00;
            margin: 0;
            padding: 0 0 .3em 0;
        }

        .stylin_form1 section input,
        .stylin_form1 section textarea,
        .stylin_form1 section select {
            margin: .2em .5em .2em 0;
            padding: .2em .4em;
            /* 给input 中的文本添加间距 */
            color: #000;
            box-shadow: 1px 1px 3px #ccc;
            font-size: .8em;
            /* 针对Firefox - 没有这条声明会在textarea 上使用Courier */
            font-family: inherit;
            outline: none;
            /* 去掉默认蓝色聚焦轮廓线 */
        }

        /* 设定文本字段（文本、密码、日期、文本区等）的样式，并加圆角 */
        .stylin_form1 section input,
        .stylin_form1 section textarea {
            width: 12em;
            /*设定字段宽度*/
            border: 1px solid #bbb7ae;
            border-radius: 3px;
            /*圆角边框*/
        }

        .stylin_form1 section textarea {
            height: 5em;
            /* textarea 的高度 */
            margin-top: .3em;
            /* 与上面label 的间距 */
            line-height: 1.1;
        }

        .stylin_form1 section p {
            /*控件使用说明*/
            margin: .3em .75em 0;
            clear: both;
            font-size: .7em;
            line-height: 1.1;
            color: #000;
        }

        .stylin_form1 section p.error {
            color: #f00;
            /* 添加error 类，把说明文字设定为红色 */
        }

        .stylin_form1 section section {
            /* 控件/标注的内包装 */
            overflow: hidden;
            /* 强制元素包围浮动标注 */
            margin: .2em 0 .3em .4em;
            padding: 0 0 .1em 0;
            border-bottom: none;
        }

        .stylin_form1 section section input {
            /*单选按钮或复选框*/
            float: left;
            clear: both;
            width: auto;
            /* 重设继承的宽度 */
            margin: .1em 0 0em .3em;
            /* 顶部与标注对齐，左侧防止intput 溢出 */
        }

        .stylin_form1 section section label {
            float: left;
            clear: none;
            /* 重设继承的值 */
            width: 15em;
            margin: .15em 0 0 .6em;
            /* 在相邻的复选框之间、复选框与标注之间增加间距 */
            font-weight: normal;
            /* 重设继承的值 */
            font-size: .7em;
            line-height: 1.2;
        }

        .stylin_form1 section select {
            margin-left: .4em;
            font-size: .85em;
        }

        .stylin_form1 section input[type="submit"] {
            /*提交按钮*/
            width: auto;
            /* 覆盖为其他字段设定的宽度 */
            margin: .4em .3em 0 0;
            font-size: 1em;
            font-weight: 800;
            color: #fff;
            background-color: #bbb7ae;
            cursor: pointer;
            /*在鼠标位于按钮之上时，把光标变成小手形状*/
        }

        .stylin_form1>section:last-child {
            /*居中提交按钮*/
            text-align: center;
        }
    </style>
</head>

<body>
    <form class="stylin_form1" action="#" method="post">
        <h3>A Stylin' Form</h3>
        <!-- 控件组，即各种控件的容器 -->
        <fieldset>
            <!-- 控件组文字说明或者标题 -->
            <legend><span>Part 1 &#8226;Basic Controls</span></legend>
            <!-- 单行文本输入控件 -->
            <section>
                <p class="note">* indicates required field</p>
                <!-- for属性把标注和空间关联起来，它的值必须与空间ID值相同 -->
                <label for="user_name">User Name <span style="color: red;">*</span></label>
                <!-- text属性让这个控件可以输入文本 -->
                <input type="text" id="user_name" name="user_name" />
                <p>Please select a user name</p>
            </section>
            <!-- 开始密码控件 -->
            <section>
                <label for="password">Password <span style="color: red;">*</span></label>
                <!-- 密码文本显示为掩码 -->
                <input type="password" id="password" name="password" maxlength="20" />
                <p>Password must be 8 or more characters</p>
            </section>
            <!-- 开始多行文本输入控件 -->
            <section>
                <label for="desc">Description: </label>
                <textarea name="desc" id="desc" placeholder="Enter the desc here."></textarea>
            </section>
            <!-- 开始HTML5日期控件 -->
            <section>
                <label for="special_date">Date:</label>
                <input type="date" id="special_date" name="event_date" min="2024-08-09" />
            </section>
        </fieldset>
        <fieldset>
            <legend><span>Part 2 &#8226; Multiple-Choice Controls</span></legend>
            <!-- 开始复选框 -->
            <section>
                <h4>Select Only One</h4>
                <section>
                    <input checked="checked" id="radio1" name="radioset" type="radio" value="Choice_1" />
                    <label for="radio1">Choice 1 is pre-selected and shows the text wraps nicely
                        if it goes to multiple lines.</label>
                </section>
                <section>
                    <input checked="checked" id="radio2" name="radioset" type="radio" value="Choice_1" />
                    <label for="radio2">Choice 2</label>
                </section>
                <section>
                    <input checked="checked" id="radio3" name="radioset" type="radio" value="Choice_1" />
                    <label for="radio3">Choice 3</label>
                </section>
            </section>
            <!-- 开始选项列表(下拉列表) -->
            <section>
                <label for="select_choice">Select Your Choice</label>
                <select name="select_choice" id="select_choice">
                    <option value="0">None</option>
                    <option value="1">Choice 1</option>
                    <option value="2">Choice 2</option>
                    <option value="3">Choice 3</option>
                    <option value="4">Choice 4</option>
                </select>
            </section>
            <!-- 开始提交按钮 -->
            <section>
                <input type="submit" value="Submit This Form" />
            </section>
        </fieldset>
    </form>
</body>

</html>