Формы

Форма — единственное место, где посетитель что-то отправляет сайту, а не только читает. Отсюда особое отношение: тут человек может ошибиться, бросить дело на полпути или не понять, чего от него хотят.

Зачем это знать

Форму вам напишет нейросеть, и выглядеть она будет прилично. Проверять придётся другое: связана ли подпись с полем, какие условия стоят на ввод, что увидит человек, если ошибётся. Это не видно на картинке — это видно в коде, и три минуты чтения этой статьи дают возможность туда посмотреть.

Из чего состоит форма

Форма — тег <form>, внутри поля и кнопка отправки. У каждого поля обязательно есть имя (name): под этим именем значение уйдёт на сервер. Поле без имени не отправляется вообще — частая и незаметная ошибка.

<form action="/send.php" method="post">
  <label for="name">Как вас зовут</label>
  <input id="name" name="name" type="text" required>

  <button type="submit">Отправить</button>
</form>

Связь подписи и поля держится на паре for и id: они должны совпадать. Тогда щелчок по подписи ставит курсор в поле — мелочь, которая на телефоне экономит промахи, — а программа чтения экрана называет поле по имени, а не «поле ввода текста».

Атрибут type: пятнадцать полей вместо одного

Тег <input> один, а видов у него много, и задаёт вид атрибут type. Это не про красоту: от него зависит клавиатура на телефоне и проверка введённого.

Для длинного сообщения берётся отдельный тег <textarea>, для списка вариантов — <select>.

Браузер проверяет сам

Условия на ввод записываются прямо в разметке, и браузер их соблюдает без всякого JavaScript.

Скрипт нужен не для проверки как таковой, а чтобы показать ошибку по-своему: рядом с полем, вашими словами. Как это делается — в мануале про форму обратной связи.

Группы полей и что происходит после отправки

Переключатели «удобное время: утро, день, вечер» — это не три отдельных вопроса, а один. В разметке такая группа обводится тегом <fieldset>, а общий вопрос пишется в <legend>. Без этого программа чтения экрана назовёт каждый переключатель отдельно, и человек услышит «утро» без всякого вопроса. Переключатели одной группы связывает общее значение name: именно поэтому выбрать можно только один.

После нажатия кнопки браузер собирает пары «имя — значение» и отправляет их по адресу из атрибута action. Способ задаёт method, и выбор между двумя способами простой.

Три мелочи, которые решают

• autocomplete. С ним браузер подставляет имя, почту и телефон одним касанием. Без него человек набирает адрес пальцем — и часто бросает.
• Подпись, а не плейсхолдер. Серый текст внутри поля исчезает при вводе, и человек забывает, что здесь спрашивали. Плейсхолдер — для примера формата, подпись — обязательна.
• Кнопка говорит, что произойдёт. «Отправить сообщение» понятнее, чем «Отправить», и гораздо понятнее, чем «ОК».

Что просить у нейросети

Как проверить, что получилось

• Щёлкнуть по каждой подписи: курсор должен вставать в её поле.
• Заполнить форму, не трогая мышь: только Tab, ввод и Enter.
• Отправить пустую форму: браузер должен остановить отправку и показать, где ошибка.
• Открыть на телефоне: в поле телефона должна появиться цифровая клавиатура.