WEB前端表单及表格标签综合案例

表单标签综合案例：

源代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>音乐节报名表单</title><style>/* 全局样式 */
body {font-family: Arial, sans-serif;max-width: 600px;margin: 0 auto;padding: 20px;color: #333;
}h1 {text-align: center;color: black;
}p {text-align: center;color: dimgray;margin-bottom: 25px;
}/* 表单样式 */
.fo {background-color: #f9f9f9;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}.form-group {margin-bottom: 15px;
}label {display: block;font-weight: bold;margin-bottom: 5px;
}input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="range"],
select,
textarea {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;
}input[type="color"] {height: 35px;width: 50px;padding: 2px;cursor: pointer;
}input[type="radio"],
input[type="checkbox"] {margin-right: 5px;
}textarea {resize: vertical;
}/* 按钮样式 */
.form-actions {display: flex;justify-content: flex-start;gap: 10px;margin-top: 20px;
}input[type="submit"] {background-color: #4CAF50;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;
}input[type="reset"] {background-color: #f44336;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;
}input[type="submit"]:hover,
input[type="reset"]:hover {opacity: 0.9;
}    </style>
</head>
<body><h1>【音乐节名称】报名名单</h1><p>欢迎参加我们盛大的音乐节，请仔细填写一下表格</p><form class="fo"><div class="form-group"><label for="username">姓名：</label><input type="text" id="username" name="用户姓名" placeholder="请输入姓名" required></div><div class="form-group"><label for="password">登录密码：</label><input type="password" id="password" name="登录密码" placeholder="请输入密码，以便后续信息查询" required></div><div class="form-group"><label for="email">邮箱：</label><input type="email" id="email" name="邮箱" placeholder="请输入邮箱，以便接受音乐节相关通知" required></div><div class="form-group"><label for="number">电话：</label><input type="tel" id="number" name="电话" placeholder="请输入电话，以便接受音乐节相关通知" required></div><div class="form-group"><label for="age">年龄：</label><input type="number" id="age" name="age" min="1" max="120" placeholder="请输入您的年龄" required></div><div class="form-group"><label for="date">生日：</label><input type="date" id="date" name="生日" placeholder="年/月/日" required></div><div class="form-group"><label for="arrivalTime">预计到达时间：</label><input type="time" id="arrivalTime" name="arrivalTime"></div><div class="form-group"><label for="stayPeriod">音乐节停留日期时间：</label><input type="datetime-local" id="stayPeriod" name="stayPeriod"></div><div class="form-group"><label for="preferredMonth">您希望未来举办音乐节的月份：</label><input type="month" id="preferredMonth" name="preferredMonth"></div><div class="form-group"><label for="preferredWeek">您希望未来举办音乐节的周次：</label><input type="week" id="preferredWeek" name="preferredWeek"></div><div class="form-group"><label for="satisfaction">您对本次音乐节宣传的满意度：</label><input type="range" id="satisfaction" name="satisfaction" min="0" max="100" value="50"></div><div class="form-group"><label for="favoriteColor">您希望音乐节主色调：</label><input type="color" id="favoriteColor" name="favoriteColor"></div><div class="form-group"><label for="profilePic">上传您的靓照（用于音乐节留念墙）：</label><input type="file" id="profilePic" name="profilePic"></div><div class="form-group"><p>性别：</p><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></div><div class="form-group"><p>您喜欢的音乐类型（可多选）：</p><input type="checkbox" id="rock" name="musicTypes" value="rock"><label for="rock">摇滚</label><input type="checkbox" id="pop" name="musicTypes" value="pop"><label for="pop">流行</label><input type="checkbox" id="jazz" name="musicTypes" value="jazz"><label for="jazz">爵士</label><input type="checkbox" id="electronic" name="musicTypes" value="electronic"><label for="electronic">电子</label></div><div class="form-group"><label for="travelMethod">您来参加音乐节的交通方式：</label><select id="travelMethod" name="travelMethod"><option value="bus">巴士</option><option value="car">自驾</option><option value="train">火车</option><option value="plane">飞机</option></select></div><div class="form-group"><label for="comments">留言（如特殊需求、建议等）：</label><textarea id="comments" name="comments" rows="4" cols="50" placeholder="请留下您的宝贵意见"></textarea></div><div class="form-actions"><input type="submit" value="提交报名信息"><input type="reset" value="重置表单"></div></form>
</body>
</html>

页面截图：

表格标签综合案例：

源代码：

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格标签</title><style>/* 全局样式 */
body {font-family: Arial, Helvetica, sans-serif;padding: 20px;color: #333;
}h1 {text-align: center;color: #789;
}h2 {color: burlywood;border-bottom: 1px solid #789;padding-bottom: 5px;
}p {color: gray;
}ul {list-style-type: disc;
}ol {color: goldenrod;
}li {font-weight: bold;
}table {width: 100%;border-collapse: collapse;
}th,
td {padding: 10px;border: 1px solid #ccc;
}thead {background-color: #f2f2f2;
}td[color="yellow"] {color: yellow;
}</style>
</head>
<body><h1>热门数码产品评测汇总</h1><p>在当今数字化时代，数码产品层出不穷。为了帮助大家更好地挑选适合自己的数码产品，以下是近期热门数码产品的详细评测。</p><h2>一、手机类</h2><p>手机已经成为我们生活中不可或缺的一部分，下面为您介绍几款热门手机。</p><ul><li>苹果 iPhone 16：作为苹果公司的最新款手机，它延续了一贯的高品质和流畅系统。搭载了全新的处理器，性能强劲。</li><li>华为 P70：华为在拍照领域一直表现出色，P70 更是在拍照技术上有了新的突破，同时拥有强大的信号处理能力。</li><li>小米 15：小米以性价比著称，小米 15 在保持高性价比的同时，也在性能和功能上有了很大提升。</li></ul><table><thead><tr><th>手机型号</th><th>处理器</th><th>摄像头像素</th><th>电池容量</th><th>价格</th></tr></thead><tbody><tr><td>苹果 iPhone 16</td><td>A18</td><td>主摄 4800 万</td><td>3500mAh</td><td>7999 元起</td></tr></tbody></table><h2>二、平板电脑类</h2><p>平板电脑适合娱乐、办公等多种场景，以下是几款热门平板电脑的介绍。</p><ol><li>苹果 iPad Pro 2024：拥有强大的性能和出色的屏幕显示效果，适合专业人士进行创意工作。</li></ol>
</body>
</html>

页面截图：