Формы

< >

5 / 5

Автор: Администратор

21.07.2014

Пора поговорить и о формах, неотъемлемой части сайтов.

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

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

Но у форм есть больше возможностей представить информацию.

Всю форму, которая относится к одной группе информации, помещают между тегами <form></form>. Важные атрибуты этого тега:

Action - адрес программы или документа, который обрабатывает данные формы.

Name - имя формы, оно нужно чтобы можно было обратиться конкретно к этой форме через js или php-код. Старайтесь давать уникальные имена разным формам.

Method– метод передачи данных, принимает значения POST и GET. Отличие POST от GET в том, что он передает зашифрованные данные, которые сложно достать, если кто-то захочет перехватить данные идущие от формы.

Основным тегом элементов формы является <input>, важный его атрибут, определяющий то, какой элемент отображается – type, ниже приведена таблица значений этого атрибута и что получается на деле.

Табл. 1. Значения type
Тип	Описание	Вид
button	Кнопка.
checkbox	Флажки. Позволяют выбрать более одного варианта из предложенных.	ПивоЧайКофе
file	Поле для ввода имени файла, который пересылается на сервер.
hidden	Скрытое поле. Оно никак не отображается на веб-странице.
image	Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password	Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio	Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.	ПивоЧайКофе
reset	Кнопка для возвращения данных формы в первоначальное значение.
submit	Кнопка для отправки данных формы на сервер.
text	Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

Так же стоит упомянуть о теге <textarea></textarea>, который сообщает о поле для ввода большого объема текста в несколько строчек, выглядит это так:

тут какой то ваш текст

Еще есть тег выпадающего поля <select></select>, каждый из пунктов которого определяется тегом <option></option>.

Пример:

Таблица №2. Пример выпадающего поля
Код	Как выглядит
{cv style="brush: html;"} <select> <option>Первый пункт поля</option> <option>Второй пункт поля</option> <option>Третий пункт поля</option> <option>Четвертый пункт поля</option> </select> {/cv}

Все теги внутри <form> имеют атрибут name и каждому он должен присваиваться, уникальный в рамках текущей формы.

Чаще всего отправку формы определяют по нажатию <input> с type = submit, либо по нажатию кнопки Enter.

Тестовые задания, для использования знаний на практике

Все задания разбиты на 3 уровня, начиная с 1 уровня до 3 они усложняются. Рекомендую делать задания по порядку, так как каждое следующее проще сделать, если сделано предыдущие. Выполнение этих заданий условно-обязательно, для лучшего понимания сути работы HTML машины их необходимо делать.

Уровень первый

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

Как он должен выглядеть:

Скачать рабочий код задания

Рабочий код задания(для проверки)

<HTML>
    <HEAD>
        <TITLE> Формы. Первый уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <form>
            <table>
                <tr>
                    <td>Ваше имя</td>
                    <td><input type="text" value="Имя..." name="name" /></td>
                </tr>
                <tr>
                    <td>Фамилия</td>
                    <td><input type="text" value="Фамилия..." name="fam" /</td>
                </tr>
            </table>
        </form>
    </BODY>
</HTML>

Уровень второй

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

Как должен выглядеть текст:

Скачать рабочий код задания

Рабочий код задания(для проверки)

<HTML>
    <HEAD>
        <TITLE> Формы. Первый уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <form method="get"> 
            <table>
                <tr>
                    <td>Ваше имя</td>
                    <td><input type="text" value="Имя..." name="name" /></td>
                </tr>
                <tr>
                    <td>Фамилия</td>
                    <td><input type="text" value="Фамилия..." name="fam" /></td>
                </tr>
                <tr>
                    <td>Выберете ваш пол</td>
                    <td>
                        <select>
                            <option>Мужской</option>
                            <option>Женский</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><input type="reset" value="Сбросить" /></td>
                    <td><input type="submit" value="Отправить" /></td>
                </tr>
            </table>
        </form>
    </BODY>
</HTML>

Уровень третий

Третий уровень сложности аналогичен 1 и 2 уровням сложности. Подсказка! Используйте атрибут style.

Как должен выглядеть текст:

Скачать рабочий код задания

Рабочий код задания(для проверки)

<HTML>
    <HEAD>
        <TITLE> Формы. Первый уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <form method="get"> 
            <table>
                <tr>
                    <td>Ваше имя</td>
                    <td><input type="text" value="Имя..." name="name" /></td>
                </tr>
                <tr>
                    <td>Фамилия</td>
                    <td><input type="text" value="Фамилия..." name="fam" /></td>
                </tr>
                <tr>
                    <td>Выберете ваш пол</td>
                    <td>
                        <select>
                            <option>Мужской</option>
                            <option>Женский</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">Укажите ваш примерный возраст:</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="radio" value="radiobutton" name="radiobutton">
                        10-20
                        <input type="radio" value="radiobutton" name="radiobutton">
                        20-30
                        <input type="radio" value="radiobutton" name="radiobutton">
                        30-40
                        <input type="radio" value="radiobutton" name="radiobutton">
                        40-50
                    </td>
                </tr>
                <tr>
                    <td>Загрузите свое фото</td>
                    <td><input type="file" /></td>
                </tr>
                <tr>
                    <td>Введите свой логин</td>
                    <td><input type="text" value="Логин..." name="login" /></td>
                </tr>
                <tr>
                    <td>Введите пароль</td>
                    <td><input type="password" value="" name="password" /></td>
                </tr>
                <tr>
                    <td>Дополнительная информация о вас</td>
                    <td><textarea></textarea></td>
                </tr>
                <tr>
                    <td>Согласие на рассылку новостей</td>
                    <td><input type="checkbox" /></td>
                </tr>
                <tr>
                    <td>Согласие с лецензионным соглашением</td>
                    <td><input type="checkbox" /></td>
                </tr>
                <tr>
                    <td><input type="reset" value="Сбросить" /></td>
                    <td><input type="submit" value="Отправить" /></td>
                </tr>
            </table>
        </form>
    </BODY>
</HTML>

< >