Html tag: input

Числа

В HTML5 определяются два числовых типа данных. Тип number предназначен для обычных чисел.

Этот тип данных имеет очевидный потенциал. Обычные текстовые поля принимают буквально все: цифры, буквы, пробелы, знаки пунктуации и т.п. По этой причине одна из самых распространенных задач проверки — убедиться, что значение является числом в определенном диапазоне. Но при вводе данных в поле типа number браузер автоматически игнорирует все символы, кроме цифр. Далее показан пример кода для создания поля этого типа:

Конечно же, есть много чисел, которые не подходят для каждого типа числовых данных. Например, в приведенной выше разметке разрешается возраст наподобие 43 000 или -6 лет, что несколько не соответствует реальности. Эта проблема решается с помощью атрибутов min и max. В следующем коде представлен пример ограничения возраста разумным диапазоном:

Обычно поля типа number принимают только целые числа, а дроби, например 30.5 не разрешаются. (Более того, некоторые браузеры даже не позволят ввести десятичный знак.) Но это поведение также можно изменить с помощью атрибута step, который указывает шаг изменения числа (в большую или меньшую сторону). Например, установив значение step в 0.1, можно вводить такие значения, как 0.1, 0.2 0.3 и т. д. Но попробуйте отправить форму со значением 0.15 и вы получите знакомое всплывающее сообщение об ошибке. По умолчанию значение шага равно 1.

Атрибут step также влияет на работу кнопок поля со счетчиком:

Текстовые поля

Последнее обновление: 08.04.2016

Однострочное текстовое поле создается с помощью элемента input, когда его атрибут имеет значение :

<input type="text" name="login" />

С помощью ряда дополнительных атрибутов можно настроить текстовое поле:

  • dirname: устанавливает направление текста

  • maxlength: максимально допустимое количество символов в текстовом поле

  • pattern: определяет шаблон, которому должен соответствовать вводимый текст

  • placeholder: устанавливает текст, который по умолчанию отображается в текстовом поле

  • readonly: делает текстовом поле доступным только для чтения

  • required: указывает, что текстовое поле обязательно должно иметь значение

  • size: устанавливает ширину текстового поля в видимых символах

  • value: устанавливает значение по умолчанию в текстовом поле

Применим некоторые атрибуты:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Текстовые поля в HTML5</title>
	</head>
	<body>
		<form>
			<p><input type="text" name="userName" placeholder="Введите имя" size="18" /></p>
			<p><input type="text" name="userPhone" placeholder="Введите номер телефона" size="18" maxlength="11" /></p>
			<p>
				<button type="submit">Отправить</button> 
				<button type="reset">Отмена</button>
			</p>
		</form>
	</body>
</html>

В этом примере во втором текстовом поле сразу устанавливаются атрибуты и . При этом size — то есть количество
символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем
maxlength, мы не сможем.

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

В то время как
значение представляет введенный в поле текст по умолчанию:

<p><input type="text" name="userName" value="Том" /></p>
<p><input type="text" name="userPhone" placeholder="Номер телефона" /></p>

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

<p><input type="text" name="userName" value="Том" readonly /></p>
<p><input type="text" name="userPhone" value="+12345678901" disabled /></p>

Среди атрибутов текстового поля также следует отметить такой атрибут как list. Он содержит ссылку на элемент datalist,
который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Текстовые поля в HTML5</title>
	</head>
	<body>
		<form>
			<p><input list="phonesList" type="text" name="model" placeholder="Введите модель" /></p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
		<datalist id="phonesList">
			<option value="iPhone 6S" label="54000"/>
			<option value="Lumia 950">35000</option>
			<option value="Nexus 5X"/>
		</datalist>
	</body>
</html>

Атрибут текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов
определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.

Поле поиска

Для создания полей поиска предназначен элемент input с атрибутом . Формально он представляет собой простое текстовое поле:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Поиск в HTML5</title>
	</head>
	<body>
	<form>
		<input type="search" name="term" />
		<input type="submit" value="Поиск" />
	</form>
	</body>
</html>

Поле ввода пароля

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

<form>
	<p><input type="text" name="login" /></p>
	<p><input type="password" name="password" /></p>
	<input type="submit" value="Авторизация" />
</form>

НазадВперед

Textarea

Данный тег на HTML страницу выводится так:

<textarea></textarea>

по умолчанию у этого тега присутствуют некоторые параметры:

  • за правый нижний угол текстовой области можно потянуть мышкой и текстовая область будет увеличиваться
  • справа присутствует постоянная прокрутка в браузерах IE

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

textarea {
	/* = Убираем скролл */
	overflow: auto;

	/* = Убираем увеличение */
	resize: none;
	width: 300px;
	height: 50px;

	/* = Добавим фон, рамку, отступ*/
	background: #f6f6f6;
	border: 1px solid #cecece;
	border-radius: 8px 0 0 0;
	padding: 8px 0 8px 10px;
}

Теперь наше поле для ввода текста имеет привлекательный вид. Следующим этапом стилизируем переключатели radio.

Отправка файла

Для того чтобы можно было отправить на сервер файл, используется специальное поле, которое задается параметром type=fiie тега INPUT. Такой элемент формы отображается как текстовое поле, рядом с которым располагается кнопка Обзор (Browse). При нажатии на эту кнопку открывается окно для выбора файла, в котором пользователь может указать нужный файл. Код для создания поля для отправки файла показан ниже:

<form enctype="multipart/form-data" method=post>
Выбрать файл:
<input type=file size=30>
</form>

Параметр формы enctype=»multipart/form-data» нужен для корректной передачи файла. Если его не указать, то будет передан лишь путь к файлу. Дополнительные параметры те же, что и для текстового поля. Поскольку графические файлы занимают относительно большой объем данных, их следует отправлять на сервер с помощью method=post, как показано в данном примере.

(Вы можете) сделать label похожим на placeholder

Во-первых: всегда используйте настоящий элемент <label for=”correct_input”>. Игнорирование одного этого правила из соображений UX портит очень много форм. Плейсхолдер — всего лишь подсказка того, как должна выглядеть валидная информация в поле ввода, типа “введи Москва в поле под названием Город”.

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

Создадим форму…

<form action=”#0" method=”post”>   <div>     <input type=”text” id=”first_name” name=”first_name”>     <label for=”first_name”>First Name</label>   </div> <! — … — -> </form>

Используем <div> для позиционирования и размещения названия поля непосредственно поверх самого поля.

SCSSform {  max-width: 450px;  // позиционируем  > div {    position: relative;   // Похоже на плейсхолдер    > label {      opacity: 0.3;      position: absolute;      top: 0;      left: 10px;    }  }}

Вам не нужно хитро изворачиваться и беспокоиться об установке курсора в поле ввода, все уже сделано семантикой. Если пользователь нажимает на название поля — активируется поле ввода. Если нажимает на само поле — курсор устанавливается в поле ввода. Оба варианта верны.

Фишка в том, чтобы поставить поле ввода первым (семантически допустимо). Таким образом вы сможете скрывать label при фокусе:

SCSSform { /* … */  > div {    > input,    > input,    > input {      &:focus {        & + label {          opacity: 0;        }      }    }  }}

Стиль выделения ошибок

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

::grammar-error {
  color: inherit;
  background-color: #c6fbcc;
}

::spelling-error {
  color: inherit;
  background-color: #ffe5e5;
}

Указанные селекторы будут ограничены следующим набор свойств: , , , , , , и .

meter

Тег определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, определяет меру чего-либо (gauge).

Этот тег не должен использоваться в качестве индикатора прогресса.

Для обеспечения доступности совместно с рекомендуется использовать тег .

Атрибуты:

  • — текущее числовое значение между и
  • — нижняя числовая граница диапазона
  • — верхняя числовая граница диапазона
  • — верхняя числовая граница нижнего предела диапазона. Должна быть больше , но меньше и
  • — нижняя числовая граница верхнего предела диапазона
  • — оптимальное числовое значение между и . Расположение этого атрибута определяет предпочтительную часть диапазона. Например, если находится между и , значит, предпочтительным является нижний диапазон
  • — определяет элемент , с которым связан

Так можно записать уровень заряда батареи вашего устройства в значение :

Затенение символов в поле ввода

Если для поля, отличного от типа password, требуется создать маску, т. е. затенить вводимые символы, стоит прибегнуть к свойству . Оно принимает значения , , или , но, к сожалению, на сегодняшний день доступно только для Webkit с соответствующим префиксом:

input {
  -webkit-text-security: circle; /* эмуляция input */
}

Подобное затенение может понадобиться, например, для ввода номера телефона, пин-кода и прочих важных данных, которые пользователь предпочел бы скрыть от посторонних глаз.

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

Ползунки

Другим числовым типом HTML5 является range. Подобно типу number, этот тип может представлять целые и дробные значения. Также поддерживает атрибуты min и max для установки диапазона значений. Далее показан пример кода для создания поля этого типа:

Разница состоит в том, каким образом поле типа range представляет свою информацию. Вместо счетчика, как для поля типа number, интеллектуальные браузеры отображают ползунок:

Чтобы установить значение типа range, нужно просто перетянуть ползунок в требуемую позицию между минимальным и максимальным значениями. Но браузеры, поддерживающие этот тип поля, не предоставляют никакой обратной информации об установленном значении. Чтобы получить эти сведения, в разметку нужно добавить процедуру JavaScript, которая реагирует на изменения положения ползунка (возможно, посредством обработки события onChange), а потом отображает эту формацию рядом с полем.

Input

В HTML его выводят вот таким способом:

<input type="text" id="text" name="text" value="some text" />

Обязательным параметром тега input является атрибут type (тип, это может быть текст , кнопка отправки , скрытое поле , переключатель , чекбокс , загрузка файла).

Для стилизации этого тега jQuery не требуется, главное помнить, что браузеры неоднозначно работают с его высотой, поэтому высоту этого элемента стоит подбирать исходя из размера шрифта, который Вы будете использовать и чтобы слова не чёркали по рамке нужно добавлять отступ (padding)

input {
	width: 300px;
	font-size: 13px;
	padding: 6px 0 4px 10px;
	border: 1px solid #cecece;
	background: #F6F6f6;
	border-radius: 8px;
}

Иногда для Internet Explorer 8 нужно увеличить высоту на 1px, чтобы тег соответствовал дизайну, тогда в стилях нужно добавить хак для IE:

input {
	padding-bottom: 5px\0;
}

Вот и все тайны связанные с этим тегом. Дальше рассмотри тег для ввода нескольких строк текста textarea.

Другие теги в форме шпаргалок

Поля для ввода данных

Атрибуты:

  • — MIME-тип принимаемых файлов (только для ). Значения: , , , ,
  • — подпись
  • — только для или
  • — только для или
  • — только для или . Значения: , ,
  • — только для или ()
  • — отключает проверку элементов формы
  • — определяет, где отображается ответ, полученный после отправки формы (только для или ). Значения: , , , ,
  • — высота в пикселях (только для )
  • — максимальное значение (число или дата)
  • — максимальная длина строки (количество символов)
  • — минимальное значение (число или дата)
  • — минимальная длина строки (количество символов)
  • — позволяет пользователю выбирать несколько значений или отправлять несколько файлов
  • — регулярное выражение для проверки значения поля
  • — количество символов, определяющее ширину поля
  • — путь к изображению, используемому в качестве кнопки для отправки формы (только для )
  • — интервал (шаг) между и
  • — ширина поля в пикселях (только для )

Пример валидации адреса электронной почты и пароля:

Таблица

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

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Radio Button

На HTML странице радио переключатели выводятся так:

<input type="radio" id="radio1" />
<input type="radio" id="radio2" />
<input type="radio" id="radio3" />

К сожалению, стилизации с помощью CSS эти волшебные переключатели не поддаются, но есть jQuery и все будет круто. Суть моего метода очень простая: вместо тегов input я буду писать столько тегов div сколько предполагалось переключателей, плюс в них буду вносить текст с заданными значениями и будет всего лишь один скрытый input, в который будет заносится текстовое значение с нажатого div’a. теперь давайте реализуем эту идею.

Для начала создадим HTML разметку:

Выберите Ваше лучшее качество:
<div class="radioblock">
	<div class="radio">Красивый(ая)</div>
	<div class="radio">Умный(ая)</div>
	<div class="radio">Коммуникабульный(ая)</div>
	<div class="radio">Скромный(ая)</div>
	<div class="clear"></div>

	<input type="hidden" />
</div>

Теперь стили. Каждый div будет иметь фоновую картинку пустого переключателя (именно ее Вы сможете поменять на свою любимую или ту что Вам нарисует дизайнер), а если по div’у произошло событие клика то ему еще добавится класс active и сменится фоновое изображение на включенный переключатель

.radio {
	display: block;
	height: 25px;
	background-position: 0 -56px;
	coloR: #444;
	cursor: pointer;
	text-indent: 22px;
	font-size: 13px;
}
.radio.active {
	background-position: 0 -86px;
}

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

Наконец-то дошла очередь до jQuery (:

// RadioButton
$('.radioblock').find('.radio').each(function(){
	$(this).click(function(){
		// Заносим текст из нажатого дива в переменную
		var valueRadio = $(this).html();
		// Находим любой активный переключатель и убираем активность
		$(this).parent().find('.radio').removeClass('active');
		// Нажатому диву добавляем активность
		$(this).addClass('active');
		// Заносим значение объявленной переменной в атрибут скрытого инпута
		$(this).parent().find('input').val(valueRadio);
	});
});

Если посмотреть работу данного скрипта через firebug для Firefox или через средства разработки Google Chrome, то картина будет более наглядной.

Давайте займемся теперь стилизацией чекбоксов.

HTML Ссылки

HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши

HTML Теги

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Бонус: Микро разметка Open Graph для шаринга

Социальные кнопки для шаринга в соц. сетях и мессенджерах уже давно стали практически неотъемлемой частью современного интернета и сейчас редко встретишь сайт, на котором их нет. Пользователи с удовольствием делятся интересным и/или полезным контентом в своих профилях, тем самым привлекая дополнительную аудиторию.

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

По сути Open Graph это набор мета-тегов с атрибутом , в которых можно указать заголовок страницы, ее краткое описание, превью-изображение, язык, название сайта и т.д.

Хотя изначально разметка Open Graph создавалась для Facebook, сейчас ее понимают большинство соц. сетей и мессенджеров, хотя интерпретируют ее немного по-своему.

Попробуйте поделиться этой статьей в различных соц. сетях и сравните сниппеты.

В заключение хочу подытожить все вышесказанное.

Input

В HTML его выводят вот таким способом:

<input type="text" id="text" name="text" value="some text" />

Обязательным параметром тега input является атрибут type (тип, это может быть текст , кнопка отправки , скрытое поле , переключатель , чекбокс , загрузка файла).

Для стилизации этого тега jQuery не требуется, главное помнить, что браузеры неоднозначно работают с его высотой, поэтому высоту этого элемента стоит подбирать исходя из размера шрифта, который Вы будете использовать и чтобы слова не чёркали по рамке нужно добавлять отступ (padding)

input {
	width: 300px;
	font-size: 13px;
	padding: 6px 0 4px 10px;
	border: 1px solid #cecece;
	background: #F6F6f6;
	border-radius: 8px;
}

Иногда для Internet Explorer 8 нужно увеличить высоту на 1px, чтобы тег соответствовал дизайну, тогда в стилях нужно добавить хак для IE:

input {
	padding-bottom: 5px\0;
}

Вот и все тайны связанные с этим тегом. Дальше рассмотри тег для ввода нескольких строк текста textarea.

Параметр READONLY

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Когда к тегу <INPUT> добавляется параметр readonly,
контентовое поле не может изменяться пользователем, в том числе вводиться новый
контент или модифицироваться существующий. Кроме того, такое поле не может получить
фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее,
состояние и содержимое поля можно менять с помощью скриптов.

<input type=»text» readonly>

<input type=»password» readonly>

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

По умолчанию это значение выключено.

Пример 9. Поле только для чтения

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

Результат примера показан ни рис. 4.

Рис. 4. контентовое поле только для чтения

Attributes

Within an HTML tag, an attribute dictates certain aspects of an HTML element. Attributes are made up of a name and value pair; all tags support standard attributes. The following table shows all the current unique HTML attributes for the <input> tag, and a description of each.

Attribute Description
accept Designates the files types that a server accepts (only used for type=»file»).
alt Designates an alternate text for images (only used for type=»image»).
autocomplete Toggles the autocomplete function.
autofocus Designates that an <input> element should be the first thing focused when the page loads.
checked Designates that an <input> element should be pre-selected when the page loads (for type=»checkbox» or type=»radio»).
disabled Designates that the <input> element is disabled.
form Designates the form(s) of where an <input> element belongs.
formaction Designates the URL of the file that will process the submitted form data (for type=»submit» and type=»image»).
formenctype Designates how the form data should be encoded upon submission (for type=»submit» and type=»image»).
formmethod Designates the HTTP method to be used when sending data to the formaction URL (for type=»submit» and type=»image»).
formnovalidate Designates that form data should not be validated upon submission.
formtarget Designates where to display the response to submitted data (for type=»submit» and type=»image»).
height Designates the height of the <input> element.
list Points to a <datalist> element containing options for the <input> element.
max Designates the max value of an <input> element.
maxlength Designates the max number of characters allowed in an <input> element.
min Designates the minimum value of an <input> element.
multiple Designates that a user can enter multiple values in an <input> element.
name Designates a name for the <input> element.
pattern Designates a regular expression that an <input> element’s value is used to check.
placeholder Designates a message that describes the expected value of an <input> element.
readonly Designates that an <input> element is read-only.
required Designates that an input field must be filled out before form submission.
size Designates how many characters wide an <input> element is.
src Designates the URL of the image to use as a submit button.
step Designates the allowed number intervals for an input field.
type Designates the type of <input> element to display.
value Designates the value of an <input> element.
width Designates the width of an <input> element.
Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: