Командные кнопки.
submit – создает кнопку для отправки данных формы на обработку.
reset – выполняет перезагрузку формы (сбрасывает все введенные пользователем данные).
button – создает пользовательскую кнопку. Чаще всего используется при организации управления скриптами.
Для изменения надписи, отображающейся непосредственно на кнопке используется атрибут value.
<form method="post" action="http://www.eltisbook.ru/action.php" > Найти: <input type="text" name="search" size=20> <br> <input type="submit"> <input type="reset"> </form> |
Начало формы
Найти: Конец формы |
Поле выбора файла.
type = file– служит для загрузки файлов на сервер. Атрибуты для поля выбора аналогичны атрибутам для текстового поля.
<body> <form> Прикрепить файл: <br> <input type="file" size="25"> </form> </body> |
Начало формы Прикрепить файл: Конец формы |
Данный элемент формы позволяет посетителю сайта отправить файл на сервер.
Раскрывающийся список выбора.
Список выбора аналогичен по своему принципу переключателю с тем лишь отличием, что используется он для задания большого колличества вариантов выбора, так как они спрятаны внутри раскрывающегося списка, пока пользователь не нажмет на него. Задается список выбора при помощи конструкции <select></select>. Каждый отдельный элемент внутри списка задается конструкцией <option>.
<fieldset> и <legend>.
Конструкция <fieldset> </fieldset> объединяет расположенные внутри поля формы в группу, выделяя их визуально, что придает форме большую наглядность.
Конструкция <legend> </legend> позволяет придать созданной группе полей имя, которое очень удачно располагается в разрыве рамки.
<form > <fieldset> <legend>Личные данные</legend> Имя: <input type="text" name="firstname" value="Билл"> <br> Фамилия: <input type="text" name="lastname" value="Гейтс"> <br> Пол: <input type="radio" name="Sex" value="Male" checked="checked"> Мужской <input type="radio" name="Sex" value="Female"> Женский </fieldset> <fieldset> <legend>Данные о работе</legend> Место работы: <input type="text" name="work" value="Microsoft"> <br> Должность: <input type="text" name="status" value="Президент"> </fieldset> <input type="submit" value="отправить"> </form> |
Начало формы
Личные данные Имя:
Конец формы |
Фамилия:
Пол:
Мужской
Женский
Данные о работе Место работы:
Должность:
Как вы можете видеть, подобное оформление HTML формы выглядит достаточно приятно, и это было достигнуто средствами простого HTML, без использования CSS.
Сегодня мы научились самостоятельно создавать HTML формы. Использование форм приобретает наибольшую актуальность при использовании языков программирования, например для создания формы отправки сообщения непосредственно из интерфейса сайта. Пример работы такой формы вы можете видеть на странице с контактами.
В следующем уроке мы научимся работать с фреймами в HTML. Хотя данная технология сильно устарела и почти не используется в современных сайтах вы должны понимать, как работает фреймовая структура.
Урок 10: Фреймы в HTML.
"Фреймы в HTML" – десятый урок учебника HTML. В этом уроке мы поговорим об использовании фреймов в HTML, разберем фреймовую структуру и научимся создавать фреймы самостоятельно.
В современном интернет остается все меньше сайтов, которые используют фреймовую структуру, но иногда использование фреймов может упростить некоторые задачи, возникающие при создании сайта.
Особенности фреймов в HTML.
Фреймы позволяют разделить окно браузера на несколько независимых друг от друга зон и отобразить в каждой из них отдельный блок информации. Идея использования фреймов HTML может показаться очень заманчивой, ведь можно сохранить общую для всех страниц часть кода в отдельном файле и подгружать ее через фрейм.
Но ведь аналогичную операцию можно выполнить посредствам PHP блоков, что само по себе намного проще и эффективнее, если конечно ваш хостинг способен обрабатывать PHP инструкции.
У использования фреймов есть один огромный недостаток, который полностью перечеркивает все возможные достоинства этого метода. А именно – использование фреймов очень сильно затрудняет индексирование сайта поисковыми машинами. А поисковая оптимизация– неотъемлемый этап жизни для любого сайта.
Ввиду сказанного выше сам я фреймы никогда не использую и вряд ли буду.
Но для общего развития стоит сказать несколько слов о создании фреймов в HTML.
Создание фреймов.
В создании фреймов нет ничего трудного. Вместо тела документа <body></body> используется конструкция вида <frameset></frameset>.
Вообще структура кода при создании фреймов очень напоминает табличную HTML структуру:
для начала мы разбиваем все окно браузера на несколько областей, по горизонтали <FRAMESET cols="20%, 80%"></FRAMESET> или по вертикали <FRAMESET rows="60%, 40%"></FRAMESET>. Значения пропорций можно указывать как в процентах, так и простым числом, отвечающим за размер в пикселах.
Далее мы можем разбить каждое окно в отдельности на произвольное количество частей, конструкцией вида <FRAMESET rows="10%, 20%,70%"></FRAMESET> или же подгрузить файл в фрейм конструкцией <FRAME src="frame1.html">.
Для большей наглядности приведем небольшой пример:
<HTML> <HEAD> </HEAD> <FRAMESET cols="30%, 70%"> < FRAMESET rows="100, 200"> < FRAME src="fr1.html"> < FRAME src="fr2.html"> < /FRAMESET> < FRAME src="imf_1.gif"> </FRAMESET> < /HTML> |
|
Идея очень проста. Для начала создается основной фрейм, который покрывает собой всю страницу. В этрибутах данного фрейма мы указываем, что он будет разбит на два подфрейма в соотношении 3/7. Далее, перед закрытием основного фрейма, мы создаем еще одно окно внутри левой части основного фрейма и в его атрибутах указываем, что он будет также разбит на два подфрейма по вертикали и с заданными параметрами высоты (100 и 200 px).
После разбиения экрана на 3 основных фрейма мы начинаем встраивать в них внешние файлы. В два левых фрейма мы вставляем html документы, а в правый – изображение.
Это важно. Здесь стоило бы заметить, что заполнение фреймов начинается с самого левого, самого верхнего и самого младшего фрейма. Как вы можете видеть в примере первым делом заполняется FRAME1, т.к. он является самым младшим фреймом, расположенным в левом верхнем углу. Соответственно последним заполняется FRAME3, т.к. он самый старший фрейм в созданной нами иерархии. |
В данном уроке мы бросили беглый взгляд на работу с фреймами. Должен сделать одно замечание: в этом уроке я сказал, что использование фреймов часто неоправданно ввиду того, что поисковые машины не умеют правильно их индексировать или не индексируют вообще. Но бывают сиуации, когда использование фреймов может сиьно упростить некоторые процессы, например при создании CMS (системы управления контентом или просто движка для сайта), когда индексирование ПМ не требуется.
В следующем уроке будут подведены итоги обучения HTML.