Формы и состояния проверки
Pico растягивает поля формы на всю ширину, выравнивает подписи и рисует рамку фокуса. От вас нужна только правильная связка из учебника: <label> у каждого поля. Ошибки Pico показывает через атрибут aria-invalid — тот же, по которому программы чтения с экрана узнают о неверном поле.
Поля и подписи
Соберём форму обратной связи для сайта Анны:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<form>
<label for="name">Имя</label>
<input type="text" id="name" name="name" placeholder="Олег">
<label for="topic">Тема</label>
<select id="topic" name="topic">
<option>Новый сайт</option>
<option>Доработка</option>
</select>
<label for="message">Сообщение</label>
<textarea id="message" name="message" rows="3"></textarea>
<button type="submit">Отправить</button>
</form>Каждое поле занимает всю ширину, подпись стоит над ним, у списка справа стрелка. Кнопка type="submit" внутри формы тоже растянута на всю ширину — так Pico оформляет кнопки отправки.
Подсказки, переключатели, группы
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<form>
<label for="email">Email</label>
<input type="email" id="email" aria-describedby="email-help">
<small id="email-help">Отвечу в течение двух дней.</small>
<label>
<input type="checkbox" role="switch" name="newsletter">
Получать новые записи блога
</label>
<fieldset role="group">
<input type="search" name="q" placeholder="Поиск по блогу">
<input type="submit" value="Найти">
</fieldset>
</form><small> сразу после поля становится серой подсказкой под ним. Чекбокс с role="switch" выглядит как ползунок-переключатель. <fieldset role="group"> ставит поле и кнопку в одну строку.
Состояния проверки
| Значение | Вид поля и подсказки <small> |
|---|---|
aria-invalid="true" | Красная рамка и значок, красная подсказка |
aria-invalid="false" | Зелёная рамка и галочка, зелёная подсказка |
| атрибута нет | Обычное поле |
Атрибут ставит ваш скрипт после проверки. Пример проверяет email при уходе с поля:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<label for="contact">Email для ответа</label>
<input type="email" id="contact" aria-describedby="contact-help" required>
<small id="contact-help">Например, anna@example.com</small>
<script>
const field = document.querySelector('#contact');
const help = document.querySelector('#contact-help');
field.addEventListener('blur', () => {
const ok = field.checkValidity();
field.setAttribute('aria-invalid', ok ? 'false' : 'true');
help.textContent = ok ? 'Адрес подходит' : 'Введите адрес целиком';
console.log('Поле верно:', ok);
});
</script>Введите «anna@» и щёлкните мимо поля: рамка станет красной, подсказка — красной с текстом ошибки. Допишите адрес и снова уйдите с поля — рамка позеленеет. Метод checkValidity() проверяет поле по атрибутам type и required.
Частая ошибка
Поставить aria-invalid="false" всем полям сразу в разметке. Тогда пустая форма заранее покрыта зелёными галочками, будто всё уже заполнено верно. Не пишите атрибут, пока поле не проверено, и добавляйте его только после ввода или попытки отправки.