В этой части учебника, будет рассказываться как создаётся веб форма в HTML 5 и какие вообще её типы есть.
Что такое форма:
Форма на сайте нужна для отправки каких-нибудь данных на сервер, например, для отправки данных при регистрации или при входе.
Как создать форму:
Создаётся веб форма в HTML очень просто, для этого вам надо два главных элемента, первый, <from>, второй, это кнопка для отправки формы, вот пример.
1 2 3 4 5 | <form action="Куда отправлять форму" method="get"> <p>Имя:</p> <input type="text" name="name"> <input type="submit" velue="Отправить"> </form> |
Как возможно вы поняли, тут мы отправляем имя на сервер, давайте разберём что к чему тут.
Первое это тег <form>, как раз он и обозначает форму, у него есть два атрибута, action, определяет адрес куда отправлять данные из формы и method, для определения метода отправки, но о нём потом лучше узнаете когда будите изучать серверные языки программирования, например PHP.
Потом внутри элемента формы идёт из новых тегов, <input>, с атрибутом type, который имеет значение «text», но об этом подробнее ниже, а пока знайте, это просто поле.
Дальше идёт опять тег <input>, но у него значение атрибута type, уже «submit», это просто кнопка для отправки формы, также есть атрибут velue, обычно используется для значения по умолчанию в поле, но здесь, просто текст на кнопки, вот результат.
Ну вот, как то так она выглядит.
Элементы тега input:
Теперь надо рассмотреть какие вообще используются элементы для работы с формой обычному пользователю, их достаточно много, но в 90% случаях вся суть сводится к тому, что вы используйте тег <input> с разными значениями атрибута type.
Вот какие значения есть у атрибута type:
- text — Обычное текстовое поле;
- email — Это как текстовой, но только перед отправкой формы
проверят что это действительно email; - password — Как текстовой, но вводится вместо символов,
будут чёрный точки; - submit — Кнопка отправки формы;
- checkbox — Флажок, для выбора более одного параметра;
- radio — Переключатель, для выбора только одного параметра,
среди нескольких; - file — Для отправки файлов;
- reset — Для возвращение формы к значением по умолчанию;
На самом деле тут всё очень просто, зависимо от того что вам нужно, используете нужный тип, но самые интересные это checkbox и radio,
о них расскажу.
Checkbox:
HTML форма с checkbox, очень просто выглядит, примерно так.
1 2 3 4 5 6 7 | <form action="" method="get"> <p>Имя:</p> <input type="text" name="name"> <p><input type="checkbox" name="contract" value="1"> Вы согласны с пользовательским соглашением</p> <p><input type="checkbox" name="like" value="1"> Вам нравится наш сайт</p> <input type="submit" value="Отправить"> </form> |
Мы добавили два checkbox, первый для соглашения с пользовательским соглашением, а второй для подтверждения, что сайт нравится.
Тут теперь осталось только нажать кнопу отправить.
Radio:
HTML форма с radio тоже очень простая.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <form action="" method="get"> <p>Имя:</p> <input type="text" name="name"> <p>Выберите ваш пол:</p> <p> <input type="radio" name="gender" value="1"> Мужчина </br> <input type="radio" name="gender" value="2"> Женщина </p> <p>Что вы любите больше всего есть:</p> <p> <input type="radio" name="love" value="1"> Мясо </br> <input type="radio" name="love" value="2"> Фрукты </br> <input type="radio" name="love" value="3"> Овощи </p> <input type="submit" value="Отправить"> </form> |
Как видите, в отличие от checkbox, radio должен иметь одинаковый атрибут name, но разные значения атрибута value, таких элементов может быть хоть сколько.
Опять же, не чего сложного.
Элементы других тегов:
Хоть и в основном вы и будите использовать тег <input>, но другие тоже важны.
Select и option:
HTML форма select, просто добавляет выбор, я не знаю как это точно объяснить, поэтому смотрите работу с ним.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <form action="" method="get"> <p>Имя:</p> <input type="text" name="name"> <p>Выберите любимого героя:</p> <p> <select name="superheroes"> <option value="1">Халк</option> <option value="2">Железный человек</option> <option selected value="3">Бэтмен</option> <option value="4">Супермен</option> <option value="5">Тор</option> <option value="6">Чудо женщина</option> </select> </p> <input type="submit" value="Отправить"> </form> |
Как возможно заметили, но сам код не много похоже на то, когда используешь <input> с типом radio, ну нужны по крайне мере они созданы для одного и того же, единственное различие в том, что в <select> можно выбирать несколько значений, ну и вид не много другой.
Также ещё не много на списке, в остальном тут нет не чего сложного, внутри <select> находится теги <option>, которые как раз и используются для выбора, вот результат.
Также в <select>, есть несколько интересных атрибутов, например, multiple для множественного выбора и так далее.
Textarea:
Формы HTML имеют ещё элемент textarea, он нужен для того чтобы писать много текста, очень удобен для этого, вот как он пишется.
1 2 3 4 5 6 7 | <form action="" method="get"> <p>Имя:</p> <input type="text" name="name"> <p>Выберите любимого героя:</p> <textarea name="text" cols="35" rows="3" placeholder="Расскажите о себе"></textarea><br> <input type="submit" value="Отправить"> </form> |
Теперь разберём эту страницу, точнее тег, первый не понятный атрибут, это cols, он по сути определяет сколько символов поместится в одну строку, rows это сколько строк будет в этой теге, placeholder, этот атрибут просто выводит текст прямо в форме, например для того что бы объяснить, что нужно написать, вот весь результат.
То есть это почти как <input> типа «text», но только с несколькими строками, хотя можно при желание сделать во весь экран.
Label:
Это наверное один из самых важных тегов, он не добавляет какие то новые поля формы, но он упрощает взаимодействие с ней.
Суть в том, что пользователь может нажимать на название формы, что бы поставить курсор, но по умолчанию это не работает, поэтому есть тег <label>, вот как с нм работать.
1 2 | <input id="идентификатор"><label for="идентификатор">Текст</label> <label><input type="Какой-то тип"> Текст</label> |
Как видите есть два синтаксиса, первый через атрибут id, мы просто используем в теги <label>, атрибут for, значение которого идентификатор формы.
Второй вариант, это написать поле формы прямо внутри тега <label>, так и должно всё работать.
Вывод:
В этой части учебника разобрали, как создаётся веб форма в HTML, надеюсь для вас всё было понятно и вам этого достаточно.
Подписываетесь на соц-сети:
Оценка:
Загрузка...