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>

頁面截圖：

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/82767.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/82767.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/82767.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！