Это 2019 год, и предыдущие ответы на эту проблему не использовали
- CSS-сетка
- Переменные CSS
- Элементы формы HTML5
- SVG в CSS
CSS-сетка - это способ создания форм в 2019 году, поскольку вы можете размещать метки перед входными данными без дополнительных разделов, промежутков, промежутков со звездочками и других реликвий.
Вот куда мы идем с минимальным CSS:
HTML для вышеупомянутого:
<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
<p class="form-instructions">Please enter the following information to create your account.</p>
<label for="firstname">First name</label>
<input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
<label for="lastname">Last name</label>
<input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
<label for="email_address">Email address</label>
<input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
<label for="password">Password</label>
<input type="password" name="password" id="password" title="Password" required="">
<label for="confirmation">Confirm password</label>
<input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
<input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
<label for="is_subscribed">Subscribe to the newsletter</label>
<input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
<label for="remember_meGCJiRe0GbJ">Remember me</label>
<p class="required">* Required</p>
<button type="submit" title="Register">Register</button>
</form>
Также можно добавить текст-заполнитель, что настоятельно рекомендуется. (Я просто отвечаю на эту среднюю форму).
Теперь о переменных CSS:
--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');
--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
<path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');
CSS для элементов формы:
input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
background-image: var(--icon-required);
background-position-x: right;
background-repeat: no-repeat;
background-size: contain;
}
input:valid {
--icon-required: var(--icon-tick);
}
Сама форма должна быть в сетке CSS:
form {
align-items: center;
display: grid;
grid-gap: var(--form-grid-gap);
grid-template-columns: var(--form-grid-template-columns);
margin: auto;
}
Значения для столбцов могут быть установлены как 1fr autoили 1frс чем угодно, например <p>тегами в форме, установленными на диапазон 1 / -1. Вы меняете переменные в своих медиа-запросах, чтобы поля ввода отображались на всю ширину на мобильном устройстве и, как указано выше, на рабочем столе. Вы также можете изменить размер сетки на мобильных устройствах, если хотите, используя метод переменных CSS.
Когда поля действительны, вы должны получить зеленую галочку вместо звездочки.
SVG в CSS - это способ избавить браузер от необходимости совершать круговой обход сервера для получения изображения звездочки. Таким образом вы можете точно настроить звездочки, примеры здесь расположены под необычным углом, вы можете отредактировать это, так как значок SVG выше полностью читаем. Окно просмотра также можно изменить, поместив звездочку над или под центром.
