Coding-space.ru
menu

Форма для сайта

Сейчас мы познакомимся со способом получения данных от пользователя и методами отправки этих данных на сервер.

Тег <form>

<form> - тег формы. Данный элемент часто можно встретить на сайтах. Ведь он используется когда нужно получить информацию от пользователя: при регистрации, отправке заявки, авторизации и т.д.

Атрибут формы - action
Формы отправляют данные на страницу указанную в атрибуте action

Создадим форму:

<body>
<form action="http://coding-space.ru"> ... </form>
</body>

Вы можете указать метод HTTP-запроса, который будет использоваться при отправке формы.

Метод GET

Когда используется метод GET в URL адресе будут отображены данные формы. Этим методом не рекомендуется отправлять персональные данные пользователей.

<body>
<form action="http://coding-space.ru" method="GET"> ... </form>
</body>

Метод POST

Метод POST безопасен, так как передаваемые данные не видны в URL адресе. Хорошей практикой считается использование именно этого метода для отправки конфиденциальной информации.

<body>
<form action="http://coding-space.ru" method="POST"> ... </form>
</body>

Поле отправки данных <input>

Инпуты - специальные поля для ввода информации пользователем. Эти поля характеризуются атрибутом type, который указывает полю как воспринимать информацию.

Например, мы можем сделать два поля: обычное поле для ввода текста и поле для ввода пароля. В первом случае используем type со значением text, а во втором со значением password.

Также сразу зададим этим полям атрибут значения placeholder - это позволяет отобразить нужный нам текст "внутри" инпута.

Placeholder - элемент из HTML5. Совсем скоро мы доберёмся до него.
<body>
<form action="" method="POST">
<input type="text" placeholder="Обычный текст">
<input type="password" placeholder="Пароль">
</form>
</body>

Результат:

form inputs
Атрибут action может быть пустой, это означает, что данные будут отправлены на текущую страницу, а сама страница перезагрузится.

Отправка формы

До сих пор мы просто вводили информацию в форму. Как насчет чтобы наконец-таки отправить её?
Давайте же сделаем это - значение submit

Создадим ещё один инпут - кнопку, которая будет отправлять данные:

<body>
<form action="" method="POST">
<input type="text" placeholder="Обычный текст">
<input type="password" placeholder="Пароль">
<input type="submit" placeholder="Отправить!">
</form>
</body>

Теперь по нажатию кнопки отправки наши данные уйдут на сервер, а страница перезагрузится.

submit input

Другие значения атрибута type

Атрибут type содержит множество других значений:

  1. file - поле для ввода имени файла, который пересылается на сервер.
    Пример:
  2. radio - поля, позволяющие выбрать предложенные варианты.
    Пример: Да Нет
  3. tel - для ввода телефонных номеров
  4. email - для ввода почтовых адресов

Существует еще множество других типов, Вы можете ознакомиться с ними позже.

Задачи

Регистрация пользователя

Составьте свою форму регистрации пользователя. Добавьте туда поля с именей, логином, паролем и кнопку отправки.

<body>
<form action="" method="POST">
<input type="text" placeholder="Имя">
<input type="text" placeholder="Логин">
<input type="email" placeholder="Почта">
<input type="tel" placeholder="Телефон">
<input type="password" placeholder="Пароль">
<input type="submit" placeholder="Отправить!">
</form>
</body>

Помогайте другим!

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