Формы form html. HTML-формы. Способы передачи информации

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

.

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

Для нетерпеливых и жаждущих быстрее взглянуть на кодовое представление, я прикрепил простой пример использования панели с текстовым полем для пароля c кнопкой:

1 2 3 4 5 6 7 8 9 10 11 12 Пример

Пример

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

Отправляем данные на сторону сервера

Для того чтобы отправить набранную (или выбранную) информацию в диалоговом окне, необходимо использовать стандартный механизм – кнопку Submit .

Код такого метода выглядит вот так:

При запуске представленной строки в отобразиться кнопка с надписью: «Отправить».

Другой способ отправки данных на сторону сервера – это нажатие в пределах диалогового окна клавиши Enter.

После подтверждения отправки указанной информации, она не сразу поступает на сервер. Сначала ее обрабатывает браузер, приводя к виду «имя=значение».

За имя отвечает параметр атрибута type тега , а за значение – данные, введенные пользователем. Далее преобразованная строка передается обработчику, который чаще всего задан в атрибуте action элемента

.

Сам по себе параметр action не обязателен, а в некоторых моментах и вовсе не нужен. Например, если страница сайта написана с использованием php или js, то обработка происходит на текущей странице и ссылки не нужны.

Для большего понимания всей картины функционирования сайта я хотел бы добавить, что на сервере работа с данными выполняется уже при помощи других языков. Так, серверными языками считаются: Python, php, си-подобные языки (C#, C и т.д.), Java и другие.

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

Тег не обязательно задавать в паре с , однако если необходимо обработать пользовательские записи или занести их, например, в базу данных, то без контейнера не обойтись.

Основными атрибутами данного элемента языка гипертекстовой разметки являются:

  • Text – создает текстовое поле;
  • Submit – создает кнопку для отправки данных на сервер;
  • Image – отвечает за кнопку с картинкой;
  • Reset – устанавливает кнопку для очистки формы;
  • Password – задает текстовое поле специально для паролей;
  • Checkbox – отвечает за поля с флажками;
  • Radio – отвечает за поля с выбором одного элемента;
  • Button – создает кнопку;
  • Hidden – используется для скрытых полей;
  • File – задает поле, отвечающее за отправку файлов.

Способы передачи информации

Существует 2 способа передачи пользовательских данных на серверную сторону: Get и Post . Данные методы выполняют одно и то же действие, однако они существенно отличаются друг от друга. Поэтому прежде чем указывать какой-либо из них, давайте ознакомимся с их особенностями.

Post Get
Размер передаваемых документов Ограничиваются серверной стороной. Максимум – 4 Кб.
Способ отображения отправленной информации Доступна только при просмотре через браузерные расширения или другие специальные программные продукты. Сразу же доступна всем.
Использование закладок Нет возможности добавить в закладки, так как запросы не повторяются (все страницы ссылаются на один адрес). Любую страницу с запросом можно сохранить в закладках и перейти к ней спустя время.
Кэширование Исходя из предыдущего пункта все запросы на одной странице. Каждую страницу можно кэшировать отдельно.
Предназначение Используется для пересылки больших файлов (книг, изображений, видео и т.д.), сообщений, комментариев. Отлично подходит для поиска запрашиваемых значений по веб-ресурсу или для передачи коротких текстовых сообщений.

Для того чтобы указать каким из двух методов передачи данных работать браузеру, в элементе используют предусмотренный параметр method (например, method="post" ).

Рассмотрим второй пример. Создадим форму, в которой нужно ввести свои персональные данные (имя и фамилию, дату рождения) и придумать пароль. После все это отправляем на сервер при помощи метода Post .

Метод POST

Введите свои персональные данные!

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

Создание панели регистрации

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 Регистрация
Регистрация на сайте

Имя:

Фамилия:

E-mail:

Пароль:

Повтор пароля:

Регистрация

Регистрация на сайте

Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные!

Имя:

Фамилия:

E-mail:

Пароль:

Повтор пароля:

Советую вам сохранить данный код программы в документе с расширением.html и кодировкой utf-8, и открыть последний в окне браузера. Перед вами предстанет во всей красе панель для регистрации с полями для ввода имени, фамилии, e-mail и пароля с повторением. Заметьте, что при запуске страницы курсор сразу же расположен в первом текстовом поле. Этот прием достигается за счет атрибута autofocus .

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

Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.

И в этой статье Вы научитесь создавать абсолютно любые .

Сначала создайте простейшую HTML-страницу , в которую добавьте контейнер (тег

), выравнивающий своё содержимое по центру. Надеюсь, что Вы с этим без труда справитесь.

А теперь займёмся формой. Форма начинается с тега

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


Здесь у нас начинается описание формы, у которой есть следующие атрибуты:

1) Атрибут "name ". Значение этого атрибута означает имя HTML формы . Встаёт вопрос, зачем это надо? Ответ очень простой: если Вы будете использовать не одну форму, а несколько, то чтобы отличить одну форму от другой, необходимо задавать различные имена. А сами имена нужны для того, чтобы обращаться к формам, например, через JavaScript . Я Вам открою маленький секрет, который я Вам не советую использовать, но честности ради, скажу о нём. На самом-то деле, формы можно легко различать и без имён, поэтому, вообще говоря, имя формы совсем необязательно. Но я НАСТОЯТЕЛЬНО рекомендую давать формам имена, ведь Вам самим так будет проще понять, за что каждая из форм отвечает.

2) Атрибут "action ". Значение этого атрибута отвечает за путь к файлу скрипта, который будет обрабатывать форму. То есть мало ввести данные в форму, их же ведь ещё нужно соответствующим образом обработать, и вот как раз путь к этому файлу-обработчику и находится в значении атрибута "action ".

3) Атрибут "method ". У него может быть одно из двух очень популярных значения: "post " и "get ". Этот атрибут определяет способ отправки. Не буду вдаваться в подробности, просто скажу, что первый способ является скрытой отправкой данных, а второй открытой. Чтобы стало ещё понятнее, то давайте рассмотрим два адреса перехода:

а) http://mysite.ru/scipt/request.php

б) http://mysite.ru/script/request.php?a=7&b=Michael

В первом случае, пользователь не видит, что отправляет (метод "post "), а во втором он реально видит имена переменных и их значения (метод "get "). Вы, в конце статьи, можете попытаться отправить форму с помощью двух разных методов и убедиться в их различии. Но пока что скажу, что ГОРАЗДО чаще используют метод "post ", то есть скрытую отправку.

Это было описание самой формы, а теперь же можно заняться добавлением элементов в форму.

Первое, что мы добавим - это текстовое поле. Добавляется текстовое поле с помощью тега , а точнее с помощью атрибута этого тега "type " со значением "text ". Также перед созданием текстового поля рекомендуется написать, что это за поле, например, "Ваше имя ". Внутри тега

напишите такую строчку:

Ваше имя:

Опять же, давайте разберём атрибуты:

1) Атрибут "type " отвечает за тип элемента ввода. В данном случае, мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута.

2) Атрибут "name " отвечает за имя элемента. Здесь мы указали, что имя данного поля firstname .

3) Атрибут "value " отвечает за значение этого поля по умолчанию.

Как говорится, лучше один раз увидеть, чем сто раз услышать, поэтому лучше Вы наберите (причём, именно наберите, а не скопируйте! ) этот текст в редакторе, а потом посмотрите результат в браузере.

Теперь создадим ещё одно похожее поле, но только не для ввода обычных символов, а для ввода пароля. То есть должно быть всё то же самое, но только текст должен быть скрыт за звёздочками . Поэтому, перейдя на следующую строку (тег
), напишем такой код:

Ваш пароль:

Как видите, теперь значением атрибута "type" является "password ". Остальные атрибуты те же, что и для обычного текстового поля.

Следующий элемент - это выпадающий список. Создаётся он чуть посложнее, так как тут необходимо не только объявить создание выпадающего списка, но ещё и добавить элементы в этот список. Напишем, перейдя на следующую строку (далее, упоминать об этом не буду) следующий HTML-код .

Выберите вариант:

Тег . Атрибут "name " ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега . Значение атрибута "value " означает, какой значение будет у переменной choice (например, в JavaScript ), то есть либо choice = 1 , либо choice = 2 , либо choice = 3 . Сразу после окончания описания тега ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно.

Теперь добавим текстовую область, используя тег

Здесь мы с Вами создаём текстовую область высотой в 10 строк (значение атрибута "rows ") и шириной в 15 символов (значение атрибута "cols ").

Внутри этого парного тега указывается текст в текстовой области по умолчанию. Собственно, здесь больше нечего сказать. Двигаемся дальше.

Следующий элемент - это радио-кнопка. Радио-кнопка - это набор таких "кружочков ", из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега , а, точнее, с помощью значения "radio " атрибута "type ". Напишем такой HTML-код :

Выберите что-нибудь одно:
Вариант 1
Вариант 2
Вариант 3

Тут я остановлюсь на атрибуте "name ", потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name ". Атрибут "value " означает значение переменной "choiceradio " (опять же, например, в JavaScript ). Сразу после описания тега идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой.

Ещё одним элементом формы являются переключатели (checkbox ). Создаются они опять же с помощью тега . Напишем следующие строчки:

Вы согласны с нашими правилами:

Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной "terms " будет "yes ", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой.

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

Выберите файл для загрузки:

Описание

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 это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега

Рассмотрим пример использования:

</span>Пример использования тега <label><span>
>

В этом примере мы:

  • Внутри первой формы:
    • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя , значения мы указали разные. Для первой checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes ). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.
    • Разместили два элемента
  • Внутри второй формы:
    • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no ). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
    • Разместили два элемента

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Подсказка для полей ввода

Давайте рассмотри пример использования:

Пример использования атрибута placeholder<span>
Login: type = "text" name = "login" placeholder = "Введите ваш логин" >

Password: type = "password" name = "password" placeholder = "Введите ваш пароль" >

В данном примере мы указали для элемента с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Используя полученные знания составьте следующую форму оформления заказа:

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

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то