Как переместить сообщения об ошибках вправо от текстовых полей, сохраняя при этом текстовое поле по центру?

Я создаю форму для нового сайта, который создаю, но не могу понять, как отображать сообщения об ошибках справа от текстовых полей, сохраняя при этом текстовые поля по центру экрана. До сих пор мне удавалось отображать их только над текстовыми полями, но я бы предпочел, чтобы они отображались рядом с ними. Любая помощь, которую вы можете предложить, будет принята с благодарностью.

Вот мой код ...

<!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>

При чем здесь mysql? Старайтесь не добавлять лишние теги.

— 09.06.2018 01:44

html css

09.06.2018 01:30

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Попробуйте это решение

<!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>

Спасибо, вроде сработало. Теперь ошибки отображаются рядом с полями, но поля не выровнены по центру экрана.

— 09.06.2018 01:50

Они просто скрывают элемент диапазона, то есть окно ошибки, а затем отображают его при возникновении ошибки

— 09.06.2018 02:22

Как ты это делаешь?

— 09.06.2018 05:26

09.06.2018 01:41