- Проверка возраста и пола через select
- 1 ответ 1
- Элементы формы
- Элемент (текстовая область)
- Пример: Текстовая область (textarea)
- Раскрывающийся список (select)
- Пример: Раскрывающийся список (select)
- Прокручиваемые списки
- Пример: Прокручиваемый список
- Группировка пунктов списка (optgroup)
- Пример: Создание списка с заголовками
- Метки элементов формы (label)
- Элементы формы
- Задачи
- Многострочное текстовое поле
- Задача HTML:
- Подсказка в поле ввода текста
- Задача HTML:
- Ниспадающее меню
- Задача HTML:
- Многофункциональная кнопка
- Задача HTML:
Проверка возраста и пола через select
Здравствуйте. Есть 2 чекБоекса и 1 селект. Нужно, чтобы при выборе «М» или «Ж», а также при выборе определённого возраста всплывал alert. Вот код:
Выберите пол: М Ж
Выберите возраст:
Кто скажет, в чём ошибка? Alert не появляется вообще. Но если из ветвления убрать проверку чекБокса, то всё работает
1 ответ 1
Не работает, потому для проверки чекбокса вы используете jquery, но при этом не подключаете файл jquery. Ниже код с подключенным файлом jquery.
Выберите пол: М Ж
Выберите возраст:
Элементы формы
Большинство элементов добавляется в форму с помощью элемента . Назначение и внешний вид элемента меняются в зависимости от значения атрибута type.
Элемент (текстовая область)
Для создания больших текстовых полей применяется элемент , который в отличие от других элементов формы не является пустым, а следовательно, для него должны быть указаны открывающий и закрывающий теги. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами. Размеры поля устанавливаются с помощью атрибутов cols и rows.
cols — число столбцов видимого текста:
rows — число строк видимого текста:
При этом, если пользователю потребуется ввести в текстовую область больше строк текста, чем указано с помощью атрибута rows, в текстовой области появится вертикальная прокрутка.
При разработке форм для новых проектов используйте правила CSS для установки ширины и высоты текстовой области . Однако при просмотре исходного кода сайтов вы еще часто можете встретить атрибуты cols и rows.
При необходимости можно запретить пользователю изменять текст в текстовом поле, например, если поле используется для представления какого-нибудь договора. Такой запрет вводится с помощью атрибута readonly.
В следующем примере представлен вариант создания больших текстовых полей. Первое поле предназначено только для чтения, а во второе поле можно ввести текст:
Пример: Текстовая область (textarea)
Раскрывающийся список (select)
Элемент создает на веб-странице раскрывающийся список (также называемый раскрывающимся или выпадающим меню), позволяющий выбрать одно значение из множества возможных.
Как и в рассмотренных других элементах формы, элементу назначается уникальное имя, с помощью атрибута name. Элемент работает в паре с элементом , создающим меню. Элемент задается для каждого пункта меню. Текст, расположенный между тегами и , будет выведен в окне браузера как пункт раскрывающегося списка.
Атрибут value используется в каждом элементе для установки значения, которое будет отправлено на сервер вместе с именем выбранного элемента. Указав для элемента атрибут selected, вы сделаете его значением по умолчанию для данного списка. При загрузке страницы такие элементы будут выделены. Если атрибут selected не установлен, то при загрузке страницы будет отображен первый вариант ответа из созданного списка. Если пользователь не выберет другой пункт списка, то на сервер будет отправлен пункт, отмеченный атрибутом selected по умолчанию:
Пример: Раскрывающийся список (select)
Прокручиваемые списки
По умолчанию с помощью тега создается раскрывающийся список, в котором изначально видно только одно значение. Для создания прокручиваемого списка укажите число видимых строк, введя соответствующее значение атрибута size. Если количество элементов списка превышает значение, указанное в атрибуте size, справа появляется полоса прокрутки. Несмотря на то, что атрибут size позволяет отобразить сразу несколько пунктов списка, посетитель может выбрать из списка по-прежнему только один пункт.
Чтобы посетитель мог выбрать из списка одновременно несколько элементов (с помощью клавиши Shift или Ctrl), нужно использовать атрибут multiple. Как и в случае с раскрывающимся списком, указав в элементе атрибут selected, вы сделаете его значением по умолчанию. Если для тега или для установить уже известный вам атрибут disabled, то в первом случае становится отключенным весь список, а во втором — только отдельный пункт списка.
Пример прокручиваемого списка, в котором выбраны сразу несколько элементов:
Пример: Прокручиваемый список
Выберите вариант
Группировка пунктов списка (optgroup)
Если в списке находится большое количество пунктов, то посетителю довольно сложно найти нужный пункт. В этом случае можно воспользоваться элементом , предназначенным для создания смысловых групп пунктов списка. Элементы помещаются внутрь контейнера , а заголовок группы указывается в атрибуте label.
Пример группировки пунктов списка с заголовками:
Пример: Создание списка с заголовками
Желаемая работа (можно выбрать несколько):
Элемент
В отличие от кнопок отправки данных и сброса, в самой кнопке Ьuttоn нет встроенных функций. Благодаря элементу можно сочетать на кнопке текст и изображение, располагая их внутри контейнера .
В следующем примере на кнопке отображается содержимое элемента — текст и изображение:
Пример: Использование кнопки
Добавить email в список:
HTML5 Элемент
Элемент позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Но если ни один из них не подходит, пользователь может ввести собственный текст. Значение, заданное для атрибута list (planet), аналогично идентификатору id элемента . Это позволяет ассоциировать с соответствующим полем ввода:
Пример: Использование элемента
Метки элементов формы (label)
У каждого элемента формы может быть своя пояснительная надпись, или метка, создаваемая при помощи элемента и повышающая доступность, создавая четкие семантические связи между компонентами формы.
Использование элемента при работе с переключателями и флажками — самый распространенный вариант, однако это не ограничение. С таким же успехом можно связать текст с любым элементом формы, и при щелчке кнопкой мыши на тексте связанный элемент автоматически берется в фокус. Связывание текста с элементом формы осуществляется просто: присваиваете атрибуту for элемента значение такое же, как значение атрибута id у элемента, с которым связан . Соответствие значений атрибутов for и id связывает два элемента вместе, что позволяет пользователям нажать на и передать фокус нужному полю формы:
Использование элемента для создания меток предпочтительнее обычного текста. В первую очередь из-за удобства для конечного пользователя, ведь при применении элемента установить/снять флажок можно не только щелчком на поле флажка, но и на его метке — пояснительном тексте:
Пример: Использование элемента
Элементы формы
| Элемент | Описание |
|---|---|
| Устанавливает форму на веб-странице | |
| Создает различные элементы формы (текстовые поля, кнопки, переключатели и т.д.) в зависимости от значения атрибута type | |
| Создает многострочное текстовое поле | |
| Группирует элементы формы. Может также содержать внутри себя элемент legend с условными обозначениями элементов формы, составляющих логическую группу | |
| Многофункциональная кнопка | |
| Устанавливает связь между определенной меткой и элементом формы (input, select, textarea) | |
| Применяется для создания заголовка группы элементов формы, которая определяется с помощью тега fieldset | |
| Представляет собой контейнер, внутри которо-го располагаются теги option, объединенные в одну группу | |
| Определяет отдельные пункты списка, созда-ваемого с помощью контейнера select | |
| Позволяет создать элемент интерфейса в виде раскрывающегося или прокручиваемого списка | |
| Позволяет предоставить раскрывающийся список с предложенными значениями для любого типа поля ввода |
Задачи
Многострочное текстовое поле
Создайте многострочное текстовое поле, присвойте ему имя name=»pole», а также установите запрет на ввод текста в данное поле пользователем.
Задача HTML:
Многострочное текстовое поле: HTML-код: Подсказка в поле ввода текста
Дополните HTML-код, чтобы в результате получилась форма, приведенная в задании. Когда пользователь начинает вводить значение в поле ввода, ему предоставляется несколько вариантов на выбор: «Среднее», «Среднее специальное» и «Высшее».
Задача HTML:
Ваше образование:
HTML-код: Ниспадающее меню
В задании представлена форма имеющая вид ниспадающего меню с перечнем профессий: «Учитель», «Слecapь», «Дизайнер», «Водитель», «Aктep». Дополните HTML-код, чтобы в результате получилась такая же форма. Присвойте имя списку name=»profession», а значения пунктам списка: «Теасher», «Technic», «Designer», «Driver» и «Actor».
Задача HTML:
Ваша профессия? HTML-код:
Многофункциональная кнопка
Доработайте HTML-код так, чтобы в результате получилась кнопка с изображением: «Star.png» и надписью — «Звезда».
Задача HTML:
HTML-код: