Создание форм в HTML
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте. В данной статье я бы хотел рассказать о создании форм в HTML. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML. Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:
<html> <meta charset="utf-8"/> <head><title>Создание форм HTML</title></head> <body> <form name="myform" action="" method="post"> Имя<input type = "text" name = "myname" value = "Введите имя"/> </br> Пароль<input type = "password" name = "mypass"> </br> <textarea name = "mytextarea" rows = "10" cols = "30">Введите сообщение...</textarea> </br> Выберите поисковую систему<input type = "radio" name = "myradio" value = "Google">Google <input type = "radio" name = "myradio" value = "Yandex" checked>Yandex <input type = "radio" name = "myradio" value = "Rambler">Rambler </br> Готовы изучить формы? <input type = "checkbox" name = "mycheck" value = "yes" checked>Да <input type = "checkbox" name = "mycheck" value = "no">Конечно да=) </br> Выберите один из вариантов<select name = "select_list"> <option value = "var1">Вариант 1 <option value = "var2" selected>Вариант 2 <option value = "var3">Вариант 3 </select> </br> Файл<input type = "file" name = "myfile"> </br> <input type="hidden" name="secret" value="скрытое поле"> </br> Простая кнопка<input type = "button" name = "start" value = "Пуск"> </br> Отправить форму<input type = "submit" name ="submit" value = "Отправить на сервер"> </br> Очистить поля формы<input type="reset" name="Reset" value="Очистить поля формы"> </form> </body> </html>
При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:
Создание формы начинается с ключевого слова <form>. Это парный тег, соответственно создание формы должно завершаться тегом </form>. У тега <form> есть несколько атрибутов. Атрибут name задаёт имя формы (это нужно для обработки формы, например в Javascript). Можно, конечно, и не указывать имя, но всё-таки рекомендую это делать. В атрибуте action указывается имя скрипта, который будет обрабатывать форму (обычно это скрипт на php) и выглядит это так action="request.php". В нашем случае мы не обрабатываем форму. Атрибут method указывает каким способом мы будем передавать данные: открытым (get) или скрытым (post). Сразу пример того, что будет показано в строке браузера при этих двух различных атрибутах:
1) Если мы используем метод post: mysite.ru/request.php.
2) Если мы используем метод get: mysite.ru/request.php?myname="Alex"&surname="Gulynin".
Думаю различия понятны.
Элементы формы:
1) Тестовое поле. Текстовое поле создаётся с помощью тега <input>, как впрочем и все элементы формы. Атрибут type="text" как раз и отвечает за то, что будет создано текстовое поле. Атрибут name — это имя, как и во всех элементах формы. Атрибут value — это значение по умолчанию.
2) Поле для ввода пароля. Задаётся с помощью все то же тега <input> с атрибутом type="password".
3) Текстовая область. Задаётся с помощью тега <textarea>. Это парный тег, текстовая область должна закрываться тегом </textarea>. У этого элемента есть несколько атрибутов. Также можно задать атрибут name. Атрибут rows отвечает за количество строк, атрибут cols — за количество столбцов. Современные браузеры могут расширять текстовую область, чтобы удобнее было вводить в неё текст. Атрибуты rows и cols — это, так сказать, минимальные значения, до которых можно сжать форму (изначально при загрузке страницы текстовая область имеет размеры, которые заданы атрибутами rows и cols).
4) Радиокнопки. Смысл радиокнопок в том, чтобы выбрать какое-то одно значение из нескольких. Радиокнопки также создаются с помощью тега <input> с атрибутом type="radio". Атрибут value указывает значение, которое соответствует радиокнопке. Хочу обратить ваше внимание вот на какой момент: в нашем примере все 3 кнопки имеют одинаковое значение атрибута name. Если они будут иметь разное значение атрибута name, ты мы сможем нажать на них все. Соответственно не получится их правильно обработать. Атрибут checked (значения у него нет) указывает на то, какая радиокнопка будет выбрана по умолчанию.
5) Флажки. В отличие от радиокнопок, флажки можно прощелкать все. Наберите пример и убедитесь в этом сами. Создаются с помощью тега <input> с атрибутом type="checkbox". Смысл остальных атрибутов такой же, как и у радиокнопок. Скажу только, если мы все галочки снимем, то у нас передастся пустое значение, т.е. в нашем случае будет mycheck="".
6) Выпадающий список. Выпадающий список создаётся с помощью тега <select> и заканчивается тегом </select>. В данной конструкции необходимо ещё с помощью тега <option> указать элементы списка.
7) Поле для отправки файла. Наверняка вы не раз загружали и отправляли файл, например при задании аватарки для своего профиля. Такой элемент реализуется с помощью тега <input> с атрибутом type="file". Самое сложное — это обработать правильно файл, но этому будет посвящена отдельная статья.
8) Скрытое поле. Иногда встаёт необходимость передать какие-нибудь данные, вместе со всей остальной формой. Именно для этого и служит тег <input> с атрибутом type="hidden". На самой форме его не видно, но если вы посмотрите исходный код страницы (правой кнопкой по странице и выбрать "исходный код" или нажать сочетание клавиш "ctrl+u"), та данное поле можно будет увидеть.
9) Кнопки. Кнопки создаются с помощью тега <input> с атрибутом type="button". Атрибут value отвечает за то, что будет написано на кнопке. Кнопки обычно служат для обработки какого-то события. О событиях кнопок можно будет прочитать в одной из следующих статей.
10) Отправка формы. По сути это такая же кнопка, но с атрибутом type="submit". При нажатии на кнопку форма перейдёт на обработку по пути, указанному в атрибуте action тега <form>.
11) Сброс все полей формы. Сброс всех полей формы осуществляется с помощью тега <input> с атрибутом type="reset". Думаю здесь всё прозрачно и объяснять ничего не нужно.
Опять же повторюсь, что здесь нет ничего сложного. Если у вас остался какой-то вопрос задавайте его в комментариях.
Домашнее задание: обязательно наберите данный большой пример и проверьте работоспособность всех элементов формы.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
