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

2014-11-25 0 ∞ 2

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

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

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

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

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

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

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

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

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

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

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

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

_blank – в новом окне;
_self – в текущем окне;
_parent – в родительском фрейме;
_top – в полном окне.

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

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

является основным тегом. В зависимости от значения его атрибута type зависит тип поля формы:

button – обычная кнопка;
checkbox – позволяет сделать выбор, поставив флажок над нужным значением;
file – выбор файла для загрузки;
hidden – визуально скрытое поле. Не отображается на странице;
image – представляет собой кнопку с рисунком;
password – поле для ввода пароля. Вводимые символы отображаются в виде звездочек;
radio – переключатели. Для выбора одного варианта из нескольких;
reset –кнопка для сброса значений полей html формы;
text – поле для ввода текста;
submit – нажатие на кнопку инициирует отправку данных на сервер.

тег применяется внутри формы для создания текстового поля, в которое можно ввести большое количество символов (по сравнению с предыдущим элементом). Основные атрибуты тега:

cols – ширина поля (в символах);
rows – количество строк;
maxlength – задает максимально допустимое количество символов.

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

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

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

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

Код примера:

<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. Пример формы поиска с закругленными углами текстового поля и меняющимся цветом окантовки:

Код примера:

<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. Пример формы заказа:

Код примера:

<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 легко трансформируются. Поэтому их можно использовать в качестве основы для создания новых.