Создание форм в HTML

Создание форм в 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". Думаю здесь всё прозрачно и объяснять ничего не нужно.
Опять же повторюсь, что здесь нет ничего сложного. Если у вас остался какой-то вопрос задавайте его в комментариях.

Домашнее задание: обязательно наберите данный большой пример и проверьте работоспособность всех элементов формы.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


Комментарии:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *