对表单应用样式

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

关于label的使用参考如下链接：https://blog.csdn.net/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. 部分标签的隐藏、多列复选框

     这一节给出两个应用：

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

    效果

      在第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>