对表单应用样式

最新推荐文章于 2021-05-30 21:36:33 发布

原创最新推荐文章于 2021-05-30 21:36:33 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

15 篇文章

订阅专栏

这篇博客详细介绍了如何使用CSS对表单进行样式设计，包括简单的表单布局、复杂的表单布局、部分标签的隐藏以及实现多列复选框的效果。内容引用自《精通CSS 高级Web标准解决方案（第2版）》第7章，通过实例代码展示了如何通过CSS控制label的显示、浮动、宽度等属性，以达到理想的表单样式。还特别讨论了如何处理屏幕阅读器的访问性和多列复选框的布局策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考《精通CSS 高级Web标准解决方案（第2版）》第7章

关于label的使用参考如下链接：https://blog.youkuaiyun.com/gnail_oug/article/details/72852150

1. 简单的表单布局

效果（这里对Name项focus）

HTML

<div id="content">
        <form>
            <fieldset>
                <legend>Your Contact Details</legend>
                <div>
                    <label for="author">Name:<em class="required">(required)</em></label>
                    <input name="author" id="author" type="text" />
                </div>
                <div>
                    <label for="email">Email Address:</label>
                    <input name="email" id="email" type="text" />
                </div>
                <div>
                    <label for="url">Web Address: </label>
                    <input name="url" id="url" type="text" />
                </div>
            </fieldset>
            <fieldset>
                <legend>Comments</legend>
                <div>
                    <label for="text">Message:<em class="required">(required)</em></label>
                    <textarea name="text" id="text"></textarea>
                </div>
            </fieldset>
            <fieldset id="remeber-me">
                <legend>Remember Me</legend>
                <div>
                    <label for="remeber-yes"><input id="remeber-yes" class="radio" name="remember" type="radio" value="yes" checked="checked"/>Yes</label>
                    <label for="remeber-no"><input id="remeber-no" class="radio" name="remember" type="radio" value="no"/>No</label>
                </div>
            </fieldset>
        </form>
    </div>

CSS

<style type="text/css">
        * {
            padding:0;
            margin:0;
        }
        #content{
            width:400px;
            padding: 50px;
        }
        fieldset {
            margin:1em 0;
            padding: 1em;
            border: 1px solid #ccc;
            background-color: #f8f8f8;
        }
        legend {
            font-weight: bold;
        }
        label {
            display: block;
            cursor: pointer;
        }
        input[type="text"],input[type="password"],textarea {
            width:20em;
            border-top:2px solid #999;
            border-left:2px solid #999;
            border-bottom: 1px solid #ccc;
            border-right:1px solid #ccc;
        }
        input[type="text"]:focus,input[type="password"]:focus,textarea:focus {
            background-color: #ffc;
        }
        input.radio,input.checkbox,input.submit {
            width:auto;
        }
        textarea {
            height:5em;
        }
        .required {
            font-size: 0.75em;
            color:#760000
        }
        #remeber-me .radio {
            margin-right: 1em;
        }
    </style>

2. 复杂的表单布局

效果

对1.1的代码修改如下：适当增加#content的宽度。将label的display:block去掉，换成左浮动，为了消除浮动的包裹性，加上width:10em。此外，对label的父元素div清除浮动，这里采用overflow:hidden。

        #content{
            width:500px;
            padding: 50px;
        }
        fieldset >div {
            overflow: hidden;
        }

3. 部分标签的隐藏、多列复选框

这一节给出两个应用：

有时候不希望每个元素都显示标签。
多列复选框

效果

在第2节代码的基础上，添加一个fieldset标签用于防止Personal Information。其中Place of Information是一个select标签以及相应的label，Date of Birth则为三个标签（input、select、input）以及相应的label，对于后面两个label使用text-indent负值隐藏，并将对应的label宽度清空。这里没有使用display:none的原因是这会阻止许多屏幕阅读器的访问。

复选框采用隐式的label形式。对两列复选框分别放置在一个class为col的div中，设置div的宽度为一个较小的值（这里为8em）。这里的label沿用了前面代码的float:left、width:10em和cursor:pointer，保持这些设置不变，我们为div.col设置float:left来包围子元素，同时两个div.col也实现了左浮动，进而水平排列。div.col的父元素div沿用了前面代码form >div的overflow:hidden，因此能够对两个div.col的浮动进一步清除。

此外，这里使用<h2>标签来模拟label，因此需要对原始label的一些样式进行复用，具体来说为float:left，width:10em，cursor:pointer，此外还要对font-size和font-weight进行设置以覆盖<h2>标签自带的样式。

最后，我们对form中的line-height设置为2，增大行间距，更加美观。

<fieldset>
                <legend>Personal Information</legend>
                <div>
                    <label for="placeOfBirth">Place of Birth:</label>
                    <select name="placeOfBirth" id="placeOfBirth">
                        <option>China</option>
                        <option>USA</option>
                        <option>Russia</option>
                    </select>
                </div>
                <div>
                    <label for="dateOfBirth">Date of Birth:</label>
                    <input name="dateOfBirth" id="dateOfBirth" type="text"/>
                    <label for="monthOfBirth" id="monthOfBirthLabel">Month of Birth:</label>
                    <select name="monthOfBirth" id="monthOfBirth">
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                    </select>
                    <label for="yearOfBirth" id="yearOfBirthLabel">Year of Birth:</label>
                    <input name="yearOfBirth" id="yearOfBirth" type="text"/>
                </div>
                <div id="favoriteColor">
                    <h2>Favorite color:</h2>
                    <div class="col">
                        <label><input name="red" id="red" type="checkbox" class="checkbox"/>red</label>
                        <label><input name="yellow" id="yellow" type="checkbox" class="checkbox"/>yellow</label>
                        <label><input name="pink" id="pink" type="checkbox" class="checkbox"/>pink</label>
                        <label><input name="green" id="green" type="checkbox" class="checkbox"/>green</label>
                    </div>
                    <div class="col">
                        <label><input name="orange" id="orange" type="checkbox" class="checkbox"/>orange</label>
                        <label><input name="purple" id="purple" type="checkbox" class="checkbox"/>purple</label>
                        <label><input name="blue" id="blue" type="checkbox" class="checkbox"/>blue</label>
                        <label><input name="other" id="other" type="checkbox" class="checkbox"/>other</label>
                    </div>
                </div>
            </fieldset>

 CSS:

#content{
            width:500px;
            padding: 50px;
            line-height: 2;
        }
input#dateOfBirth {
            width:3em;
            margin-right: 0.5em;
        }
        input#yearOfBirth {
            width: 5em;
        }
        select#monthOfBirth {
            width:10em;
            margin-right: 0.5em;
        }
        #monthOfBirthLabel,#yearOfBirthLabel {
            text-indent: -1000em;
            width:0;
        }
        .col {
            width:8em;
            float:left;
        }
        #favoriteColor h2 {
            width:10em;
            font-size: 1em;
            font-weight: normal;
            float:left;
            cursor: pointer;
        }

4. 完整效果及代码

完整效果

HTML

<div id="content">
        <form>
            <fieldset>
                <legend>Your Contact Details</legend>
                <div>
                    <label for="author">Name:<em class="required">(required)</em></label>
                    <input name="author" id="author" type="text" />
                </div>
                <div>
                    <label for="email">Email Address:</label>
                    <input name="email" id="email" type="text" />
                </div>
                <div>
                    <label for="url">Web Address: </label>
                    <input name="url" id="url" type="text" />
                </div>
            </fieldset>
            <fieldset>
                <legend>Comments</legend>
                <div>
                    <label for="text">Message:<em class="required">(required)</em></label>
                    <textarea name="text" id="text"></textarea>
                </div>
            </fieldset>
            <fieldset id="remeber-me">
                <legend>Remember Me</legend>
                <div>
                    <label for="remeber-yes"><input id="remeber-yes" class="radio" name="remember" type="radio" value="yes" checked="checked"/>Yes</label>
                    <label for="remeber-no"><input id="remeber-no" class="radio" name="remember" type="radio" value="no"/>No</label>
                </div>
            </fieldset>
            <fieldset>
                <legend>Personal Information</legend>
                <div>
                    <label for="placeOfBirth">Place of Birth:</label>
                    <select name="placeOfBirth" id="placeOfBirth">
                        <option>China</option>
                        <option>USA</option>
                        <option>Russia</option>
                    </select>
                </div>
                <div>
                    <label for="dateOfBirth">Date of Birth:</label>
                    <input name="dateOfBirth" id="dateOfBirth" type="text"/>
                    <label for="monthOfBirth" id="monthOfBirthLabel">Month of Birth:</label>
                    <select name="monthOfBirth" id="monthOfBirth">
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                    </select>
                    <label for="yearOfBirth" id="yearOfBirthLabel">Year of Birth:</label>
                    <input name="yearOfBirth" id="yearOfBirth" type="text"/>
                </div>
                <div id="favoriteColor">
                    <h2>Favorite color:</h2>
                    <div class="col">
                        <label><input name="red" id="red" type="checkbox" class="checkbox"/>red</label>
                        <label><input name="yellow" id="yellow" type="checkbox" class="checkbox"/>yellow</label>
                        <label><input name="pink" id="pink" type="checkbox" class="checkbox"/>pink</label>
                        <label><input name="green" id="green" type="checkbox" class="checkbox"/>green</label>
                    </div>
                    <div class="col">
                        <label><input name="orange" id="orange" type="checkbox" class="checkbox"/>orange</label>
                        <label><input name="purple" id="purple" type="checkbox" class="checkbox"/>purple</label>
                        <label><input name="blue" id="blue" type="checkbox" class="checkbox"/>blue</label>
                        <label><input name="other" id="other" type="checkbox" class="checkbox"/>other</label>
                    </div>
                </div>
            </fieldset>
            <p>
                <button id="submit" type="submit">Book Now >></button>
            </p>
        </form>
    </div>

CSS

<style type="text/css">
        * {
            padding:0;
            margin:0;
        }
        #content{
            width:500px;
            padding: 50px;
            line-height: 2;
        }
        fieldset {
            margin:1em 0;
            padding: 1em;
            border: 1px solid #ccc;
            background-color: #f8f8f8;
        }
        legend {
            font-weight: bold;
        }
        label {
            float:left;
            width:10em;
            cursor: pointer;
        }
        input[type="text"],input[type="password"],textarea {
            width:20em;
            border-top:2px solid #999;
            border-left:2px solid #999;
            border-bottom: 1px solid #ccc;
            border-right:1px solid #ccc;
        }
        input[type="text"]:focus,input[type="password"]:focus,textarea:focus {
            background-color: #ffc;
        }
        input.radio,input.checkbox,input.submit {
            width:auto;
        }
        textarea {
            height:5em;
        }
        .required {
            font-size: 0.75em;
            color:#760000
        }
        #remeber-me .radio {
            margin-right: 1em;
        }
        fieldset > div {
            overflow: hidden;
        }
        input#dateOfBirth {
            width:3em;
            margin-right: 0.5em;
        }
        input#yearOfBirth {
            width: 5em;
        }
        select#monthOfBirth {
            width:10em;
            margin-right: 0.5em;
        }
        #monthOfBirthLabel,#yearOfBirthLabel {
            text-indent: -1000em;
            width:0;
        }
        .col {
            width:8em;
            float:left;
        }
        #favoriteColor h2 {
            width:10em;
            font-size: 1em;
            font-weight: normal;
            float:left;
            cursor: pointer;
        }
        button#submit {
            width:200px;height:50px;
            border:1px solid #989898;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            -moz-box-shadow: 2px 2px 2px #ccc;
            -webkit-box-shadow: 2px 2px 2px #ccc;
            box-shadow: 2px 2px 2px #ccc;
            color:#fff;
            font-size: 16px;
            font-weight: bold;
            text-shadow: 1px 1px 1px #666;
            background-color: #8cca12;
            cursor: pointer;
        }
    </style>