Многострочное текстовое поле
Данный элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
Между тегов можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
Создание поля для многострочного текста показано в примере 1.
Пример 1. Текстовое поле
Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Для
В
Пример 2. Текстовое поле с текстом
Результат данного примера показан на рис. 2. Обратите внимание, что учитываются все пробелы и переносы строк внутри
Рис. 2. Поле с текстом
Как правило, размеры
Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами и имеет следующие параметры:
– 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.
Рис. 1. Вид текстового поля по умолчанию
При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width ), высоту (height ), границу (border ), цвет текста и фона (color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.
Пример 2. Оформление текстового поля
Результат данного примера показан на рис. 2.
Рис. 2. Изменение вида текстового поля
Все браузеры кроме Internet Explorer поддерживают изменение размера для
В прошлом видео уроке мы узнали как сделать выпадающий список в HTML . Изучили несколько тегов и посмотрели, как все это работает на живых примерах.
Сегодня изучим еще пару тегов и их атрибуты. Узнаем, как в форму добавить поле для ввода многострочного текста. И поговорим об еще одном способе добавления кнопок в HTML-форму.
HTML-тег textarea: Многострочный текст.
Тег
Также стоит отметить, что HTML-тег
Атрибут cols отвечает за ширину поля измеряемую количеством символов, которые можно написать в одну строку. А после того как количество символов достигнет максимума, который указан в атрибуте cols , будет начата новая строка. Кроме того при указании ширины само поле сразу обретет размер указанный в символах.
Атрибут rows отвечает за высоту поля измеряемую количеством строк. Но здесь стоит отметить, что если количество текста превысит указанное количество строк, это не означает, что мы не сможем дальше писать, просто появится полоса прокрутки, а видимая область текста будет иметь высоту, указанную в значении атрибута rows .
Пример HTML-кода поля ввода многострочного текста. Не забываем, что этот код должен находиться между тегами
Форм на веб-странице может несколько (столько, сколько нужно разработчику ). Каждая из них начинается тегом
Атрибут action является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные ).
Атрибут method определяет способ отправки содержимого формы. Существует два метода - GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET и POST относится к языкам обработки данных (например, PHP ). Достаточно знать, что именно метод передачи данных POST в большинстве случаях используется в формах.
Атрибут name тега
Можно также установить кодировку для вводимых данных - за это отвечает атрибут accept-charset , а также, при помощи атрибута target , определить окно, в котором будет отображаться результат обработки отправленной формы (в новом или в текущем окне ).
Но сам по себе тег
Ввод данных. Поля формы - тег
Тег это наиболее часто встречающийся в формах тег. Он предназначен для создания различных элементов, служащих для ввода данных в форму: это текстовые поля, кнопки, флажки, переключатели.
type - это основной атрибут тега . Он устанавливает тип поля (элемента ) формы:
Значение атрибута type= "..." |
Результат |
Описание |
Однострочное текстовое поле для ввода текста. Атрибут size задает ширину поля в символах. |
||
Текстовое поле для ввода пароля. |
||
|
Переключатель. |
|
|
Флажок. |
|
Кнопка. |
||
Кнопка сброса. |
||
Кнопка для отправки внесенных данных. |
||
Поле для ввода имени пересылаемого файла. |
||
Кнопка-изображение. |
||
Скрытое поле - невидимое для пользователя. |
Раскрывающийся список - теги
Тег
Вид создаваемого списка зависит от значения атрибута size : при size= "1" (значение по умолчанию ) список будет раскрывающимся.
Иное значение атрибута size будет соответствовать количеству отображаемых пунктов списка. Например, при size= "3" , видимыми будут три элемента. Для просмотра остальных пунктов списка (если таковые есть ) следует воспользоваться вертикальной полосой прокрутки, которая добавляется автоматически.
По умолчанию возможен выбор лишь одного элемента списка. Добавление атрибута multiple к тегу
При наличии атрибута multiple , будут отображены все пункты списка или их часть (в зависимости от браузера ), если атрибутом size не установлено определенное количество видимых пунктов.
Обязательным элементом раскрывающегося списка является тег
При помощи атрибута name тега
Атрибут selected тега
Сторона света - одно из четырех основных направлений:
7 Чудес света!
Сторона света - одно из четырех основных направлений:
Север Юг Запад Восток
7 Чудес света!
Пирамида Хеопса Висячие сады Семирамиды Статуя Зевса в Олимпии Храм Артемиды в Эфесе Мавзолей в Галикарнасе Колосс Родосский Александрийский маяк
Многострочное текстовое поле - тег
Тег
Атрибут name
тега
Атрибут disabled блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.
Можно задать ширину текстового поля в символах и высоту поля в строках при помощи атрибутов cols и rows соответственно.
Если содержимое поля превысит его размеры - появится бегунок.
Пример использования формы
Теперь давайте посмотрим: как работает форма.
Форма заказа обучающего видеоматериала:
Ваше имя: *
Ваш заказ:
Выберите носитель:
CD
DVD
USB Flash
Ваш E-mail: *
Ваш адрес: *