Создавай полноценные, доступные и готовые к продакшену формы.
Открыть этот урок в KodokonФорма - это вход почти в любое взаимодействие в вебе: регистрация, поиск, оформление заказа, обратная связь. Ты уже знаешь, как устроена страница; теперь переходим к практике. Начни с золотого правила: у каждого поля есть атрибут name, потому что именно он отправляется на сервер, а не id.
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
<button type="submit">Sign up</button>
</form>Посмотри на пару label / input: атрибут for у метки указывает на id поля. Эта связь необходима для программ чтения с экрана. Обрати внимание и на type="email": браузер бесплатно проверит формат и покажет на телефоне подходящую клавиатуру. Другие типы пригождаются каждый день: number, date, password, checkbox, radio.
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="">-- Choose a country --</option>
<option value="fr">France</option>
<option value="ca">Canada</option>
</select>
<label for="message">Your message</label>
<textarea id="message" name="message" rows="5"></textarea>Последний участник: button. У него три типа: submit (отправляет форму), reset (очищает поля) и button (сам по себе ничего не делает - подключи его через JavaScript). Задача на подумать: в форме публикации статьи ты добавляешь кнопку «Предпросмотр», которая не должна отправлять данные. Какой тип ты ей дашь? Ответ: type="button".
<form action="/contact" method="post">
<label for="topic">Subject</label>
<select id="topic" name="topic">
<option value="support">Technical support</option>
<option value="billing">Billing</option>
</select>
<button type="submit">Send</button>
<button type="button" id="preview-btn">
Preview
</button>
</form>