欢迎光临
我们一直在努力

HTML | 表单(九)布局页面调整

到目前为止,表单已经基本完成了。下面为其进行布局。

首先看一下到目前为止的代码:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>基础表单</title>
</head>
<body>
    <h1 align="center">注册信息</h1>
    <hr color="#336699">
    <form>
        <table width="600px" bgcolor="#f2f2f2" align="center">
            <tr>
                <td>姓名:</td>
                <td><input type="text" name="name" size="25" maxlength="6" placeholder="请输入你的名字" /></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="text" name="email" size="25" maxlength="6" value="@163.com" /></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="pwd" size="25" maxlength="6" placeholder="请输入你的密码" /></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="pwd_conf" size="25" maxlength="6" placeholder="请再次输入你的密码"/></td>
            </tr>
            <tr>
                <td>上传头像:</td>
                <td><input type="file" name="file" /></td>
            </tr>
            <tr>
                <td>简介:</td>
                <td><textarea name="texteara" cols="30" rows="10" placeholder="介绍一下你自己吧!"></textarea></td>
            </tr>
            <tr>
                <td>城市:</td>
                <td>
                    <select name="city">
                        <optgroup label="大陆">
                            <option value="beijing">北京</option>
                            <option value="shanghai">上海</option>
                            <option value="guangzhou">广州</option>
                            <option value="hangzhou">杭州</option>
                            <option value="nanjing">南京</option>
                            <option value="chengdu">成都</option>
                        </optgroup>
                        <optgroup label="其他">
                            <option value="hongkong">香港</option>
                            <option value="aomen">澳门</option>
                            <option value="taiwan">台湾</option>
                        </optgroup>
                    </select>
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>男<input type="radio" name="sex" value="man"/>
                    女<input type="radio" name="sex" value="woman"/>
                    保密<input type="radio" name="sex" value="sex" checked/></td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>唱<input type="checkbox" name="dx1" value="sing"/>
                    跳<input type="checkbox" name="dx1" value="dance"/>
                    RAP<input type="checkbox" name="dx1" value="rap" checked/></td>
            </tr>
            <tr>
                <td><input type="button" value="别点我" name="button">
                    <input type="submit" value="submit" name="submit">
                    <input type="reset" value="reset" name="seset">
                    <input type="image" name="image_button" src="img/submit.png" width="80px"></td>
                <td></td>
            </tr>
            <tr>
                <td><input type="hidden" name="hidden" value="这是一个用户信息"></td>
                <td></td>
            </tr>
        </table>
    </form>
</body>

再来看一下目前的展示效果:

为了让页面更好看,为文字部分使用align="right",为表单部分使用align="left",使其分别右对齐和左对齐。

另外,还要通过colspan="2"使按钮部分充满整行,使用align="center"使按钮部分居中显示。

完成这些操作后的效果如下:

当前代码:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>基础表单</title>
</head>
<body>
    <h1 align="center">注册信息</h1>
    <hr color="#336699">
    <form>
        <table width="600px" bgcolor="#f2f2f2" align="center">
            <tr>
                <td align="right">姓名:</td>
                <td align="left"><input type="text" name="name" size="25" maxlength="6" placeholder="请输入你的名字" /></td>
            </tr>
            <tr>
                <td align="right">邮箱:</td>
                <td align="left"><input type="text" name="email" size="25" maxlength="6" value="@163.com" /></td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <td align="left"><input type="password" name="pwd" size="25" maxlength="6" placeholder="请输入你的密码" /></td align="left">
            </tr>
            <tr>
                <td align="right">确认密码:</td>
                <td align="left"><input type="password" name="pwd_conf" size="25" maxlength="6" placeholder="请再次输入你的密码"/></td align="left">
            </tr>
            <tr>
                <td align="right">上传头像:</td>
                <td align="left"><input type="file" name="file" /></td align="left">
            </tr>
            <tr>
                <td align="right">简介:</td>
                <td align="left"><textarea name="texteara" cols="30" rows="10" placeholder="介绍一下你自己吧!"></textarea></td align="left">
            </tr>
            <tr>
                <td align="right">城市:</td>
                <td align="left">
                    <select name="city">
                        <optgroup label="大陆">
                            <option value="beijing">北京</option>
                            <option value="shanghai">上海</option>
                            <option value="guangzhou">广州</option>
                            <option value="hangzhou">杭州</option>
                            <option value="nanjing">南京</option>
                            <option value="chengdu">成都</option>
                        </optgroup>
                        <optgroup label="其他">
                            <option value="hongkong">香港</option>
                            <option value="aomen">澳门</option>
                            <option value="taiwan">台湾</option>
                        </optgroup>
                    </select>
                </td align="left">
            </tr>
            <tr>
                <td align="right">性别:</td>
                <td align="left">男<input type="radio" name="sex" value="man"/>
                    女<input type="radio" name="sex" value="woman"/>
                    保密<input type="radio" name="sex" value="sex" checked/></td align="left">
            </tr>
            <tr>
                <td align="right">爱好:</td>
                <td align="left">唱<input type="checkbox" name="dx1" value="sing"/>
                    跳<input type="checkbox" name="dx1" value="dance"/>
                    RAP<input type="checkbox" name="dx1" value="rap" checked/></td align="left">
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="button" value="别点我" name="button">
                    <input type="submit" value="submit" name="submit">
                    <input type="reset" value="reset" name="seset">
                    <input type="image" name="image_button" src="img/submit.png" width="80px"></td>
            </tr>
            <tr>
                <td><input type="hidden" name="hidden" value="这是一个用户信息"></td>
                <td></td>
            </tr>
        </table>
    </form>
</body>
赞(0) 打赏
未经允许不得转载:散人研 » HTML | 表单(九)布局页面调整
分享到: 更多 (0)

评论 抢沙发

3 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏