13.03.2017   2731

Учимся создавать формы в HTML

Как сделать форму в HTML

В наше время сложно представить сайт без форм. Думаем, что Вы с ними сталкивались и ранее, просто не знали, как именно они называются. В качестве примера наиболее популярных форм можно привести регистрацию пользователя, окно отправки сообщения на форуме или письма и так далее. Основная задача форм – это отправление данных со страницы на сервер. И формы крайне необходимы.

На стороне сервера формы чаще всего обрабатываются с помощью PHP. На нашем сайте Вы можете изучить PHP бесплатно.

Создание формы осуществляется с применением тега <form>, который является парным. А уже внутри него происходит размещение полей формы.

Тег <form> имеет два атрибута, которые являются весьма важными.

Атрибут action. С его помощью указывается адрес или URL, по которому происходит отправка формы.
Атрибут method. С его помощью указывается метод отправки формы.

Вот так это выглядит на практике:

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

Отправка формы, как правило, осуществляется с помощью методов get или post. По умолчанию, когда не задействован атрибут method, будет применяться get.

Суть метода get заключается в отправке данных формы в строке запроса. Это позволяет видеть их в адресной строке браузера. Размещены такие данные после знака вопроса.

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

Мы рекомендуем применять метод get, когда речь идет о поисковых формах. Это дает возможность пользователю видеть в строке браузера ссылку на результаты поиска. Что немаловажно, если он хочет с кем-то ими поделиться.

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

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

Многие поля форм создаются с использованием тега 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 в параметр text на странице поиска в Яндексе.

Более подробно обо всём этом мы поговорим в следующих уроках.

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

Следующий урок Предыдущий урок

Комментарии

 doubledonea 2017-04-14 18:17:28
0

Здравствуйте. Сделал простую форму регистрации https://jsfiddle.net/abybmtkz/. Не понимаю, почему width у .email установилось по всей ширине родителя. Есть предположение, что .email унаследовал ширину родителя. Но ведь тогда и остальные блоки должны были унаследовать, а у них ширина установилась по содержимому. Можете объяснить?)

Ответить
  •  ivashkevich 2017-04-17 02:02:11
    0

    Если для класса email добавите те же свойства, что и остальным:

    left: 50%;
    margin-left: -25%;

    То получите аналогичное отображение. Всё дело в заданных отступах.
    https://jsfiddle.net/abybmtkz/1/

    Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности