Элементы input HTML - httpdoc.ru

Элементы 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 Form Input Type Text Attribute Examples
Имя: Фамилия:

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 Form Input Type Password Attributes
Имя пользователя: Пользовательский пароль:

Тип ввода 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 Form Input Type Submit Button Attribute
Имя: Фамилия:

Сброс типа ввода 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>

Выход

HTML Form Input Type Reset Button Examples
Имя: Фамилия:

Тип ввода HTML Радио

<input type="radio"> Определяет кнопку Radio. Он используется, когда нужно выбрать только один вариант из многих. name Атрибут всех кнопок должен иметь одинаковое значение, то только определенное значение будет выбрано. Радиокнопки позволяют пользователю выбрать ТОЛЬКО ОДИН из ограниченного числа вариантов.

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

<form action="action-page.php">
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br><br>
  <input type="submit">
</form> 

</body>
</html>

Выход

HTML Form Input Type Radio Button Attribute Мужчина
женский
Другой

Флажок "Тип ввода HTML"

<input type="checkbox"> Определяет флажок. Его можно использовать для одновременного выбора нескольких параметров.

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

<body>

<form action="action-page.php">
  <input type="checkbox" name="vehicle1" value="Bike">Samsung
  <input type="checkbox" name="vehicle2" value="Car">Google Pixel>
  <input type="submit">
</form> 

</body>
</html>

Выход

HTML Form Input Type Checkbox Samsung Google Pixel

Кнопка типа ввода HTML

<input type="button"> Определяет кнопку.

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

<body>

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

</body>
</html>

Выход

HTML Form Input Type Button Attribute

Номер типа ввода HTML

<input type="number"> Определяет числовое поле ввода. Атрибут number устанавливает ограничения на то, какие числа принимаются. Вы можете установить min или max число.

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

<form action="action-page.php">
  Quantity (between 1 and 10):
  <input type="number" name="quantity" min="1" max="10">
  <input type="submit">
</form>

</body>
</html>

Выход

HTML Form Input Type Number Attribute Количество (от 1 до 10):

Ограничения ввода HTML-форм

Вот список некоторых общих ограничений ввода (некоторые из них появились в HTML5).

Атрибут
Новый
Описание
отключен Он указывает на отключение поля ввода.
Максимум Он определяет максимальное значение для поля ввода.
максимальная длина Он определяет максимальное количество символов для поля ввода.
мин Он определяет минимальное значение для поля ввода.
шаблон Он определяет регулярное выражение, по которому проверяется входное значение.
только чтение Он указывает, что поле ввода доступно только для чтения и не может быть изменено.
требуется Он указывает, что требуется поле ввода.
размер Он определяет ширину (в символах) поля ввода.
шаг Он определяет допустимые интервалы номеров для поля ввода.
ценить Он определяет значение по умолчанию для поля ввода.

Типы ввода HTML5

HTML5 представил 13 различных "types" атрибутов. Давайте посмотрим на различные значения атрибута type:

Поля электронной почты

Значение "email" используется для создания поля ввода для адреса электронной почты. Этот тип ввода HTML специально используется для проверки адреса электронной почты, введенного пользователем. Он использует стандартный формат адреса электронной почты, и пользователь нарушает его, а затем показывает ошибку. Синтаксис: <input type=email>

Числовые поля

Значение "number" создаст поле ввода для ввода только чисел, если вы вводите алфавиты, символы или что-либо, кроме чисел, будет отображаться ошибка, однако числа с десятичными точками разрешены. Синтаксис: <input type=number>

Поля поиска

Он используется для создания окна поиска. Вы даже можете добавить заполнитель в поле поиска, используя атрибут "заполнитель". Синтаксис: <input type="search">

Поля URL

Специально используется для ввода URL-адреса. Синтаксис: <input type="url">

Числовые поля

Этот тип ввода HTML предоставляет элементы управления для ввода чисел. На правой стороне есть маленькие кнопки для увеличения или уменьшения значения числа. В ваших смартфонах этот тип ввода автоматически открывает цифровую клавиатуру во время ввода данных. Синтаксис: <input type="number">

Поля телефонного номера

Это специальное поле типа HTML для ввода только телефонных номеров. Синтаксис: <input type="tel">

Поля диапазона

Он создает ползунок для выбора значения в диапазоне двух значений. Синтаксис: <input type="range" min="0" max="10">

Поля даты

Этот тип используется для создания области ввода для ввода даты. Вы можете ввести дату вручную или выбрать значение из графического календаря. Синтаксис: <input type="date">

Поля месяца

Он предоставляет только варианты месяца и года. Синтаксис: <input type="month">

Поля недели

Позволяет выбрать неделю и год. Синтаксис: <input type="week">

Поля времени

Позволяет ввести время суток. Его можно ввести вручную или с помощью формата цифровых часов. Синтаксис: <input type="time">

Поля, локальные для даты и времени

Введите дату и время вместе в одно поле ввода. Синтаксис: <input type="datetime-local">

Цветные поля

Если вы хотите ввести любую информацию о цвете RGB в базу данных, используйте этот тип ввода. Синтаксис: <input type="color">