美化表单控制元素对齐

来源：互联网发布：mac如何导入手机照片编辑：程序博客网时间：2024/05/29 04:41

平时制作表单之时，比如说注册信息表单，这时需要将表单元素对齐，不然视觉效果特别差，所以这里介绍几个方法解决这个问题。

默认表单：
这里写图片描述

第一个方法就是简单地将form用table来制作，将label放在一个td，而input放在另一个td中，并设置其对齐方式，这种方法是最早的使用方法，也是最方便的一种方法。

代码范例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body background="img/1.gif">        <form action="" method="get">            <table align="center">        <tr>             <td><label class="name">姓名：</label> </td>            <td><input type="text" maxlength="10"/></td>        </tr><tr> <td><label>性别：</label></td>    <td><input type="radio" name="sex" checked="checked"/>男    <input type="radio"  name="sex"/>女</td></tr><tr> <td><label>房间类型：</label></td>    <td>        <input type="radio" name="fang"/>标准套房    <input type="radio" name="fang"/>高级套房    <input type="radio" name="fang"/>豪华套房    </td>    </tr>  <td><tr>      <td>        <label>电话：</label>    </td>    <td>        <input type="text" maxlength="11"/></td></tr>  <tr><td><label>爱好：</label></td><td><input type="checkbox"/>游泳<input type="checkbox"/>上网<input type="checkbox"/>音乐<input type="checkbox"/>冲浪</td></tr><tr><td>    <label>地区：</label></td><td>    <select name="">    <option  selected="selected">请选择</option>    <option value="山西省">山西省</option>    <option value="湖南省">湖南省</option></select></td></tr><tr><td><label>到店日期：</label></td><td><select name="">    <option  selected="selected">2007</option>    <option >2006</option>    <option >2005</option></select>年<select name="">    <option  selected="selected">1</option>    <option >2</option>    <option >3</option></select>月<select name="">    <option  selected="selected">1</option>    <option >2</option>    <option >3</option></select>日<select name="">    <option  selected="selected">12：00以后</option>    <option >1：00以后</option>    <option >2：00以后</option></select></td></tr><tr><td>    <label>离开日期：</label></td><td><select name="">    <option  selected="selected">2007</option>    <option >2006</option>    <option >2005</option></select>年<select name="">    <option  selected="selected">1</option>    <option >2</option>    <option >3</option></select>月<select name="">    <option  selected="selected">1</option>    <option >2</option>    <option >3</option></select>日<select name="">    <option  selected="selected">12：00以后</option>    <option >1：00以后</option>    <option >2：00以后</option></select></td></tr><tr><td><label>照片：</label></td><td><input type="file"/></td></tr><tr><td>    <label>其他要求：</label></td><td><textarea cols="" rows="6" ></textarea>        <p><input type="submit" value="提交"/>        <input type="reset" value="重置"/>        </td> </tr>    </form></table>    </body></html>

（这里可以参考一番，代码简单，并没有什么难度。）

第二种方法是改用div来布局form就使用另一种方法，将label固定宽度来实现。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            form {                    margin-bottom: 18px;                }                .formField {                    overflow: auto;                    width: 100%;                    margin: 5px 0;                }                label {                min-width: 130px;                float: left;                display: block;                margin-right: 5px;                text-transform: capitalize;            }                .formText {                    display: block;                    float: left;                }        </style>    </head>    <body>        <form action="./" method="post" class="form">                <div class="formField clearfix">                    <label for="firstName">first name:</label>                    <input type="text" class="formText" id="firstName"/>                </div>                <div class="formField clearfix">                    <label for="lastName">last name:</label>                    <input type="text" class="formText" id="lastName" />                </div>                <div class="formField clearfix">                    <label for="email">email address:</label>                    <input type="text" class="formText" id="email"/>                </div>                <div class="formField clearfix">                    <label for="blog">blog:</label>                    <input type="text" class="formText" id="blog"/>                </div>            </form>    </body></html>

效果如图：
这里写图片描述

0 0