HTML-формы | Типы тегов формы в HTML - httpdoc.ru

HTML-формы

Форма HTML является разделом документа , который содержит различные поля , такие как текст fields , password fields , checkboxes , radio buttons , submit button , menus etc.

HTML-формы можно использовать там, где мы хотим собирать некоторые данные о посетителях сайта. Например, в случае регистрации пользователя вы хотите получить такую ​​информацию, как имя, адрес электронной почты, номер телефона и т. Д.

Форма принимает ввод, а затем сохраняет его во внутреннем приложении, таком как CGI, ASP Script или PHP-скрипт и т. Д. Внутреннее приложение будет выполнять необходимую обработку переданных данных, например, сохранять их в базе данных.

Существуют различные элементы формы доступны как text fields , textarea fields , drop-down menus , radio buttons , checkboxes и т.д.


Структура HTML-формы

<form> Тег HTML определяет форму, которая используется для сбора пользовательского ввода. Все элементы формы должны быть написаны внутри <form> и </form> тегами.

Синтаксис:

< форма > 
        . . . .  
        Элементы формы ..
         . . . . 
        < / форма >


Элементы HTML-форм

Атрибуты Описание
<form> Он определяет HTML-форму для ввода данных с используемой стороны.
<input> Он определяет элемент управления вводом.
<select> Он определяет многострочный элемент управления вводом.
<option> Он определяет параметр в раскрывающемся списке.
<textarea> Он определяет раскрывающийся список.
<button> Он определяет метку для элемента ввода.
<fieldset> Он группирует связанный элемент в форме.
<legend> Он определяет заголовок для <fieldset> элемента.
<optgroup> Он определяет группу связанных параметров в раскрывающемся списке.
<label> Он определяет метку для поля.

Элемент HTML-форм

Элемент 'Input'

Самым важным элементом формы является <input> элемент. В <input> зависимости от атрибута type элемент может отображаться несколькими способами.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Form Input Attribute </title>
</head>

<body>

<h2>Text Input</h2>

<form>
  First name:
  <input type="text" name="firstname">
  
  Last name:
  <input type="text" name="lastname">
</form>

</body>
</html>

Выход

HTML Form Input Attribute Examples
Имя: Фамилия:

Примечание. Ширина поля ввода текста по умолчанию составляет 20 символов.

Элемент Select

<select> Элемент определяет выпадающий список. В основном он используется, когда вам нужно показать количество предметов.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Form Select Attribute </title>
</head>

<body>

<form action="action-page.php">
 <select name="Cars">
    <option value="Audi"> Audi </option>
    <option value="Mercedes"> Mercedes </option>
    <option value="Lamborghini"> Lamborghini </option>
 </select>
  <input type="submit">
</form>

</body>
</html>

Выход

HTML Form Select Attribute Examples

Примечание: действие атрибут определяет действие , которое должно быть выполнено , когда форма была отправлена. Вы должны добавить место назначения, куда будет отправлена ​​форма.
  • <option> Элемент определяет различные варианты , которые могут быть выбраны.
  • По умолчанию выбран первый элемент в раскрывающемся списке.
  • Для того, чтобы определить заранее выбранный вариант, добавить выбранный атрибут опции: <option value="abc" selected> .

Элемент Textarea

<textarea> Элемент определяет поле ввода многострочных.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Form Textarea Attribute </title>
</head>

<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>

<form action="action-page.php">
  <textarea name="message" rows="5" cols="60"> This is a simple Example of Textarea. </textarea>
  <br>
  <input type="submit">
</form>

</body>
</html>

Выход

HTML Form Textarea Attribute Examples

Элемент "Кнопка"

<button> Элемент определяет кнопку интерактивной.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Form Button Attribute </title>
</head>

<body>

<button type="button" onclick="alert('Hello World..!')">Click Me!</button>

</body>
</html>

Выход

HTML Form Button Attribute Examples

Атрибут "метод"

method Атрибут определяет метод HTTP (GET или POST) , который будет использоваться при передаче данных формы. Это GET метод по умолчанию при отправке данных формы.

Синтаксис
< form action = "action-page.php" method = "get" > 
    < form action = "action-page.php" method = "post" >

Разница между GET и POST

Точки ПОЛУЧИТЬ СПОСОБ ПОЧТОВЫЙ МЕТОД
Передача данных Ограниченное количество данных может быть отправлено, потому что данные отправляются в заголовке. Может быть отправлен большой объем данных, потому что данные отправляются в теле.
Безопасность Запрос на получение не защищен, поскольку отправленные данные являются частью URL-адреса, и эти данные сохраняются в истории браузера и журналах сервера в виде открытого текста. Почтовый запрос защищен, потому что данные не отображаются в строке URL, а параметры не сохраняются в истории браузера или в журналах веб-сервера.
Добавлено в закладки Запрос можно добавить в закладки и кэшировать. Запрос нельзя добавить в закладки и кэшировать.
Юзабилити Метод GET не подходит для отправки конфиденциальных данных, таких как идентификатор пользователя или пароли. POST хорош, когда вы отправляете конфиденциальные данные, потому что ваши данные отправляются в зашифрованном виде.
Длина данных Длина данных ограничена, обычно до 2048 символов. Нет ограничений на объем отправляемых данных.
Взломан Легче взломать. Взломать сложнее.

Атрибут "Имя"

name Атрибут определяет имя <input> элемента. Использование этого атрибута является хорошей практикой, а также для целей SEO.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Form Name Attribute </title>
</head>

<body>

<form action="action-page.php">
  First name:
  <input type="text" value="John">

  Last name:
  <input type="text" name="lastname" value="Snow">
 
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Выход

HTML Form Name Attribute Examples
Имя: Фамилия:

Группировка данных формы с помощью <fieldset>

<fieldset> Элемент используется для данных , связанных групп в форме , а <legend> элемент определяет заголовок для <fieldset> элемента.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>

<form action="action-page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:
    <input type="text" name="firstname" value="John">
    
    Last name:
    <input type="text" name="lastname" value="Snow">
    <input type="submit" value="Submit">
  </fieldset>
</form>

</body>
</html>

Выход

HTML Form Fieldset and Legend Attributes Examples
Персональные данные: Имя: Фамилия:

Поддержка браузера

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
<form>
да
да
да
да
да