Сделай Сам Свою Работу на 5

O общий для всех трех изображений текст,

O 4 одинаковых по размеру кнопки.

Создайте документ, в центре которого находилось бы квадратное изображение размером 150 x 150 px, слева и справа от него (по высоте изображения) - текст, сверху и снизу - также текст по ширине экрана.


Формы

Основные понятия

Одним из важнейших свойств web-документов является возможность получения данных от клиентов и отправки их на сервер. Эта возможность обеспечивается с помощью так называемых ФОРМ (FORMS).

Таким образом,

Формы - это фрагменты HTML-документов, "ответственные" за ввод информации клиентом.

Как выглядят HTML-формы?

Вот один из простейших примеров:

Анкета кандидата в члены EMICS Звездочкой ( * ) отмечены обязательные поля
1. Фамилия *  
2. Имя, отчество *  
3. Место работы *  
4. Должность *  
5. Рабочий адрес *  
6. Рабочий телефон *  
7. Факс  
8. E-mail *  
9. Адрес личной web-страницы  
10. Ученая степень  
11. Ученое звание  
12. Область научных интересов * 1. 2. 3. 4. 5. 6.  

Это очень простая форма. Она содержит лишь текстовые поля и две кнопки. Первая кнопка (RESET) позволяет "сбросить" все введенные пользователем данные, вторая (SUBMIT)- непосредственно отсылает данные на сервер. Ясно, что если забыть разместить в форме кнопку SUBMIT, то данные на сервер не будут отправлены. Поэтому

В форме обязательно должна присутствовать кнопка SUBMIT, "ответственная" за отправку данных, введенных клиентом, на сервер.


Рассмотрим HTML-код, создающий форму.

Формы размещаются в контейнере <form>...</form>.

Этот контейнер можно уподобить обычному бумажному почтовому конверту - на последнем обязательно присутствует адрес назначения и фамилия адресата, в тэге <form>...</form> непременно указывается адрес серверного сценария, который получит и обработает ввведенные клиентом данные. Для этого используется атрибут action. Таким образом, простейшая форма имеет такую структуру:

<form action="адрес серверного сценария"> ....Всякие элементы форм (среди которых непременно присутствует SUBMIT)..... </form>


Атрибут action является обязательным (если, конечно, отправка данных на сервер предусмотрена), но не единственным атрибутом формы. О других атрибутах мы поговорим чуть позднее, а пока остановимся на основных элементах форм.



Элементы форм

Все элементы форм создаются тэгами, имеющими начало: <input type="...", где значения атрибута type и определяют тип элемента. Рассмотрим возможные значения этого атрибута.
· Текстовое поле (text field):

(Мы только что видели их в нашем примере)

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

<input type="Text" name="имя поля" value="начальный текст" align="LEFT" size="число символов" maxlength="максимальное число символов">

Здесь

· name - имя поля (впоследствии мы узнаем, как к элементам форм можно обращаться просто по имени);

· value - то, что будет записано в текстовое поле "по умолчанию", как только документ появится в окне браузера;

· align - этот атрибут "отвечает" за расположение текстового поля; он не является специфическим для элементов форм и (как и в других тэгах) может принимать значения: left, right, center;

· size - длина поля в символах;

· maxlength - максимальное число символов, которое можно ввести в поле. Если этот атрибут не указывать, ограничений на ввод не будет.

Например: код: <input name="fio" value="Горбунков Семен Семенович" align="LEFT" size="28" maxlength="35"> результат:


Значением текстового поля должен быть только текст. Если, к примеру, поместить в него html-код, он будет отображаться как текст (а не так, как он выглядел бы в окне браузера). Но вот пример размещения в текстовом поле бегущей строки, выполненный Сергеем Бурылиным. Как ему это удалось - попробуйте разобраться сами.

· Текстовая область (text area):

Текстовые области удобно использовать для ввода большого количества текстовой информации
Код текстовой области выглядит следующим образом:

<textarea name="имя" cols="число столбцов" rows="число строк" wrap="способ переноса строк"> ТЕКСТ, РАЗМЕЩЕННЫЙ В ТЕКСТОВОЙ ОБЛАСТИ </textarea>


Здесь атрибут "wrap" указывает на способ разрыва строки: если присвоить ему значение off, вводимый текст будет "уходить" за пределы области, в противном случае (on, soft или даже просто wrap без присвоения) текст автоматически переносится на новую строку.

Например: код: <TEXTAREA name=bio cols=30 rows=6 wrap> КРАТКАЯ АВТОБИОГРАФИЯ </TEXTAREA>   результат:


· Список:

Списки позволяют сделать единственный или множественный выбор из набора предлагаемых опций (options).

Например:
Список с единственным выбором: Какой сегодня день недели? Показаны все имеющиеся опции, ни одна не выделена. Список с множественным выбором: Сделайте заказ продуктов: Показаны лишь 4 из 8-ми опций, первая опция выделена.


Структура HTML-кода, определяющего список, такова:

<select name="имя списка" size="число видимых опций" multiple> <option value="значение" selected>текст <option value="значение">текст ...... и так далее...... <option value="значение">текст <option value="значение">текст </select>


Коды списков, приведенных нами в качестве примеров, имеют вид:

<select name="week" size="7"> <option value="1">Понедельник</option> <option value="2">Вторник</option> <option value="3">Среда</option> <option value="4">Четверг</option> <option value="5">Пятница</option> <option value="6">Суббота</option> <option value="7">Воскресенье</option> </select> Список с единственным выбором, показаны все имеющиеся опции, ни одна не выделена.   <select name="food" size="4" multiple> <option value="1" selected>Пицца</option> <option value="2">Хот-дог</option> <option value="3">Шашлык</option> <option value="4">Мороженое</option> <option value="5">Шампанское</option> <option value="6">Ананас</option> <option value="7">Шоколад</option> <option value="8">Кофе</option> </select> Список с множественным выбором, показаны лишь 4 из 8-ми опций, первая опция выделена.

 

· "Флажок" (Checkbox)

"Единичный" флажок создается с помощью кода:

<input type="Checkbox" name="имя флажка" value="значение" checked> текст, который обычно помещается рядом с флажком

Атрибут checked указывает на то, что "флажок" по умолчанию будет отмеченным.
Часто используется сразу несколько "флажков", например:

Укажите Ваши навыки:   <input type="checkbox" name="skill" value="1"checked>HTML <input type="checkbox" name="skill" value="2">JavaScript <input type="checkbox" name="skill" value="3">ASP <input type="checkbox" name="skill" value="4">Perl <input type="checkbox" name="skill" value="5">PHP <input type="checkbox" name="skill" value="6">XML <input type="checkbox" name="skill" value="7">FLASH Укажите Ваши навыки: HTML JavaScript ASP Perl PHP XML FLASH

· "Радиокнопка" (Radiobutton)

"Единичная" радиокнопка создается с помощью кода:

<input type="radio" name="имя радиокнопки" value="значение" checked> текст, который обычно помещается рядом с радиокнопкой

Атрибут checked указывает на то, что радиокнопка по умолчанию будет отмеченной.
Часто используется сразу несколько радиокнопок, например:

Укажите Ваши навыки: <input type="radio" name="skill" value="1" checked>HTML <input type="radio" name="skill" value="2">JavaScript <input type="radio" name="skill" value="3">ASP <input type="radio" name="skill" value="4">Perl <input type="radio" name="skill" value="5">PHP <input type="radio" name="skill" value="6">XML <input type="radio" name="skill" value="7">FLASH Укажите Ваши навыки: HTML JavaScript ASP Perl PHP XML FLASH
Здесь все радиокнопки имеют одно имя - skill. Это обеспечивает единственность выбора. Если присвоить радиокнопкам разные имена, будет возможен множественный выбор, как и в случае использования checkbox'ов.

· Кнопка (button):

Как мы уже говорили, каждая форма должна иметь кнопку, нажатие на которую обеспечивает отправку данных на сервер. Такая кнопка создается с помощью кода:

<input type="submit" name="имя кнопки" value="то, что на этой кнопке написано">

 

Например:
<input type="submit" name="subm" value="Отправить данные">
Результат:

 

При нажатии кнопки submit данные передаются на сервер по адресу указанному в качестве значения атрибута action.

Чтобы предусмотреть возможность сброса всех введенных пользователем данных (и восстановления данных, указанных по умолчанию), используется кнопка reset. Код ее выглядит следующим образом:

<input type="reset" name="имя кнопки" value="то, что на этой кнопке написано">

 

Например:

Наряду с кнопками submit и reset используются и "простые" кнопки, с которыми обычно связывается то или иное действие. "Простая кнопка" создается с помощью кода:

<input type="button" name="имя кнопки" value="то, что на этой кнопке написано" onclick="действие, связанное с кнопкой">

Обратите внимание на атрибут onclick. Он представляет собой обработчик события - нажатия на кнопку. Для обработки этого события (и множества других событий) используются клиентские сценарии, написанные на языке JavaScript или VBScript. (Язык JavaScript мы вскоре будем изучать.) Как правило, эти сценарии оформляются в виде функций, вызов которых является значением обработчика события onclick.

Например:
<input type="button" value="Показать сегодняшнее число" onclick="alert(Date());">
Результат:
Забегая вперед, скажем, что здесь вызывается встроенный JavaScript'овский метод alert(), который создает системное окно для размещения в нем той или иной информации (значения его аргумента). В нашем случае аргументом метода alert() является встроенный JavaScript'овский объект Date(), содержащий информацию о текущей дате и времени. Об этом объекте мы впоследствии поговорим более подробно.

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

<button name="имя кнопки onclick="действие, связанное с кнопкой">HTML-код фрагмента, размещаемого на кнопке"></button>

Вот несколько образчиков:

<button style="width:124" onclick="alert('Это кнопка с картинкой');"><img src="pictures/pencil.gif" width=118></button>
 Здесь рисунок уменьшен в размере (за счет атрибутов width и height тэга img) и помещен в бегущую строку, находящуюся в контейнере <button ...>...</button>


Кнопку с размещенной на ней картинкой можно создать и так:

<input type="image" src="адрес рисунка" onclick="действие, связанное с кнопкой">

Однако в этом случае она мало напоминает кнопку. Сравните, например:

<button style="width:124" onclick="alert('Это кнопка с картинкой');"><img src="pictures/pencil.gif" width=118></button>
<input type="image" src="pictures/pencil.gif" onclick="alert('Это тоже кнопка с картинкой');">


· Поле для ввода пароля (password):

Поле для ввода пароля отличается от обычного текстового поля тем, что вводимое в него значение отображается с помощью звездочек. Синтаксис такого поля имеет вид:

<input type="password" value="значение по умолчанию" size="длина поля (в символах)" maxlength="максимально допустимое число вводимых символов">

Например:

Код: <input type="password" value="123456" size="6" maxlength="8">
Результат:

· Скрытое поле (hidden):

Иногда в формах используются поля, которые вообще никак не обнаруживают своего присутствия - это так называемые "скрытые" поля. Возникает вопрос: как же пользователь введет в такое поле свои данные? Дело в том, что пользователю этого делать и не нужно - эти данные будут размещаться в скрытых полях с помощью клиентского сценария (язык клиентских сценариев мы будем изучать чуть позднее).

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

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

<input type="hidden" value="значение по умолчанию">

Пример скрытого поля приводить бессмысленно - его просто не будет видно.
· Прикрепление файлов:

Использование форм позволяет пользователю прикрепить файл и отправить его на сервер вместе с содержимым текстовых полей и других элементов формы. Например, многие байты, где предусмотрена регистрация пользователей (скажем, агентства по трудоустройству) предусматривают отсылку фото, текстовых файлов с резюме, архивных файлов с текстами статей и пр. Для поиска файла на компьютере клиента (или в сетевом окружении, если клиентский компьютер находится в локальной сети) служит элемент:

<input type="file" name="имя элемента" size="длина адресного поля в символах" accept="допустимый тип файла">

Например:

Код: <input type="file" size="50">
Результат: Здесь допустимым является файл любого типа.


В следующем примере мы ограничиваем выбор прикрепляемого файла форматами: txt, html, avi (видео), bmp (графика)

<input type="file" size="50" accept="text/plain,text/html,video/x-msvideo,image/x-portablebitmap">


ВАЖНО! Форма, содержащая поле типа FILE (для прикрепления файлов), должна иметь атрибут enctype="multipart/form-data".
"Ответственным" за сохранение файла на сервере является, конечно же, серверный сценарий. Он будет использовать атрибут name как временное имя файла.

Итак, мы рассмотрели все элементы форм и знаем принцип связи документа, содержащего форму, с серверным сценарием, "принимающим эстафету" от него (его адрес указывается в качестве значения атрибута action). Однако атрибут action является не единственным атрибутом формы. Забегая вперед, назовем еще два важных атрибута.

Атрибуты форм

· Action (о нем мы уже говорили) - адрес серверного сценария, получающего и обрабатывающего данные, вводимы пользователем при помощи формы.

· Name - имя формы. Этот атрибут не является обязательным, но его наличие позволяет обращаться к форме (и ее отдельным элементам) "фамильярно", т.е. просто по имени.

· Method - способ передачи данных. Этот атрибут может принимать два значения: GET или POST. Подробнее об этих методах мы будем говорить позднее, когда будем изучать средства создания серверных сценариев, а пока скажем лишь только, что метод GET используется в тех случаях, когда объем передаваемых данных невелик (например, значение одной-двух переменных), если же передается большой объем данных (или его трудно оценить заранее), то применяется метод POST. И еще: если передается пароль, то метод GET использовать нельзя, так как в этом случае текст пароля будет "светиться" в адресной строке.

· Enctype - тип передаваемых данных. Если форма не содержит прикрепляемых файлов, этот атрибут можно не указывать (по умолчанию он примет значение: "application/x-www-form-urlencoded"); если же форма содержит поля типа file, значение этого атрибута должно быть "multipart/form-data".

Как правило, перед отправкой данных на сервер производится их предварительный анализ клиентскими средствами. Например, проверяется, заполнены ли обязательные поля, правилен ли формат адреса электронной почты (содержит знак '@') и пр. Для этого на языке JavaScript (или VBScript) создаются специальные сценарии. С ними мы обязательно познакомимся, но чуть позднее, когда изучим объектную модель JavaScript. А еще позднее научимся писать серверные сценарии, которые будут получать и обрабатывать данные клиентов ("классическими" примерами таких сценариев являются гостевые книги, форумы, счетчики посещений со всевозможной статистикой и пр.)

 

Задание: Создайте форму, содержащую все перечисленные выше элементы.

Фреймы



©2015- 2019 stydopedia.ru Все материалы защищены законодательством РФ.