Что особенного в формах?
HTML-формы — одна из причин, почему HTML так важен как для фронтенда, так и для бэкенда (особенно Ruby on Rails). В этом сообщении блога мы рассмотрим, как работает HTML-форма и какие атрибуты она имеет. Давайте погрузимся в это!
Что такое HTML-формы?
HTML-форма состоит из тегов <form>
и тегов <input>
, которые позволяют пользователю отправлять информацию в приложение. Этот раздел HTML-документа позволяет пользователям взаимодействовать с приложением после перехода на ваш веб-сайт. Например, в большинстве приложений у вас есть форма регистрации или входа. Они необходимы для получения информации о пользователе, поиска его в базе данных и отображения его информации на странице, относящейся к этому пользователю. Форма регистрации, она отвечает за то, чтобы данные, сохраняемые в базе данных, были хорошими данными благодаря защите, которую вы написали в своем коде, и сохранение их информации в базе данных было подтверждено, когда пользователь ввел соответствующие/ожидаемые данные. .
Так чем же важны формы для серверной разработки? Ну, вы можете себе представить, что мы сказали о веб-сайте социальной сети, таком как Instagram. Пользователи могут просматривать и следить за другими пользователями, потому что они создали учетную запись, и их информация была сохранена в базе данных. Сохранил в базу как? Через форму регистрации, конечно! Когда пользователь регистрируется в приложении, его входные значения сначала проверяются, чтобы убедиться, что они отправляют хорошие данные в серверную часть. Что такое хорошие данные? Хорошие данные — это данные, которые, как вы ожидаете, должны быть отправлены в правильном формате и с соответствующими атрибутами для каждого пользователя. Кто-то всегда может зайти в инструменты разработки, изменить атрибуты и попытаться сохранить их в базе данных, однако, если вы используете строгие параметры, это защитит вашу базу данных и предотвратит сохранение плохих данных в вашей базе данных. Теперь, когда ваша информация была успешно отправлена в базу данных и сохранена, теперь вы можете войти в систему и увидеть других пользователей, у которых есть учетная запись в приложении, и подписаться на них! Благодаря формам мы можем видеть информацию только для себя и иметь возможность комментировать, ставить лайки или блокировать определенные функции или даже пользователей.
HTML-форма и входные атрибуты
Атрибуты описывают характеристики или свойства, которые примет элемент. HTML-форма имеет множество атрибутов, которые вы можете использовать, но наиболее распространенными, особенно для форм входа/регистрации, являются атрибуты действия и метода. Атрибут action описывает действие, которое должно быть выполнено при отправке формы. Обычно это действие — URL-адрес, который обрабатывает отправку. Атрибут метода указывает метод HTTP, который используется при отправке формы. Итак, скажем, для этой формы регистрации у вас будет тег формы, который выглядит так <form action="/signup" method="POST"></form>
. Вам нужно отправить почтовый запрос, чтобы контроллеры в вашем бэкенде могли обработать данные, вводимые в форму.
Хорошо, а как вообще создать форму? Чтобы построить форму, нам, конечно, нужны теги <form>
, но чтобы пользователь действительно вводил свои данные, нам нужны теги <input>
! Теги <input>
обычно записываются как дочерние теги <form>
, например:
<form action="/signup" method="POST"> <input /> </form>
Чтобы определить свойства входного тега, нам нужно добавить такие атрибуты, как type=""
, name=""
, value=""
. Существует разнообразие входных атрибутов, которые могут формировать ввод, но мы сосредоточимся конкретно на упомянутых. Во-первых, атрибут type
будет определять тип ввода, с которым будет взаимодействовать пользователь. Например, если type="text"
, пользователь увидит текстовое поле для ввода. type="integer"
позволит пользователю вводить только число, и вы можете установить границы только от 0 до 100 и так далее. Следующий атрибут — это атрибут name
, и он определяет имя ключа при сохранении в базе данных. Это важно при попытке отобразить информацию, которую пользователь помещает в базу данных. value
важен, особенно в React, для обновления состояния всякий раз, когда в форму вносятся изменения. Обязательно просмотрите список атрибутов тега <input>
, чтобы определить, какой из них следует использовать для вашей формы!
Попробуйте!
Теперь, когда мы рассмотрели некоторые основы создания формы, попробуйте сами! Есть много других атрибутов, которые я не рассмотрел, и то, как вы создаете форму, также зависит от используемого вами фреймворка, поэтому убедитесь, что вы понимаете, как отправлять запросы, используя ваш конкретный фреймворк/язык! Формы забавны и необходимы для веб-разработки. Как всегда, удачного кодирования!