Что особенного в формах?

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>, чтобы определить, какой из них следует использовать для вашей формы!

Попробуйте!

Теперь, когда мы рассмотрели некоторые основы создания формы, попробуйте сами! Есть много других атрибутов, которые я не рассмотрел, и то, как вы создаете форму, также зависит от используемого вами фреймворка, поэтому убедитесь, что вы понимаете, как отправлять запросы, используя ваш конкретный фреймворк/язык! Формы забавны и необходимы для веб-разработки. Как всегда, удачного кодирования!