web开发实验报告：叮叮书屋表单代码实现

最新推荐文章于 2024-11-25 22:21:52 发布

特蕾西娅今天也在迷茫

最新推荐文章于 2024-11-25 22:21:52 发布

阅读量359

点赞数 8

文章标签：前端 html

本文链接：https://blog.csdn.net/2301_79645836/article/details/143350159

版权

实验要求：

用html实现以下的内容

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 2px black solid;
            height: 300px;
            width: 500px;
        }
    </style>
</head>
<body>
    <h1>联系我们</h1>
    <div>叮叮书店成立于1980年6月，是由教育部主管、清华大学主<br>
        办的综合出版单位。植根于“清华”这座久负盛名的高等<br>
        学府，秉承清华人“自强不息，厚德载物”的人文精神。<br>
    </div>
    <div>需要填写以下内容</div>
    <div class="box">
        姓名：<input type="text"><br>
        <form>
            性别：
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
          </form>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" min="10" max="60" required placeholder="18-28岁">
        <form>
            爱好：
            <label>
                <input type="checkbox" name="aihao" value="wangluo"> 网络
            </label>
            <label>
                <input type="checkbox" name="aihao" value="shujuku"> 数据库
            </label>
            <label>
                <input type="checkbox" name="aihao" value="biancheng"> 编程
            </label>
        </form>
        电子邮件：<input type="text"><br>
        固定电话：<input type="text"><br>
        公司：<input type="text"><br>
        内容：<textarea id="long-text" name="comment"></textarea><br>
        <input type="button" value="取消">
        <input type="button" value="提交">
    </div>
</body>
</html>

实验结果（运行结果）：