如何将错误消息与注册表单中的表单字段分开？
[英]how do I separate error messages from the form fields in a registration form?
问题描述
我正在为自己正在建立的网站制作注册表格，但是无法将回显的错误消息与表格中的文本框分开。 每次我在浏览器中运行它以测试错误消息时，文本框都会移到左侧（不对齐），错误消息会显示在它们的右侧。 显然，它使两个对象都居中对齐，但是我只希望表单域居中。 您可以提供的任何帮助都将受到赞赏。
这是我的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 个解决方案
解决方案1
0 2018-06-08 21:55:05
一种方法是使form-group的display:inline-block和position:relative 。 之后，您必须将form-group的中点与text-align:center放在form 。
现在，您只需将错误消息绝对定位，然后将它们移到top:0; left: 270px像素（输入宽度left: 270px像素，填充2 * 10像素）
如果您只想在输入框下显示错误消息，则可以使用简单的diplay:block; text-align:center; diplay:block; text-align:center; 在help-block就足够了
如何从FOSUserBundle注册表单获取表单数据？
[英]How can I get the form data from the FOSUserBundle registration form?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.