Элементы input HTML
Элемент HTML
input types
используется для создания интерактивных элементов управления для веб-форм, принимающих данные от пользователя.
Пользователь может вводить данные в различных формах, например, в алфавитном порядке, в виде цифр или их комбинации, например, в электронном письме.
Эти различные типы элементов типа ввода HTML в HTML определяют тип данных, которые пользователь вводит в поле ввода.
Браузеру легче понять, какие данные можно вводить в определенное поле, а какие нет.
Различные типы типа ввода HTML определяются его атрибутом 'type', каждый тип ввода имеет свое значение атрибута 'type', связанное с ним. Давайте посмотрим на общие значения атрибута type:
Тип ввода HTML
Вот список некоторых распространенных типов ввода HTML-форм.
| Тип | Описание |
|---|---|
| текст | Он определяет однострочное поле ввода текста. |
| пароль | Определяет однострочное поле ввода пароля. |
| Разместить | Он указывает кнопку отправки для отправки формы на сервер. |
| сброс настроек | Кнопка сброса сбрасывает все значения в форме. |
| радио | Радиокнопка позволяет выбрать один вариант. |
| флажок | Флажки позволяют выбрать несколько вариантов формы. |
| кнопка | Определяет интерактивную кнопку, которая может выполнять задачу в отношении события. |
| файл | Он определяет выбор файла из хранилища устройства. |
| изображение | Определяет графическую кнопку отправки. |
Текст типа ввода HTML
<input type="text">
Определяет одно поле ввода строки текста.
По умолчанию текст поля может занимать 20 символов.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Text </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>Выход
HTML Тип ввода Пароль
<input type="password">
Определяет поле пароля.
Во время ввода вместо реальных символов будут отображаться маркеры.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Password </title>
</head>
<body>
<form action="#">
User name:
<input type="text" name="userid">
User password:
<input type="password" name="psw">
</form>
</body>
</html>Выход
Тип ввода HTML Отправить
<input type="submit">
Определяет
Submit
кнопку, представить
form data
в виде обработчика.
Это
form-handler
тип серверной страницы со скриптом для обработки входных данных формы и указывается в атрибуте действия формы.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Submit </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>Выход
Сброс типа ввода HTML
<input type="reset">
Определяет
Reset
кнопку.
Если вы хотите изменить входные значения, нажмите кнопку «Сброс», данные формы будут сброшены до значений по умолчанию.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Reset </title>
</head>
<body>
<form action="action-page.php">
First name:<br>
<input type="text" name="firstname" value="John">
Last name:<br>
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>