|
Пожалуйста, уточните, кто автор курса Основы работы с HTML ? |
Опубликован: 25.10.2006 | Доступ: свободный | Студентов: 24509 / 10756 | Оценка: 4.30 / 4.02 | Длительность: 08:22:00
Специальности: Программист, Разработчик интернет-проектов
Теги:
Лекция 6:
Формы HTML и ввод данных
Поле выбора файла
Поле выбора файла ( type=file ) создает поле для выбора файла, который будет загружен на сервер вместе с информацией формы. Рядом с полем ввода отображается командная кнопка "Обзор…", открывающая стандартное диалоговое окно выбора файла.
<html> <body> <form> Прикрепить файл: <br> <input type="file" size="50"> </form> </body> </html>
Пример выполнения данного HTML-кода
Для поля выбора файла по аналогии с текстовым полем можно использовать атрибуты size, maxlength, value.
Списки выбора
Списки выбора бывают двух типов: раскрывающиеся списки (выпадающие меню) и списки с множественным выбором. Независимо от типов списков описываются они одинаково с помощью пары тегов <select> </select>. Отдельные элементы списка задаются с использованием тега <option>. Тип списка определяется при помощи атрибутов тега <select>.
Атрибут name задает имя поля для отправки выбранных пунктов списка на сервер. Атрибут multiple разрешает множественный выбор. Атрибут size определяет, какое количество пунктов списка будет одновременно отображено на экране. При этом, если атрибут multiple не задан и size=1, то на экране отображается раскрывающийся список, если же задан атрибут Multiple или значение size больше 1, то список отображается развернутым.
Раскрывающийся список выбора
Раскрывающиеся списки выбора по своему назначению соответствуют переключателям, в то же время их использование предпочтительно в тех случаях, когда количество вариантов выбора достаточно велико. Как правило, при выборе более чем из трех вариантов желательно вместо переключателей использовать раскрывающиеся списки.
В следующем примере создан простой раскрывающийся список выбора ноутбука по производителю.
<html>
<body>
<form>
Выбор ноутбука по производителю:
<select name="notebook">
<option value="acer">Acer
<option value="asus">Asus
<option value="compaq">Compaq
<option value="hp">HP
<option value="sony">Sony
<option value="toshiba">Toshiba
</select>
</form>
</body>
</html>Пример выполнения данного HTML-кода
Необходимо заметить, что по умолчанию выбирается первое значение из списка. При помощи атрибута selected тега <option> это значение можно изменить. Следующий пример показывает раскрывающийся список выбора размера экрана ноутбука с предварительно установленным значением "15.4".
<html>
<body>
<form>
Выбор размера экрана ноутбука
<select name="tft">
<option value="tft-12">12"
<option value="tft-13">13"
<option value="tft-14">14"
<option value="tft-15">15"
<option value="tft-15-4" selected="selected">15.4"
<option value="tft-17">17"
</select>
</form>
</body>
</html>Пример выполнения данного HTML-кода
Развернутый список выбора
Развернутые списки используются, как правило, при необходимости множественного выбора значений. В следующем примере раскрывающийся список выбора ноутбука по производителю преобразован в развернутый список с возможностью множественного выбора.
<html>
<body>
<form>
Выбор ноутбука по производителю:
<select name="notebook" multiple>
<option value="acer">Acer
<option value="asus">Asus
<option value="compaq">Compaq
<option value="hp">HP
<option value="sony">Sony
<option value="toshiba">Toshiba
</select>
</form>
</body>
</html>Пример выполнения данного HTML-кода
Необходимо отметить, что для списков с множественным выбором значение атрибута size по умолчанию устанавливается равным 4, кроме того, ни одно из значений не является выбранным по умолчанию. В следующем примере показана форма с развернутым списком высотой в 6 пунктов с предварительно заданными значениями "Compaq" и "Sony".
<html>
<body>
<form>
Выбор ноутбука по производителю:
<select name="notebook" multiple size=6>
<option value="acer">Acer
<option value="asus">Asus
<option value="compaq" selected="selected">Compaq
<option value="hp">HP
<option value="sony" selected="selected">Sony
<option value="toshiba">Toshiba
</select>
</form>
</body>
</html>