Атрибуты формы HTML

HTML-атрибуты элемента <form>

В HTML для элемента <form> доступны различные атрибуты, которые приведены ниже:

Атрибут action

Атрибут action элемента <form> определяет процесс, который будет выполняться в форме при отправке формы.
Значение атрибута action определяет веб-страницу, на которой происходит передача информации. Это может быть .php, .jsp, .asp и т. д. или любой URL-адрес, по которому вы хотите обработать свою форму.
Примечание. Если значение атрибута action пустое, форма будет обработана на той же странице.
Пример:

<form action="action.html" method="post">
<label>Имя пользователя:
<input type="text" name="name"> </label>
<label>Пароль пользователя
<input type="password" name="pass"> </label>
<input type="submit">
</form>

когда вы нажмёте на кнопку отправить вас перенаправит на новую страницу «action.html».

Атрибут method

Атрибут method определяет метод HTTP, который браузер использовал для отправки формы. Возможные значения атрибута method могут быть:
◦ post:
мы можем использовать значение post атрибута method, когда мы хотим обработать конфиденциальные данные, поскольку он не отображает отправленные данные в URL-адресе.
Пример:

◦ get:
значение get атрибута method является значением по умолчанию при отправке формы. Но это небезопасно, поскольку отображает данные в URL-адресе после отправки формы.
Пример:

При отправке данных он будет отображать введенные данные в виде:
file:///D:/HTML/action.html?name=JavaTPoint&pass=123

Атрибут target

Атрибут target определяет, где открыть ответ после отправки формы. Ниже приведены ключевые слова, используемые с атрибутом target.
◦ _self:
если мы используем _self в качестве значения атрибута, то ответ будет отображаться только на текущей странице.
Пример:

◦ _blank:
если мы используем _blank в качестве атрибута, он загрузит ответ на новой странице.
Пример:

Атрибут autocomplete

Атрибут autocomplete HTML — это недавно добавленный атрибут HTML5, который позволяет автоматически заполнять поле ввода. Он может иметь два значения «включено» и «выключено», что включает или выключает автозаполнение. Значение атрибута автозаполнения по умолчанию — «включено».
Пример:

Примечание: его можно использовать как с элементом <form>, так и с элементом <input>.

Атрибут enctype

Атрибут HTML enctype определяет тип кодирования содержимого формы при отправке формы на сервер. Возможные значения enctype могут быть:
◦ application/x-www-form-urlencoded:
это тип кодировки по умолчанию, если атрибут enctype не включен в форму. Все символы кодируются перед отправкой формы.
Пример:

◦ multipart/form-data:
не кодирует никаких символов. Он используется, когда наша форма содержит элементы управления загрузкой файлов.
Пример:

◦ text/plain (HTML5):
в этом типе кодирования в символ + кодируется только пробел, а никакие другие специальные символы не кодируются.
Пример:

Атрибут novalidate

Атрибут novalidate — это недавно добавленный логический атрибут HTML5. Если мы применим этот атрибут в форме, то он не выполняет никакой проверки и не отправляет форму.
Пример:

HTML-атрибуты элемента <input>

Атрибут name

Атрибут name HTML определяет имя элемента input. Атрибут name и value включаются в HTTP-запрос при отправке формы.
Примечание. Не следует опускать атрибут name, так как при отправке формы HTTP-запрос включает в себя обе пары name-value, и если name недоступно, это поле ввода не будет обработано.
Пример:

<form action ="action.html" method="get">
Введите имя:
<input type="text" name="uname">
Введите возраст:
<input type="number" name="age">
Введите email:
<input type="email">
<input type="submit" value="Отправить">
</form>

Примечание. Если вы не будете использовать атрибут name ни в одном поле ввода, то это поле ввода не будет отправлено при отправке формы.
если нажмёте «Отправить» и увидите URL-адрес, где электронная почта не включена в HTTP-запрос, поскольку мы не использовали атрибут имени в поле ввода электронной почты.

Атрибут value

Атрибут value HTML определяет начальное значение или значение по умолчанию для поля ввода.
Пример:

<form>
<label>Введите ваше имя
<input type="text" name="uname" value="Введите имя"> </label>
<label>Введите ваш Email-адресс
<input type="email" name="email" value="Введите email"> </label>
<label>Введите ваш пароль
<input type="password" name="pass" value=""> </label>
<input type="submit" value="войти">
</form>

Примечание. В поле input пароля атрибута value всегда будет неясным.

Атрибут required

HTML required — это логический атрибут, который указывает, что пользователь должен заполнить это поле перед отправкой формы.
Пример:

<form>
<label>Введите ваш Email-адрисс
<input type="email" name="email" required> </label>
<label>Введите ваш пароль
<input type="password" name="pass"> </label>
<input type="submit" value="войти">
</form>

Если вы попытаетесь отправить форму, не заполнив поле электронной почты, появится всплывающее окно с ошибкой.

Атрибут autofocus

autofocus — это логический атрибут, который позволяет автоматически фокусировать поле при загрузке веб-страницы.
Пример:

<form>
<label>Введите Email-адрисс
<input type="email" name="email" autofocus> </label>
<label>Введите пароль
<input type="password" name="pass"> </label>
<input type="submit" value="войти">
</form>

Атрибут placeholder

Атрибут placeholder указывает текст в поле ввода, который информирует пользователя об ожидаемом вводе этого поля.
Атрибут-placeholder можно использовать со значениями текста, пароля, электронной почты и URL-адреса.
Когда пользователь вводит значение, placeholder будет автоматически удален.
Пример:

<form>
<label>Введите имя
<input type="text" name="uname" placeholder="Ваше имя"> </label>
<label>Введите Email
<input type="email" name="email" placeholder="example@gmail.com"> </label>
<label>Введите пароль
<input type="password" name="pass" placeholder="Ваш пароль"> </label>
<input type="submit" value="войти">
</form>

Атрибут disabled

Атрибут HTML disabled при применении отключает это поле ввода. Отключенное поле не позволяет пользователю взаимодействовать с этим полем.
Отключенное поле ввода не получает события кликов, и эти входные значения не будут отправлены на сервер при отправке формы.
Пример:

Атрибут size

Атрибут size управляет размером поля ввода в печатных символах.
Пример:

<form>
<label>Имя владельца аккаунта
<input type="text" name="uname" size="40" required> </label>
<label>Номер аккаунта
<input type="text" name="an" size="30" required> </label>
<label>CVV
<input type="text" name="cvv" size="1" required> </label>
</form>