Web前端开发技术（第3版）储久良 实验12

1、编写如图所示的登录界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style type="text/css">
        fieldset{width: 300px;height: 120px; border: 2px double #003399}
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend align="left">登录页面</legend>
            用户名：<input type="text" size="20"><br>
            密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" size="20"><br>
            类&nbsp;&nbsp;&nbsp;&nbsp;型：<input type="radio" />管理员
            <input type="radio"/>普通用户<br>
            &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">记住密码
            <input type="checkbox">自动登录<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </fieldset>
    </form>
</body>
</html>

2、利用表单和表单元素设计简单的应聘界面，如图所示，写出实现的HTML代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应聘页面</title>
</head>
<body>
    <form>
        <font size="4"><strong>希望工作地点：</strong></font>
        <select name="didian">
            <option value="1">北京</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">上海</option>
        </select>
        <font size="4"><strong>月薪要求：</strong></font><input type="text" size="15px">
        <input type="checkbox">要求提供过渡住房<br>
        <font size="4"><strong>请选择应聘行业：</strong></font><br>
        <select size="20">
            <option selected>计算机软件</option>
            <option>计算机硬件</option>
            <option>计算机服务</option>
            <option>通信/电信/网络设备</option>
            <option>互联网/电子商务</option>
            <option>网络游戏</option>
            <option>电子技术/半导体/集成电路</option>
            <option>仪器仪表/工业自动化</option>
        </select>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

更多推荐

Web前端开发技术(第3版)储久良 实验12