Веб-формы. Тег Form. Курс по HTML (11 из 20)

В отличие от телевизора, интернет работает в две стороны.

Вы можете получать информацию — читать статьи, смотреть видео.
А можете отправлять информацию — например, вы можете навести мышку на это видео и в появившейся сверху панельке нажать лайк. Попробуйте =)
Информация о вашем лайке волшебным образом улетит на сервер YouTube. Вы отправили информацию.

Или когда вы регистрировались на этот курс, вы вводили свой емейл — то есть вы заполняли очень простую форму для регистрации.

Так вот для отправки информации от вас, пользователей, на сервер, существует специальная группа тегов — это форма и элементы формы.

Сама форма это просто тег Form.
Обычно у формы задаётся 2 основных атрибута — это action (действие), то есть по какому адресу отправлять данные формы.
И method (метод) — это одно из двух значений — или get, или post. В этом курсе мы не будем это трогать, post используется, когда нужно загружать файлы, а get во всех остальных случаях.

Элементы формы — их довольно много, штук 5 или шесть.

Напишите тег input с пустыми атрибутами type и value.
И скопируйте его 8 раз, чтобы было много одинаковых инпутов.
Теперь просто заполним им разные значения.

Первый инпут — текстовое поле. Напишите type=‘text’ и value=“тут текст”
* Checkbox
* 3 штуки Radio
* Password
* Button
* File
* Submit

Сохраните и обновите страницу. Видите какое богатство?

Можно вводить текст, нажимать чекбокс, выбирать одно из значений, вводить пароль, выбирать файл для загрузки.
Если нажать инпут типа кнопка, то просто нажимается кнопка и ничего не делает — ей надо задавать действие на языке JavaScript, вы этому можете научиться в отдельному курсе.
А если нажать кнопку типа submit, то страничка так мигнёт. Это просто все данные вашей формы отправляются на обработку, но мы этого пока обрабатывать не умеем.
Этому вы можете научиться в курсе по языкам программирования типа PHP или Python.
Ещё два поля — это список и большой текст.

Чтобы сделать список, надо создать внутри формы элемент select (то есть выбор), и внутри него несколько тегов option, то есть опция, вариант.

А чтобы сделать большой блок текста, надо создать тег textarea.

Вот так просто вы научились делать формы. Поиграйтесь с ней немного.
Как я уже сказал, в следующих курсах вы научитесь обрабатывать данные формы.
Но уже во второй главе этого курса я покажу вам, как использовать форму для сбора емейлов ваших будущих клиентов уже сейчас, без программирования с вашей стороны.

В принципе, обзор основных тегов мы закончили, и двигаемся дальше.

Курс по HTML — http://zero2hero.org/course/details/html

Видео Веб-формы. Тег Form. Курс по HTML (11 из 20) канала Zero to Hero