38028

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

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

Информатика, кибернетика и программирование

Помимо атрибута type большинство элементов управления требуют указания атрибутов nme и vlue для идентификации имени и исходного значения если таковое имеется. Вот пример кода создающего текстовое поле: input type=â€text†nme=â€usernme†vlue=â€â€ Этот код может пригодиться при создании текстового поля для ввода имени пользователя при подключении к Webузлу. Для полноты картины можно дополнить его полем пароля: input type=â€pssword†nme =“userpss†vlue=â€â€ обратите внимание что атрибуту vlue в обоих случаях присвоено...

Русский

2013-09-25

45.5 KB

3 чел.

Лабораторная работа №12. «Создание форм»

Элементы управления форм

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

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

Поле пароля.

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

Флажок.

Кнопка выбора.

Меню.

Командная кнопка.

Текстовое поле и поле пароля.

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

Для создания обоих элементов управления используется тег <input>, который имеет атрибут type. Который позволяет указать тип поля: text или password. Помимо атрибута type, большинство элементов управления требуют указания атрибутов name и  value для идентификации имени и исходного значения, если таковое имеется. Вот пример кода, создающего текстовое поле:

<input type=”text” name=”username” value=””>

Этот код может пригодиться при создании текстового поля для ввода имени пользователя при подключении к Web-узлу. Для полноты картины можно дополнить его полем пароля:

<input type=”password” name =“userpass” value=””>

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

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

Пример:

Имя пользователя:

<input type=”text” name=”username” value=”” size=”12”

maxlenght =12><br>

Пароль:

<input type=”password” name=”userpass” value=”” size=”8”

 maxlenght =8><br>

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

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

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

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

Пример:

<textarea name=”comments” rows=”4” cols=”40” wrap=””>

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

</textarea>

Флажок

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

<input type=“checkbox” name =“emaillist” checked=“”>

Показать содержимое вашего почтового ящика?

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

Можно объединить несколько флажков в группу. В этом случае атрибуту name присваивается одинаковое значение для всех элементов управления, входящих в группу, а атрибуту value-уникальное значение каждого элемента. Следующий элемент описывает группу флажков:

<input type=“checkbox” name=“addons” value=“radio”>радио

<input type=“checkbox” name=“addons” value=“tele”>телевидение

<input type=“checkbox” name=“addons” value=“video”>видео

<input type=“checkbox” name=“addons” value=“audio”>аудио

<input type=“checkbox” name=“addons” value=“kino”>кино

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

Кнопки выбора

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

<input type= “radio” name= “size” value= “s”>Малая

<input type= “radio” name= “size” value= “m”>Средняя

<input type= “radio” name= “size” value= “l”>Большая

<input type= “radio” name= “size” value= “x”>Очень большая

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

Меню

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

Чтобы создать меню, необходимо его сгенерировать. Это осуществляется с помощью тега <select> в сочетании с атрибутом name, который задает имя, идентифицирующее выбранное значение при обработке формы. Можно воспользоваться атрибутом size, чтобы указать высоту неоткрытого меню. Высота меню задается в строках. По умолчанию ему присваивается значение 1, т.е., отображается только один элемент, если меню не открыто. У тега <select> имеется еще один атрибут, multiple, позволяющий указать, что могут быть выбраны несколько элементов меню (а не один как обычно). Далее необходимо описать все элементы меню. Это осуществляется с помощью тега <option> в сочетании с атрибутом value, которому присваивается уникальное имя для каждого элемента.

Пример:

Выберите цвет:

<select name=“color”>

<option value= “red”> красный

<option value= “green”> зеленый

<option value= “black”> черный

</select>

при желании можно создавать вложенные меню (или подменю), воспользовавшись тегом <optgroup>. Тег <optgroup> должен располагаться внутри тега <select>  и включать описание элементов подменю.

Командные кнопки

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

Кнопка submit создается следующим образом:

<input type= “submit” value= “ввод данных”>

Кнопка reset аналогично:

<input type= “reset” value= “очистить форму”>

«Применение форм для навигации. Декорирование кнопок форм»

Можно придать командным кнопкам более привлекательный вид, воспользовавшись тегом <button>, который имеет атрибут style. Заметим, что при создании кнопок с помощью тега <button> атрибутам type, name, value присваиваются одинаковые значения: submit  или reset. Текст надписи размещается между начальным и конечным тегами <button>. Рассмотрим следующий пример:

<button type=” submit” name=” submit” value=” submit”

style=”font:18pt Helnetica; background:green” > ввод данных

</button>

<button type= “reset”  name= “reset”  value= “reset”

style=”font:18pt Helnetica; background:red” > очистить форму

</button>

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

<button type=” submit” name=” submit” value=” submit”

style=”font:18pt Helnetica; background:green” ><img src=”затея.gif”> ввод данных

</button>


 

А также другие работы, которые могут Вас заинтересовать

23419. Дослідження роботи логічних елементів «НІ», «І», «І-НІ», «АБО», «АБО-НІ» 474 KB
  В цій схемі два двопозиційні перемикачі А і В подають на входи логічної схеми І рівні 0 контакт перемикача в нижньому положенні або 1 контакт перемикача у верхньому положенні. Подайте на входи схеми всі можливі комбінації рівнів сигналів А і В і для кожної комбінації зафіксуйте рівень вихідного сигналу Y. Заповніть таблицю істинності логічної схеми І 7408. Подайте на входи схеми всі можливі комбінації рівнів вхідних сигналів і спостерігаючи рівні сигналів на входах і виході за допомогою логічних пробників заповніть таблицю істинності...
23420. Дослідження роботи тригерів 74.5 KB
  Зберіть схему рис. Увімкніть схему. Послідовно подайте на схему наступні сигнали: S=0 R=1; S=0 R=0; S=1 R=0; S=0 R=0. Зберіть схему рис.
23421. Дослідження роботи лічильників 107.5 KB
  Дослідження лічильника що підсумовує. Подаючи на вхід схеми тактові імпульси за допомогою ключа С і спостерігаючи стан виходів лічильника за допомогою індикаторів складіть часові діаграми роботи лічильника що підсумовує. б Визначте коефіцієнт перерахунку лічильника. Зверніть увагу на числа сформовані станами інверсних виходів лічильника.
23422. Дослідження роботи регістрів 172 KB
  Завантаження інформації в регістр провадиться синхронно з позитивним перепадом тактового імпульсу якщо на входах М N є напруги низького рівня логічного 0. Якщо на одному із цих входів напруга високого рівня після приходу позитивного тактового перепаду в регістрі повинні залишитися попередні дані. Якщо на входи G2 G1 подано напругу активного низького рівня дані що утримуються в регістрі відображаються на виходах 1Q.4Q присутність хоча б однієї напруги високого рівня на входах дозволу G2 і G1 викликає Z стан розмикання для вихідних...
23423. Виртуальная компания – реальность XXI века 120.12 KB
  Для участников виртуальной организации присущи не только определенные роли но и статусы. Статус гарантирует предоставление возможности по доступу к контенту различный уровень анонимности конформность поведения определенных участников виртуальной компании групповую идентичность. Принципы формирования виртуальных компаний[1] Управление виртуальной компанией базируется на представлениях инициаторов проекта работодателей разработчиков. Архитектура сети выбирается с учетом максимальной эффективности деятельности виртуальной компании в...
23424. ПОИСК В ИНТЕРНЕТЕ. ЭЛЕКТРОННАЯ ПОЧТА 1.08 MB
  По мере роста общего количества пользователей Интернета а среди них числа владеющих английским языком эти ограничения всё в большей степени снимаются что закономерно ведёт к уменьшению спроса на услуги журналистов. electronic mail технология и предоставляемые ею услуги по пересылке и получению электронных сообщений называемых письма или электронные письма по распределённой в том числеглобальной компьютерной сети. Акадо российский телекоммуникационный холдинг оказывающий услуги доступа в...
23425. Сообщения SIP 27.68 KB
  Реферат Протокол SIP разрабатывался с расчетом на возможность использования любых транспортов но тем не менее наиболее предпочтительным является использование UDPпакетов это позволяет повысить производительность по сравнению с использованием протокола TCP но требует использования дополнительных механизмов проверки доставки сигнальных сообщений. Так как телефония с использованием протокола SIP позволяет использовать большое количество разнообразных сервисов помимо передачи голоса возможна...
23426. Уровни сетевой архитектуры 72.79 KB
  Компьютерные сети по своей структуре очень сложны. Для начала проведем грань между работой программных и аппаратных средств сети. В сети может работать разнообразное по технологии оборудование от него зависят возможности сети: производительность надежность и т. и разнообразное программное обеспечение: сетевые операционные системы приложения от него зависят те же возможности сети прозрачность безопасность.
23427. Города на территории Беларуси в IX – середине XIII в.: происхождение названий и хозяйственная жизнь горожан 13.54 KB
  Причинами превращения городищ в города были: отделение ремесла от земледелия проживание ремесленников в местах близких к источникам сырья развитие обмена продуктами земледелия на вещи сделанные ремесленниками. Города возникали на перекрестках дорог и рек. Города IX – XIII вв. Внутренняя часть города укрепленная валами рвами стенами называлась детинцем.