Html тег
Содержание:
- Обнаружение изменений при вводе текста
- Input Cards
- Header
- Colored Labels
- Rounded Borders
- Borderless Input
- Input Form
- Hoverable inputs
- Animated Inputs
- Select Options
- Form Elements in a Grid
- Grid with Labels
- Описание работы
- Удаление желтого фона при автозаполнении полей
- The problem with pattern
- Значение атрибута type: tel
- Input Type Submit
- Телефонные номера
- HTML Tags
- Поля поиска
- Значение атрибута type: url
- Преобразование вводимые данные
- Атрибуты
- Тип ввода «date»
- Несколько необычных атрибутов элемента
- Значения атрибута type¶
- Как добавить стиль к тегу <input> ?
- HTML тег
- Ползунки
- Attribute Values
- Тип ввода «submit»
Обнаружение изменений при вводе текста
Атрибут у поля формы позволяет использовать CSS-правило . Тогда только с помощью CSS и без Javascript, можно легко определить, есть ли в значение. Когда значение атрибута текстового должно быть видимым, в текстовом поле (из примера кода выше) будет показываться прозрачный пробел. Если браузер показывает содержимое из , точно известно, что у нет значения, т.е. поле не заполнено.
После ввода в текстовое поле текста браузер автоматически скрывает его . Это не будет заметно, поскольку в нём используется прозрачный пробел. Зато технически теперь у текстового поля есть значение, а браузер переключил отображаемое состояние подсказки (). Это состояние позволяет CSS управлять другими элементами в зависимости от того, есть ли в текстовом поле какое-нибудь значение или нет.
Как работает CSS-правило
Для того, чтобы добавить эффектный прыжок подсказки из поля наружу, нужны следующие условия:
- Фокус помещён в текстовом поле
- У есть какое-то значение. Это рассмотренный выше случай, когда скрывается .
Вот как написать эти условия в CSS:
Фрагмент CSS устанавливает стиль подписи-метки в зависимости от состояния текстового поля. Селектор — это то, что соединяет и следующий после него в HTML-коде и расположенный на том же уровне. Когда это CSS-правило становится активным, подпись к полю меняет свой внешний вид: перемещается и масштабируется. Т.е. покидает поле ввода и не мешает пользователю печатать в нём.
Чтобы оживить переход состояния метки, можно добавить такой переход.
Лучше этот переход разделить на два и таким образом выделять метку, когда фокус переместится в поле ввода текста. Всегда полезно дать пользователю визуальную подсказку о том, где находятся курсор и фокус. Курсор во многих случаях слишком тонкий, поэтому уделить больше внимания тому факту, что фокус перемещен в поле для ввода не повредит.
Input Cards
Header
Example
<div class=»w3-card-4″><div class=»w3-container
w3-green»> <h2>Header</h2></div><form class=»w3-container»><label>First Name</label><input class=»w3-input»
type=»text»>
<label>Last Name</label><input class=»w3-input»
type=»text»></form></div>
Colored Labels
Use any of the w3-text-color classes to color your labels:
Example
<form class=»w3-container»><label
class=»w3-text-blue»><b>First Name</b></label>
<input class=»w3-input w3-border» type=»text»>
<label
class=»w3-text-blue»><b>Last Name</b></label>
<input class=»w3-input w3-border» type=»text»><button class=»w3-btn
w3-blue»>Register</button> </form>
Add the w3-border class to create bordered inputs:
Example
<input class=»w3-input w3-border»
type=»text»>
Rounded Borders
Use any of the w3-round classes to create rounded borders:
Example
<input class=»w3-input w3-border w3-round»
type=»text»><input class=»w3-input w3-border
w3-round-large»
type=»text»>
Borderless Input
The w3-input class has a bottom border by default. If you want a borderless input, add the w3-border-0 class:
Example
<form class=»w3-container w3-light-grey»> <label>First
Name</label> <input class=»w3-input w3-border-0″ type=»text»> <label>Last Name</label> <input class=»w3-input
w3-border-0″ type=»text»></form>
Input Form
Example
<div class=»w3-container w3-teal»> <h2>Input Form</h2></div><form class=»w3-container»> <label class=»w3-text-teal»><b>First Name</b></label>
<input class=»w3-input w3-border w3-light-grey» type=»text»> <label class=»w3-text-teal»><b>Last Name</b></label>
<input class=»w3-input w3-border w3-light-grey» type=»text»> <button class=»w3-btn w3-blue-grey»>Register</button></form>
Hoverable inputs
The w3-hover-color classes adds a background color to the input field on mouse-over:
Example
<input class=»w3-input w3-hover-green» type=»text»><input class=»w3-input
w3-border w3-hover-red» type=»text»><input class=»w3-input
w3-border w3-hover-blue» type=»text»>
Animated Inputs
The w3-animate-input class transforms the width of an input field to 100% when it gets focus:
Example
<input class=»w3-input w3-animate-input»
type=»text» style=»width:30%»>
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
<select class=»w3-select w3-border» name=»option»>
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
<div class=»w3-row-padding»> <div class=»w3-third»>
<input class=»w3-input w3-border» type=»text» placeholder=»One»>
</div> <div class=»w3-third»> <input
class=»w3-input w3-border» type=»text» placeholder=»Two»> </div>
<div class=»w3-third»> <input class=»w3-input
w3-border» type=»text» placeholder=»Three»> </div></div>
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 ❯
Описание работы
Плейсхолдер
Если из названия не очевидно, как заполнять поле, используйте плейсхолдер – подсказку, которая отображается внутри поля, пока оно не заполнено.
Плейсхолдер (от английского placeholder) — местозаполнитель. Часто используют синоним «ватермарк», но плейсхолдер — более правильное название, т.к. совпадает с соответствующим атрибутом тегов input и textarea.
При получении полем фокуса плейсхолдер становится светлее, при вводе первого символа исчезает.
Плейсхолдер не должен подсказывать конкретное значение, которое нужно ввести в поле.
Если поле вычисляемое и вы рассчитали значение — используйте автополе:
Если вы предполагаете значение — предзаполните поле, пользователь сможет его отредактировать:
Не используйте плейсхолдер для указания формата структурированных значений. Для этого есть поле с маской.
Помещать название поля в плейсхолдер можно в исключительных случаях: когда нужно сэкономить место, или предназначение поля очевидно:
Не используйте плейсхолдер для указания названий полей во всей форме. В заполненном состоянии такая форма становится «слепой»:
Очистка поля
Если пользователю нужно часто очищать поле и вводить новое значение — используйте для этого специальную кнопку-крестик.
Крестик показывается, когда в поле введен хотя бы 1 символ. Крестик показывается даже когда фокус находится вне поля.
При клике на крестик фокус переходит в поле, введенное значение стирается:
Для иконки используется символ из шрифта Kontur Iconic. При наведении иконка становится темнее:
Область для нажатия по высоте равна полю ввода, по ширине 28 px:
Internet Explorer 10 рисует свой крестик для любого поля ввода в фокусе. Чтобы этот крестик не перекрывал нашу иконку, нужно дописать стиль:
Счетчик количества введенных символов
Счетчик введенных символов в обычном инпуте работает так же, как и в многострочном поле. Располагается справа, на той же строке, что и вводимый текст:
Не реализовано в библиотеке React UI — #2208
Смотрите подробное описание работы счетчика в гайде по .
Удаление желтого фона при автозаполнении полей
В Webkit после автозаполнения (как правило, форм с логином и паролем) поля приобретают желтый фон и черный цвет текста, которые добавляются непосредственно стилями браузера:
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
Переопределить данные правила невозможно, поэтому в качестве решения по удалению фона и указанию другого цвета текста предлагается сочетание свойств и :
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 10em white inset !important;
-webkit-text-fill-color: yellow !important;
}
Однако это решение не сработает, если у поля изначально задано фоновое изображение, градиент или полностью прозрачный фон и их необходимо сохранить. В подобной ситуации следует воспользоваться анимацией:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-animation: autofill 0s forwards;
}
@-webkit-keyframes autofill {
100% {
background: transparent;
color: inherit;
}
}
The problem with pattern
The attribute is wonderful because it lets you accept a regular expression. This regular expression lets you validate the input with anything you can think of.
But… the regular expression must match the text completely. If the text doesn’t get matched completely, the input gets invalidated.
This created the problem I mentioned above. (Reminder of the problem: If a user enters a whitespace first, the input becomes invalid).
I couldn’t find a regular expression that worked for all use-cases that I thought of. If you want to try your hand at creating a regular expression that I need, I’d be more than welcome to receive the help!
Here are the use-cases:
(Then again, I might be overthinking it… ).
Значение атрибута 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
Создает кнопку, которая очищает поля формы от введенных пользователем данных:
search
Создает поле поиска, по умолчанию поле ввода имеет прямоугольную форму:
Поиск:
submit
Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее на сервер обработчику:
text
Создает однострочное поле ввода текста:
time
Допускает ввод значений в 24-часовом формате, например 17:30. Браузеры отображают его как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускают ввод только значений времени:
Выберите время:
url
Заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса:
Главная страница:
week
Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:
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
<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»></form>
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
<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»></form>
Телефонные номера
Тип данных tel применяется с целью обозначения полей для ввода телефонных номеров, которые могут быть представлены в самых разных форматах. В одних случаях используются только цифры, в других применяются пробелы, тире, знак «плюс» и круглые скобки. Возможно, это отсутствие единого формата и есть причина того, что стандарт HTML5 не требует от браузеров выполнения проверки телефонных номеров. Вместе с тем, не понятно, почему поле типа tel не отклоняет по крайней мере, буквы.
В настоящее время единственная польза от применения поля типа tel состоит в предоставлении специализированной виртуальной клавиатуры для ввода телефонных номеров на мобильных браузерах, которая содержит цифры, но не буквы.
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>
Поля поиска
Тип search применяется для полей поиска. Они обычно предназначены для ввода ключевых слов, по которым потом выполняется какой-либо вид поиска. Это может быть поиск по всему Интернету (как в Google), поиск по одной странице или же специальная поисковая процедура, которая исследует каталог информации. В любом случае поле поиска выглядит и ведет себя почти точно так же, как и обычное текстовое поле.
В некоторых браузерах, например Safari, поле поиска выглядит слегка по-другому и имеет скругленные углы. Кроме этого, когда пользователь начинает вводить данные в поле поиска в браузере Safari или Chrome, с правой стороны поля выводится небольшой значок в виде X, щелкнув по которому можно очистить поле.
За исключением этих незначительных различий, поле поиска является ничем иным, как обычным текстовым полем. Основная разница заключается в семантике. Иными словами, тип данных search используется для того, чтобы сделать ясным название поля для браузеров и вспомогательных программ для пользователей с ограниченными возможностями. Они могут направлять посетителей в требуемое место страницы или предоставлять другие, более интеллектуальные услуги — возможно в будущем.
Значение атрибута type: url
Элемент <input> типа url адаптирован для ввода URL-адресов, например адреса какой-либо страницы во всемирной паутине. Строка <input type=»url»> заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. При использовании поля ввода на устройствах с сенсорными экранами, внешний вид встроенной виртуальной клавиатуры будет оптимизирован для отображения символов, наиболее часто встречающихся в URL-дpecax.
Атрибуты для элемента <input> типа url совпадают с текстовым полем (<input type=»text»>).
Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса. Далее приведен пример кода, включающего атрибут placeholder (с англ. — заполнитель), значение которого в виде подсказки будет по умолчанию отображаться, пока поле ввода URL-адреса не получит фокус:
Преобразование вводимые данные
Данные, введенные пользователем, попадают в программу в виде строки, поэтому и работать с ними можно так же, как и со строкой. Если требуется организовать ввод цифр, то строку можно преобразовать в нужный формат с помощью функций явного преобразования типов.
️ Важно: если вы решили преобразовать строку в число, но при этом ввели строку (например: test), возникнет ошибка:
На практике такие ошибки нужно обрабатывать через . В примере ниже пользователь будет вводить данные до тех пор, пока они успешно не преобразуются в число.
Input() → int
Для преобразования в целое число используйте функцию . В качестве аргумента передаются данные которые нужно преобразовать, а на выходе получаем целое число:
То же самое можно сделать в одну строку: .
Input() → list (список)
Если в программу вводится информация, которая разделяется пробелами, например, «1 word meow», то ее легко преобразовать в список с помощью метода . Он разбивает введенные строки по пробелам и создает список:
Обратите внимание, что каждый элемент списка является строкой. Для преобразования в число, можно использовать и цикл Например, так:
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| accept |
file_extension audio/* video/* image/*media_type |
Задает фильтр для типов файлов, которые пользователь может выбрать в диалоговом окне ввода файла (только для type=»file») |
| align | left right top middle bottom |
Не поддерживается в HTML5. Определяет выравнивание входного изображения (только для type=»image») |
| alt | text | Определяет альтернативный текст для изображений (только для type=»image») |
| autocomplete | on off |
Указывает, должно ли в элементе <input> быть включено автозаполнение |
| autofocus | autofocus | Указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы |
| checked | checked | Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type=»checkbox» или type=»radio») |
| dirname | inputname.dir | Указывает, что направление текста будет отправлено |
| disabled | disabled | Указывает, что элемент <input> должен быть отключен |
| form | form_id | Определяет форму, к которой принадлежит элемент <input> |
| formaction | URL | Указывает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы (для type=»submit» и type=»image») |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Определяет, как данные формы должны быть закодированы при отправке их на сервер (для type=»submit» and type=»image») |
| formmethod | getpost | Определяет метод HTTP для отправки данных на URL действия (для type=»submit» и type=»image») |
| formnovalidate | formnovalidate | Определяет, что элементы формы не должны проверяться при отправке |
| formtarget | _blank _self _parent _topframename |
Указывает, где отображать ответ, полученный после отправки формы (для type=»submit» и type=»image») |
| height | pixels | Определяет высоту элемента <input> (только для type=»image») |
| list | datalist_id | Относится к элементу <datalist> который содержит предопределенные параметры для элемента <input> |
| max | number date |
Определяет максимальное значение для элемента <input> |
| maxlength | number | Задает максимально допустимое количество символов в элементе <input> |
| min | number date |
Определяет минимальное значение для элемента <input> |
| multiple | multiple | Указывает, что пользователь может ввести более одного значения в элементе <input> |
| name | text | Определяет имя элемента <input> |
| pattern | regexp | Определяет регулярное выражение, с которым проверяется значение элемента <input> |
| placeholder | text | Указывает краткую подсказку, которая описывает ожидаемое значение элемента <input> |
| readonly | readonly | Указывает, что поле ввода доступно только для чтения |
| required | required | Указывает, что поле ввода должно быть заполнено перед отправкой формы |
| size | number | Определяет ширину в символах элемента <input> |
| src | URL | Указывает URL-адрес изображения, которое будет использоваться в качестве кнопки отправки (только для type=»image») |
| step | numberany | Определяет интервал между юридическими числами в поле ввода |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Определяет type элемента <input> для отображения |
| value | text | Определяет значение элемента <input> |
| width | pixels | Определяет ширину элемента <input> (только для type=»image») |
Тип ввода «date»
используется для полей ввода, которые должны содержать дату.
В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.
Пример
<form> <label for=»birthday»>День рождения:</label> <input
type=»date» id=»birthday» name=»birthday»></form>
Вы также можете использовать атрибуты и для добавления ограничений к датам:
Пример
<form> <label for=»datemax»>Введите дату до 1980-01-01:</label>
<input type=»date» id=»datemax» name=»datemax» max=»1979-12-31″><br><br>
<label for=»datemin»>Введите дату после 2000-01-01:</label>
<input type=»date» id=»datemin» name=»datemin»
min=»2000-01-02″></form>
Несколько необычных атрибутов элемента
Стандарт HTML5 признает еще несколько атрибутов, используемых для управления браузером при заполнении форм. Не все эти атрибуты поддерживаются всеми браузерами. Тем не менее, с ними хорошо экспериментировать:
- Атрибут spellcheck
-
Некоторые браузеры пытаются заполнить пробелы в знаниях правописания пользователя, проверяя орфографию вводимого текста. Очевидная проблема с этой услугой заключается в том, что не весь текст состоит из настоящих слов, и роспись волнистых красных подчеркиваний может очень быстро начать действовать пользователю на нервы. Чтобы браузер не проверял орфографию текста в поле, присвойте атрибуту spellcheck значение false, а для проверки — значение true.
По умолчанию разные браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению.
- Атрибут autocomplete
-
Некоторые браузеры пытаются сэкономить время пользователя, предлагая при вводе информации в поле значения, которые вводились в это поле ранее. Такое поведение не всегда желательно — как указывается в спецификации HTML5, некоторая информация может быть конфиденциальной (например, коды для запуска ядерных ракет 😉 или оставаться актуальной только непродолжительное время (например, одноразовый пароль входа в банковскую систему самообслуживания). Для таких полей установите значение атрибута autocomplete в off, чтобы браузер не предлагал возможных вариантов завершения вводимого в поле текста. А чтобы выполнять автозаполнение для определенного поля, установите значение его атрибута autocomplete в on.
- Атрибуты autocorrect и autocapitalize
-
Эти атрибуты применяются для управления возможностями автоматического исправления и капитализации на некоторых мобильных браузерах, а именно в версиях Safari для iPad и iPhone
- Атрибут multiple
Значения атрибута type¶
| Значение | Описание |
|---|---|
| button | Определяет активную кнопку. |
| checkbox | Устанавливают флажки (пользователь может выбрать более одного варианта из предложенных). |
| color | Определяет палитру цветов (пользователь может выбрать значения цветов в шестнадцатеричном формате). |
| date | Задает поле для ввода календарной даты. |
| datetime | Задает поле для ввода даты и времени. |
| datetime-local | Задает поле для ввода даты и времени без часового пояса. |
| Задает поле для ввода адреса электронной почты. | |
| file | Задает элемент управления с кнопкой «Обзор», нажав на которую можно выбрать и загрузить файл. |
| hidden | Определяет скрытое поле ввода. Пользователю оно не видно. |
| image | Указывает, что вместо кнопки для отправки данных на сервер используется изображение. Путь к изображению указывается атрибутом src. Также могут быть использованы атрибут alt для указания альтернативного текста, атрибуты heigh и width для указания высоты и ширины изображения. |
| month | Определяет поле для выбора месяца, после чего данные будут вводиться в виде год-месяц (например: 2018-07). |
| number | Определяет поле для ввода чисел. |
| password | Определяет поле для ввода пароля (вводимые символы отображаются звездочками, точками или другими знаками). |
| radio | Создает радио-кнопки (при выборе одной радио-кнопки все остальные становятся неактивными) |
| range | Создает ползунок для выбора чисел в указанном диапазоне. По умолчанию диапазон — от 0 до 100. Диапазон чисел задается атрибутами min и max. |
| reset | Определяет кнопку для сброса информации. |
| search | Создает текстовое поле для поиска. |
| submit | Создает кнопку отправки данных формы (кнопка”отправить”). |
| text | Создает однострочное текстовое поле. |
| time | Определяет числовое поле для ввода времени в 24-часовом формате (например, 13:45). |
| url | Создает поле для ввода URL. |
| week | Создает поле для выбора недели, после чего данные вводятся в формате год-неделя (например: 2018-W25). |
Как добавить стиль к тегу <input> ?
Цвет текста внутри тега <input>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <input>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <input>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
HTML тег
Все элементы тега форм создаются с помощью тега <input>.
Синтаксис <input>
Первое на что стоит обратить внимание, что тег не нужен закрывающий тег. У поля есть два самых важных параметра, которые я вынес в обязательные, это name и type
- name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
-
type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
- text — текстовое поле. Одно из самых часто используемых значений
- password — текстовое поле, но с той особенностью, что при вводе символы скрыты
- radio — радиокнопки
- checkbox — переключатели
- submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
- reset — кнопка для очистки всей формы
- hidden — скрытое поле
- button — кнопки для обработки каких-то действий (не путать с submit!)
- file — для загрузки файлов на сервер
- image — поле с изображением (используется крайне редко)
- value=»значение» — указывается значение по умолчанию
Теперь разберем более подробно каждый элемент
Ползунки
Другим числовым типом HTML5 является range. Подобно типу number, этот тип может представлять целые и дробные значения. Также поддерживает атрибуты min и max для установки диапазона значений. Далее показан пример кода для создания поля этого типа:
Разница состоит в том, каким образом поле типа range представляет свою информацию. Вместо счетчика, как для поля типа number, интеллектуальные браузеры отображают ползунок:
Чтобы установить значение типа range, нужно просто перетянуть ползунок в требуемую позицию между минимальным и максимальным значениями. Но браузеры, поддерживающие этот тип поля, не предоставляют никакой обратной информации об установленном значении. Чтобы получить эти сведения, в разметку нужно добавить процедуру JavaScript, которая реагирует на изменения положения ползунка (возможно, посредством обработки события onChange), а потом отображает эту формацию рядом с полем.
Attribute Values
| Value | Description |
|---|---|
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| color | Defines a color picker |
| date | Defines a date control (year, month, day (no time)) |
| datetime-local | Defines a date and time control (year, month, day, time (no timezone) |
| Defines a field for an e-mail address | |
| file | Defines a file-select field and a «Browse» button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| month | Defines a month and year control (no timezone) |
| number | Defines a field for entering a number |
| password | Defines a password field |
| radio | Defines a radio button |
| range | Defines a range control (like a slider control) |
| reset | Defines a reset button |
| search | Defines a text field for entering a search string |
| submit | Defines a submit button |
| tel | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field |
| time | Defines a control for entering a time (no timezone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no timezone) |
Тип ввода «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>
