表单布局

1.简单的表单布局

    <style>
   //将浏览器默认的样式清零
        input {
            padding: 0;
            margin: 0;
            width: 20em;
        }
　　//由于input[type="text"]设置了宽度，所以不能给单选和复选等表单元素设置宽度
        input[type="radio"] {
            width: auto;
            margin: 0 1em 0 0;
        }

        input[type="checkbox"] {
            width: auto;
        }
//将label的display设置为block可以让表单元素和输入提示不在同一行

        label {
            display: block;
        }
//复选框分组
        .col {
            width: 50%;
            float: left;
        }
    </style>
<fieldset>
    <div>
        <label>Name<em>(required):</em></label>
        <input type="text"/>
        <span>incorrect name!</span>
    </div>
    <div>
        <label>Email Address:</label>
        <input type="text"/>
    </div>
    <div>
        <label>Web Address:</label>
        <input type="text"/>
    </div>
<!---将input标签表裹在label中可以使设置了block属性的元素显示在一行->

    <div><label><input type="radio" name="test"/>Yes</label></div>
    <div>
        <label><input type="radio" name="test"/>No</label>
    </div>
    <label>Favourite Color:</label>
　　<!--向左浮动使复选框分组排列-->
    <div class="col">
        <div>
            <label for=""><input type="checkbox"/>red</label>
        </div>
        <div>
            <label for=""><input type="checkbox"/>red</label>
        </div>
        <div>
            <label for=""><input type="checkbox"/>red</label>
        </div>
    </div>
    <div class="col">
        <div>
            <label for=""><input type="checkbox"/>red</label>
        </div>
        <div>
            <label for=""><input type="checkbox"/>red</label>
        </div>
        <div>
            <label for=""><input type="checkbox"/>red</label>
        </div>
    </div>
</fieldset>

 

 一个简单的表单布局模板就像这样，如果不需要其他一些复杂的情况，这种结构完全可以满足需求。