表單是網頁中非常重要的元素之一,它可以讓用戶輸入數據并提交到服務器進行處理。那么表單是屬于CSS還是JS呢?這個問題其實不太好回答,因為表單需要CSS和JS共同完成。
<form> <label for="name">姓名:</label> <input type="text" id="name"> <label for="password">密碼:</label> <input type="password" id="password"> <button type="submit">提交</button> </form>
上面是一個簡單的表單的HTML代碼,它包含了文本框、密碼框和提交按鈕。但是這個表單樣式是比較簡陋的,需要使用CSS來美化樣式。
form { width: 300px; margin: 0 auto; text-align: center; } label { display: inline-block; margin-top: 20px; } input { width: 200px; height: 25px; font-size: 16px; padding-left: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 20px; } button { width: 80px; height: 30px; background-color: #007aff; color: #fff; border: none; border-radius: 5px; } button:hover { background-color: #0062cc; cursor: pointer; }
上面是表單的CSS樣式代碼,它可以美化表單樣式,讓用戶更容易操作。但是這個表單還沒有實現交互功能,需要使用JS來完成。
const form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); const name = document.querySelector('#name').value; const password = document.querySelector('#password').value; if (name === '') { alert('請輸入姓名'); } else if (password === '') { alert('請輸入密碼'); } else { alert('提交成功'); } });
上面是表單的JS代碼,它主要實現了表單提交的驗證功能,如果姓名或密碼為空則會彈出提示框,否則會提示提交成功。
綜上所述,表單需要CSS和JS共同完成,CSS負責美化表單樣式,JS負責實現表單交互功能。因此我們可以說表單既屬于CSS又屬于JS。
下一篇cdn方式vue