Электронное приложение

Технология создания web - сайтов

HTML

 

Раздел 2. Язык гипертекстовой разметки HTML.

 
  Оглавление
§ 6. Структура html-документа. Теги и атрибуты.
§ 7. Создание моей первой странички.
§ 8. Форматирование текста.
§ 9. Списки.
§ 10. Простые таблицы.
§ 11. Сложные таблицы.
§ 12. Изображения и управления рисунками.
§ 13. Гиперссылки. Оформление гиперссылок.
§ 14. Формы.
Тест по теме «Язык гипертекстовой разметки HTML.

 

 

§ 13. Формы.

Формы.

  • Создание форм
  • Текстовое поля
  • Кнопки
  • Флажки (checkbox)
  • Переключатели (radiobutton)
  • Поле со списком
  • Кнопка с изображением
  • Пример комбинированной формы
  • Упражнение

Создание форм

В языке HTML формы применяются для отправки данных со странички на обработку в какую-либо программу, установленную на сервере. Всем известный пример формы можно видеть здесь http://www.colorpilot.ru/support.html.
Пользователь заполняет форму и нажимает кнопку Send (отправить), данные обрабатываеются специальной программой (скриптом) на сервере, и мы получаем на адрес техподдержки вопросы пользователей :-)

Создание форм начинается с элемента

<form>

</form>

У элемента формы form существуют два обязательных атрибута metod и action.
  • metod - атрибут определяет способ, с помощью которого будет осуществляться связь между формой и Web сервером. Атрибут может принимать значение "get" и "post".
  • action - значением атрибута action является конкретный адрес скрипта, обрабатывающего данные. Атрибуты записываются в тег <form> , например так:
    <form method= "get" action= "http://www.myserver.com/cgi-bin/mailscript">

    В данном уроке рассматривается только создание элементов форм, их виды. Для того, чтобы форма заработала, ее необходимо запрограммировать. Само программирование не входит в рамки данного урока.

    Текстовое поле

    Для создания поля ввода используют элемент input с атрибутом type.
    Type может принимать различные значения. Для самого простого поля ввода текста атрибут type будет иметь значение text.

    <input type=text параметры>

    Нпример, html код
    <form method= "get" action="/cgi-bin/handler.cgi">
    <b>Зaполните Ваши данные:</b>
    Имя: <input type=text maxlength=25 size=20>
    Фамилия:<input type=text maxlength=25 size=20>
    </form>


    на страничке отобразится так:

    Зaполните Ваши данные:

    Имя: Фамилия:




    Возможно задавать значения параметров

    Параметр Описание
    size=... Ширина поля.
    maxlength=... Максимальное количество символов разрешенных в тексте. Если этот параметр опустить, то можно вводить строку длинее самого поля.
    name=... Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
    value=... Начальный текст содержащий в поле.
    align=... Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений.


    Поле для пароля

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

    Задается кодом

    <input type=password параметры>
    Например:
    <form method= "get" action="/cgi-bin/handler.cgi">
    <b>Логин: </b><input type=text maxlength=25 size=20 name="text">
    <b>Пароль:</b> <input type=password maxlength=15 size=20 name="pass">
    </form>
    На страничке будет выглядеть так:
    Логин:
    Пароль:
    Попробуйте ввести в поля "Логин" и "Пароль" данные. Получилось ? :-)



    Многострочный текст

    Для возможности введения в поле несколько строк текста используем тег textarea. Например:

    <form method= "get" action="/cgi-bin/handler.cgi">
    <b>Введите ваш отзыв: </b>
    <textarea rows=10 cols=45></textarea>
    </form>
    Этот код на страничке можно увидеть в виде поля, в которое можно ввести большой текст.

    Введите ваш отзыв:


    Для тега textarea используются следующие параметры:

    Параметр Описание
    name=... Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
    cols=... Количество столбцов текста.
    rows=... Число строк текста.
    value=... Значение поля определяет, что будет отправлено на сервер.
    wrap=... Параметры переноса строк. Возможные значения: off — отключает перенос строк; virtuals — показывает переносы строк, но отправляет текст как он введен; physical — переносы строк вставляются где указано и в таком виде текст отправляется.


    Кнопки

    Кнопка — это элемент интерфейса, на который нужно нажимать.
    Используем type=button, "button" переводится как "кнопка".

    <input type=button параметры>
    Код html

    <form method= "get" action="/cgi-bin/handler.cgi">
    <p align=center><input type=button name=press value=" Нажми меня :-)">
    </form>
    На страничке отобразится следующим образом:



    Для кнопок используются следующие параметры:
    Параметр Описание
    name=... Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
    value=... Надпись на кнопке, а также ее значение.
    align=... Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений.


    Кнопка SUBMIT

    При нажатии на кнопку SUBMIT данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега form.
    Используем type=submit
    Например,

    <tr><td>
    <form action="/cgi-bin/handler.cgi">
    <p><input type=submit value="Отправить данные">
    На страничке мы увидим следующее:



    Кнопка RESET

    При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение. Используем type=reset

    Пример кода

    <form action="/cgi-bin/handler.cgi">
    <input type=text width=20> <input type=reset value="Сбросить данные">
    </form>
    Отображение на страничке

    Попробуйте вписать данные и сбросить их!


    Флажки (checkbox)

    Флажки используют, когда необходимо выбрать два или более варианта из предложенных. Используем type=checkbox

    <form action="/cgi-bin/handler.cgi"> <b>С какими операционными системамы вы знакомы?</b>
    <input type=checkbox name=option1 value=a1 checked>Windows 95/98
    <input type=checkbox name=option2 value=a2>Windows 2000
    <input type=checkbox name=option3 value=a3>Linux
    </form>
    Вот что получается:
    С какими операционными системамы вы знакомы?
    Windows 95/98
    Windows 2000
    Linux

    Вы можете поставить или снять галочки у одного или сразу нескольких элементов.
    Значение поля value= определяет, что будет отправлено на сервер при поставленной галочке. Остальные параметры аналогичны параметрам кнопок.

    Переключатели (radiobutton)

    Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Используем type=radio

    <form action="/cgi-bin/handler.cgi"> <b>Какое время года Вы больше любите? :-)</b>
    <input type=radio name=answer value=a1>Весну
    <input type=radio name=answer value=a2>Лето
    <input type=radio name=answer value=a3>Осень
    <input type=radio name=answer value=a4>Зиму
    </form>

    На страничке можно будет увидеть следующее:
    Какое время года Вы больше любите? :-)
    Весну
    Лето
    Осень
    Зиму

    То есть, используя радиокнопки Вы можете выбрать только ОДНО значение. Попробуйте :-)

    Поле со списком

    В ниспадающем списке можно выбирать одно или несколько значений. Сделаем выбор времени года с помощью ниспадающего списка.
    Поля выбора начинаются тегом <select> и заканчиваются </select> Каждое выбираемое поле заключено в теги <option> и </option >

    Пример:

    <form action="/cgi-bin/handler.cgi">
    <b>Какое время года Вы больше любите? :-)</b>
    <p align=center>
    <select name= время года>
    <option>Весну</option>
    <option>Лето</option>
    <option>Осень</option>
    <option>Зиму</option>
    </select>
    </form>

    На страничке видем следующее:
    Какое время года Вы больше любите? :-)


    Для списков используются следующие параметры:
    Параметр select Описание
    name=... Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
    size=... Количество видимых строк. По умолчанию одна строка.
    multiple Этот параметр позволяет выбрать сразу несколько строк. Выбор делается с помощью клавиши Control или Shift.
    Параметр option Описание
    selected Видимое поле по умолчанию.
    value=... Значение определяет, что будет отправлено на сервер при выбранном пункте списка.

    Кнопка с изображением

    Кнопки с изображениями аналогичны по действию кнопке Submit, но представляют собой рисунок.
    Используем type=image

    <form action="/cgi-bin/handler.cgi">
    <table align=center>
    <tr><td colspan=2>Введите ваше имя: <tr>
    <td><input type=text width=25></td>
    <td><input type=image src=../school/examples3/ser.gif width=90 height=68 border=0></td>
    </tr>
    </table>
    </form>


    На страничке это будет выглядеть так:

    Введите ваше имя:

    Картанка задается при помощи тега scr и адреса картинки.
    src=../school/examples3/ser.gif
    Таким образом, комбинируя разные способы создания форм, мы можем на одной странике разместить несколько форм сразу. Для отдедения одного вида формы от другого будем использовать тег <fieldset>

    Пример комбинированной формы

    Пример использования разных форм на одной страничке
    Заполните, пожалуйста, эту форму Вашими данными и нажмите кнопку "Отправить данные"! Вы сможете увидеть вариант обработки Ваших данных.

    Зaполните Ваши данные:

    Имя:

    Выберите любимый цвет:

    Желтый
    Голубой
    Розовый
    Зеленый


    Напишите здесь что-нибудь хорошее :-)


    Эта форма имеет следующий код:
    <form method="post" action="8.php">
    <fieldset>
    <b>Зaполните Ваши данные:</b><br><br>
    Имя: <input type=text name="name" maxlength=25 size=20 value=" ">
    <br><br>
    </fieldset>
    <p>
    <fieldset>
    <b>Выберите любимый цвет:</b><br>
    <p align=center> <input type=radio name=answer value="#F4F090">Желтый
    <br>
    <input type=radio name=answer value="#80ECF3">
    Голубой<br>
    <input type=radio name=answer value="#F3ACC5">
    Розовый<br>
    <input type=radio name=answer value="#A7F4AB">Зеленый
    <br>
    </select>
    <br><br>
    </fieldset>
    <p>
    <fieldset>
    <b>Напишите здесь что-нибудь хорошее :-)</b><br>
    <textarea name="basictext" rows=7 cols=45 ></textarea>
    </fieldset>
    <p>
    <fieldset>
    <input type=reset value="Сбросить данные"
    >
    <input type="submit" value="Отправить данные"
    >
    </fieldset>
    </form>

    Упражнение

    Cоздайте на свой вкус html-документ, на котором расположите все рассмотренные виды форм. Это может быть страничка опроса, отправки каких-либо данных или что-то еще...

  •  

     


    © Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
    © 2012 год.  При использовании материалов обязательна ссылка на владельца