Описание элементов управления

Опубликовал: admin Monday, April 16, 2024 в категории HTML | Пока нет комментариев

Тег <input> позволяет вставить в форму элементы управления, например,

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

? type задает тип элемента. В зависимости от значения этого поля создают-

ся следующие элементы формы:

• text — текстовое поле ввода:

<input type="text">

• password — текстовое поле для ввода пароля, в котором все вводи-

мые символы заменяются звездочкой:

<input type="password">

• file — поле ввода имени файла с кнопкой Обзор. Позволяет отпра-

вить файл на Web-сервер:

<input type="file">

• checkbox — поле для установки флажка, который можно установить или сбросить:

<input type="checkbox">

• radio — элемент-переключатель (иногда их называют радио-

кнопками):

<input type="radio">

• reset — кнопка, при нажатии которой вся форма очищается. Точнее сказать, все элементы формы получают значения по умолчанию:

<input type="reset">

• submit — кнопка, при нажатии которой происходит отправка данных,

введенных в форму:

<input type="submit">

• button — обычная командная кнопка:

<input type="button">

Такую кнопку имеет смысл использовать только с прикрепленным к ней скриптом. Как это сделать, будет показано в главе 3;

• hidden — скрытый элемент, значение которого отправляется вместе со всеми данными формы. Элемент не показывается пользователю, но позволяет хранить, например, данные из предыдущей формы (если пользователь последовательно заполняет несколько форм) или уни- кальное имя пользователя:

<input type="hidden">

? name задает имя элемента управления. Оно должно обязательно указы- ваться латинскими буквами (например, pole) или комбинацией латинских букв и цифр (например, pole1). Имя элемента не должно начинаться с цифры:

<input type="text" name="pole1">

? disabled запрещает доступ к элементу формы. При наличии параметра элемент отображается серым цветом:

<input type="text" name="pole1" disabled>

Остальные параметры специфичны для каждого отдельного элемента. По-

этому рассмотрим каждый тип элемента отдельно.

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

Для текстового поля и поля ввода пароля применяются следующие параметры:

? value задает текст поля по умолчанию:

<input type="text" name="pole1" value="http://">

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

<input type="text" name="pole1" value="http://" maxlength="100">

? size определяет видимый размер поля ввода:

<input type="text" name="pole1" value="http://" maxlength="100" size="20">

? readonly указывает, что поле доступно только для чтения. При наличии

параметра значение поля изменить нельзя:

<input type="text" name="pole1" readonly>

Кнопки Сброс, Отправить и командная кнопка

Для кнопок используется один параметр:

? value задает текст, отображаемый на кнопке:

<input type="submit" value="Отправить">

Скрытое поле hidden

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

? value определяет значение скрытого поля:

<input type="hidden" name="pole1" value="1">

Поле для установки флажка

Для полей-флажков используются следующие параметры:

? value задает значение, которое будет передано Web-серверу, если фла- жок отмечен. Если флажок снят, значение не передается. Если параметр не задан, используется значение по умолчанию — on:

<input type="checkbox" name="check1" value="yes">Текст

? checked указывает, что флажок по умолчанию отмечен:

<input type="checkbox" name="check1" value="yes" checked>Текст

Элементы checkbox можно объединить в группу. Для этого необходимо установить одинаковое значение параметра name. Чтобы получить все значе- ния на сервере после названия поля следует указать квадратные скобки (это признак массива в языке PHP):

<input type="checkbox" name="check[]" value="1">Текст 1

<input type="checkbox" name="check[]" value="2">Текст 2

<input type="checkbox" name="check[]" value="3">Текст 3

Элемент-переключатель

При описании элемента-переключателя используются такие параметры:

? value указывает значение, которое будет передано Web-серверу, если переключатель выбран:

<input type="radio" name="radio1" value="yes">Текст

Если ни одно из значений не выбрано, никаких данных передано не будет;

? checked обозначает переключатель, выбранный по умолчанию:

<input type="radio" name="radio1" value="yes" checked>Текст

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

Укажите ваш пол:<br>

<input type="radio" name="radio1" value="male" checked>Мужской

<input type="radio" name="radio1" value="female">Женский

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

Парный тег <textarea> создает внутри формы поле для ввода многострочно-

го текста:

<textarea>

Текст по умолчанию

</textarea>

В окне Web-браузера поле отображается в виде прямоугольной области с по-

лосами прокрутки.

Тег имеет следующие параметры:

? name — уникальное имя поля:

<textarea name="pole2">

Текст по умолчанию

</textarea>

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

<textarea name="pole2" cols="15">

Текст по умолчанию

</textarea>

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

<textarea name="pole2" cols="15" rows="10">

Текст по умолчанию

</textarea>

Список с предопределенными значениями

Тег <select> создает внутри формы список с возможными значениями:

<select>

<option>Элемент1</option>

<option>Элемент2</option>

</select>

Тег <select> имеет следующие параметры:

? name задает уникальное имя списка:

<select name="select1">

? size определяет число одновременно видимых элементов списка:

<select name="select1" size="3">

По умолчанию size имеет значение 1;

? multiple указывает, что из списка можно выбрать сразу несколько эле- ментов одновременно. Чтобы получить все значения на сервере после на- звания списка следует указать квадратные скобки (это признак массива в языке PHP):

<select name="select[]" size="3" multiple>

Внутри тегов <select> и </select> располагаются теги <option>, с помо-

щью которых описывается каждый элемент списка.

Тег <option> имеет следующие параметры:

? value задает значение, которое будет передано Web-серверу, если пункт списка выбран. Если параметр не задан, посылается текст этого пункта:

<select name="select1">

<option value="val1">Элемент1</option>

<option>Элемент2</option>

</select>

Если выбран пункт "Элемент1", то посылается

select1="val1"

Если выбран пункт "Элемент2", то посылается

select1="Элемент2"

? selected указывает, какой пункт списка выбран изначально:

<select name="select1">

<option value="val1">Элемент1</option>

<option selected>Элемент2</option>

</select>

С помощью тега <optgroup> можно объединить несколько пунктов в группу.

Название группы указывается в параметре label:

<select name="select1">

<optgroup label="Отечественные">

<option value="1">ВАЗ</option>

<option value="2">ГАЗ</option>

<option value="3">Москвич</option>

</optgroup>

<optgroup label="Зарубежные">

<option value="4">BMW</option>

<option value="5">Opel</option>

<option value="6">Audi</option>

</optgroup>

</select>

Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)

Похожие посты:

• Изменение высоты строки (межстрочного интервала) в тексте (0)
• Изменение стиля маркеров списка или удаление маркеров (0)
• Использование изображения вместо маркера списка (0)
• Удаление у пунктов списка отступа слева (0)
• Удаление отступов от края страницы (0)
• Навигация (0)
• Создание навигационного меню с подпунктами с помощью списков и таблиц стилей (0)