HTML-формы, как средство взаимодействия с пользователями

До их появления все содержимое на любой веб-странице выглядело как один сплошной содержимое. А все веб-сайты были немыми и глухими. Так что никак не реагировали на обращения посетителей. Но все изменилось с появлением html формы.

Сначала были html формы

Благодаря формам веб-сайты научились слышать ваших посетителей. Этот элемент гипертекста обеспечивает все основные взаимодействия между посетителем и ресурсом. Да и в основе всего общения внутри интернета тоже лежит форма.

Веб-форма представляет собой разновидность интерфейса, служащего для ввода различного вида пользовательских данных. На ее основе в интернете построены все процессы авторизации, аутоинтефикации посетителей, процедуры оформления покупки, опросов и многие иные.
HTML-формы, как средство взаимодействия с посетителями Форма представляет собой контейнер, включающий в себя иные элементы. Создание форм в html происходит при помощи парного тега <form>. Он поддерживает следующие атрибуты:

  • accept-charset – задает кодировку, в которой будут обрабатываться введенные текстовые данные на сервере;

Основная кодировка html документа задается в теге <meta> атрибутом content. При помощи атрибута accept-charset можно без труда дополнительно устанавливать кодировку данных, вводимых в поля ввода формы.
HTML-формы, как средство взаимодействия с посетителями

  • action –указывается адрес расположения обработчика данных, вводимых в форму. При этом задается url программного файла, содержащего программный код обработчика. Если значение атрибута не задано, то по умолчанию обработка данных формы происходит внутри документа html;
  • autocomplete – включение и выключение автоматического заполнения полей ввода. Принимает значение «on» или «off». Атрибутом может задаваться отдельное значение для каждого поля ввода(элемента) внутри формы;
  • method – устанавливает способ HTTP передачи данных формы.

Передача данных серверу возможна при помощи способов get или post.

  • target –значение атрибута определяет, в каком окне будут отображены результаты обработки данных полей ввода формы.

Принимаемые атрибутом значения:

  • _blank – в новом окне;
  • _self – в текущем окне;
  • _parent – в родительском фрейме;
  • _top – в полном окне.
HTML-формы, как средство взаимодействия с посетителями

Элементы внутри формы

Как отмечалось, тег <form> будет лишь контейнером, отделяющим элементы внутри формы от остального кода. Могут использоваться следующие элементы формы:

  1. будет основным тегом. В зависимости от значения его атрибута type зависит тип поля ввода формы:
  • button – обычная кнопка;
  • checkbox – может сделать выбор, поставив флажок над нужным значением;
  • file – выбор файла для загрузки;
  • hidden – визуально скрытое поле ввода. Не выводится на странице;
  • image – представляет собой кнопку с рисунком;
  • password – поле ввода для ввода пароля. Вводимые символы выводятся в виде звездочек;
  • radio – переключатели. Для выбора одного варианта из нескольких;
  • reset –кнопка для сброса значений полей ввода html формы;
  • text – поле ввода для ввода текста;
  • submit – нажатие на кнопку инициирует отправку данных на сервер.
HTML-формы, как средство взаимодействия с посетителями
  1. тег применяется внутри формы для создания текстового поля ввода, в которое можно легко ввести большое число символов(по сравнению с предыдущим элементом). Основные атрибуты тега:
  • cols – ширина поля ввода(в символах);
  • rows – число строк;
  • maxlength – задает максимально допустимое число символов.
HTML-формы, как средство взаимодействия с посетителями

Практические примеры html форм

Для лучшего понимания рассмотрим применение форм в html на примерах.

Некоторых из используемых атрибутов не были описаны в предыдущем разделе, так как они являются универсальными для всех тегов. Их подробное описание можно найти в документации по html.

1.Пример формы регистрации для веб-сайта:

HTML-формы, как средство взаимодействия с посетителями Код примера:

<form name="registration" action="1.php" method="post"> <table border="0" cellspacing="5" cellpadding="5"> <caption>Форма регистрации</caption>     <tr><td align="right" valign="top">Имя</td><td><input type="text" name="name" size="25"></td></tr>            <tr><td align="right" valign="top">e-mail</td><td><input type="text" name="e-mail" size="25"></td></tr>            <tr><td align="right" valign="top" >Пароль</td><td><input type="password" name="password" size="25"></td></tr>            <tr><td align="right" valign="top" >Повтор пароля</td><td><input type="password" name="password2" size="25"></td></tr>            <tr><td align="right" valign="top" >Пол</td><td><input type="radio" name="sex" value="man" checked>мужской            <input type="radio" name="sex" value="woman"> женский</td></tr>            <tr><td align="right" valign="top">Увлечения</td><td><select name="hobby" size="7" multiple>                        <option selected value="1">компьютеры                        <option value="2">спорт                        <option value="3">игры                        <option value="4">животные                        <option value="5">автомобили                        <option value="6">клубы                        <option value="7">музыка                    </select>            </td></tr>            <tr><td align="right" valign="top">Пару слов о себе</td><td><textarea cols="30" rows="3" wrap="physical"></textarea>            </td></tr>            <tr><td align="right" colspan="2">            <input type="submit" name="submit" value="Отправить">            <input type="reset" name="reset" value="Очистить"></td>            </tr>        </table></form>

2.Пример формы поиска с закругленными углами текстового поля ввода и меняющимся цветом окантовки:

HTML-формы, как средство взаимодействия с посетителями
Код примера:

<form>                <span><input type="text" class="search rounded" placeholder="Искать..."></span>                <input type="button" value="Искать"></span>        </form>

Код css:

.search {         padding:6px 15px 6px 30px;        margin:3px;}.rounded {         border-radius:15px;         -moz-border-radius:15px;         -webkit-border-radius:15px; }input[type=text]{        color:#bcbcbc;}input[type=button], input[type=button]:hover {        position:relative;         left:-6px;        border:1px solid #adc5cf;        background: #e4f1f9; /* Old browsers */        background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */

3.Пример формы заказа:

HTML-формы, как средство взаимодействия с посетителями
Код примера:

<div class="one"/><h2> Форма заказа</h2><form name="callback" method="post" action="1.php"></br><b>Ваше имя:</b></br> <input type="text" alt="Ваше имя" maxlength="20"/></br><b>Ваша фамилия:</b></br><input type="text" alt="Ваша фамилия" maxlength="20"/></br><b>Ваш контактный телефон:</b></br><input type="text" alt="Ваш телефон" maxlength="13"/></br><b>Ваш email:</b></br><input type="text" alt="Ваш email" maxlength="20"/></br></br><b>Ваш товар:<b> <label>Acer Aspire 5315</label></br><b>Цвет:</b></br><select name="color" size="1" multiple><option selected value="1">черный</option><option value="2">серый</option><option value="3">черно-серый</option></select></br><b>Метод доставки:</br><select name="dostavka" size="1" multiple><option selected value="1">Самовывоз</option><option value="2">Почтой</option><option value="3">Курьером</option></select></br></br><input type="submit" value="Оформление заказа" /></form></div>

CSS программный код формы регистрации заказа:

.one{background-color: #CCCCCC;width: 250px;height: 400px;border: double 5px;}

Вместо заключения

Конечно, рассмотренные в данной статье примеры являются лишь демонстрационными. На практике каждый веб-сайт использует индивидуальные формы, отличающиеся от иных дизайном и функционалом. Но приведенные примеры форм html без проблем трансформируются. Так что их можно использовать в виде основы для создания новых.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *