黑马程序员htmlcss案例day14

### 黑马程序员 HTML 和 CSS Day 14 案例 #### 表单验证与提交处理 在第十四天的学习中，重点在于表单的高级应用和交互效果。通过使用 JavaScript 结合 HTML 和 CSS 来增强用户体验。 ```html <form id="registrationForm"> <div> <!-- 使用 label 标签关联输入框 --> <label for="username">用户名:</label> <input type="text" name="username" required /> </div> <div> <label for="password">密码:</label> <input type="password" name="password" pattern=".{6,}" title="至少六个字符" required /> </div> <button type="submit">注册</button> </form> ``` 为了确保用户填写的信息有效，在 `<form>` 中加入了 `required` 属性来防止空白提交，并利用 `pattern` 对特定字段设置正则表达式的约束条件[^5]。 #### 动态样式调整 当页面加载完成或者发生某些事件时，可以通过JavaScript动态改变元素的样式： ```javascript document.getElementById('registrationForm').addEventListener('submit', function(event){ event.preventDefault(); // 阻止默认行为 const form = this; if (validateForm(form)) { document.querySelector('.success-message').style.display = 'block'; setTimeout(() => { form.reset(); document.querySelector('.success-message').style.display = 'none'; }, 3000); } }); function validateForm(form) { let isValid = true; Array.from(form.elements).forEach(element => { if (!element.checkValidity()) { element.classList.add('invalid'); isValid = false; } else { element.classList.remove('invalid'); } }); return isValid; } ``` 这段脚本会在点击按钮前先做一次简单的客户端校验，如果成功，则显示一条成功的消息并重置表单；如果有任何错误，则给相应的输入项加上 `.invalid` 类以便于视觉反馈[^2]。 #### 自定义伪类选择器的应用 对于更复杂的UI需求，可以自定义一些CSS伪类来进行特殊状态下的样式控制: ```css /* 定义全局变量 */ :root { --primary-color: #ff8a80; } /* 当鼠标悬停在版权信息上的链接时变色 */ .copyright a:hover { color: var(--primary-color); } .invalid { border-color: red !important; box-shadow: 0 0 5px rgba(255, 0, 0, .7); } ``` 这里不仅实现了基本的功能性操作，还考虑到了美观性和易用性的提升[^3]。