如何将注册表单中的错误消息与表单字段分开？
如何将注册表单中的错误消息与表单字段分开？
提问于 2018-06-09 05:46:23
我正在创建一个网站的注册表，但无法将回显的错误消息从表单中的文本框中分离出来。每次我在浏览器中运行它来测试错误消息时，文本框都会移动到左侧(未对齐)，错误消息出现在文本框的右侧。很明显，这两个对象都居中对齐，但我只希望表单域居中。如果您能提供任何帮助，我们将不胜感激。
这是我的html和css代码。
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<style>
body {
background-color: silver;
}
.welcome {
text-align: center;
font-family: "Arial";
font-size: 30px;
text-shadow: 2px 2px lightgrey;
color: white;
padding-top: 15px;
}
.form-group {
text-align: center;
}
input[name=username], input[name=first_name], input[name=last_name], input[name=email],
input[name=password], input[name=confirm_password] {
border: 3px solid lightgrey;
padding: 10px;
background: white;
margin: 0 0 10px 0;
width: 250px;
outline:0 !important;
}
.help-block {
font-family: "Arial";
font-size: 12pt;
color: white;
}
input[type=submit] {
color: grey;
border: 3px solid lightgrey;
padding: 5px;
width: 100px;
text-align: center;
}
input[type=submit]:focus {
outline:0 !important;
}
input[type=submit]:hover {
background-color: #ddd;
}
input[type=submit]:active {
background-color: #aaa;
color: lightgrey;
}
</style>
</head>
<div class="welcome">
<h1>Register</h1>
</div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<input type="text" name="username" class="form-control" value="<?php echo $username; ?>" placeholder="Username">
<span class="help-block"><?php echo $username_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($first_name_err)) ? 'has-error' : ''; ?>">
<input type="text" name="first_name" class="form-control" value="<?php echo $first_name; ?>" placeholder="First Name">
<span class="help-block"><?php echo $first_name_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($last_name_err)) ? 'has-error' : ''; ?>">
<input type="text" name="last_name" class="form-control" value="<?php echo $last_name; ?>" placeholder="Last Name">
<span class="help-block"><?php echo $last_name_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($email_err)) ? 'has-error' : ''; ?>">
<input type="text" name="email" class="form-control" value="<?php echo $email; ?>" placeholder="Email">
<span class="help-block"><?php echo $email_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<input type="password" name="password" class="form-control" value="<?php echo $password; ?>" placeholder="Password">
<span class="help-block"><?php echo $password_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
<input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>" placeholder="Confirm Password">
<span class="help-block"><?php echo $confirm_password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
</html>
回答 1
Stack Overflow用户
发布于 2018-06-09 05:55:06
一种方法是制作form-group的display:inline-block和position:relative。之后，你必须将form-group和text-align:center放在form的中央。
现在，您可以简单地定位错误消息的绝对位置，并将它们移动到top:0;和left: 270px (输入的宽度为250px，填充为2*10px )
如果您只想在输入框中显示错误消息，那么在help-block上使用一个简单的diplay:block; text-align:center;就足够了
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50768779
复制相关文章
相似问题