 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Формы HTML
Пользователь заполняет форму и передает информацию из нее для обработки программе, работающей на сервере. Эта программа может быть написана по технологии CGI, ASP или Servlet/JSP.
Теги <FORM>...</FORM> используются для обозначения документа как формы. Внутри элемента <FORM> определяется последовательность элементов <INPUT>, которые представляют поля для ввода информации.
<INPUT TYPE=TEXT> помещает в форму текстовое поле данных.
Если <INPUT> используется с атрибутом TYPE=TEXT, устанавливаемым по умолчанию, то могут быть использованы еще три атрибута. Атрибут MAXLENGTH устанавливает максимальное число вводимых символов. Атрибут SIZE определяет размер видимой на экране области, занимаемой текущим полем. Атрибут VALUE устанавливает начальное значение поля.
<INPUT TYPE=CHECKBOX> позволяет определить флажок для протокола передачи. Тип элемента ввода CHECKBOX позволяет получить ответы пользователя типа ДА/НЕТ. Элемент INPUT при установке атрибута TYPE=CHECKBOX использует также атрибуты NAME=”имя” VALUE=”значение”. Элемент <INPUT TYPE=RADIO> позволяет определить кнопку переключения и используется, если надо выбрать одно из нескольких значений.
<!--пример # 16: простая форма и элементы checkbox и radio-->
<HTML><HEAD>
<TITLE>Простая форма, checkbox и radio </TITLE>
</HEAD><BODY>
<FORM><H2>Простая форма</H2>
<P>My street:<INPUT NAME="street"><BR>
City: <INPUT NAME="city" SIZE="20" MAXLENGTH="20"
VALUE="Minsk"> <BR>
Zip: <INPUT NAME="zip" SIZE="5" MAXLENGTH="5"
VALUE="99999"><BR>
</FORM> <HR>
<P><H2>Ваша любимая команда</H2>
<FORM> <!--Выбор одной или нескольких команд -->
<INPUT TYPE="checkbox" NAME="team" VALUE="шахтеры">
шахтеры<BR>
<INPUT TYPE="checkbox" NAME="team" VALUE="ковбои"> ковбои <BR> <INPUT TYPE="checkbox" NAME="team" VALUE="викинги">
викинги<BR>
</FORM> <HR>
<P><H2>Какая из команд самая любимая?</H2>
<FORM><!--Выбор только одной из нескольких команд -->
<INPUT TYPE="radio" NAME="team" VALUE="шахтеры">
шахтеры <BR>
<INPUT TYPE="radio" NAME="team" VALUE="ковбои"> ковбои <BR>
<INPUT TYPE="radio" NAME="team" VALUE="викинги"> викинги <BR>
</FORM><HR>
</BODY></HTML>
Элемент ввода SELECT позволяет использовать при вводе списки с прокруткой и выпадающее меню. Для определения списка пунктов используется элемент <OPTION> и необязательные атрибуты MULTIPLE, NAME, SIZE.
Атрибут SELECTED устанавливает значение элемента для первоначального выбора. Атрибут VALUE указывает на значение, возвращаемое формой после выбора данного пункта.
<!--пример # 17: формы. Элемент SELECT-->
<HTML>
<FORM><SELECT NAME="flower">
<OPTION>chocolate
<OPTION>vanila
<OPTION VALUE="Banana">Banana
<OPTION SELECTED>cherry
</SELECT> </FORM>
</HTML>
Элемент <INPUT TYPE=RESET> используется для создания кнопки Reset, по которой можно щелкнуть мышкой и вернуться к начальным значениям полей.
Элемент <INPUT TYPE=SUBMIT> используется для создания кнопки, по которой можно щелкнуть и отправить введенные данные в виде сообщения по указанному адресу. Дополнительный атрибут NAME устанавливает название кнопки submit. Атрибут VALUE хранит значение переменной поля формы.
<!--пример # 18: формы. Элемент SELECT-->
<HTML>
<HEAD>
<TITLE> Формы </TITLE>
</HEAD>
<BODY bgcolor=#C0C0C0>
<CENTER><FONT size=6>Элементы диалога </font></center><P>
<HR color="blue">
<H2>Пример формы</h2>
<TABLE border=3 bgcolor="pink">
<FORM action="сервер.домен.путь" method="post">
<TR>
<TD><LABEL for="imya1">Имя: </label>
<TD><INPUT type="text" id="imya1">
<TR>
<TD><LABEL for="familiya1">Фамилия: </label>
<TD><INPUT type="text" id="familiya1">
<TR>
<TD><LABEL for="telefon1">Телефон: </label>
<TD><INPUT type="text" id="telefon1">
<TR>
<TD>Пол:
<INPUT type="radio" name="pol1" value="Male"> М
<INPUT type="radio" name="pol1" value="Female"> Ж
<TD align="bottom">
<INPUT align="bottom" type="submit" value="Отослать">
<INPUT type="reset">
</form>
</table>
<HR color="blue">
<H2>Элемент ISINDEX</h2>
<ISINDEX prompt="Строка для ввода критерия поиска">
<HR color="blue">
<H2>Элементы INPUT</h2>
<H3> Ввод текстовой строки </h3>
<INPUT type="text" size=50>
<H3> Ввод пароля </h3>
<INPUT type="password">
<H3> Флажки </h3>
<INPUT type="checkbox" name="F001" checked>
<INPUT type="checkbox" name="F001" checked>
<H3> Переключатели </h3>
<INPUT type="radio" name="S001" value="Первый">
<INPUT type="radio" name="S001" value="Второй">
<INPUT type="radio" name="S001" value="Третий" checked>
<H3> Кнопка подтверждения ввода </h3>
<INPUT type="submit" value="Подтверждение">
<H3> Кнопка с изображением </h3>
<INPUT type="image" src="knopka1.gif">
<H3> Кнопка очистки формы </h3>
<INPUT type="reset" value="Очистка">
<H3> Файл </h3>
<INPUT type="file" name="photo" accept="image/*">
<HR color="blue">
<H2>Элемент SELECT </h2>
<SELECT multiple>
<OPTION value=a>Первый
<OPTION value=b>Второй
<OPTION value=c>Третий
<OPTION value=d>Четвертый
</select>
<HR color="blue">
<H2>Элемент TEXTAREA
<TEXTAREA rows=5 cols=30>
Область для ввода текста
</textarea></h2>
<HR color="blue">
<H2>Кнопка с надписью и рисунком</h2>
<BUTTON name="submit" value="submit" type="submit">
Надпись<IMG src="gif1.gif" alt="Рисунок"></button>
<HR color="blue">
<H2>Группа полей</h2>
<FIELDSET>
<LEGEND>Заголовок группы</legend>
Имя: <INPUT name="imya2" type="text">
Фамилия: <INPUT name="familiya2" type="text"><BR>
Телефон: <INPUT name="telefon2" type="text"><BR>
Текст подсказки
</fieldset>
<HR color="blue">
</BODY></HTML>
Поиск по сайту: