wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Type number могут ли атрибуты min и max принимать отрицательное значение: — ввод только цифр

alexxlab
No Comments

Содержание

Ввод чисел | htmlbook.ru

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

Рис. 1. Вид поля для ввода чисел

Синтаксис создания поля следующий:

<input type="number" атрибуты>

Допустимые атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля с числом
АтрибутОписание
minМинимальное значение.
maxМаксимальное значение.
sizeШирина поля.
stepШаг приращения числа. Может быть как целым (2), так и дробным (0.2).
nameИмя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
valueНачальное число, которое выводится в поле.

Для ограничения введённого числа предназначены атрибуты min и max, они могут принимать отрицательное и положительное значение. При достижении верхнего или нижнего порога стрелки в поле в зависимости от браузера блокируются или не дают никакого эффекта (пример 1). Несмотря на такие запреты, в любом случае в поле самостоятельно можно вводить любые значения, включая текст. Атрибуты min и max работают только при использовании стрелок в поле.

Пример 1. Ограничение ввода чисел

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ввод числа</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Введите число от 1 до 10:</p>
   <p><input type="number" size="3" name="num" min="1" max="10" value="1"></p>
  </form>
 </body>
</html>

Если значение min превышает max, то атрибут min игнорируется.

Атрибут step задаёт шаг приращения и по умолчанию равен 1. В то же время значение может быть и дробным числом, как показано в примере 2.

Пример 2. Шаг приращения

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ввод числа</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Укажите нормальную среднюю температуру человека:</p>
   <p><input type="number" name="t" value="35" min="35" max="40" step="0.2"></p>
  </form>
 </body>
</html>

Результат примера продемонстрирован на рис. 2.

Рис. 2. Ввод дробных чисел в поле

Браузеры плохо поддерживают это поле, пока лишь это делает Chrome и Opera. В остальных браузерах поле для ввода числа приобретает вид обычного текстового поля.

Input type number

В HTML5 появилось специальное поле <input> с атрибутом type="number" для вода чисел. Рассмотрим его возможности.

Для поля доступны следующие атрибуты:










АтрибутОписание
stepШаг изменения значения
maxМаксимальное значение
minМинимальное значение
placeholderПодсказка
readonlyТолько для чтения
disabledЗаблокирован
listСвязка со списком опций datalist по id
requiredОбязательный для заполнения

1

Шаг изменения

Атрибут step="1" задает на сколько будет увеличиваться или уменьшаться значение в поле. Может быть как целым (10) так и дробным (0.1).

<input type="number" step="1" placeholder="step = 1">
<input type="number" step="10" placeholder="step = 10">
<input type="number" step="0.1" placeholder="step = 0.1">
Пример:

2

Минимальное значение

Атрибут min="1" задает минимально возможное значение value. Это значение должно быть меньше или равно значению max. Может быть целым, отрицательным или дробным.

<input type="number" step="10" min="0" placeholder="min = 0">
<input type="number" step="10" min="-100" placeholder="min = -100">
<input type="number" step="0.1"min="-0.1" placeholder="min = -0.1">
Пример:

3

Максимальное значение

Атрибут max="100" задает максимально возможное значение value.

<input type="number" step="1" max="10" placeholder="max = 10">
<input type="number" step="10" max="100" placeholder="max = 100">
<input type="number" step="0.1" max="1.5" placeholder="max = 1.5">
Пример:

4

Опции по умолчанию

У поля есть возможность задать список с рекомендуемыми значениями с помощью элемента <datalist>.

<input type="number" list="input-list">

<datalist>
	<option value="111">
	<option value="222">
	<option value="333">
	<option value="444">
	<option value="555">
</datalist>
Пример:

5

Валидация

Если указать атрибут required, то при отправки формы будет проверятся заполнено поле или нет, а также превышение введенного значения value в атрибутах min и max.


Проверить значение регулярным выражением с помощью атрибута pattern не получится, т.к. он не поддерживается.

<form>
	<input type="number" step="10" min="0" max="100" required>
	<input type="submit" value="Отправить">
</form>
Пример:

Также доступны CSS псевдо свойства :invalid и :valid, с помощью них можно применить стили к неправильно заполненному полю.

<form>
	<div>
		<input type="number" step="10" min="0" max="100" required>
		<span></span>
	</div>
	<div>
		<input type="number" step="10" min="0" max="100" required>
		<span></span>
	</div>
</form>
input[type="number"]:invalid+span:after {
	content: '✖';
	padding-left: 5px;
	color: red;
}

input[type="number"]:valid+span:after {
	content: '✓';
	padding-left: 5px;
	color: green;
}
Пример:

6

Стилизация

Стандартными CSS-стилями можно изменить инпут:

input[type="number"] {
	background-color: #eee;
	vertical-align: top;
	outline: none;
	padding: 0;
	height: 40px;
	line-height: 40px;    
	text-indent: 10px;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ddd;
	font-size: 14px;
	border-radius: 3px;
} 

input[type="number"]:focus {
	outline: 2px solid blue;
}
Пример:

7

Убрать стрелки

input[type="number"] {
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	display: none;
}

8

Как стилизовать стрелки

К стрелкам не применить CSS стили, но есть JS-методы stepUp() и stepDown() для изменения значения. Так можно скрыть стрелки и добавить свои кнопки:

<div>
	<button type="button">-</button>
	<input type="number" min="0" value="1" readonly>
	<button type="button">+</button>
</div> 
.number {
	display: inline-block;
	position: relative;
	width: 100px;
}
.number input[type="number"] {
	display: block;
	height: 32px;
	line-height: 32px;
	width: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-align: center;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}
.number input[type="number"]::-webkit-outer-spin-button,
.number input[type="number"]::-webkit-inner-spin-button {
	display: none;
}
.number-minus {
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	width: 20px;
	padding: 0;
	display: block;
	text-align: center;
	border: none;
	border-right: 1px solid #ddd;
	font-size: 16px;
	font-weight: 600;
}
.number-plus {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 20px;
	padding: 0;
	display: block;
	text-align: center;
	border: none;
	border-left: 1px solid #ddd;
	font-size: 16px;
	font-weight: 600;
}
Результат:

Атрибут max | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.05.0+10.62+5.1+2.3+3.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Устанавливает верхнее значение для ввода числа или даты в поле формы.

Синтаксис

<input type="number" max="максимальное число">
<input type="range" max="максимальное число">
<input type="date" max="верхняя дата">

Значения

Целое положительное или отрицательное число (для type=»number», type=»range»).

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type=»date».

Значение по умолчанию

Нет.

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег input, атрибут max</title>
 </head>
 <body> 
  <form action="handler.php">
   <p>Укажите вашу температуру в градусах Цельсия</p>
   <input type="number" min="35" max="41" 
    value="36.6" step="0.1" /></p>
  </form> 
 </body>
</html>

Пример 2

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег input, атрибут max</title>
 </head>
 <body> 
  <form action="handler.php">
   <p>Сегодня 1 января 2145 года. 
   Укажите дату вылета на планету Земля на ближайшие
   семь дней.</p>
   <p><input type="date" min="2145-01-01" max="2145-01-08"
   value="2145-01-01" /></p>
  </form> 
 </body>
</html>

Результат данного примера в браузере Opera 11 показан на рис. 1.

Рис. 1. Ограничение ввода даты через атрибут max

Значения атрибутов | htmlbook.ru

Каждый атрибут тега содержит значение определённого типа и формата написания. Различают следующие типы значений: ключевые слова, числа, дата и время, цвета, URL.

Для всех атрибутов характерны следующие принципы.

  • Если значение явно не указано, применяется значение по умолчанию или атрибут не учитывается.
  • Если указано недопустимое значение атрибута, например, вместо числа добавлен текст, то значение такого атрибута игнорируется и используется значение по умолчанию.

Не все атрибуты имеют значение по умолчанию, в случае отсутствия такого атрибута или при его некорректном значении, атрибут пропускается.

Ключевые слова

Это заданный фиксированный набор определённых слов, которые допустимо подставлять в качестве значений атрибутов. Ключевые слова не чувствительны к регистру и их можно писать любым удобным способом. Так, значения handheld, Handheld и HANDHELD по своему действию одинаковы.

В примере 1 показано создание формы, которая отправляется на сервер методом POST с помощью значения post атрибута method.

Пример 1. Метод отправки формы

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ключевые слова</title>
 </head> 
 <body>
  <form method="post">
   <input name="user" placeholder="Введите имя">
   <input type="submit" value="Отправить">
  </form>
 </body> 
</html>

В данном примере в элементе <form> используется атрибут method со значением post. Если этот атрибут не указать, то будет подставляться значение get, применяемое по умолчанию. Для первого элемента <input> атрибут type не задан, поскольку он подставляется автоматически со значением text, а для второго <input> атрибут type уже указан для создания кнопки отправки формы.

Числа

К числам относятся: положительные целые числа, содержащих одну или несколько цифр от 0 до 9; отрицательные числа; а также вещественные или дробные (например, 0.5).

Положительные целые числа

Активно применяются когда надо задать количество колонок, ограничить размер поля формы и количество вводимых символов, установить ширину и высоту рисунка и др. В примере 2 показано создание нумерованного списка, начинающегося с 11.

Пример 2. Использование целого числа

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Целое число</title>
 </head>
 <body>
  <ol start="11">
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ol>
 </body>
</html>

Отрицательные целые числа

Отрицательные целые числа применяются реже по сравнению с положительными по понятным причинам. С их помощью нельзя задать перечисление или ширину, хотя бы потому, что рисунков с отрицательной шириной не бывает. Так что в HTML такие числа применяются в основном в формах для ограничения ввода.

Для указания отрицательного числа перед ним ставится знак минус (-) без пробелов (например: -15). В примере 3 показано использование отрицательных значений.

Пример 3. Число со знаком минус

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Отрицательные числа</title>
 </head>
 <body>
  <form>
   <p>Введите число с шагом 2
   <input type="number" min="-50" max="50" step="2" value="-10"></p>
  </form>
 </body>
</html>

Браузер Firefox не поддерживает тип number и вместо него отображает обычное текстовое поле.

Вещественные числа

Сюда входят десятичные дроби, для разделения целой и дробной части используется точка. Число может быть и отрицательным, тогда перед ним ставится знак минус (-).

Примеры вещественных чисел: -0.84, 3.1415926, 1.717.

Есть и вторая форма записи вещественных чисел, когда после числа добавляется латинский символ e или E, а затем число означающее степень, причём оно может быть и со знаком минус. Это аналогично тому, что число перед E умножают на 10 в степени, указанной после символа E. Вот несколько примеров для наглядности.

3.1415926e5 = 3.1415926 × 105 = 3.1415926 × 100000 = 314159.26

5e-2 = 5 × 10-2 = 5 / 100 = 0.05

78e2 = 78 × 102 = 7800

Браузер Opera некорректно работает с вещественными числами, в которых есть заглавная буква E, так что вставляйте строчную букву e.

Дата и время

Используется для указания года, месяца и года или полной даты, а также времени.

Дата и время задается в особом формате, пример которого показан в табл. 1.

Табл. 1. Форматы даты и времени
ЗначениеФорматПример
ГодГГГГ2014
Месяц и годГГГГ-ММ2014-12
Полная датаГГГГ-ММ-ДД2014-12-23
Дата и время с минутамиГГГГ-ММ-ДДTчч:мм2014-07-24T18:18
Дата и время с секундамиГГГГ-ММ-ДДTчч:мм:сс2014-07-24T18:18:18
Дата и время с часовым поясомГГГГ-ММ-ДДTчч:мм:сс±чч:мм2014-07-24T18:18:18+04:00

Для каждой единицы существует своя заданная форма и ограничения.

  • Год — задается четырьмя цифрами (1860).
  • Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
  • День — две цифры от 01 до 31.
  • Час — две цифры от 00 до 23.
  • Минуты — две цифры от 00 до 59.
  • Секунды — две цифры от 00 до 59.
  • Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

Цвета

Значение цвета представляет собой три числа в диапазоне от 0 до 255 в шестнадцатеричном представлении описывающие красную, зелёную и синюю компоненту в цветовом пространстве sRGB. Каждое значение цвета должно начинаться с символа решётки (#), после которого могут идти следующие шесть цифр или букв в любом регистре: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Другие символы не допускаются. Подробнее о цвете в HTML смотрите здесь.

URL

URL — это адрес документа или файл. Содержит в себе несколько частей, не все из которых являются обязательными. Это протокол, имя хоста, порт, путь, строка запроса и хэш. В табл. 2 перечислены параметры URL с их описанием.

Табл. 2. Параметры URL
ПараметрОписаниеПример
протоколСетевой протокол. Для гипертекстовых документов это HTTP.http://
https://
имя хостаАдрес сайта.htmlbook.ru
www.google.com
портСистемный ресурс, выделяемый веб-серверу. По умолчанию имеет значение 80, его можно не указывать.:80
путьПуть к документу на сайте./open/doc.html
строка запросаСтрока, в которой передаются параметры GET-запроса со значениями. Пишется после знака вопроса (?).?name=vasya
хэшСтрока после знака решётки (#).#top

В зависимости от наличия тех или иных параметров различают абсолютные и относительные адреса. Абсолютный адрес содержит порт и имя хоста, относительный — путь к документу. Строка запроса и хэш допустимо добавлять к адресу любого типа. Если URL содержит только хэш, то в текущем документе произойдёт переход к элементу, у которого задано. Решётка в атрибуте id в таком случае не пишется.

На URL влияет элемент <base> с атрибутом href, адрес документа с его учётом может оказаться другим, чем тот, что задан явно.

Вопросы для проверки

1. Коля написал ошибочное число в следующем коде, но валидатор не выдал никакой ошибки. Почему?

<input value=»36FG»>

2. Даша использовала число 12g5 в строке

<input type=»number» value=»12g5″>

Но браузер Chrome не показал никакого результата. Почему?

3. Сколько способов есть в HTML чтобы задать оранжевый цвет?

4. Адрес ссылки имеет следующий код. Но на странице нет элемента с идентификатором local. Что произойдёт, если щёлкнуть по такой ссылке?

<a href=»#local»>ссылка</a>

Ввод чисел | WebReference

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

Рис. 1. Вид поля для ввода чисел

Синтаксис создания такого поля следующий:

<input type="number" атрибуты>

Допустимые атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля с числом
АтрибутОписание
minМинимальное значение.
maxМаксимальное значение.
sizeШирина поля.
stepШаг приращения числа. Может быть как целым (2), так и дробным (0.2).
nameИмя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
valueНачальное число, которое выводится в поле.

Для ограничения введённого числа предназначены атрибуты min и max, они могут принимать отрицательное и положительное значение. При достижении верхнего или нижнего порога стрелки в поле в зависимости от браузера блокируются или не дают никакого эффекта (пример 1). Несмотря на такие запреты, в любом случае в поле самостоятельно можно вводить любые значения, включая текст. Атрибуты min и max работают только при использовании стрелок в поле.

Пример 1. Ограничение ввода чисел

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ввод числа</title>
</head>
<body>
<form action=»handler.php»>
<p>Введите число от 1 до 10:</p>
<p><input type=»number» size=»3″ name=»num» min=»1″ max=»10″ value=»1″></p>
</form>
</body>
</html>

Если значение min превышает max, то атрибут min игнорируется.

Атрибут step задаёт шаг приращения и по умолчанию равен 1. В то же время значение может быть и дробным числом, как показано в примере 2.

Пример 2. Шаг приращения

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ввод числа</title>
</head>
<body>
<form action=»handler.php»>
<p>Укажите нормальную среднюю температуру человека:</p>
<p><input type=»number» name=»t» value=»35″ min=»35″ max=»40″ step=»0.2″></p>
</form>
</body>
</html>

Результат примера продемонстрирован на рис. 2.

Рис. 2. Ввод дробных чисел в поле

Internet Explorer не поддерживают поле для ввода чисел и в нём оно приобретает вид обычного текстового поля.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Атрибут max тега | HTML справочник

HTML тег <input>

Значение и применение

Атрибут max (HTML тега <input>) определяет максимальное значение для элемента (значение может быть как числовым, так и в виде даты).

Используйте атрибут max вместе с атрибутом min (минимальное значение для элемента), чтобы создать диапазон допустимых значений.

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

Обратите внимание на то, что в настоящее время не все браузеры поддерживают следующие типы (атрибут type) элемента <input>:

Синтаксис:

<input max = "number | date">

Значения атрибута

ЗначениеОписание
numberУказывает максимальное допустимое числовое значение.
dateУказывает максимальное допустимое значение даты.

Отличия HTML 4.01 от HTML 5

Атрибут max считается новым в HTML 5.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибутов min и max HTML тега <input></title>
	</head>
	<body>
		<form> <!-- создаем форму -->
			<label>Туда (от 1 по 10 января 2018): <input type = "date" name = "tudy" min = "2018-01-01" max = "2018-01-10"></label><br> <!-- элемент управления для ввода даты -->
			<label>Обратно (от 11 по 20 февраля 2018): <input type = "date" name = "syudy" min = "2018-02-11" max = "2018-02-20"></label><br> <!-- элемент управления для ввода даты -->
			<label>Трезвых пассажиров (от 1 до 5):  <input type = "number" name = "alcoFree" min = "1" max = "5"></label><br><br> <!-- элемент управления для ввода числового значения -->
			<input type = "submit" value = "отправить" formaction = "script.php"> <!-- элемент управления для отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>).
Внутри формы мы поместили два элемента управления <input>, которые позволяют установить дату, один элемент, который позволяет установить число и один элемент, который позволяет отправить нашу форму.

Для элемента с числовым типом и элемента управления для ввода даты атрибутами min и max установили диапазон допустимых значений для ввода числа, и дат.

Кроме того, для элемента, который позволяет отправить форму атрибутом formaction указали URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (script.php).

Результат нашего примера:

Пример использования атрибутов min и max HTML тега <input>HTML тег <input>

Атрибут min тега | HTML справочник

HTML тег <input>

Значение и применение

Атрибут min (HTML тега <input>) определяет минимальное значение для элемента (значение может быть как числовым, так и в виде даты).

Используйте атрибут min вместе с атрибутом max (максимальное значение для элемента), чтобы создать диапазон допустимых значений.

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

Обратите внимание на то, что в настоящее время не все браузеры поддерживают следующие типы (атрибут type) элемента <input>:

Синтаксис:

<input min = "number | date">

Значения атрибута

ЗначениеОписание
numberУказывает минимальное допустимое числовое значение.
dateУказывает минимальное допустимое значение даты.

Отличия HTML 4.01 от HTML 5

Атрибут min считается новым в HTML 5.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибутов min и max HTML тега <input></title>
	</head>
	<body>
		<form> <!-- создаем форму -->
			<label>Туда (от 1 по 10 января 2018): <input type = "date" name = "tudy" min = "2018-01-01" max = "2018-01-10"></label><br> <!-- элемент управления для ввода даты -->
			<label>Обратно (от 11 по 20 февраля 2018): <input type = "date" name = "syudy" min = "2018-02-11" max = "2018-02-20"></label><br> <!-- элемент управления для ввода даты -->
			<label>Трезвых пассажиров (от 1 до 5):  <input type = "number" name = "alcoFree" min = "1" max = "5"></label><br><br> <!-- элемент управления для ввода числового значения -->
			<input type = "submit" value = "отправить" formaction = "script.php"> <!-- элемент управления для отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>).
Внутри формы мы поместили два элемента управления <input>, которые позволяют установить дату, один элемент, который позволяет установить число и один элемент, который позволяет отправить нашу форму.

Для элемента с числовым типом и элемента управления для ввода даты атрибутами min и max установили диапазон допустимых значений для ввода числа, и дат.

Кроме того, для элемента, который позволяет отправить форму атрибутом formaction указали URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (script.php).

Результат нашего примера:

Пример использования атрибутов min и max HTML тега <input>HTML тег <input>

html — type = «number» min и max атрибуты

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

Загрузка…

.

Макс. Ввод HTML Атрибут

❮ HTML тег

Пример

Использование атрибутов min и max:



Попробуй сам »

Определение и использование

Атрибут max указывает максимальное значение для элемента .

Совет: Используйте атрибут max вместе с min
атрибут для создания диапазона допустимых значений.

Примечание: Атрибуты max и min работают со следующими
типы ввода: число, диапазон, дата, местное время, месяц, время и неделя.

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает атрибут.

Атрибут
макс 5.0 10,0 16,0 5,1 10,6

Синтаксис

Значения атрибутов

Значение Описание
номер Задает максимально допустимое значение.
дата Задает максимально допустимую дату.

❮ HTML тег

.

HTML-атрибутов ввода

В этой главе описываются различные атрибуты элемента HTML .

Значение Атрибут

Атрибут input value определяет начальное значение для поля ввода:

Пример

Поля ввода с начальными (по умолчанию) значениями:


Попробуй сам »

Атрибут только для чтения

Атрибут input readonly указывает, что поле ввода доступно только для чтения.

Поле ввода только для чтения не может быть изменено (однако пользователь может перейти к нему, выделить его и скопировать из него текст).

Значение поля ввода только для чтения будет отправлено при отправке формы!

Пример

Поле ввода только для чтения:


Попробуй сам »

Атрибут отключен

Атрибут input disabled указывает, что поле ввода должно быть отключено.

Отключенное поле ввода невозможно использовать и неактивно.

Значение отключенного поля ввода не будет отправлено при отправке формы!

Пример

Поле ввода отключено:


Попробуй сам »

Размер Атрибут

Входной атрибут size определяет
видимая ширина поля ввода в символах.

Значение по умолчанию для размера — 20.

Примечание: Атрибут размера
работает со следующими типами ввода: текст, поиск, тел., URL-адрес, электронная почта и
пароль.

Пример

Установите ширину поля ввода:


Попробуй сам "

Атрибут maxlength

Атрибут input maxlength определяет максимальное количество символов, разрешенное в поле ввода.

Примечание: Если установлена ​​максимальная длина , поле ввода не будет принимать больше, чем
указанное количество символов. Однако этот атрибут не обеспечивает обратной связи.
Итак, если вы хотите предупредить пользователя,
вы должны написать код JavaScript.

Пример

Установите максимальную длину поля ввода:


Попробуй сам "

Атрибуты min и max

Атрибуты input min и max задают минимальное и максимальное значения для
поле ввода.

Атрибуты мин. и макс. работают со следующими типами ввода: число, диапазон, дата, локальная дата и время, месяц, время и неделя.

Совет: Используйте атрибуты max и min вместе, чтобы создать
диапазон допустимых значений.

Пример

Установите максимальную дату, минимальную дату и диапазон допустимых значений:

Введите дату до
1980-01-01:




Попробуй сам "

Множественный атрибут

Атрибут input multiple указывает, что пользователю разрешено вводить более одного значения в
поле ввода.

Атрибут множественный работает со следующими типами ввода: электронная почта и файл.

Пример

Поле загрузки файла, которое принимает несколько значений:



Попробуй сам "

Атрибут шаблона

Входной шаблон атрибут определяет регулярное выражение, которое
значение поля ввода проверяется при отправке формы.

Атрибут шаблона работает со следующими типами ввода: текст,
дата, поиск, адрес, телефон, электронная почта и пароль.

Совет: Используйте глобальный атрибут заголовка, чтобы описать шаблон, чтобы помочь пользователю.

Совет: Узнайте больше о регулярных выражениях в нашем руководстве по JavaScript.

Пример

Поле ввода, которое может содержать только три буквы (без цифр или специальных
символов):


pattern = "[A-Za-z] {3}" title = "Трехбуквенный код страны">

Попробуй сам "

Атрибут заполнителя

Входной атрибут заполнитель указывает
краткая подсказка, описывающая ожидаемое значение поля ввода (примерное значение или краткое описание
ожидаемый формат).

Короткая подсказка отображается в поле ввода перед тем, как пользователь вводит
ценность.

Атрибут заполнителя работает со следующими типами ввода: текст, поиск, URL-адрес, тел., Электронная почта и пароль.

Пример

Поле ввода с текстом заполнителя:


placeholder = "123-45-678"
pattern = "[0-9] {3} - [0-9] {2} - [0-9] {3}">

Попробуй сам "

Обязательный атрибут

Входной атрибут required указывает, что поле ввода должно быть заполнено перед отправкой формы.

Требуемый атрибут работает со следующими типами ввода: текст, поиск, URL-адрес, тел., Электронная почта, пароль, средства выбора даты, число, флажок, радио и файл.

Пример

Обязательное поле ввода:



Попробуй сам "

Атрибут шага

Входной атрибут step задает допустимые интервалы номеров для
поле ввода.

Пример: если step = "3", допустимые номера могут быть -3, 0, 3, 6 и т. Д.

Совет: Этот атрибут можно использовать вместе с атрибутами max и min для создания диапазона допустимых значений.

Атрибут step работает со следующими типами ввода: число, диапазон, дата, местная дата и время, месяц, время и неделя.

Пример

Поле ввода с указанными допустимыми интервалами номеров:



Попробуй сам "

Примечание: Ограничения ввода не надежны, и JavaScript предоставляет множество способов
добавить недопустимый ввод.Чтобы безопасно ограничить ввод, он также должен быть проверен получателем.
(сервер)!

Атрибут автофокуса

Входной атрибут autofocus указывает, что
поле ввода должно автоматически получать фокус при загрузке страницы.

Пример

Пусть поле ввода "Имя" автоматически получает фокус при загрузке страницы:


Попробуй сам "

Атрибуты высоты и ширины

Атрибуты input height и width задают высоту и ширину элемент.

Совет: Всегда указывайте атрибуты высоты и ширины для
изображений. Если заданы высота и ширина, пространство, необходимое для изображения, равно
зарезервировано, когда страница загружается. Без этих атрибутов браузер не
знать размер изображения и не может зарезервировать для него подходящее место. В
эффект будет заключаться в том, что макет страницы изменится во время загрузки (пока изображения
нагрузка).

Пример

Определите изображение как кнопку отправки с атрибутами высоты и ширины:





Попробуй сам "

Атрибут списка

Входной список Атрибут относится к элементу , который содержит предварительно определенные параметры для элемента .

Пример

Элемент с предопределенными значениями в :



Попробуй сам "

Атрибут автозаполнения

Атрибут input autocomplete указывает, будет ли форма или
в поле ввода должно быть включено или выключено автозаполнение.

Автозаполнение позволяет браузеру предсказать значение. Когда пользователь начинает
введите поле, браузер должен отображать параметры для заполнения поля на основе
по ранее набранным значениям.

Атрибут автозаполнения работает с

и
следующие типов: текст, поиск, URL-адрес, тел., электронная почта, пароль, датпикеры, диапазон и цвет.

Пример

HTML-форма с включенным и выключенным автозаполнением для одного поля ввода:





Попробуй сам "

Совет: В некоторых браузерах вам может потребоваться активировать
функция автозаполнения, чтобы это работало (см. "Настройки" в
меню браузера).

Упражнения HTML

Проверьте себя с помощью упражнений

Задание:

В поле ввода ниже добавьте заполнитель с надписью «Ваше имя здесь».




Отправить ответ »

Начало упражнения

HTML-форма и элементы ввода

Тег Описание
<форма> Определяет HTML-форму для пользовательского ввода
<вход> Определяет элемент управления вводом

.

No related posts.

Share :

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *