Саме 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, наведений вище, повністю читабельний. Вікно перегляду також може бути змінено, щоб розмістити зірочку вище або нижче центру.
