HTML-форма
HTML - форма — это раздел документа , который содержит элементы управления, такие как текстовые поля, поля пароля, флажки, переключатели, кнопку отправки, меню и т. д.
HTML-форма позволяет пользователю вводить данные, которые должны быть отправлены на сервер для обработки, такие как имя, адрес электронной почты, пароль, номер телефона и т. д.
Зачем использовать HTML-форму
HTML-формы необходимы, если вы хотите собрать некоторые данные о посетителе сайта.
Например: если пользователь хочет приобрести некоторые товары в Интернете, он / она должен заполнить форму, такую как адрес доставки и данные кредитной / дебетовой карты, чтобы товар можно было отправить на указанный адрес.
Теги HTML-формы
Давайте посмотрим на список тегов формы HTML 5.
<form>
Он определяет HTML-форму для ввода входных данных используемой стороной.
<input>
Он определяет элемент управления вводом.
<textarea>
Он определяет многострочный элемент управления вводом.
<label>
Он определяет метку для элемента ввода.
<fieldset>
Он группирует связанный элемент в форме.
<legend>
Он определяет заголовок для элемента <fieldset>.
<select>
Он определяет раскрывающийся список.
<optgroup>
Он определяет группу связанных параметров в раскрывающемся списке.
<option>
Он определяет параметр в раскрывающемся списке.
<button>
Он определяет нажимаемую кнопку.
Теги формы HTML 5
Давайте посмотрим на список тегов формы HTML 5.
<datalist>
Он определяет список предопределенных опций для управления вводом.
<keygen>
Он определяет поле генератора пары ключей для форм.
<output>
Он определяет результат вычисления.
HTML-элемент <form>
Элемент HTML <form> предоставляет раздел документа для ввода данных пользователем.
Он предоставляет различные интерактивные элементы управления для отправки информации на веб-сервер, такие как текстовое поле, текстовая область, поле пароля и т. д.
Примечание. Элемент <form> сам по себе не создает форму, но является контейнером, содержащим все необходимые элементы формы, такие как <input>, <label> и т. д.
HTML-элемент <input>
Элемент HTML <input> является основным элементом формы. Он используется для создания полей формы, чтобы принимать данные от пользователя. Мы можем применять различные входные данные для сбора различной информации о пользователе. Ниже приведен пример, показывающий простой ввод текста.
Введите свое имя <br>
<input type="text" name="username">
</form>
Элемент управления текстовым полем HTML
Атрибут type="text" тега input создает элемент управления текстовым полем, также известный как элемент управления однострочным текстовым полем. Атрибут name является необязательным, но он необходим для серверных компонентов, таких как JSP, ASP, PHP и т. д.
Имя: <br>
<input type="text" name="firstname"/> <br/>
Фамилия: <br>
<input type="text" name="lastname"/> <br/>
</form>
Примечание. Если вы опустите атрибут «name», то ввод текстового поля не будет отправлен на сервер.
Тег HTML <textarea> в форме
Тег <textarea> в HTML используется для вставки многострочного текста в форму. Размер <textarea> можно указать либо с помощью атрибута rows или cols, либо с помощью CSS.
Пример:
Введите свой адрес: <br>
<textarea rows="2" cols="20"></textarea>
</form>
тег label в форме
Считается, что лучше иметь тег label в форме. Так как это делает парсер кода/браузер/удобным для пользователя.
Если вы нажмете на тег label, он сфокусируется на текстовом элементе управления. Для этого вам нужно иметь атрибут for в теге label, который должен совпадать с атрибутом id входного тега.
ПРИМЕЧАНИЕ. Хорошо использовать тег <label> с формой, хотя это необязательно, но если вы будете его использовать, то он будет обеспечивать фокус при нажатии или щелчке тега label. С тачскринами.
<label for="firstname">Имя: </label>
<input type="text" id="firstname" name="firstname"/>
<label for="lastname">Фамилия: </label>
<input type="text" id="lastname" name="lastname"/>
</form>
Управление полем HTML-пароля
Пароль не виден пользователю в поле управления паролем.
<label for="password">Пароль: </label>
<input type="password" id="password" name="password"/>
</form>
Управление полем электронной почты HTML 5
Поле электронной почты появилось в HTML 5. Оно проверяет правильность текста на адрес электронной почты. Вы должны использовать @ и . в этом поле.
<label for="email">Email: </label>
<input type="email" id="email" name="email"/>
</form>
Примечание. Если мы не введем правильный адрес электронной почты, будет отображаться ошибка,
Управление радиокнопкой
Радиокнопка используется для выбора одного варианта из нескольких вариантов. Используется для выбора пола, вопросов викторины и т.д.
Если вы используете одно имя для всех радиокнопок, одновременно может быть выбрана только одна радиокнопка.
Используя переключатели для нескольких вариантов, вы можете выбрать только один вариант за раз.
<label for="gender">Пол: </label>
<input type="radio" id="gender" name="gender" value="male" />Муржской
<input type="radio" id="gender" name="gender" value="female" />Женский
</form>
Контроль флажка
Элемент управления флажком (checkbox) используется для проверки нескольких параметров из заданных флажков.
Хобби:
<input type="checkbox" id="football" name="football" value="football" />
<label for="football">Футбол</label>
<input type="checkbox" id="tennis" name="tennis" value="tennis" />
<label for="tennis">Теннис</label>
<input type="checkbox" id="hockey" name="hockey" value="hockey" />
<label for="hockey">Хоккей</label>
</form>
Примечание. Они аналогичны радиокнопкам, за исключением того, что они могут выбирать несколько параметров одновременно, а радиокнопки могут выбирать одну кнопку за раз и отображать ее.
Кнопка отправки формы
HTML <input type="submit"> используется для добавления кнопки отправки на веб-страницу. Когда пользователь нажимает кнопку отправки, форма отправляется на сервер.
Синтаксис:
<input type="submit" value="отправить">
type="submit"
указывает, что это кнопка отправки,
Атрибут value
может быть чем угодно, что мы пишем на кнопке на веб-странице.
Атрибут name здесь можно опустить.
<label for="name">Введите имя</label>
<input type="text" id="name" name="name">
<label for="pass">Введите пароль</label>
<input type="Password" id="pass" name="pass">
<input type="submit" value="Отправить">
</form>
Элемент HTML fieldset:
Элемент <fieldset> в HTML используется для группировки связанной информации формы. Этот элемент используется с элементом <legend>, который обеспечивает заголовок для сгруппированных элементов.
Пример:
<fieldset>
<legend>информация о пользователи:</legend>
<label for="name">Введите имя</label>
<input type="text" id="name" name="name">
<label for="pass">Введите пароль</label>
<input type="Password" id="pass" name="pass">
<input type="submit" value="Отправить">
</fieldset>
</form>
