stackoom
  简体   繁体   中英

how do I move the error messages to the right of the text boxes while keeping the text box centered?

 原文  2018-06-08 23:30:09  7   1    html/ css

Question

I'm creating a form for a new site I'm building, but cannot figure out how to display the error messages to the right of the text boxes, all while keeping the text boxes centered on the screen. So far, I've only been able to make them appear above the text boxes, but i'd rather have them show up beside them. Any help you can offer would be greatly appreciated.

Here's my code... 

 <!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 { display: flex; flex-direction: column; align-items: center; 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; padding-bottom: 10px; } 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' : ''; ?>"> <span class="help-block"><?php echo $username_err; ?></span> <input type="text" name="username" class="form-control" value="<?php echo $username; ?>" placeholder="Username"> </div> <div class="form-group <?php echo (!empty($first_name_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $first_name_err; ?></span> <input type="text" name="first_name" class="form-control" value="<?php echo $first_name; ?>" placeholder="First Name"> </div> <div class="form-group <?php echo (!empty($last_name_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $last_name_err; ?></span> <input type="text" name="last_name" class="form-control" value="<?php echo $last_name; ?>" placeholder="Last Name"> </div> <div class="form-group <?php echo (!empty($email_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $email_err; ?></span> <input type="text" name="email" class="form-control" value="<?php echo $email; ?>" placeholder="Email"> </div> <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $password_err; ?></span> <input type="password" name="password" class="form-control" value="<?php echo $password; ?>" placeholder="Password"> </div> <div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $confirm_password_err; ?></span> <input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>" placeholder="Confirm Password"> </div> <div class="form-group"> <input type="submit" class="btn btn-primary" value="Submit"> </div> </form> </html>

1 answers

solution1
 0  2018-06-08 23:41:43

Try this solution 

<!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{                               /* added this */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }


  .form-group {
    display: flex;
    flex-direction: row;             /* change flex-direction to row */
    align-items: center;
    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;
    padding-bottom: 10px;
  }
  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' : ''; ?>">
    <span class="help-block"><?php echo $username_err; ?></span>
    <input type="text" name="username" class="form-control" value="<?php echo $username; ?>" placeholder="Username">
  </div>
  <div class="form-group <?php echo (!empty($first_name_err)) ? 'has-error' : ''; ?>">
    <span class="help-block"><?php echo $first_name_err; ?></span>
    <input type="text" name="first_name" class="form-control" value="<?php echo $first_name; ?>" placeholder="First Name">
  </div>
  <div class="form-group <?php echo (!empty($last_name_err)) ? 'has-error' : ''; ?>">
    <span class="help-block"><?php echo $last_name_err; ?></span>
    <input type="text" name="last_name" class="form-control" value="<?php echo $last_name; ?>" placeholder="Last Name">
  </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">Error Message</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">Error Message</span>
  </div>

  <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
    <span class="help-block"><?php echo $password_err; ?></span>
    <input type="password" name="password" class="form-control" value="<?php echo $password; ?>" placeholder="Password">
  </div>
  <div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
    <span class="help-block"><?php echo $confirm_password_err; ?></span>
    <input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>" placeholder="Confirm Password">
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" value="Submit">
  </div>
</form>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I pull my image right while keeping it centered once collapsed in Bootstrap? how to decrease the height of the footer while keeping the text inside centered How can I make a div grow the same size as another div, while keeping it's text vertically centered? How do I move text to the right side of the page? How do I move my text to the right of an image? How to align the OTP Text boxes to be evenly centered How do I move h1 text to the bottom of box? How do I move user input inside text box? How do i make a centered “block of text” How do i make text visible in right side of a box
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM