Создаём формы в HTML

Создаём формы в HTML


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

Создание формы происходит с помощью тега

который входит в список парных тегов. А внутри находятся поля формы.

Тег

<form>

имеет в основном два атрибута

Атрибут action. – данный атрибут задает адрес файла который обрабатывает и передает информацию.
Атрибут method. – данный атрибут задает метод отправки.

Пример формы:

<form action="https://yandex.ru/search/" method="get">
    ...
</form>

 

Существуют два типа метода отправки, get или post, по умолчанию используется get

get – отображает информацию в строке браузера, этот метод я не рекомендую использовать из-за соображений безопасности
Я рекомендую использовать get только в том случае когда необходимо поделиться ссылкой.

Пример выглядит так: https://yandex.ru/search/?text=php

Метод post рекомендую использовать когда нужно передать много информации.

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

Большинство полей  создаются с помощью тега input. Это одиночный тег, который имеет два обязательных атрибута:
type – данный атрибут задает тип поля;
name – данный атрибут задает имя поля.

Популярный тип тега – text, то есть – текстовое поле.

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

Создадим простенькую форму поиска которая будет посылать запрос в Яндекс:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма поиска в Яндексе</title>
</head>
<body>
<form action="https://yandex.ru/search/">
    <input type="text" name="text">
    <input type="submit" value="Найти в Яндексе">
</form>
</body>
</html>

Форма будет выглядеть так:

Далее когда мы нажмём на “найди в яндексе” – произойдет запрос и мы окажемся на странице поиска в Яндекса.

А в адресной строке будет следующее:
https://yandex.ru/search/?text=PHP

Как Вы поняли – мы передали запрос с именем text в форму поиска Яндекса.

Увидимся в следующих уроках, где разберем более подробно.