Как расширить эту адаптивную форму Flexbox для отображения сообщений под полем ввода - PullRequest
Новая
       1

Как расширить эту адаптивную форму Flexbox для отображения сообщений под полем ввода

0 голосов
/ 26 января 2020

Я создал форму ответа, используя Flexbox, так же, как видел ее в книге. Он настраивается на разные размеры экрана:

enter image description here

Работает нормально. Тем не менее, я хотел бы сделать некоторые проверки формы, и я хотел бы отобразить сообщение под полем ввода. Я могу обработать проверку, но я не знаю, как отобразить это сообщение под полями ввода. Мне нужно что-то вроде этого:

enter image description here

Вот вся страница: 

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 1.8rem;
}

form {
  max-width: 40em; /* 640px */
  border: 1px solid #666;
  border-radius: 6px;
  padding: 1em;
  margin: 0 auto;
}

form > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

form > ul > li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

form > ul > li > label {
  flex: 0 0 8em; /* 8em * 16px = 128px */
  margin-right: 1em; /* 16px */
}

form > ul > li > input {
  flex: 1 1 30em; /* 20em * 16px = 320px */
}

input[type="submit"] {
  width: 10em;
  height: 2em;
  flex: 0 1 8em; /* 8em * 16px = 128px */
  margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form</title>
</head>
<body>
  <form action="" method="POST">
    <h2>Form</h2>
    <ul>
      <li>
        <label for="form-name">Name:</label>
        <input class="textinput" type="text" name="username" id="form-name">
      </li>
      <li>
        <label for="form-email">Email:</label>
        <input class="textinput" type="email" name="email" id="form-email">
      </li>
      <li class="buttons">
        <input type="submit" value="Submit">
      </li>
    </ul>
  </form>
</body>
</html>

Буду благодарен за любые предложения. Спасибо!

Ответы [ 2 ]

0 голосов
/ 26 января 2020

Вы открыты для изменений или, возможно, используете другой метод макета?

Ниже представлена ​​работающая версия с использованием сетки. Лично я считаю, что формы лучше выкладывать с помощью Grid.

Я удалил неупорядоченный список, главным образом потому, что это не кажется обычной практикой при создании формы.

Я также вынул некоторый излишний код для демонстрации Grid. 

body {
  padding: 5px;
}

 

form {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
 }

 label {
  font-weight: bold;
 }

 .error {
  margin: 0;
  background: pink;
 }

 @media (min-width: 375px) {
   form {
     width: 500px;
     grid-template-columns: 1fr 2fr;
   }
  
   .error {
     grid-column: 2;
   }
  
   #submit {    
     grid-column: 2;
   }
 }

 
  
 

       <!DOCTYPE html>
   <html lang="en-US">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Form</title>
    </head>
   <body>
    <h2>Form</h2>    
    <form action="" method="POST">    
     <label for="form-name">Name:</label>
     <input class="textinput" type="text" name="username" id="form-name">      
     <p class="error">I am name error</p>
     <label for="form-email">Email:</label>
     <input class="textinput" type="email" name="email" id="form-email">
      <p class="error">I am email error</p>
     <input type="submit" value="Submit" id="submit">    
    </form>
   </body>
 </html>
0 голосов
/ 26 января 2020 
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form</title>
</head>
<body>
  <form action="" method="POST">
    <h2>Form</h2>
    <ul>
      <li>
        <label for="form-name">Name:</label>
        <input class="textinput" type="text" name="username" id="form-name">
         <p class="errrorMessage">Error Message goes here</p>
      </li>
      <li>
        <label for="form-email">Email:</label>
        <input class="textinput" type="email" name="email" id="form-email">
         <p class="errrorMessage">Error Message goes here</p>
      </li>
      <li class="buttons">
        <input type="submit" value="Submit">
      </li>
    </ul>
  </form>
</body>
</html>

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 1.8rem;
}

form {
  max-width: 40em; /* 640px */
  border: 1px solid #666;
  border-radius: 6px;
  padding: 1em;
  margin: 0 auto;
  padding: 16px
}

form > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

form > ul > li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  position: relative;
  padding: 40px 0
}

form > ul > li > label {
  flex: 0 0 8em; /* 8em * 16px = 128px */
  margin-right: 1em; /* 16px */
}

form > ul > li > input {
  flex: 1 1 30em; /* 20em * 16px = 320px */
}

input[type="submit"] {
  width: 10em;
  height: 2em;
  flex: 0 1 8em; /* 8em * 16px = 128px */
  margin: 0 auto;
}

.errrorMessage {
  position: absolute;
  right: 0;
  top: 60%;
  width: 70%
}

@media screen and (max-width: 508px) {
  .errrorMessage {
    width: 100% !Important;
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...