Изучаем тег input в html

Содержание:

Введение
Input Type Reset
- Example
HTML Reference
HTML Tags
Значение атрибута type: tel
HTML Справочник
HTML Теги
HTML Учебник
Tel
Input Type Submit
- Example
- Example
Numeric
HTML тег
Значение атрибута
Hoverable inputs
- Example
Animated Inputs
- Example
- Example
- Example
Select Options
- Example
- Example
Form Elements in a Grid
- Example
Grid with Labels
- Example
Входные ограничения
- Пример
Тип ввода «submit»
- Пример
- Пример
Input Type Date
- Example
- Example
Предопределение формата вводимых в поле данных
How to style tag?
- Common properties to alter the visual weight/emphasis/size of text in <input> tag:
- Coloring text in <input> tag:
- Text layout styles for <input> tag:
- Other properties worth looking at for <input> tag:
Пример: поле с контролем СМС
HTML Reference
HTML Tags
HTML Reference
HTML Tags

Введение

Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.

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

Стилизация формы выполняется через CSS. В этом руководстве остановимся и подробно рассмотрим различные варианты оформления её текстовых полей.

Исходные коды примеров расположены на GitHub в папке text-field проекта «ui-components».

Input Type Reset

Html урок 5. создание таблицы в html

defines a reset button
that will reset all form values to their default values:

Example

<form action=»/action_page.php»> <label for=»fname»>First
name:</label><br> <input type=»text» id=»fname» name=»fname»
value=»John»><br> <label for=»lname»>Last name:</label><br>
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br>
<input type=»submit» value=»Submit»> <input type=»reset»></form>

This is how the HTML code above will be displayed in a browser:

If you change the input values and then click the «Reset» button, the form-data will be reset to the default values.

HTML Reference

Тег link в html

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>

Значение атрибута type: tel

Элемент <input> типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Несмотря на то, что телефонный номер представляет из себя числовой формат вводимых данных, в браузерах поле типа tel ведет себя как обычное текстовое поле ввода. Однако, применение типа поля ввода tel приводит к появлению на экранах мобильных устройств специальной клавиатуры, предназначенной для облегчения ввода информации. Синтаксис поля ввода номера телефона:

Результат
HTML-код
Попробуй сам » /

Телефон:

Значение
Описание

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

checkbox
Создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вариантов:Я знаю HTML

color

Генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB:

date

Позволяет вводить дату в формате дд.мм.гггг.:
День рождения:

datetime-local

Позволяет вводить дату и время, разделенные прописной английской буквой по шаблону дд.мм.гггг чч:мм:
Дата встречи — день и время:

Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов:
E-mail:

file
Позволяет загружать файлы с компьютера пользователя:
Выберите файл:

hidden
Создает скрытый элемент, не отображаемый пользователю. Информация,
хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером.

image
Создает элемент в виде графического изображения, действующий аналогично кнопке Submit:

month

Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм:

number

Создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step:
Укажите число (от 1 до 10):

password
Текстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой либо другим, установленным браузером значком:
Введите пароль:

radio
Создает элемент-переключатель в виде небольшого кружка (иногда их называют радио-кнопками):
Радио-кнопки:

range

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

reset
Создает кнопку, которая очищает поля формы от введенных пользователем данных:

Создает поле поиска, по умолчанию поле ввода имеет прямоугольную форму:
Поиск:

submit
Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее на сервер обработчику:

text
Создает однострочное поле ввода текста:

time

Допускает ввод значений в 24-часовом формате, например 17:30. Браузеры отображают его как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускают ввод только значений времени:
Выберите время:

url

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

week

Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:

HTML Справочник

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языка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>
<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>

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML Цвет
Цвет
RGB
HEX
HSL

HTML с CSSHTML Ссылки
Ссылки
Ссылки цветные
Ссылки закладки

HTML Изображение
Изображение
Изображение карта
Изображение фон
Элемент картинки

HTML ТаблицыHTML Списки
Списки
Неупорядоченный список
Упорядоченный список
Другие списки

HTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML

Tel

Ввод телефонного номера с использованием стандартной буквенно-цифровой клавиатуры может быть затруднительным. Тут каждая числовая кнопка на телефонной клавиатуре (кроме 1 и 0) содержит три буквы (например, 2 представляет A, B и C), которые отображаются рядом с номером. Буквенно-цифровая клавиатура не ссылается на эти буквы, поэтому расшифровка телефонного номера в некоторых странах, содержащего буквы (например, 1-800-COLLECT), требует больших усилий.

Значение tel в Chrome Android (слева) и iOS 12.2 (справа)

При использовании с установленным значением , будет доступна стандартная телефонная клавиатура, включающая клавиши для цифр от 0 до 9, знак решетки () и символ звездочки (). Кроме того, будут доступны буквенные мнемонические метки ().

Input Type Submit

defines a button for
submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing
input data.

The form-handler is specified in the form’s
attribute:

Example

This is how the HTML code above will be displayed in a browser:

If you omit the submit button’s value attribute, the button will get a default text:

Example

Numeric

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

Значение numeric в Chrome Android (слева) и iOS 12.2 (справа)

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

HTML тег

Все элементы тега форм создаются с помощью тега <input>.

Синтаксис <input>

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

name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
- text — текстовое поле. Одно из самых часто используемых значений
- password — текстовое поле, но с той особенностью, что при вводе символы скрыты
- radio — радиокнопки
- checkbox — переключатели
- submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
- reset — кнопка для очистки всей формы
- hidden — скрытое поле
- button — кнопки для обработки каких-то действий (не путать с submit!)
- file — для загрузки файлов на сервер
- image — поле с изображением (используется крайне редко)
value=»значение» — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

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

Значение	Описание
button	Определяет кликабельную кнопку (в основном используется с JavaScript для активации скрипта)
checkbox	Определяет флажок
color	Определяет выбор цвета
date	Определяет элемент управления датой (год, месяц, день (без времени))
datetime-local	Определяет контроль даты и времени (год, месяц, день, время (без часового пояса)
email	Определяет поле для адреса электронной почты
file	Определяет поле выбора файла и кнопку «Обзора» (для загрузки файлов)
hidden	Определяет скрытое поле ввода
image	Определяет изображение как кнопку отправки
month	Определяет контроль месяца и года (без часового пояса)
number	Определяет поле для ввода номера
password	Определяет поле пароля
radio	Определяет переключатель
range	Определяет элемент управления диапазоном (например, ползунок)
reset	Определяет кнопку сброса
search	Определяет текстовое поле для ввода строки поиска
submit	Определяет кнопку отправки
tel	Определяет поле для ввода телефонного номера
text	По умолчанию. Определяет однострочное текстовое поле
time	Определяет элемент управления для ввода времени (без часового пояса)
url	Определяет поле для ввода URL
week	Определяет контроль недели и года (без часового пояса)

Hoverable inputs

The w3-hover-color classes adds a background color to the input field on mouse-over:

Example

Animated Inputs

The w3-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

Example

<input class=»w3-check» type=»checkbox» checked=»checked»>
<label>Milk</label><input class=»w3-check»
type=»checkbox»><label>Sugar</label>
<input class=»w3-check» type=»checkbox» disabled>
<label>Lemon (Disabled)</label>

Example

<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked>
<label>Male</label><input class=»w3-radio»
type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio»
type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>

Select Options

Example

<select class=»w3-select» name=»option»> <option value=»» disabled
selected>Choose your option</option> <option value=»1″>Option
1</option> <option value=»2″>Option 2</option> <option
value=»3″>Option 3</option></select>

Example

Form Elements in a Grid

In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
You will learn more about this later.

Example

Grid with Labels

Example

<div class=»w3-row-padding»> <div class=»w3-half»>
<label>First Name</label>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»> </div>
<div class=»w3-half»>    <label>Last
Name</label>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»> </div></div>

❮ Previous
Next ❯

Входные ограничения

Вот список некоторых распространенных ограничений ввода:

Атрибут	Описание
checked	Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio»)
disabled	Указывает, что поле ввода должно быть отключено
max	Задает максимальное значение для поля ввода
maxlength	Задает максимальное количество символов для поля ввода
min	Задает минимальное значение для поля ввода
pattern	Задает регулярное выражение для проверки входного значения
readonly	Указывает, что поле ввода доступно только для чтения (не может быть изменено)
required	Указывает, что поле ввода является обязательным (должно быть заполнено)
size	Задает ширину (в символах) поля ввода
step	Задает допустимые интервалы чисел для поля ввода
value	Задает значение по умолчанию для поля ввода

Подробнее об ограничениях на ввод данных вы узнаете в следующей главе.

В следующем примере показано числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию равно 30:

Пример

<form> <label for=»quantity»>Количество:</label> <input
type=»number» id=»quantity» name=»quantity» min=»0″ max=»100″ step=»10″
value=»30″></form>

Тип ввода «submit»

определяет кнопку для предоставление данных формы в обработчик форм.

Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.

Обработчик формы задается в окне формы атрибут :

Пример

<form action=»/action_page.php»>
<label for=»fname»>Имя:</label><br>
<input type=»text» id=»fname» name=»fname» value=»Андрей»><br>
<label for=»lname»>Фамилия:</label><br>
<input type=»text» id=»lname» name=»lname» value=»Щипунов»><br><br>
<input type=»submit» value=»Отправить»></form>

Именно так приведенный выше HTML код будет отображаться в браузере:

Если вы опустите атрибут кнопки , то кнопка получит текст по умолчанию:

Пример

<form action=»/action_page.php»> <label for=»fname»>Имя:</label><br>
<input type=»text» id=»fname» name=»fname»
value=»Андрей»><br> <label for=»lname»>Фамилия:</label><br>
<input type=»text» id=»lname» name=»lname» value=»Щипунов»><br><br>
<input type=»submit»></form>

Input Type Date

The is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example

<form> <label for=»birthday»>Birthday:</label> <input
type=»date» id=»birthday» name=»birthday»></form>

You can also use the and attributes to add restrictions to dates:

Example

<form> <label for=»datemax»>Enter a date before
1980-01-01:</label> <input type=»date» id=»datemax» name=»datemax»
max=»1979-12-31″><br><br> <label for=»datemin»>Enter a date after
2000-01-01:</label> <input type=»date» id=»datemin» name=»datemin»
min=»2000-01-02″></form>

Предопределение формата вводимых в поле данных

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

Для этих целей существует атрибут , сигнализирующий браузеру о том, клавиатуру какого именно формата использовать при вводе данных. Несмотря на большую полезность, из всех браузеров его полноценно поддерживает (включая элементы с ) только Google Chrome самых свежих версий, а Opera и Firefox — через флаги.

— запрет на отображение клавиатуры;
— текст, соответствующий языку пользователя;
— телефонный формат, содержащий цифры 0−9, знак решётки и астериска, — аналог ;
— формат URL, где присутствуют слеш, точка и элементы автозаполнения вроде «www.» или «.com», — аналог ;
— формат для электронной почты с наличием символа «собака» и точки — аналог ;
— только цифровая клавиатура — аналог ;
— цифровая клавиатура, адаптированная для ввода дробных значений с точкой или запятой;
— клавиатура, оптимизированная для поиска и, как правило, содержащая соответствующую иконку ввода.

Кроме вышеперечисленных значений браузеры так же принимают:

— дословный ввод букв и цифр, при котором, как правило, не применяется автокоррекция введённых данных, что полезно для имён пользователей или паролей;
— латинский алфавит, как правило, с предикативным вводом, служащий для взаимодействия между пользователем и компьютером (например, поиск данных);
— latin, но для ввода имён;
— latin, предназначенный для взаимодействия пользователя с другими пользователями и поэтому содержащий более широкий набор возможностей ввода (например, встроенные смайлы);
— latin-prose с добавлением дополнительных пользовательских языков;
и — служат для ввода текста на японском языке;

Для большей «пуленепробиваемости» атрибут рекомендуется применять вместе с соответствующим , который должен отражать семантически верный тип данных, и, если необходимо, , являющийся дополнительной подсказкой браузеру о том, какие данные следует считать верными:

<!-- цифровая клавиатура -->
<input type="number" inputmode="numeric" />

<!-- цифровая клавиатура (ввод десятичных дробей с разделителем-точкой и шагом в 0.1) -->
<input type="number" inputmode="decimal" min="0" value="0" step=".1" />

<!-- поиск по сайту -->
<input type="search" inputmode="search" />

<!-- имя пользователя -->
<input type="text" inputmode="latin-name" />

<!-- никнейм пользователя (латиница, цифры, до 15 символов) -->
<input type="text" inputmode="verbatim" pattern="^{1,15}$" />

<!-- чат между пользователями -->
<textarea inputmode="full-width-latin"></textarea>

<!-- пароль, содержащий разные регистры и цифру -->
<input type="password" inputmode="verbatim" pattern="^(?=.*d)(?=.*)(?=.*)(?!.*s).*$" />

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in <input> tag:

CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
CSS font-size property sets the size of the font.
CSS font-weight property defines whether the font should be bold or thick.
CSS text-transform property controls text case and capitalization.
CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <input> tag:

CSS color property describes the color of the text content and text decorations.
CSS background-color property sets the background color of an element.

Text layout styles for <input> tag:

CSS text-indent property specifies the indentation of the first line in a text block.
CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
CSS white-space property specifies how white-space inside an element is handled.
CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <input> tag:

Пример: поле с контролем СМС

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

Посмотрим, как их использовать, на примере.

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

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

Событие идеально решит задачу во всех браузерах, кроме IE9-. Собственно, если IE9- нам не нужен, то на этом можно и остановиться.

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

Что же касается IE9 – там поддерживаются и и , но они оба не работают при удалении символов. Поэтому мы будем отслеживать удаление при помощи на Delete и BackSpace . А вот удаление командой «вырезать» из меню – сможет отловить лишь .

Получается вот такая комбинация:

Здесь мы добавили вызов на все события, которые могут приводить к изменению значения. Да, иногда изменение будет обрабатываться несколько раз, но зато с гарантией. А лишние вызовы легко убрать, например, при помощи -декоратора, описанного в задаче Тормозящий (throttling) декоратор.

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

Чтобы сэкономить ресурсы браузера, мы можем начинать отслеживание по , а прекращать – по , вот так:

Обратим внимание – весь этот «танец с бубном» нужен только для поддержки IE8-, в которых не поддерживается и IE9, где не работает при удалении