Формы в JavaScript имеют множество применений, в основном они используются для того, чтобы пользователь мог отправить некоторую информацию по вашему выбору на ваш сайт!
В этом блоге я дам краткое изложение того, как создать простую базовую форму, это не будет сложная форма, это будет только начало формы.
Первое, что нам нужно сделать, это создать часть html, чтобы связать с ней нашу форму JavaScript.
Приведенный выше пример представляет собой краткий пример кода для создания этой HTML-части.
Первым шагом для html является создание формы с использованием элемента ‹form›. Довольно просто.
В моем примере я дал форме заголовок, используя ‹h4›,подойдет любой заголовок.
Следующий элемент — это ‹label›, он будет отображаться в DOM, помечая каждый аспект вашей формы. Как видите, у нас есть по одному для каждого блока, которому нужна метка.
Элемент ‹input› также используется для отслеживания входных данных, которые вводятся внутри необходимых нам входных данных.
Один элемент, который я также поместил в свою форму, был элементом ‹textarea. Я использую этот элемент, так как внутри моей формы будет текстовое поле, позволяющее пользователю написать свой комментарий.
Настоящая причина, по которой мы здесь, часть JavaScript.
Первое, что нам нужно сделать в JavaScript, создать переменную и взять наш элемент из html.
Затем мы добавим прослушиватель событий submit.
Когда мы используем формы, мы используем здесь переменную события, чтобы отслеживать нашу информацию, используемую в DOM.
Следующее, что мы будем делать, это создать нашу функцию для обработки функциональности нашей формы.
Мы добавляем preventDefault() в событие нашей формы, чтобы предотвратить обновление страницы, когда пользователь нажимает кнопку отправки в нашей форме. Это очень важно.
Следующее, что мы будем делать, — это создать еще одну переменную внутри нашей функции формы, чтобы получать информацию, вводимую в нашу форму.
Наша форма имеет 3 аспекта, внутри нашей переменной мы дали каждому ключу строку. Эта строка прикреплена к значению.
Мы использовали квадратные скобки, чтобы получить идентификатор нашей текстовой области html, чтобы, когда пользователь вводит текст внутри нашей формы, он отображался и отправлялся в это место в нашей форме.
Мы используем e.target.’key’.value, чтобы выбрать наши значения из другой функции, созданной для отображения наших значений в DOM.
Я покажу эту функцию здесь выше, так как она необходима для работы нашей формы.
Как это работает, так же, как форма, захватывая идентификаторы/классы из html для отображения вещей в DOM.
Мы не хотим сильно отвлекаться от этой функции, так как она нужна для формы, но выходит за рамки этого блога.
Последнее, что нам нужно сделать, чтобы заполнить нашу основную форму, — это завершить нашу функцию handleSubmit. Мы добавим нашу показанную выше функцию с нашей переменной внутри нее, так как она хранит всю информацию для нашей формы.
Как видите, мы используем нашу переменную exampleObj внутри нашей функции selectExample.
У нас также есть кое-что, что следует отметить внизу, e.target.reset().
Это сбрасывает нашу форму, когда пользователь отправляет ее, очень простая цель события, использующая метод reset() для сброса нашей формы.
