第三章表单布局与表单交互习题

最新推荐文章于 2024-09-27 16:35:04 发布

@无铭

最新推荐文章于 2024-09-27 16:35:04 发布

阅读量200

点赞数 7

文章标签： html 前端

本文链接：https://blog.csdn.net/xs377905132/article/details/142552425

版权

第一题

采用表格布局完成“CASIO”计算机外观设计，其中表格的每一个单元格均需要设计边框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>计算器布局</title>
</head>
<body>
    <!-- 创建一个表格，设置边框、对齐方式和背景色 -->
    <table border="1px" align="center" width="20%" height="15%" bordercolor="black" bgcolor="grey">
        <!-- 表格的第一行，包含一个图像，跨越4个单元格 -->
        <tr align="center">
            <td colspan="4" height="20"><img src="img/xt1.bmp" align="left"/></td>
        </tr>

        <!-- 第二行，留空，用于增加垂直空间 -->
        <tr align="center" bgcolor="white">
            <td colspan="4" height="50"></td>
        </tr>

        <!-- 第三行，数字键 1, 2, 3 和 4 -->
        <tr align="center">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>

        <!-- 第四行，数字键 4, 5, 6 和减号 -->
        <tr align="center">
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>-</td>
        </tr>

        <!-- 第五行，数字键 7, 8, 9 和乘号 -->
        <tr align="center">
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>*</td>
        </tr>

        <!-- 第六行，数字键 0 和操作符键 '='、'CE' 和 '/' -->
        <tr align="center">
            <td>0</td>
            <td>=</td>
            <td>CE</td>
            <td>/</td>
        </tr>
    </table>
</body>
</html>

第二题

实现登录界面的基础操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> <!-- 设置字符编码为UTF-8 -->
    <title>登录页面</title> <!-- 设置网页标题 -->
</head>
<body>
    <div align="center"> <!-- 将内容居中显示 -->
        <form> <!-- 开始表单 -->
            <fieldset align="center"> <!-- 创建一个边框和标题的区域 -->
                <legend>登录页面</legend> <!-- 表单标题 -->

                <label for="username">用户名:</label> <!-- 用户名标签 -->
                <input type="text" id="username" name="username" required> <!-- 用户名输入框，设置为必填 -->
                <br><br>

                <label for="password">密 码:</label> <!-- 密码标签 -->
                <input type="password" id="password" name="password" required> <!-- 密码输入框，设置为必填 -->
                <br><br>

                <label for="role">角色:</label> <!-- 角色选择标签 -->
                <input type="radio" id="admin" name="role" value="admin"> <!-- 管理员角色选项 -->
                <label for="admin">管理员</label> <!-- 管理员标签 -->
                <input type="radio" id="user" name="role" value="user"> <!-- 普通用户角色选项 -->
                <label for="user">普通用户</label> <!-- 普通用户标签 -->
                <br><br>

                <input type="checkbox" id="remember" name="remember"> <!-- 记住密码复选框 -->
                <label for="remember">记住密码</label> <!-- 记住密码标签 -->

                <input type="checkbox" id="auto-login" name="auto-login"> <!-- 自动登录复选框 -->
                <label for="auto-login">自动登录</label> <!-- 自动登录标签 -->
                <br>

                <button type="submit">提交</button> <!-- 提交按钮 -->
                <button type="reset">重置</button> <!-- 重置按钮 -->
            </fieldset>
        </form> <!-- 结束表单 -->
    </div>
</body>
</html>