Элементы тега
: радиокнопки, списки, флажки, текстовые поля

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

Поля имеют 5 состояний

Текст у контекстной подсказки максимально краткий, полностью отражающий суть проблемы.

Две рядом стоящие подсказки не должны пересекаться. В случае возможного пересечения текст идет в несколько строк.

Обводкаразмер: 1pxHEX: #CDD1D4RGB: 205,209,212 Обводкаразмер: 5pxHEX: #BFE5FFRGB: 191,229,255 ЗаливкаHEX: #E9ECEERGB: 233,236,238 Обводкаразмер: 1 pxHEX: #DD191DRGB: 221,25,29
 X1 X2 X3 X4 X5 X6 X7
Десктоп 20  16  30  40 
Планшет 15  20  30  40  3
Телефон   15 16  15  20  нет 

Многострочное поле

На портале «Госуслуги»многострочные поля, существую для Десктопной, Планшетной, и Мобильной версии.

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

 

Выпадающие списки

Характеристики полей выпадающих списков аналогичны характеристикам текстовых полей (кроме указаных в таблице).

Список разворачивается поверх полей формы.

Максимальное кол-вовидимых выпадающихпунктов — 4.

Если список не влезает повысоте в экран устройства- он выпадает сверху поля

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

На мобильных устройствах разворачиваются системные списки. Имеют скругленные углы с обеих сторон.

X1  X2  X3  X4  X5  X6  X7  X8  Радиус  ЗаливкаHEX: #6CA9D2Смартфон RGB: 108,169,210
Десктоп 20 21  15  21  38  10  54  10 
Телефон  20 18  15 24 нет нет  нет  нет 
Планшет  15 23  20  23  нет  нет  нет  нет 

Поисковая строка

Характеристики полей поисковой строки аналогичны характеристикам текстовых полей (кроме указаных в таблице). Список разворачивается поверх полей формы.

Список начинаетотображаться при вводе 3 и более символов Максимальное кол-во видимых выпадающих пунктов — 4.Если список не влезает по

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

по первой букве

X1  X2  X3  X4  X5  X6  X7  X8  Радиус  ЗаливкаHEX: #6CA9D2Смартфон RGB: 108,169,210
Десктоп 20 18 15  20  38  10  54  10  4, справа
Телефон  20 15  15 20 32 50  10  4, справа 
Планшет  15 20  20  20 36  10  50  10  4, справа 

Комбинированные списки

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

Максимальное кол-во видимых выпадающих пунктов — 4. Если список не влезает по высоте в экран устройства- он выпадает сверху поля На мобильных устройствах разворачиваются системные списки. На десктопе списки поддерживают клавиатурные

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

X1  X2  X3  X4  X5  X6  X7  X8  Радиус  ЗаливкаHEX: #6CA9D2Смартфон RGB: 108,169,210
Десктоп 20 18 15  20  38  10  54  10  4, справа
Телефон  20 15  15 20 32 50  10  4, справа 
Планшет  15 20  20  20 36  10  50  10  4, справа 

Длинные названия полей

Если текст длинный, он выносится над полями, а в самих полях пишется стандартный текст «Введите» или «Укажите»

Стиль текста для названия полей — Sub

Название поля имеет ширину самого поля

 X1 X2   X3
Десктоп 40  30 
Планшет  30  10  20 

Длинное содержимое полей

В полях длинный текст переносится на вторую строку.

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

Все устройства

Длинное содержимое в выпадающих списках

В выпадающих списках длинный текст переносится на следующую строку.

Источник: http://guides.gosuslugi.ru/gayd-po-sozdaniyu-interfeysa-epgu/elementy-form/tekstovye-polya.html

HTML формы

Элементы формы такие как: текстовые поля, флажки, переключатели, кнопки и т.д., прописываются в контейнере …. Чаще всего элементы формы создаются при помощи тега . При помощи атрибута type указывается тип элемента.

Рассмотрим следующий код:

Введите логин:<\p>

Введите пароль:<\p>

Войти

В браузере получим примерно такую форму:

Здесь:

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

Текстовая область

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

Введите ваше сообщение:

Отправить

В браузере получим:

Выпадающий список

Тег  создает на странице список, каждое значение из списка прописывается между тегами …:

Значение 1 Значение 2 Значение 3

В данном примере вы можете выбрать только одно значение из списка:

Чтобы была возможность выбрать несколько значений из списка, то используйте атрибут multiple с таким же значением: :

Флажки и переключатели

Чтобы создать на странице флажки, необходимо создать поле с типом checkbox: :

Значение один

Значение два

Значение три

Необязательно эти поля прописывать между тегами ….

Чтобы создать на странице переключатели, необходимо создать поле с типом radio, и указать атрибут name с каким-нибудь значением: .

Значение один

Значение два

Значение три

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

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

Поле для выбора файла

Используйте тип поля file, для возможности выбора файла с компьютера: :

Отправить

Вид в окне браузера:

Другие варианты кнопок

  • – обычная кнопка.
  •  – кнопка в виде картинки. Через атрибут src указываем путь к картинке.
  •  – кнопка для отправки данных формы.
  •  – кнопка для очистки формы от введенный в нее данных.

Эти же значения атрибута type, кроме значения image, можно применить к кнопке, созданной при помощи тега . В отличие от кнопок, созданных через тег , эту кнопку можно размещать вне контейнера …, это не будет считаться ошибкой.

Также внутри этой кнопки можно размещать другие строчные теги.

Видео к уроку

Источник: http://psd-html-css.ru/html/html-formy

Создание документа с формами. Параметры тега

ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ

Государственное образовательное учреждение

высшего профессионального образования

Сибирский государственный аэрокосмический университет

имени академика М.Ф. Решетнева

(СибГАУ)

АЭРОКОСМИЧЕСКИЙ КОЛЛЕДЖ

Рассмотрено на заседании

 цикловой комиссии

230103 «Автоматизированные

  системы обработки

информации и управления»

 и

рекомендовано к применению

_____________( )

«_____»_____________20___г

Методическое пособие

Лабораторная работа № 6

по дисциплине:

«Распределенные системы обработки информации»

Создание документа с формами.

230103  Автоматизированные  системы обработки информации и управления

Разработал                                           Преподаватель АК                       

2010 г.


ЛАБОРАТОРНАЯ РАБОТА № 6

Тема: Создание документа с формами.

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

Оборудование и программное обеспечение:

Персональный компьютер IBM PC/AT.

Операционная система MS-DOS, Windows 95/98/NT/2000/XP.

Теоретическая часть

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

Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы «на стороне клиента», встраивая в свои страницы скрипты.

Форма ограничивается тегами и . Между этими тегами располагаются теги, создающие элементы ввода информации и теги создания обычного содержимого Web-страницы, т. е.

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

Обратите внимание

HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой.

Тег обладает целым рядом параметров, которые задают свойства создаваемой формы.

Параметры тега 

§  ACTION указывает URL, который примет и обработает данные формы. Если эта опция не указана, данные отправляются по адресу страницы, на которой размещена форма.

  • METHOD указывает метод передачи данных программе-обработчику формы. Может принимать одно из двух значений. Значение GET, используемое по умолчанию, предписывает посылать информацию формы вместе с URL, а значение POST предписывает посылать информацию формы отдельно от URL. Значение POST используется обычно в случае отправки данных формы по электронной почте или при необходимости передавать значительный объем информации.
  • NAME указывает имя формы. Это необходимо, если требуется доступ к данным формы с помощью встроенного скрипта на JavaScript или Visual Basic Script, а также в том случае, если данные формы предназначены для отправки по электронной почте.
  • ENCTYPE задает способ кодирования данных формы. Значение application/x-www-form-urlencoded, используемое по умолчанию идеально подходит для подавляющего большинства CGI-приложений.
Читайте также:  Стратегия пробой rsi

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

  I.  Поля, кнопки, переключатели, флажки.

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

Основной параметр тега , определяющий вид элемента — параметр TYPE

Источник: https://vunivere.ru/work71962

HTML: Формы

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

Как работают HTML формы

Формы состоят из двух частей: HTML разметка (то что отображается на веб-странице) и обработка данных на клиентской (проверка заполнения полей, проверка корректности введенной информации и т.д.) или серверной стороне (сохранение введенных данных, отправка электронных писем и т.д.). Обработка данных формы на сервере обычно написана на PHP, Ruby on Rails, Perl, Python, Node.js и Java.

Рассмотрим пошаговую работу формы:

  1. посетитель заходит на страницу с формой, заполняет ее и отсылает
  2. браузер отсылает данные из формы на сервер
  3. сервер получает данные и передает их сценарию для обработки
  4. серверный сценарий обрабатывает данные и создает новую HTML-страницу с ответом, которую он передает обратно веб-серверу
  5. веб-сервер отправляет страницу с ответом обратно браузеру
  6. браузер получает страницу и отображает ее

HTML тег

Формально, все элементы формы должны находиться внутри элемента :

… содержимое формы …

Элемент является контейнером, таким же как или , но он также может содержать атрибуты, которые позволяют настроить запрос отправки, когда пользователь нажимает кнопку «Отправить». Двумя наиболее важными атрибутами являются action и method.

  • Атрибут action указывает путь к файлу, куда следует отправлять собранные данные. Если он не указан, данные отправляются на URL-адрес страницы, содержащей форму.
  • Атрибут method указывает метод передачи данных: get или post. (подробнее о методах передачи данных читайте описание тега в HTML справочнике)

Элементы

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

type=»text»Значение text создает однострочное текстовое поле: Попробовать »

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

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

type=»submit»Создает кнопку, при нажатии на которую браузер отправляет форму на сервер: Атрибут value задает текст, который будет отображен на кнопке, заменяя значение установленное по умолчанию.type=»radio»Создает элементы управления, позволяющие выбрать только один вариант из предложенных, то есть такие элементы управления являются взаимозаменяемыми. Они называются радио кнопками или переключателями: да
нет Попробовать »

Все радио кнопки, связанные с заданными вариантами значений, должны иметь одинаковое значение атрибута name, но каждая отдельная радио кнопка должна иметь уникальное значение атрибута value.

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

).

type=»checkbox»Создает элементы управления, позволяющие пользователям отмечать любое количество вариантов или отменить выбор, не выбрав ни одно из предложенных значений. Такие элементы управления называют флажками.

Соль

Перец

Чеснок

Попробовать »

Все флажки, относящиеся к одной группе, должны иметь одинаковое значение атрибута name, но каждый отдельный вариант должен иметь уникальное значение атрибута value.

Примечание: все допустимые значения атрибута type смотрите в нашем HTML справочнике в описании элемента .

Элемент

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

Источник: https://puzzleweb.ru/html/12_forms.php

Формы HTML | Теги input и textarea

Здравствуйте уважаемые начинающие веб-мастера. Продолжим изучение HTML

Эту статью полностью посвятим формам html.

Во первых, что такое форма html. Все Вы конечно же встречали элементы, или поля, в которые нужно вводить логин и пароль. Так вот — это форма.

Различные окошки, в которые выставляются галочки или точки для выбора того или иного элемента или действия — это тоже форма.

Поля для комментариев, кнопки Отправить, Очистить, Выберите файл — всё это тоже формы html.

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

Написание:

Важно

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

Кроме обязательного атрибута type, тег input принимает ещё ряд атрибутов, значения которых влияют на формы.

size — определяет ширину текстового поля.

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

Синтаксис:<\p>

value — присваивает значение элемента.

В зависимости от типа формы, значения атрибута value выполняют следующие функции:

1. Для текстовых полей, указывает предварительно введённую строку. Например в форме подписки — это Ведите Ваш E-mail. При заполнения поля, эта строка исчезает, а после очистки появляется вновь.

2. Для кнопок устанавливает текст внутри кнопки.

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

Арбуз
Дыня

align — определяет выравнивание изображения, текста.

Принимает значения:

bottom — выравнивание по нижней границе (задаётся по умолчанию);

top — выравнивание изображения по самому высокому элементу первой строки;

left — выравнивание по левому краю;

right — выравнивание по правому краю;

middle — выравнивание середины изображения по базовой линии;

alt — альтернативный текст изображения.

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

border — добавляет рамку к изображению.

Задаётся только толщина рамки любым целым числом в пикселях. Цвет — под цвет текста.

name — имя формы, необходимое для идентификации её обработчиком.

В значении указывается любое уникальное имя.

checked — предварительно активированный переключатель или флажок.

У этого атрибута нет значений. Просто его присутствие указывает, что переключатель или флажок уже помечен.

disabled — блокирует возможность изменения элемента.

У этого атрибута нет значений. Его присутствие блокирует всякую активность в форме.

maxlenght — определяет максимальное количество символов в тексте.

В значении указывается любое целое положительное число

Совет

readonly — устанавливает, что поле и его содержание не могут изменятся пользователем.

У этого атрибута нет значений.

Читайте также:  Свойство font

Форма комментариев создаётся несколько иначе.

Для создания формы комментариев применяется тег textarea

Размер окно задаётся атрибутами cols и rows, через количество предполагаемых строк и столбцов.

Их значения задаются любыми целыми положительными числами.

Синтаксис:

Комментарий

Комментарий

Теперь напишем html файл с формами, и посмотрим, как всё это смотрится в коде.

Формы

Войти

Ваш пол

Муж.
Жен.

Ваша профессия

Строитель

Военный

Фермер

Напишите несколько слов о себе

Результат:

Вот такая форма обратной связи с пользователем получилась.

Как Вы надеюсь понимаете — это чистый html. Если применить оформление css, то как всю картинку, так и отдельные элементы можно сделать гораздо симпатичнее.

Но об этом читайте в рубрике CSS

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Перемена

Приглянулось платье. Решила купить — не влезла. Расстроилась, купила торт. Влез гад.

Атрибут style < < < В раздел > > > Вставляем видео и делаем ему рамочку

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

Допустимая сумма от 10 руб. до 15 000 руб.

Источник: https://starper55plys.ru/html/formyi-html-teg-input/

HTML формы

Имя:

Фамилия:

Мужчина Женщина

О себе:
Меньше 18
От 18 до 35
Больше 35
Женат /-а
Есть кошка

И так по порядку, что мы сделали в этом примере:

  • Разместили два однострочных текстовых поля () для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
  • Разместили две радиокнопки () для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
  • Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male). Он применяется только для полей и , в противном случае он игнорируется.

  • Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
  • Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

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

Рис 32 HTML формы.

Обращаю Ваше внимание, что в рамках изучения HTML мы не будем рассматривать то, как серверы обрабатывают входные данные, лишь рассмотрим базовые принципы передачи формы.

Обработчик формы это, как правило, обычная страница сервера, которая с помощью скрипта обрабатывает входные (полученные) данные.

Чтобы указать обработчик формы, необходимо использовать тег совместно с атрибутом action:

Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма.

Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы — текущая страница). В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы «example.php».

Расширение *.

php используется для файлов, написанных на языке PHP (Hypertext Preprocessor — препроцессор гипертекста, произносится как «пи-эйч-пи») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

Еще одним важным атрибутом при работе с элементом является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:

или:

Вы можете использовать get (метод по умолчанию) если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы будут видны при передаче в адресе страницы:

http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин

Используйте метод post если форма использует обновление каких-либо данных, или включает в себя конфиденциальную информацию (например пароль). Метод post предлагает лучшую безопасность, так как представленные данные отправляются на сервер в теле сообщения запроса.

Группировка данных формы

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

Тег определяет заголовок для элемента, с помощью которого группируются элементы формы.

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

Пожалуйста, представьтесь Имя:

Фамилия:

Мужчина Женщина

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

  • Разместили внутри формы (парный тег ) элемент , благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом мы определяем для нашей рамки заголовок «Пожалуйста, представьтесь».
  • Разместили два однострочных текстовых поля () для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
  • Разместили две радиокнопки () для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
  • Заключительный элемент это кнопка, которая служит для отправки формы (). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

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

Рис 33 Группировка элементов формы.

Текстовая метка

Тег (англ. — метка) служит текстовой меткой для элемента . По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента , а не по самому элементу .

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

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

Да Нет
Да Нет

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

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

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

Рис. 34 Использование текстовой метки (тег

Читайте также:  Продвижение через прогон по каталогам статей

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

Атрибут placeholder(HTML тега ) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.

Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера (пример мы рассматривали выше).

Атрибут может быть использован с полями данных следующих типов (атрибут type):

  • email(поле для адреса электронной почты).
  • password (поле с паролем, в котором скрываются символы).
  • search(текстовое поле для ввода строки поиска).
  • text (однострочное текстовое поле).
  • tel(поле для ввода номера телефона).
  • url(поле для ввода URL-адреса).

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

Login:

Password:
Далее

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

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

Рис. 34а Атрибут placeholder HTML тега (создание текстовой подсказки).

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

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

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

Практическое задание № 22.

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

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

Источник: https://basicweb.ru/html/formi.php

Описание тегов создающих html-формы

Большинство элементов добавляется в форму с помощью элемента . Назначение и внешний вид элемента меняются в зависимости от значения атрибута type.

Элемент (текстовая область)

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

Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами. Размеры поля устанавливаются с помощью атрибутов cols и rows.

cols — число столбцов видимого текста:

rows — число строк видимого текста:

При этом, если пользователю потребуется ввести в текстовую область больше строк текста, чем указано с помощью атрибута rows, в текстовой области появится вертикальная прокрутка.

При разработке форм для новых проектов используйте правила CSS для установки ширины и высоты текстовой области . Однако при просмотре исходного кода сайтов вы еще часто можете встретить атрибуты cols и rows.

При необходимости можно запретить пользователю изменять текст в текстовом поле, например, если поле используется для представления какого-нибудь договора. Такой запрет вводится с помощью атрибута readonly.

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

Ознакомтесь с соглашеием:

Ваше мнение о этом соглашении:

Ознакомьтесь с соглашеием:

Условия нашего соглашения…

Ваше мнение о этом соглашении:

Введите свой комментарий…

Раскрывающийся список (select)

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

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

Указав для элемента атрибут selected, вы сделаете его значением по умолчанию для данного списка. При загрузке страницы такие элементы будут выделены. Если атрибут selected не установлен, то при загрузке страницы будет отображен первый вариант ответа из созданного списка.

Обратите внимание

Если пользователь не выберет другой пункт списка, то на сервер будет отправлен пункт, отмеченный атрибутом selected по умолчанию:

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

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

Первый Второй Третий Четвертый Пятый

Прокручиваемые списки

По умолчанию с помощью тега создается раскрывающийся список, в котором изначально видно только одно значение. Для создания прокручиваемого списка укажите число видимых строк, введя соответствующее значение атрибута size.

Если количество элементов списка превышает значение, указанное в атрибуте size, справа появляется полоса прокрутки. Несмотря на то, что атрибут size позволяет отобразить сразу несколько пунктов списка, посетитель может выбрать из списка по-прежнему только один пункт.

Чтобы посетитель мог выбрать из списка одновременно несколько элементов (с помощью клавиши Shift или Ctrl), нужно использовать атрибут multiple. Как и в случае с раскрывающимся списком, указав в элементе атрибут selected, вы сделаете его значением по умолчанию.

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

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

Первый вариант Второй вариант Третий вариант Четвертый вариант Пятый вариант Шестой вариант

Группировка пунктов списка (optgroup)

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

Желаемая работа (можно выбрать несколько):<\p> Искусство Экология Туризм HTML5 PHP Delphi Дизайн Верстка Английский Французский Китайский Здания Мосты Дороги

Элемент

В отличие от кнопок отправки данных и сброса, в самой кнопке Ьuttоn нет встроенных функций. Благодаря элементу

Добавить email в список:

Добавить

HTML5 Элемент

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

Но если ни один из них не подходит, пользователь может ввести собственный текст. Значение, заданное для атрибута list (planet), аналогично идентификатору id элемента .

Это позволяет ассоциировать  с соответствующим полем ввода:

Выбор планеты:<\p>

Метки элементов формы (label)

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

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

Связывание текста с элементом формы осуществляется просто: присваиваете атрибуту for элемента значение такое же, как значение атрибута id у элемента, с которым связан .

Соответствие значений атрибутов for и id связывает два элемента вместе, что позволяет пользователям нажать на и передать фокус нужному полю формы:

Наша метка

Использование элемента для создания меток предпочтительнее обычного текста. В первую очередь из-за удобства для конечного пользователя, ведь при применении элемента установить/снять флажок можно не только щелчком на поле флажка, но и на его метке — пояснительном тексте:

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

ЭлементОписание
Устанавливает форму на веб-странице
Создает различные элементы формы (текстовые поля, кнопки, переключатели и т.д.) в зависимости от значения атрибута type
Создает многострочное текстовое поле
Группирует элементы формы.

Может также содержать внутри себя элемент legend с условными обозначениями элементов формы, составляющих логическую группу

Многофункциональная кнопка
Устанавливает связь между определенной меткой и элементом формы (input, select, textarea)
Применяется для создания заголовка группы элементов формы, которая определяется с помощью тега fieldset
Представляет собой контейнер, внутри которо-го располагаются теги option, объединенные в одну группу
Определяет отдельные пункты списка, созда-ваемого с помощью контейнера select
Позволяет создать элемент интерфейса в виде раскрывающегося или прокручиваемого списка
Позволяет предоставить раскрывающийся список с предложенными значениями для любого типа поля ввода

Задачи

Источник: http://wm-school.ru/html/html_form_elements.html

Ссылка на основную публикацию