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

发布于：2025-05-10 ⋅ 阅读:(12) ⋅ 点赞:(0)

                                                           表单标签综合案例：

                                                                    源代码：

<!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>

页面截图：

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布