Создать программу элемента формы для html. Создания форм в HTML. Пример создания красивой HTML формы
Последнее обновление: 08.04.2016
Однострочное текстовое поле создается с помощью элемента input , когда его атрибут type имеет значение text:
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dirname : устанавливает направление текста
maxlength : максимально допустимое количество символов в текстовом поле
pattern : определяет шаблон, которому должен соответствовать вводимый текст
placeholder : устанавливает текст, который по умолчанию отображается в текстовом поле
readonly : делает текстовом поле доступным только для чтения
required : указывает, что текстовое поле обязательно должно иметь значение
size : устанавливает ширину текстового поля в видимых символах
value : устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size - то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле. Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как значение value представляет введенный в поле текст по умолчанию:
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с disabled текстовое поле затеняется:
Среди атрибутов текстового поля также следует отметить такой атрибут как list . Он содержит ссылку на элемент datalist , который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Поле поиска
Для создания полей поиска предназначен элемент input с атрибутом type="search" . Формально он представляет собой простое текстовое поле:
Поле ввода пароля
Для ввода пароля используется элемент input с атрибутом type="password" . Его отличительной чертой является то, что вводимые символы маскируются точками:
Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами и имеет следующие параметры:
– name - имя поля,
– cols - ширина поля в символах,
– rows - количество строк текста, видимых на экране,
– wrap - способ переноса слов:
– off - переноса не происходит,
– virtual - перенос отображается, но на сервер поступает неделимая строка,
– physical - перенос и на экране и при поступлении на сервер.
– disabled - неактивное поле,
– readonly - разрешено только чтение.
Результат:
Раскрывающиеся списки
Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задаются и те, и другие с помощью тегов , внутри которых располагаются элементы значений, заданных тегом Рассмотрим параметры этих тегов:
– name - имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option;
– size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки;
– multiple - разрешает выбор нескольких элементов списка.
– selected - им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов;
– value - значение, которое будет отправлено серверу, если пункт выбран.
Какой язык вы хотите изучать:
Какое время вы готовы на это потратить:
Какие дни недели для занятий вас устроят:
(выбирайте с нажатой клавишей ctrl)
Результат:
Существуют еще теги <optgroup>… , позволяющие группировать элементы списка по каким-либо признакам. Например, для создания каталога сайтов в виде списка, тогда удобнее разбить его на группы по интересам. Обратите внимание, в данном случае необходимо указывать закрывающие теги . Пример кода:
Каталог сайтов:
Результат:
Надписи
Все элементы формы можно связать с их надписями при помощи элемента и его параметра for, значением которого является имя элемента, с которым связываем надпись. Например:
Результат:
Условие задания
В соответствии с вариантом создать форму для ввода данных. Страница должна содержать следующие визуальные элементы:
1. заголовок;
2. текст поясняющий назначение формы;
3. форму ввода данных, в соответствии с вариантом. Типы элементов для ввода данных подобрать самостоятельно (не менее 3 различных);
4. копки – «ОТПРАВИТЬ », «ОЧИСТИТЬ »;
5. информацию о создателе страницы – ФИО , группа , e–mail .
Рисунок 1 – Примерный вид страницы
К каждому полю формы добавить кнопку «Пояснение », при нажатии на которую открывается окно с поясняющей информацией и или картинкой, кнопкой «ЗАКРЫТЬ ».
При нажатии на кнопку «ОТПРАВИТЬ », данные формы проверяются на правильность заполнения – все поля заполнены, числовые поля содержат допустимые значения, выполняется удаление начальных и конечных пробелов. При несоответствии данных одного или нескольких полей, на экран должно выводиться окно в котором указываются название и краткий текст поясняющий требования к вводимым в поле данным. Если данные введены верно, то данные отправляются после подтверждения в диалоговом окне. На форме разместить два скрытых поля с текущей датой и временем, которые также передаются на сервер. Примерный вид формы:
Рисунок 2 – Примерный вид формы ввода данных
Таблица 1 – Варианты форм ввода данных
Вариант | Описание |
Цех, участок, Ф.И.О. Объем выполненной работы | |
УДК, Ф.И.О. автора, Наименование, Количество | |
Номер поезда, Наименование, Место отправления, Место прибытия, Категория | |
Организация, Ф.И.О., Год рождения, Занятое место | |
Страна, Площадь, Население, Континент, Столица | |
Марка автомобиля, Номер, Цвет, Год выпуска, Пробег | |
Порода собаки, Кличка, Отец, Мать, Дата рождения, ФИО хозяина | |
Вид овощей, Название сорта, Дата посадки, Дата уборки, Урожай | |
Дисциплина, Объем лекций, Объем лабораторных, Вид контроля, Группа | |
Дата, Температура, Давление, Облачность, Направление ветра | |
Наименование, Фирма, Стоимость, Количество, Дата | |
Название группы, Страна, Альбом, Дата выпуска, Число продаж | |
Название вершины, Высота, Страна, Год покорения, Количество восхождений | |
Ф.И.О., Год рождения, Рост, Вес, Группа крови | |
Ф.И.О., Область деятельности, Год рождения, Страна, Число публикаций |
Контрольные вопросы
1. Опишите тег для создания текстового поля. Приведите его синтаксис.
2. Опишите тег для создания текстового поля для ввода пароля. Приведите его синтаксис.
3. Опишите тег для создания флажков. Приведите его синтаксис.
4. Опишите тег для создания кнопок. Приведите его синтаксис.
5. Опишите тег для создания поля для выбора файлов. Приведите его синтаксис.
6. Опишите тег для создания многострочного текстового поля. Приведите его синтаксис.
7. Опишите тег для создания раскрывающегося списка. Приведите его синтаксис.
Преподаватель Стишенок Е.О.
Фарберов А.Г.
Данный элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
Между тегов можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
Создание поля для многострочного текста показано в примере 1.
Пример 1. Текстовое поле
Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Для
В
Пример 2. Текстовое поле с текстом
Результат данного примера показан на рис. 2. Обратите внимание, что учитываются все пробелы и переносы строк внутри
Рис. 2. Поле с текстом
Как правило, размеры
Не всегда текст, который нужно ввести, помещается в одной строке. Бывает, что он растягивается на несколько строк или даже абзацев. Конечно, можно обойтись текстовой строкой "бесконечной" длины (без указания значения параметра maxlength). Однако выглядит такая строка - без начала, без конца - неизящно, а пользоваться ею очень неудобно.
Поэтому для ввода крупных блоков текста предусмотрен другой элемент формы - поле ввода.
Для создания текстового поля используется дескриптор
Дескриптор
Весь текст выводится, как правило, моноширинным шрифтом ("пишущая машинка").
Основные параметры тега
Параметр |
Описание |
Определение количества столбцов текстового поля |
|
Определение количества рядов текстового поля |
|
Присвоение уникального имени, необходимого для идентификации программой-обработчиком |
|
Позволяет создать элемент, недоступный для редактирования |
|
Способ представления текста, вводимого в окно. Virtual - в окне текст автоматически разбивается на строки, но при передаче эта автоматическая разбивка не сохраняется если вы ввели все одной строкой, то оно так и будет передано. Используется по умолчанию. Off - Если мы хотим, чтобы переход на
новую строку в окне происходил только
когда пользователь нажимает Hard - если мы хотим, чтобы переход на новую строку происходил автоматически и эта разбивка сохранялась при передаче текста на обработку |
Раскрывающиеся списки
Списки часто бывают очень длинными и скучными. И занимают много места. Если форма бумажная - ничего не поделаешь. Тяжко вздыхаем и заправляем в принтер еще один лист. Но если форма электронная и мы не хотим зря занимать место, можно воспользоваться раскрывающимся списком. Что это такое, знает любой, кто имел дело с Windows дольше получаса: строка, в которой что-то написано, а справа - небольшая кнопка со стрелкой. Если щелкнуть на стрелке, вниз "выпадает" список. Щелкаем на одном из его пунктов - и список сворачивается обратно, а в строке появляется выбранный пункт.
Как сделать подобный список на HTML-странице? Сам список создается с помощью дескриптора
<SELECT name= day>
Не помню
< OPTION value = Понедельник > Понедельник
< OPTION value =Вторник>Вторник
< OPTION value =Среда>Среда
< OPTION value =Четверг>Четверг
< OPTION value =Воскресенье>Воскресенье
SELECT >
Однако на этом возможности раскрывающегося списка не исчерпываются. По умолчанию список представляет собой одну строку, которая "раскрывается" при щелчке на кнопке. Но мы можем модифицировать список так, чтобы он принял вид окна, содержащего несколько строк и - при необходимости - полосу прокрутки.
Для этого нам потребуется параметр size дескриптора
Но ведь иногда из списка требуется выбрать не одно, а сразу несколько вариантов. И тогда возможность видеть их все сразу может очень пригодиться. Для того чтобы список позволял выбрать сразу несколько вариантов, используется параметр multiple. Как и checked, этот параметр не имеет значений.
Просто проставляем его - и все. Обратите внимание: в результате программе-обработчику передается несколько значений с одинаковым именем.
Для того чтобы выбрать несколько пунктов
из такого списка, используется стандартный
подход Windows: если эти пункты следуют
подряд, выбираем первый, нажимаем клавишу
При разработке электронной формы рекомендуется придерживаться следующего правила: то, что посетитель страницы видит на экране одновременно, должно представлять собой законченный блок информации. По возможности, разумеется: если вам это не удастся, никто не подаст на вас в суд. Однако мало кому понравится пользоваться прокруткой только для того, чтобы добраться до кнопки отправки. Тому, чтобы форма выглядела эстетично и чтобы ею было удобно пользоваться, очень способствует рациональная комбинация различных списков.
Элемент OPTION имеет следующие атрибуты. Selected (без значений) определяет, какой из пунктов списка должен быть выбран по умолчанию, то есть при загрузке страницы. В списке только один из элементов OPTION может быть помечен таким способом. Атрибут value необходим для обработки данных на стороне сервера. Следует отметить, что тег
Эти два элемента предназначены для создания группы полей в форме. Чтобы понять, как используются эти элементы, рассмотрим небольшой пример.
Имя:
Фамилия: name="familiya"
type="text">
Телефон: name="telefon"
type="text">
Текст подсказки
С помощью элемента FIELDSET несколько элементов объединяются: пользователь видит их заключенными в рамку. Внутри группы элементы формы используются обычным способом.
Элемент LEGEND позволяет создать заголовок
группы. Поскольку этот элемент является
контейнером, в нем можно размещать
другие элементы HTML. Например заголовок
группы можно составить из двух строк,
если использовать тег
.
В этом случае размер шрифта заголовка целесообразно уменьшить.
С помощью атрибута align можно регулировать положение заголовка:
Top - заголовок сверху;
Bottom - заголовок внизу (что не всегда удается реализовать);
Left - заголовок вверху и слева (значение по умолчанию);
Right - заголовок вверху и справа.
Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.
На рисунке представлена форма регистрации студента на сайте образовательного учреждения.
Для создания формы используется контейнер
с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.Структура простейшей формы:
элементы форм…
В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.
Структура кнопки:
Итак, для записи практически всех элементов форм используется тэг с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:
Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию
Пример записи формы с двумя текстовыми полями:
Результат работы формы представлен на рисунке.
В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга
К вышеуказанному коду добавим поле текстовой области:
Комментарий:
Результат работы кода с текстовой областью представлен на рисунке.
Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги
Структура записи списка:
Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге
Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.
Структура записи флажка и радиокнопки:
текст
Радиокнопка:
текст
В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.
Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:
В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:
Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.
Для вставки изображения в кнопку используется код, представленный в следующем примере:
При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:
Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:
Элемент формы hiddenбудет невидим в окне браузера.
Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:
Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.