📅  最后修改于: 2023-12-03 15:21:34.879000             🧑  作者: Mango
中心表单组引导程序是一种常见的UI组件,通常用于设计带有表单的网站和应用程序。这个组件包含了一系列表单字段和交互控件,可以使用户更容易地输入和提交信息。
中心表单组引导程序通过在页面的中心位置显示表单,使其更加明显和易于访问。同时,该组件还可以包含通知和错误消息,以帮助用户了解其输入数据的准确性和完整性。
中心表单组引导程序通常由HTML,CSS和JavaScript编写而成。HTML主要用于定义表单字段和页面结构,CSS用于样式化表单和页面元素,JavaScript用于表单验证和交互控件。
<div class="centered-form">
<form>
<h2>登录</h2>
<input type="email" placeholder="邮箱" required />
<input type="password" placeholder="密码" required />
<input type="submit" value="登录" />
<p class="message">还没有账号? <a href="#">立即注册</a></p>
</form>
</div>
.centered-form {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.centered-form form {
background: #fff;
padding: 40px;
border-radius: 4px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
.centered-form h2 {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
.centered-form input[type="email"],
.centered-form input[type="password"] {
display: block;
width: 100%;
padding: 10px;
border: none;
margin-bottom: 20px;
border-radius: 4px;
border: 1px solid #ccc;
}
.centered-form input[type="submit"] {
background-color: #4caf50;
border: none;
color: #fff;
cursor: pointer;
margin-bottom: 20px;
padding: 10px;
width: 100%;
border-radius: 4px;
}
.centered-form .message {
text-align: center;
font-size: 16px;
}
.centered-form .message a {
color: #4caf50;
text-decoration: none;
}
.centered-form .message a:hover {
text-decoration: underline;
}
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
if (!form.email.value || !form.password.value) {
alert('请填写完整的邮箱和密码!');
return;
}
if (form.password.value.length < 8) {
alert('密码长度必须至少为8个字符!');
return;
}
// 登录逻辑
});
中心表单组引导程序是一种带有表单的常见UI组件,其可以使用户更容易地输入和提交信息。此外,该组件还包含了一系列交互控件和信息提示,可以帮助用户更好地了解其输入数据的准确性和完整性。通过使用HTML,CSS和JavaScript,开发人员可以轻松地构建中心表单组引导程序,以增强其应用程序和网站的可用性和易用性。