Создание анкеты в html. HTML-формы. Многострочное текстовое поле - тег


Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.

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

Примером формы может служить гостевая книга, анкета, онлайн тест. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.

Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.

Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.

Атрибуты формы - тег

Форм на веб-странице может несколько (столько, сколько нужно разработчику ). Каждая из них начинается тегом и завершается закрывающим тегом .

Атрибут action является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные ).

Атрибут method определяет способ отправки содержимого формы. Существует два метода - GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET и POST относится к языкам обработки данных (например, PHP ). Достаточно знать, что именно метод передачи данных POST в большинстве случаях используется в формах.

Атрибут name тега

не является обязательным. Но если в документе несколько форм, то каждая из них должна быть как-то идентифицирована обработчиком. Поэтому наличие атрибута name в этом случае необходимо - он задает уникально имя формы.

Можно также установить кодировку для вводимых данных - за это отвечает атрибут accept-charset , а также, при помощи атрибута target , определить окно, в котором будет отображаться результат обработки отправленной формы (в новом или в текущем окне ).

Но сам по себе тег не имеет смысла, ведь форма передает данные, которые сначала нужно куда-то внести!

Ввод данных. Поля формы - тег

Тег это наиболее часто встречающийся в формах тег. Он предназначен для создания различных элементов, служащих для ввода данных в форму: это текстовые поля, кнопки, флажки, переключатели.

type - это основной атрибут тега . Он устанавливает тип поля (элемента ) формы:

Значение атрибута type= "..."

Результат

Описание

Однострочное текстовое поле для ввода текста. Атрибут size задает ширину поля в символах.

Текстовое поле для ввода пароля.
Атрибут maxlength устанавливает максимальное количество символов, которое можно ввести

1 2 3

Переключатель.
Возможен выбор лишь одного варианта из предложенных. Атрибут checked определяет заранее помеченное поле.

1 2 3

Флажок.
Возможен выбор нескольких вариантов. Атрибут checked определяет заранее помеченное поле.

Кнопка.
Атрибут value устанавливает надпись на кнопке.

Кнопка сброса.
Возвращает поля формы к их первоначальному виду. Сброс внесенных данных.

Кнопка для отправки внесенных данных.

Поле для ввода имени пересылаемого файла.

Кнопка-изображение.
Служит также для отправки данных на сервер. Атрибут src указывает адрес файла с изображением.

Скрытое поле - невидимое для пользователя.

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

Вид создаваемого списка зависит от значения атрибута size : при size= "1" (значение по умолчанию ) список будет раскрывающимся.

Иное значение атрибута size будет соответствовать количеству отображаемых пунктов списка. Например, при size= "3" , видимыми будут три элемента. Для просмотра остальных пунктов списка (если таковые есть ) следует воспользоваться вертикальной полосой прокрутки, которая добавляется автоматически.

По умолчанию возможен выбор лишь одного элемента списка. Добавление атрибута multiple к тегу и создает каждый пункт списка.

При помощи атрибута name тега





7 Чудес света!




Сторона света - одно из четырех основных направлений:

Север Юг Запад Восток

7 Чудес света!

Пирамида Хеопса Висячие сады Семирамиды Статуя Зевса в Олимпии Храм Артемиды в Эфесе Мавзолей в Галикарнасе Колосс Родосский Александрийский маяк

Многострочное текстовое поле - тег

Если содержимое поля превысит его размеры - появится бегунок.

Пример использования формы

Теперь давайте посмотрим: как работает форма.

Форма заказа обучающего видеоматериала:


Ваше имя: *



Ваш заказ:



Выберите носитель:


CD


DVD


USB Flash


Ваш E-mail: *



Ваш адрес: *





26.02.2016


Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, что такое HTML форма и как она создается.
Если вы обратили внимание, сегодня ни один веб сайт не обходится без форм. Эти формы могут быть различные, например, форма обратной связи, форма для подачи заказа, форма регистрации и входа на сайт, форма отправки комментариев, отзывов, форма поиска и многие др.

Я думаю сейчас нужно вам показать примеры, как выглядят HTML формы визуально.

Форма поиска:

Форма входа на сайт:

Форма обратной связи:

Форма для подачи заказа:

Я думаю, вы уловили саму суть создания HTML форм. Итак, в сегодняшнем уроке я расскажу, как создать простую HTML форму и какие теги можно использовать для создания различных полей формы.

Вот с этого момента прошу вашего особого внимания, потому как тема сложна и важная.

HTML форма – это поле, в которое пользователь вводит некую информацию. Но, эта информация должна каким-то образом еще и отправляться. Своего рода, HTML форма – это как мотоцикл без бензина, вроде все есть, но почему-то не едет. Так вот, чтобы форма заработала и отправляла информацию, которую ввел пользователь, нужно создать обработчик форм на языке . Но вы с обработчиком не заморачивайтесь, так как вы сейчас проходите только курс для начинающих. Мы еще разберем тему обработчика для форм в разделе «PHP». Так, что-то я отвлекся от основной темы.

Учимся создавать HTML формы

Любая HTML форма будет состоять из основного тега

. Внутри тега
вставляются остальные элементы формы, которые будут отображаться на веб странице.

Форма должна размещаться между тегами .
Для тега

закрывающий тег обязателен .

*атрибуты для тега rm >

NAME – уникальное имя формы. Оно используется тогда, когда на одном сайте несколько форм.
ACTION – этот атрибут указывает путь к обработчику формы. Является обязательным.
METHOD – способ отправки.

  • POST - данные передаются в скрытом виде
  • GET (по умолчанию) - данные передаются в открытом виде через браузерную строку.

Пример, как выглядит тег с перечисленными атрибутами:

здесь будут различные элементы формы, которые будут отображаться на веб странице.

Элементы формы

Тег input

Тег input – эта часть элемента поля формы предназначена для ввода небольшого текста, цифр.
Для тега закрывающий тег не нужен .

*атрибуты для тега < input >

  • name - имя элемента
  • size - размер поля
  • required – поле обязательное для заполнения
  • autofocus – указатель мышки при загрузке веб-страницы сразу будет на поле
  • maxlength – этим атрибутом можно указать максимальное количество ввода символов в поле. По умолчанию, без атрибута maxlength, в поле можно будет вводить неограниченное количество символов
  • placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля (раньше использовали атрибут value).
  • type - тип элемента

Пример заполнений:

Тип элемента type

Текстовое поле

○ Текстовое поле «text» :

Результат:

Поле для пароля «password» :

Результат:

Поле для email «email» :

Результат:

Кнопка для выбора файла с компьютера «file» :

Результат:

Поле для ввода телефона «tel» :

Результат:

Поле поиска «search» :

Результат:

Поле выбора цвета «color» :

Результат:

Поле для ввода и выбора цифр «number» :

  • min – минимальное значение
  • max – максимальное значение
  • step – шаг.

Результат:

Поле для выбора даты «date» :

Результат:

Поле для выбора даты и местного времени в формате (05.05.2015 00:00) :

Результат:

Выводить выпадающий календарь.
Поле для выбора года и месяца в формате (Июль 2015 г.).:

Результат:

Поле для выбора времени «time» :

Результат:

Ползунок «range» :

Результат:

Флажок (checkbox) :

checked – этот атрибут указывает, какой флажок должен быть включен по умолчанию

Результат:

Радиопереключатель «radio» :

checked – этот атрибут указывает, какой радиопереключатель должен быть включен по умолчанию

Результат:

Кнопки

Кнопка «button» :

value - надпись на кнопке

Результат:

Кнопка для отправки данных «submit» :

value - надпись на кнопке

Результат:

Кнопка сброса «reset» :

value - надпись на кнопке

Результат:

Кнопка картинкой :

Результат:

Скрытое поле «hidden»

Тег select

Тег select – это часть элемента формы, предназначен для ввода выпадающего списка.
Для тега закрывающий тег обязателен .
Тег и

  • Name – это имя всего списка. Задается только для тега .
  • Value – задается для каждого пункта списка для тега
  • disabled - блокирует выбор элемента в выпадающем списке. Задается только для тега

Результат:

Не срочная Срочная Курьером

Или вот так:

Результат:

Не срочная Срочная Курьером

Теперь заблокируем из списка «Срочная » атрибутом «disabled »:

Результат:

Не срочная Срочная Курьером

выпадающий список по группам :

Для создания списка группы используется тег

Результат:

Option Textarea
Label Fieldset Legend

для множественного выбора :

В теге

*атрибуты для тега < textarea >

  • name – имя поля
  • cols – ширина поля
  • rows – высота поля
  • placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля.

Результат:

Или вот так:

Результат:

Введите текст

Или вот так:

Результат:

Оформление «Рамка» (fieldset)

Тег fieldset

Тег fieldset – с помощью этого тега можно нарисовать рамку вокруг объекта.
Закрывающий тег обязателен .

Дополнительные теги
Тег legend – указывает на заголовок.
Закрывающий тег обязателен .

Заголовок Текст внутри рамки.

Результат:

Это все, что я хотел рассказать по теме «HTML-формы». Сейчас подведем итог и на практике попробуем создать простую форму, используя уже те знания, которые вы почерпнули из этой статьи.

Вот моя форма:

Форма для резюме работника опытного завода ПАО "КМЗ"



Кем вы хотите устроиться?


Какую зарплату вы хотите получать (в месяц)?
10$ 11$



Результат:

Предыдущая запись
Следующая запись

Описание

HTML тег

создаёт HTML форму, которая используется для отправки введённых пользователем данных на сервер.

Так как сама форма не предоставляет никаких средств для пользовательского ввода данных, внутри элемента располагают другие элементы, цель которых предоставить пользователю различные способы ввода данных:

Помимо этих элементов, внутри формы можно использовать и любые другие HTML-элементы.

По умолчанию форма никак не отображается на веб-странице, видны только элементы расположенные внутри неё, однако с помощью CSS можно придать форме любой внешний вид.

Атрибуты

accept-charset: Указывает кодировку символов или список кодировок, разделенных пробелами, для введенных в форму данных, переданных на сервер для обработки. Если данные включают в себя символы, не поддерживающиеся указанной кодировкой, то браузер пытается определить соответствующую для них кодировку. Если соответствующая кодировка не может быть определена, то символы кодируются в числовые коды .

Значением по умолчанию является зарезервированная строка «UNKNOWN» (браузеры интерпретируют это значение как кодировку символов идентичную кодировке документа, содержащего элемент ). action: Указывает адрес отправки данных из заполненной формы, где будет обрабатываться данная информация. autocomplete: Определяет, включить или выключить автозаполнение формы. При включенном автозаполнение браузер автоматически подставляет значения, которые пользователь вводил во время предыдущего использования формы. Возможные значения атрибута:

  • on: браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
  • off: пользователь должен сам вводить значения для каждого поля при каждом использовании формы. Ранее вводимые значения показываться не будут.

Примечание: атрибут autocomplete не поддерживается браузером Opera.

Enctype: Указывает способ кодирования данные формы при отправке на сервер. Может использоваться только совместно с атрибутом method="post". Возможные значения:

  • application/x-www-form-urlencoded: значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ "+ ", а специальные символы в значения ASCII HEX).
  • multipart/form-data: символы не кодируются. Используется для элементов , у которых в атрибуте type установлено значение "file ".
  • text/plain: пробелы преобразуются в символ "+", но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.
method: Указывает метод передачи данных HTTP-протокола, который будет использован при отправке данных формы. Возможные значения:
  • get: данные передаются в адресной строке браузера в виде пар «имя=значение» путём их добавления в конце URL-адреса. В качестве разделителя между основным URL-адресом и передаваемыми данными используется знак вопроса (? ), для разделения передаваемых данных между собой используется символ амперсанда (& ). Данный метод применяется при отправке данных небольшого размера.
  • post: данные передаются не как часть URL, а в качестве содержимого запроса браузера. Данный метод применяется для отправки данных большого объёма.
Если атрибут method не указан, по умолчанию будет использоваться метод GET. name: Определяет имя формы. Имя может быть использовано в JavaScript для ссылки на элемент по имени или для ссылки на данные формы после ее отправки. Если в одном документе используется несколько форм, то их имена не должны повторяться, так же нельзя в качестве значения атрибута оставлять пустую строку. novalidate: Указывает, что данные введенные в форму не будут проверятся перед отправкой. Возможные значения логического атрибута novalidate:

Примечание: атрибут novalidate не поддерживается в IE9 и более ранних версиях, и в Safari.

Target: Определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы.

  • _blank: открывает документ в новом окне или вкладке.
  • _self: открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
  • _parent: открывает документ в родительском фрейме.
  • _top: открывает документ во всю ширину окна.
  • имя_фрейма: открывает документ в iframe, имя которого было указано в качестве значения.

Тег так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

form { display: block; margin-top: 0em; }

Пример

Имя:
Фамилия:

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте . В данной статье я бы хотел рассказать о создании форм в HTML . Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML . Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:

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

Имя
Пароль

Выберите поисковую системуGoogle Yandex Rambler
Готовы изучить формы? Да Конечно да=)
Выберите один из вариантов
Файл

Простая кнопка
Отправить форму
Очистить поля формы

При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:

Создание формы начинается с ключевого слова

. Это парный тег, соответственно создание формы должно завершаться тегом
. У тега
есть несколько атрибутов. Атрибут 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) Тестовое поле . Текстовое поле создаётся с помощью тега , как впрочем и все элементы формы. Атрибут type="text" как раз и отвечает за то, что будет создано текстовое поле. Атрибут name — это имя, как и во всех элементах формы. Атрибут value — это значение по умолчанию.

2) Поле для ввода пароля . Задаётся с помощью все то же тега с атрибутом type="password" .

3) Текстовая область . Задаётся с помощью тега . У этого элемента есть несколько атрибутов. Также можно задать атрибут name . Атрибут rows отвечает за количество строк, атрибут cols — за количество столбцов. Современные браузеры могут расширять текстовую область, чтобы удобнее было вводить в неё текст. Атрибуты rows и cols — это, так сказать, минимальные значения, до которых можно сжать форму (изначально при загрузке страницы текстовая область имеет размеры, которые заданы атрибутами rows и cols).

4) Радиокнопки . Смысл радиокнопок в том, чтобы выбрать какое-то одно значение из нескольких. Радиокнопки также создаются с помощью тега с атрибутом type="radio" . Атрибут value указывает значение, которое соответствует радиокнопке. Хочу обратить ваше внимание вот на какой момент: в нашем примере все 3 кнопки имеют одинаковое значение атрибута name . Если они будут иметь разное значение атрибута name, ты мы сможем нажать на них все. Соответственно не получится их правильно обработать. Атрибут checked (значения у него нет) указывает на то, какая радиокнопка будет выбрана по умолчанию.

5) Флажки . В отличие от радиокнопок, флажки можно прощелкать все. Наберите пример и убедитесь в этом сами. Создаются с помощью тега с атрибутом type="checkbox" . Смысл остальных атрибутов такой же, как и у радиокнопок. Скажу только, если мы все галочки снимем, то у нас передастся пустое значение, т.е. в нашем случае будет mycheck="" .

6) Выпадающий список . Выпадающий список создаётся с помощью тега . В данной конструкции необходимо ещё с помощью тега

7) Поле для отправки файла . Наверняка вы не раз загружали и отправляли файл, например при задании аватарки для своего профиля. Такой элемент реализуется с помощью тега с атрибутом type="file" . Самое сложное — это обработать правильно файл, но этому будет посвящена отдельная статья.

8) Скрытое поле . Иногда встаёт необходимость передать какие-нибудь данные, вместе со всей остальной формой. Именно для этого и служит тег с атрибутом type="hidden" . На самой форме его не видно, но если вы посмотрите исходный код страницы (правой кнопкой по странице и выбрать "исходный код" или нажать сочетание клавиш "ctrl+u"), та данное поле можно будет увидеть.

9) Кнопки . Кнопки создаются с помощью тега с атрибутом type="button" . Атрибут value отвечает за то, что будет написано на кнопке. Кнопки обычно служат для обработки какого-то события. О событиях кнопок можно будет прочитать в одной из следующих статей.

10) Отправка формы . По сути это такая же кнопка, но с атрибутом type="submit" . При нажатии на кнопку форма перейдёт на обработку по пути, указанному в атрибуте action тега

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и