На сайтах формы используются всюду. Они передают информацию на сервер, которую впоследствии можно обработать и что-то сделать с ней в дальнейшем, используя язык PHP. Тут же мы будем говорить только о создании формы, но не ее обработке.
Например, форма регистрации есть почти на любом сайте, состоит она, как правило, из нескольких текстовых полей и кнопки отправки данных. Форма авторизации, состоит из двух полей и кнопки отправки данных.
Но у форм есть больше возможностей представить информацию.
Всю форму, которая относится к одной группе информации, помещают между тегами <form></form>. Важные атрибуты этого тега:
Action - адрес программы или документа, который обрабатывает данные формы.
Name - имя формы, оно нужно чтобы можно было обратиться конкретно к этой форме через js или php-код. Старайтесь давать уникальные имена разным формам.
Method– метод передачи данных, принимает значения POST и GET. Отличие POST от GET в том, что он передает зашифрованные данные, которые сложно достать, если кто-то захочет перехватить данные идущие от формы.
Основным тегом элементов формы является <input>, важный его атрибут, определяющий то, какой элемент отображается – type, ниже приведена таблица значений этого атрибута и что получается на деле.
Тип | Описание | Вид |
---|---|---|
button | Кнопка. | |
checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. | ПивоЧайКофе |
file | Поле для ввода имени файла, который пересылается на сервер. | |
hidden | Скрытое поле. Оно никак не отображается на веб-странице. | |
image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. | |
password | Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. | |
radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. | ПивоЧайКофе |
reset | Кнопка для возвращения данных формы в первоначальное значение. | |
submit | Кнопка для отправки данных формы на сервер. | |
text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. |
Так же стоит упомянуть о теге <textarea></textarea>, который сообщает о поле для ввода большого объема текста в несколько строчек, выглядит это так:
Еще есть тег выпадающего поля <select></select>, каждый из пунктов которого определяется тегом <option></option>.
Пример:
Код | Как выглядит |
---|---|
{cv style="brush: html;"} <select> {/cv} |
Все теги внутри <form> имеют атрибут name и каждому он должен присваиваться, уникальный в рамках текущей формы.
Чаще всего отправку формы определяют по нажатию <input> с type = submit, либо по нажатию кнопки Enter.
Тестовые задания, для использования знаний на практике
Все задания разбиты на 3 уровня, начиная с 1 уровня до 3 они усложняются. Рекомендую делать задания по порядку, так как каждое следующее проще сделать, если сделано предыдущие. Выполнение этих заданий условно-обязательно, для лучшего понимания сути работы HTML машины их необходимо делать.
Уровень первый
Перед вами текст, который вы должны перепечатать и отформатировать при помощи различных тегов его так, чтобы он выглядел аналогично.
Как он должен выглядеть:
Скачать рабочий код задания
Уровень второй
Суть второго уровня сложности этого задания, в усложнении формата текста, использованного на предыдущем уровне. Возьмите свой уже отформатированный текст, допишите код так, чтобы он выглядит как нужно в задании.
Как должен выглядеть текст:
Скачать рабочий код задания
Уровень третий
Третий уровень сложности аналогичен 1 и 2 уровням сложности. Подсказка! Используйте атрибут style.
Как должен выглядеть текст:
Скачать рабочий код задания