Связывание текстового поля и списка осуществляется при помощи атрибута list у тега input — значение list должно быть таким же, как значение атрибута id у списка.

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

 

 

Для ввода числовых значений существует специальный тип поля ввода number. Рядом с полем браузер автоматически подставляет две стрелочки для увеличения и уменьшения числового значения.

Примерзаписи:

<input type="number">

В Chrome это выглядит так:

При помощи вспомогательных атрибутов min и max можно установить верхнюю и нижнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.

Также стоит отметить, что поле ввода числа, как и некоторые другие поля, которые будут рассмотрены дальше, по-особому ведёт себя в мобильных браузерах: например, при фокусе на такое поле появляется клавиатура, позволяющая вводить соответствующие символы.

 

 

<input type="search">

Это поле почти не отличается от обычного текстового поля. В некоторых браузерах внутри него появляется крестик для сброса введённого значения.

В Chrome это выглядит так:

 

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

Пример записи:

<input type="text" autofocus>

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

Обратите внимание, что такой атрибут должен быть только один на странице.

 

 

тип поля range.

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

Примерзаписи:

<input type="range" min="1" max="10">

В Chrome и Firefox это поле выглядит так:

Атрибуты min и max устанавливают нижнюю и верхнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.

 

Тег <output> представляет собой область, куда выводятся какие-либо результаты вычислений, обычно полученные при помощи JavaScript.

Пример записи:

<output name="sum">[значение по умолчанию]</output>

Значение по умолчанию при этом можно не задавать, тогда область вывода будет пустой.

<output name="daysoutput"></output> - создал где нужно в форме.

В свою очередь в форме я добавил:

<form action="/echo" method="post" oninput=”daysoutput.value=dayscount.value”>

Левая часть понятно, что равна значению куда мы записываем, т.е. в поле вывода. Правая часть – это имя (атрибут name) другого поля, которое мы изменяем

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

По умолчанию браузеры отображают результат в виде рамки вокруг этой группы полей, но при помощи CSS можно изменить его внешний вид.

Также для каждой группы можно добавить её заголовок. Для этого внутрь тега fieldset надо поместить тег legend:

<fieldset><legend>Заголовокгруппы</legend><input type="text"></fieldset>

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

Проверку можно осуществить посредством JS, однако в html5 можно использовать атрибут pattern,

 

 

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

Для этого используется специальный атрибут placeholder:

<input type="text" placeholder="Текстподсказки">

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

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

 

 

Так как список выбора может быть довольно большой, в теге select используем возможность объединять option в группы. Обычно это используется для большей наглядности и удобства поиска нужного варианта.

Для формирования группы используется тег optgroup. Атрибут label этого тега определяет заголовок группы.

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

<select name="variants"><optgroup label="Группа вариантов 1"><option value="1">Вариант 1</option><option value="2">Вариант 2</option><option value="3">Вариант 3</option></optgroup><optgroup label="Группавариантов 2"> <option value="4">Вариант 4</option> <option value="5">Вариант 5</option> <option value="6">Вариант 6</option></optgroup></select>

 

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

Есть два способа: использование атрибута readonly и использование атрибута disabled

Примерзаписи:

<input type="text" readonly><input type="text" disabled>

В чем же отличие между ними?

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

Атрибут disabled не дает пользователю изменять поле (вводить новый текст, модифицировать существующий). Нельзя поставить фокус в это поле, введенное значение нельзя выделять и копировать. Данные из этого поля НЕ отправляются на сервер.

 

Браузер может запоминать значения, вводимые в текстовые поля. При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать подходящее. Параметрами автозаполнения можно управлять используя атрибут autocomplete.

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

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

<input type="text" autocomplete="off">

Значение по умолчанию зависит от настроек браузера.

 

 

Суть localStorage или «локального хранилища» заключается в том, что в него можно записывать данные, которые будут сохраняться в браузере. Эти данные не исчезнут даже если вы закроете браузер и откроете его снова или уйдете со страницы и потом вернётесь на неё.

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

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

СЕЛЕКТОРЫ Ч2

.class1.class2 { }

Стили будут применяться ко всем элементам, которые одновременно имеют класс class1 и class2.

запись, фактически выполняет операцию логического умножения, «И».

 

Псевдокласс:not(селектор) является отрицающим селектором. С его помощью можно выбрать элементы, которые НЕ содержат указанный селектор:

li:not(:last-child) { }

Этот селектор выберет все теги <li>, НЕ являющиеся последними в их родителе.

Псевдокласс:not похож на оператор! в программировании:

if (!selector) {... }

В качестве селектора могут указываться псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать двойной псевдокласс:not, то есть конструкция:not(:not(...)) не сработает.

Также в комбинации с:not не применяются:

· объединение селекторов: например, li:not(.heart.jack) – некорректный селектор;

· псевдоэлементы: li:not(::after) – неправильная запись (подробнее о псевдоэлементах рассказано далее в курсе);

· селекторы-потомки, групповые селекторы или комбинации: например, нельзя писать li:not(a span) или li:not(a + span).

 

Отрицающий селектор:not, как и любые другие селекторы, можно комбинировать с другими. Например:

li:not(:first-child):not(:last-child) { }

Выберет все теги <li>, которые НЕ являются первыми и последними в их родителе.

Объединять можно неограниченное количество селекторов.

 

НЕ ПОНЯЛ

В первом курсе про селекторы мы уже рассматривали псевдокласс:nth-child, сейчас посмотрим на:nth-last-child.

Псевдокласс:nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса:nth-child, отсчет ведется не от первого элемента, а от последнего. Вот и все различия.

 

Псевдокласс:first-of-typeоченьпохожна:first-child. Он выбирает первый дочерний элемент родителя, только с учетом типа элементов.

Например, в этом задании перед списками с картами есть блок с текстом. У списков и у блока с текстом общий родитель — body.

<body><div class="paper"> … </div><ul class="cards"> … </ul><ul class="cards"> … </ul></body>

Сравним две записи:

ul:first-child {background: #ffffee;} ul:first-of-type {background: #ffffee;}

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

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

 

Псевдокласс:last-of-type работает аналогично, только выбирает последний дочерний элемент родителя с учетом типа.

Примерзаписи:

ul:last-of-type {...}

 

 

Псевдокласс:nth-of-type работает почти так же, как и:nth-child. Разница заключается в том, что он учитывает тип элемента.

Еще пример. Если в текущем задании мы используем такие селекторы:

ul:nth-child(2) { }ul:nth-of-type(2) { }

То верхний cелектор выберет второй по счёту дочерний элемент и этот элемент должен быть ul. В нашем случае выберется первая строка карт.

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

https://habrahabr.ru/post/119139/