Type range можно ли опустить атрибуты: Ползунок | htmlbook.ru

Содержание

— HTML | MDN

Элементы <input> с типом range позволяют пользователю определить числовое значение, которое должно быть в пределах указанного промежутка. Однако, точное значение должно быть не слишком важно. Обычно они представляет собой слайдер или контроллер, но не текстовое поле как number. Так как этот виджет неточен, его не следует использовать, в случае, если важно установить точное значение .

Исходный код данного примера расположен в GitHub репозитории. Если вы хотите внести внести изменения в привер, пожалуйста склонируйте https://github.com/mdn/interactive-examples и отправьте нам пул реквест.

Если используемый браузер не поддерживает тип range, он будет отображаться как inputtext (en-US).

Валидация

Для этого поля нет доступного паттерна валидации, но следующая валидация реализованы следующие проверки

  • Если значение value содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдёт ошибка некорректного ввода.
  • Значение не может быть меньше чем min. По умолчанию: 0.
  •  Значение не может быть больше чем max. По умолчанию: 100.
  • Значение должно кратно step. По умолчанию: 1.

Атрибут value содержит DOMString, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (""). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута min. Алгоритм определения значения по умолчанию:

defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

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

В дополнение к атрибутам, общим для всех элементов <input>, range инпуты предлагают следующие атрибуты:

AttributeDescription
listid элемента <datalist>, который содержит предопределённые значение (не обязательно)
maxМаксимальное допустимое значение
minМинимальное допустимое значение
stepШаговый, используемый для пользовательского интерфейса и для проверки

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

max

Это значение должно быть больше или равно значению атрибута  min.

min

Наименьшее значение в диапазоне допустимых значений. Если value, введённый в элемент, меньше этого значения, то элемент не проходит  проверку ограничения. Если значение атрибута min не является числом, то элемент не имеет максимального значения.

Это значение должно быть меньше или равно значению атрибута max.

step

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn’t adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

По умолчанию шаг для инпута с типом range равен 1, допустим ввод только целых чисел, если  база шага не является целым; например, если вы установили min на -10 и value на 1.5, то step  1 позволит только такие значения как 1.5, 2.5, 3.5,… в положительном направлении и -0.5, -1.5, -2.5,… в отрицательном направлении.

Не стандартные атрибуты

AttributeDescription
orientУстанавливает ориентацию слайдера. Firefox only.
orient
Похоже на  -moz-orient не стандартное CSS свойство влияющее на <progress> и<meter> элементы, orient атрибут определяем ориентацию слайдера. Значение horizontal, значит что слайдер будет отображён горизонтально, а vertical— что вертикально .

Note: Следующие атрибуты не применимы: acceptaltcheckeddirnameformactionformenctypeformmethodformnovalidateformtargetheight

maxlengthminlengthmultiplepatternplaceholderreadonlyrequiredsizesrc, и width. Каждый из них будет проигнорирован в случае употребления.

Пока тип number позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определённое значение. Инпут с типом range позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать — каково выбранное конкретное числовое значение.

Несколько примеров основный ситуаций, в которых инпуты с range используются:

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

Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает «установить громкости наполовину максимума» вместо «установить громкость на 0.5».

Указание минимума и максимума

По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с лёгкостью указать другие границы, изменив значения атрибутов min и/или max. Они могут быть принимать любые значения с плавающей точкой.

Например, указать диапазон значений между -10 и 10, вы можете, используя:

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

Настройка детализации значения

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

Вы можете изменить атрибут step контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение step на 0.01:

<input type="range" min="5" max="10" step="0.01">

Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение any для атрибута step:

<input type="range" min="0" max="3.14" step="any">

Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.

Добавление хэш-меток и лейблов

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

list и элемент <datalist>, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.

Макеты контроллера диапазона

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

Недекорированный контроллер диапазона

Этот результат вы получите, если не укажите атрибут list, или браузер не будет его поддерживать.

HTMLScreenshot
Контроллер диапазона с хэш-метками

Контроллер диапазона, использующий атрибут

list, указывающий ID <datalist>, который определяет серию хэш-меток на контроллере. Их одиннадцать, одна на 0% и на каждой отметки 10%. Каждая точка представлена с помощью элемента <option> с его набором value значений диапазона, при котором должна быть нарисована метка.

HTMLScreenshot
<input type="range" list="tickmarks">

<datalist>
  <option value="0">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100">
</datalist>
Контроллер диапазона с хэш-метками и лейблами

Вы можете добавить лейблы в свой контроллер диапазонов, добавив атрибут label элементам <option>, соответствующим значениям, на которых вы бы хотели видеть лейблы.

HTMLScreenshot
<input type="range" list="tickmarks">

<datalist>
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>

Примечание: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддерживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг <datalist> должен быть стилизован с помощью  CSS, так как его свойство display по умолчанию —  none, тем самым скрывая лейблы.

Изменение ориентации

По умолчанию, если браузер отображает инпут диапазона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализовано, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ни один из наиболее используемых браузеров не имплементировал это пока. (Firefox баг 981916, Chrome bug 341071). также, возможно, следующий баг под вопросом.

В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки appearance  для slider-vertical, использование нестандартной ориентации orient в Firefox,или изменение text direction для Internet Explorer и Edge

Рассмотрим контроллер диапазона:

<input type="range" min="0" max="11" value="7" step="1">
ScreenshotLive sample

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

Standards

Следуя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:

CSS
#volume {
  height: 150px;
  width: 50px;
}
HTML
<input type="range" min="0" max="11" value="7" step="1">
Результат
ScreenshotLive sample

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

transform: rotate(-90deg)

Но вы, всё же, можете сделать вертикальный контролл используя горизонтальный контролл. Самый простой способ — использовать CSS: применяя transform для поворота элемента на 90 градусов. Посмотрим:

HTML

В HTML нужно добавить обёртку вокруг <input>  — <div>, что позволит нам исправить макет после выполнения трансформации (т. к. трансформация автоматически не влияет на макет страницы):

<div>
  <input type="range" min="0" max="11" value="7" step="1">
</div>
CSS

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

.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}

Затем информация о стиле элемента <input> в зарезервированном пространстве:

.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}

Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на  0 и transform-origin (en-US) смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поворачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.

ScreenshotLive sample

appearance property

Свойство appearance имеет нестандартное значение slider-vertical , которое делает слайдер вертикальным.

HTML

Используем тот же HTML что и в предыдущем примере:

<input type="range" min="0" max="11" value="7" step="1">
CSS

Берём только те инпуты что имеют тип range:

input[type="range"] {
  -webkit-appearance: slider-vertical;
}

orient attribute

В Firefox, реализовано нестандартное свойство orient.

HTML

Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением vertical:

<input type="range" min="0" max="11" value="7" step="1" orient="vertical">

writing-mode: bt-lr;

Свойство writing-mode может быть использовано для специальных эффектов 

HTML

Используем тот же HTML что и в предыдущем примере:

<input type="range" min="0" max="11" value="7" step="1">
CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr, или bottom-to-top и left-to-right:

input[type="range"] {
  writing-mode: bt-lr;
}

Все вместе

Каждый из вышеперечисленных примеров работает в своём браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:

HTML

Оставим orient атрибут  со значением vertical для Firefox:

<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем -webkit-appearance: slider-vertical для всех -webkit-based браузеров:

input[type="range"] {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}

BCD tables only load in the browser

input type=»range» control не работает в браузере firefox



Этот контроль не работает в Firefox, пожалуйста, кто-нибудь может мне помочь?

  <input type="range" name="points" min="1" max="10">
html forms firefox htmlcontrols
Поделиться Источник Dinesh     18 февраля 2014 в 08:55

2 ответа


  • CSS input[type=»submit»][отключено] не работает в Firefox

    Я пытался input[type=button][disabled=disabled]{ color:gray !important; } этот CSS в моем коде работает в IE, но не в Firefox. Это css не будет работать для Firefox..?? Мой код HTML <input type=button id=submit value=Submit></input> <script location=body>…

  • событие onchange на input type=range не запускается в firefox при перетаскивании

    Когда я играл с <input type=range> , Firefox запускает событие onchange только в том случае, если мы опускаем ползунок в новое положение, где Chrome и другие запускают события onchange во время перетаскивания ползунка. Как я могу сделать так, чтобы это произошло при перетаскивании Firefox?…



1

Эта функция не поддерживается в firefox до версии 23 :

http://caniuse.com/input-range

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

Поделиться Felix     18 февраля 2014 в 08:59



1

Решение находится в этом посте stackoverflow.

Это не поддерживается в Firefox до версии 23. Для реализации Javascript в версиях 4 и выше см. http://frankyan.com/labs/html5slider/ .

Поделиться Ganz     18 февраля 2014 в 09:01


Похожие вопросы:


Селектор input[type=»range»] не работает в IE7

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


HTML Input (type=image) не работает на Firefox 4

<input type=imagevalue=Delete title=Delete name=cmd_delete src=bin/images/common/delete.png/> Приведенный выше код HTML предназначен для кнопки удаления в моем приложении. Проблема в том, что…


Гугл Хром вертикальный <input type=»range» />

На opera я могу сделать следующее <style> #range{ width: 20px; heigth: 300px; } </style> <input type=range id=range /> и он будет отображать вертикальный слайдер. Однако это,…


CSS input[type=»submit»][отключено] не работает в Firefox

Я пытался input[type=button][disabled=disabled]{ color:gray !important; } этот CSS в моем коде работает в IE, но не в Firefox. Это css не будет работать для Firefox..?? Мой код HTML <input…


событие onchange на input type=range не запускается в firefox при перетаскивании

Когда я играл с <input type=range> , Firefox запускает событие onchange только в том случае, если мы опускаем ползунок в новое положение, где Chrome и другие запускают события onchange во…


MP3 аудио не работает в firefox браузере / android firefox браузере

Я использую тег Html5 audio на своем сайте и ссылаюсь только на аудиоформат mp3 (не ogg), он отлично работает в браузере firefox с тестового сервера, но когда тот же код развернут на живом сайте, то…


Как заполнить HTML5 input[type=range] на левой стороне большого пальца только CSS?

Есть ли возможность получить тот же эффект, что и ::-ms-fill-lower на Firefox? Без использования JS? Я уже нашел обходной путь для достижения этого эффекта в браузерах на базе webkit (например,. ..


Удалить Контур Фокуса из входного типа=»range» в Firefox

Я знаю, что есть и другие подобные вопросы, но я перепробовал все, что они предлагали, но безрезультатно. Это другой вопрос, чем удалить пунктирный контур из входного элемента диапазона в Firefox ,…


как использовать псевдоэлементы input[type=range] CSS с firefox и IE

У меня есть вход с атрибутом type=range , который должен действовать как ‘seekbar’ для пользовательского видеоплеера html 5. у меня есть все -webkit… вещей, работающих (за исключением…


Номер типа ввода не работает в firefox

У меня есть issue.I есть поле ввода, тип которого number , но он принимает любой алфавит в браузере mozila firefox. Он отлично работает в chrome, но не работает в firefox. Мне нужно, чтобы он…

Типы входных данных HTML уроки для начинающих академия



В этой главе описываются различные типы входных данных для элемента <input>.


Текст типа ввода

<input type="text"> определяет одно строчное текстовое поле ввода:

Пример

<form>
  Имя:<br>
  <input type=»text» name=»firstname»><br>
  Фамилия:<br>
  <input type=»text» name=»lastname»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Имя:

Фамилия:


Пароль типа ввода

<input type="password"> Определяет поле пароля:

Пример

<form>
  User name:<br>
  <input type=»text» name=»username»><br>
  User password:<br>
  <input type=»password» name=»psw»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Имя пользователя:

Пароль пользователя:

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



Тип ввода отправить

<input type="submit"> Определяет кнопку для Отправка данных формы в обработчик форм.

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

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

Пример

<form action=»/action_page.php»>
  First name:<br>
  <input type=»text» name=»firstname» value=»Mickey»><br>
  Last name:<br>
  <input type=»text» name=»lastname» value=»Mouse»><br><br>
  <input type=»submit» value=»Submit»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Если опустить атрибут value кнопки Submit, кнопка получит текст по умолчанию:

Пример

<form action=»/action_page.php»>
  First name:<br>
  <input type=»text» name=»firstname» value=»Mickey»><br>
  Last name:<br>
  <input type=»text» name=»lastname» value=»Mouse»><br><br>
  <input type=»submit»>
</form>


Сброс типа ввода

<input type="reset"> Определяет кнопку сброса , которая сбрасывает все значения формы в значения по умолчанию:

Пример

<form action=»/action_page.php»>
  First name:<br>
  <input type=»text» name=»firstname» value=»Mickey»><br>
  Last name:<br>
  <input type=»text» name=»lastname» value=»Mouse»><br><br>
  <input type=»submit» value=»Submit»>
  <input type=»reset»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

При изменении входных значений и нажатии кнопки «Сброс» данные формы будут сброшены на значения по умолчанию.


Тип входного сигнала радио

<input type="radio"> Определяет переключатель.

Переключатели позволяют пользователю выбрать только одно из ограниченного числа вариантов:

Пример

<form>
  <input type=»radio» name=»gender» value=»male» checked> Male<br>
  <input type=»radio» name=»gender» value=»female»> Female<br>
  <input type=»radio» name=»gender» value=»other»> Other
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Male
Female
Other

Флажок «тип ввода»

<input type="checkbox"> Определяет CheckBox.

Флажки позволяют пользователю выбрать ноль или более вариантов ограниченного числа вариантов.

Пример

<form>
  <input type=»checkbox» name=»vehicle1″ value=»Bike»> I have a bike<br>
  <input type=»checkbox» name=»vehicle2″ value=»Car»> I have a car
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

I have a bike
I have a car

Кнопка ввода типа

<input type="button"> Определяет кнопку:

Пример

<input type=»button» value=»Click Me!»>

Таким образом, HTML-код выше будет отображаться в браузере:


Типы входных данных HTML5

HTML5 добавил несколько новых типов ввода:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Новые типы ввода, которые не поддерживаются старыми веб-обозревателями, будут вести себя как <input type="text"> .


Цвет входного типа

<input type="color"> используется для полей ввода, которые должны содержать цвет.

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


Тип ввода Дата

<input type="date"> используется для полей ввода, которые должны содержать дату.

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

Можно также использовать атрибуты min и max для добавления ограничений дат:


Входной тип DateTime-локальный

<input type="datetime-local"> задает поле ввода даты и времени без часового пояса.

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


Тип ввода электронной почты

<input type="email"> используется для полей ввода, которые должны содержать адрес электронной почты.

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

Некоторые смартфоны распознавать тип электронной почты и добавляет «. com» на клавиатуре для сопоставления ввода электронной почты.


Тип входного месяца

<input type="month"> позволяет пользователю выбрать месяц и год.

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


Тип входного номера

<input type="number"> определяет Числовое поле ввода.

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере отображается числовое поле ввода, в котором можно ввести значение от 1 до 5:


Ограничения ввода

Ниже приведен список некоторых распространенных ограничений ввода (некоторые из них являются новыми в HTML5):

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

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

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


Диапазон входного типа

<input type="range"> определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, элемент управления Slider). Диапазон по умолчанию — от 0 до 100. Однако можно установить ограничения на то, какие номера принимаются с атрибутами min, max и step:


Поиск типа ввода

<input type="search"> используется для полей поиска (поле поиска работает как обычное текстовое поле).


Тип ввода тел

<input type="tel"> используется для полей ввода, которые должны содержать телефонный номер.

Примечание: Тип Tel в настоящее время поддерживается только в Safari 8.


Время ввода типа

<input type="time"> позволяет пользователю выбрать время (без часового пояса).

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


URL-адрес типа ввода

<input type="url"> используется для полей ввода, которые должны содержать URL-адрес.

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

Некоторые смартфоны распознают тип URL-адреса и добавляют «. com» к клавиатуре для сопоставления ввода URL-адреса.


Тип ввода неделя

<input type="week"> позволяет пользователю выбрать неделю и год.

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


Атрибут типа ввода HTML

ТегОписание
<input type=»»>Указывает тип ввода для отображения

Элемент input



Большинство элементов добавляется в форму с помощью элемента <input>. Назначение и внешний вид элемента <input> меняются в зависимости от значения атрибута type.

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

Когда атрибуту tуре присваивается значение text, это значит, что будет создано однострочное поле ввода текста:

<input type="text">

Пример HTML: Попробуй сам
<form action="action_form.php" method="POST">
  Имя пользователя:<br> 
  <input type="text" name="firstname"><br>   
  <input type="submit">  
</form>

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

Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):
<input type="password">

Пример HTML: Попробуй сам
<form action="" method="POST">
  Имя пользователя:<br> 
  <input type="text" name="username" value="Ваше имя"><br>   
  Пароль:<br> 
  <input type="password" name="password"><br>
  <input type="submit">  
</form>

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

Элемент <input> типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

<input type="radio" name="name" value="значение">

Пример: Использование переключателей

<form action="" method="POST">
  <p>Сколько Вам лет?</p>
  <ol>
    <li><input type="radio" name="age" value="18" checked>младше 18</li>
    <li><input type="radio" name="age" value="18-24">от 18 до 24</li>
    <li><input type="radio" name="age" value="25-34">от 25 до 35</li>
    <li><input type="radio" name="age" value="35-50">более 35</li>
  </ol>
</form>

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

Элемент <input> типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками:

<input type="checkbox" name="name" value="значение">

Пример: Использование флажков

<form action="" method="POST">
  <p>Какие музыкальные жанры Вы любите?</p>
  <ol>
    <li><input type="checkbox" name="musik" value="juze" checked>Джаз</li>
    <li><input type="checkbox" name="musik" value="bluse" checked>Блюз</li>
    <li><input type="checkbox" name="musik" value="rock">Рок</li>
    <li><input type="checkbox" name="musik" value="shanson">Шансон</li>
    <li><input type="checkbox" name="musik" value="kantry">Кантри</li>
  </ol>
</form>

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

Элемент <input> типа submit создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму:

<input type="submit" name="name" value="значение">

Пример: Использование submit и reset

<form action="action_form.php" method="POST">
 <p>Подпишись на рассылку новостей:</p> 
  <input type="text" name="email">
  <input type="submit" name="podpisatsya" value="Подписаться">
  <input name="reset" type="reset" value="Очистить">
</form>

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

Элемент <input> типа button создает произвольную кнопку. Для таких кнопок действие по умолчанию не определено, а браузеры пользователей должны использовать в качестве надписи на кнопке значение атрибута value. С атрибутами событий каждой такой кнопки (щелчок мышью на кнопке или дрyrое событие) могyт быть связаны прогpаммы обработки этих событий, которые могyт выполнять определенные действия. Эти проrpаммы обычно называют сценариями, и выполняются они непосредственно браузером пользователя, без передачи данных на Web-cepBep.

<input type="button" name="name" value="имя_кнопки">

Пример: Использование произвольной кнопки

HTML5 Новые значения type

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

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

Для запроса ввода даты вы можете использовать элемент <input> со значением date атрибута type. Таким образом, в браузерах, поддерживающих элементы формы спецификации HTML5, будет выведено поле для ввода даты.

<input type="date">

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

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

<input type="week" name="week">

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

Для запроса ввода определенного месяца года вы можете использовать элемент <input> со значением month атрибута type. Интерфейс позволит пользователю выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца.

<input type="month" name="month">

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

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

<input type="time" name="time">

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

<input type=»datetime»> создает элемент ввода сочетания даты и времени, который содержит информацию о часовом поясе. При вводе данных в поле типа datetime генерируются значения даты и времени разделенные буквой T, а в конце строки помечается часовой пояс буквой Z в случае с UTC (Universal Coordinated Time — универсальное координированное время). Учитывая, что UTC является практически эквивалентом GMT (Greenwich Mean Time — среднее время по Гринвичу), стандартное московское время на 3 часа опережает GMT (UTC + 3:00).

<input type="datetime" name="datetime">

Значение атрибута type: datetime-local

Тип ввода данных datetime-local работает точно так же, как и datetime, однако не включает информацию о часовом поясе. Значение представляет собой дату и время в формате ISO без учета часового пояса (ГГГГ-ММ-ДДТчч:мм:сс).

<input type="datetime-local" name="datetime-local">

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

Элемент <input> типа number создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. В поле счетчика по умолчанию разрешен прямой ввод с клавиатуры. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step.
Синтаксис создания поля для ввода чисел следующий:

<input type="number" name="num" min="1" max="12" value="1" step="1">

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

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

<input type="range" min="0" max="100" step="1" value="50">

Нижняя и верхняя границы диапазона min и max ограничивают значения, которые могут храниться в поле формы. Диапазон по умолчанию — от 0 до 100. Атрибут step позволяет разработчикам указывать шаг изменения чисел (по умолчанию 1). Текущее значение задается в атрибуте value. По умолчанию value = (max + min)/2. Вышеперечисленные атрибуты не являются обязательными и, если их опустить, то в таком случае они принимают значения по умолчанию.

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

Поле ввода type=»color» генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB (#RRGGBB). Синтаксис создания поля для задания цвета:

<input type="color" value="цвет" name="имя">

Атрибут value предназначен для задания исходного цвета (#RRGGBB) и не является обязательным. Атрибут name применяется для идентификации получаемого значения.

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

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

<input type="email">

Элемент <input type=»email»> может включать атрибуты свойственные типу text, а также добавлен атрибут multiple, который позволяет вводить сразу список из допустимых электронных адресов, разделенных запятыми.

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

Элемент <input> типа url адаптирован для ввода URL-адресов, например адреса какой-либо страницы во всемирной паутине. Строка <input type=»url»> заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. При использовании поля ввода type="url" на устройствах с сенсорными экранами, внешний вид встроенной виртуальной клавиатуры будет оптимизирован для отображения символов, наиболее часто встречающихся в URL-дpecax.
Атрибуты для элемента <input> типа url совпадают с текстовым полем (<input type=»text»>). Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса. Далее приведен пример кода, включающего атрибут placeholder (с англ. — заполнитель), значение которого в виде подсказки будет по умолчанию отображаться, пока поле ввода URL-адреса не получит фокус:

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

Поле ввода type="search" работает таким же образом, как и стандартное текстовое поле ввода, разница между типами ввода данных search и text чисто стилистическая. Некоторые браузеры немного по-разному выполняют визуализацию на основе одного и того же кода.
Синтаксис поля ввода поискового запроса:

<input type="email">

Используемые атрибуты совпадают с текстовым полем text:

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

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

<input type="tel">

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

type тега <input>
ЗначениеОписание
buttonСоздает кнопку с произвольным действием, действие по умолчанию не определено:
checkboxСоздает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вариантов:
Я знаю HTML
colorГенерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB:
dateПозволяет вводить дату в формате дд.мм.гггг.:
День рождения:
datetime-localПозволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм:
Дата встречи — день и время:
emailБраузеры, поддерживающие язык 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Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:

Задачи





Типы ввода HTML — Веб учебники



В этой главе описываются различные типы HTML кода элемента ввода <input>.

HTML Типы ввода

Вот различные типы ввода, которые вы можете использовать в HTML:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Тип ввода «text»

<input type="text"> определяет однострочное поле ввода текста:

Пример

<form>
  <label for=»fname»>Имя:</label><br>
  <input type=»text» name=»fname»><br>
  <label for=»lname»>Фамилия:</label><br>
  <input type=»text» name=»lname»>
</form>

Попробуйте сами »

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

Имя:

Фамилия:


Тип ввода «password»

<input type="password"> определяет поле пароля:

Пример

<form>
  <label for=»username»>Имя пользователя:</label><br>
  <input type=»text» id=»username» name=»username»><br>
  <label for=»pwd»>Пароль:</label><br>
  <input type=»password» name=»pwd»>
</form>

Попробуйте сами »

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

Имя пользователя:

Пароль:

Символы в поле пароля маскируются (отображаются в виде звездочек или кружочков).



Тип ввода «submit»

<input type="submit"> определяет кнопку для предоставление данных формы в обработчик форм.

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

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

Пример

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

Попробуйте сами »

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

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

Пример

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

Попробуйте сами »

Тип ввода «reset»

<input type="reset"> определяет кнопку сброса это приведет к сбросу всех значений формы к их значениям по умолчанию:

Пример

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

Попробуйте сами »

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

Если вы измените входные значения и затем нажмете кнопку «Сброс», то данные формы будут сброшены до значений по умолчанию.


Тип ввода «radio»

<input type="radio"> определяет переключатель.

Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов:

Пример

<form>
  <input type=»radio» name=»gender» value=»male»>
  <label for=»male»>Мужчина</label><br>
  <input type=»radio» name=»gender» value=»female»>
  <label for=»female»>Женщина</label><br>
  <input type=»radio» name=»gender» value=»other»>
  <label for=»other»>другое</label>
</form>

Попробуйте сами »

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

Мужчина
Женщина
другое

Тип ввода «checkbox»

<input type="checkbox"> определяет флажок.

Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.

Пример

<form>
  <input type=»checkbox» name=»vehicle1″ value=»Bike»>
  <label for=»vehicle1″> У меня есть велосипед</label><br>
  <input type=»checkbox» name=»vehicle2″ value=»Car»>
  <label for=»vehicle2″> У меня есть машина</label><br>
  <input type=»checkbox» id=»vehicle3″ name=»vehicle3″ value=»Boat»>
  <label for=»vehicle3″> У меня есть лодка</label>
</form>

Попробуйте сами »

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

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

Тип ввода «button»

<input type="button"> определяет кнопку:

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


Тип ввода «color»

<input type="color"> используется для полей ввода, которые должны содержать цвет.

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

Пример

<form>
  <label for=»favcolor»>Выберите свой любимый цвет:</label>
  <input type=»color» name=»favcolor»>
</form>

Попробуйте сами »

Тип ввода «date»

<input type="date"> используется для полей ввода, которые должны содержать дату.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for=»birthday»>День рождения:</label>
  <input type=»date» name=»birthday»>
</form>

Попробуйте сами »

Вы также можете использовать атрибуты min и max для добавления ограничений к датам:

Пример

<form>
  <label for=»datemax»>Введите дату до 1980-01-01:</label>
  <input type=»date» name=»datemax» max=»1979-12-31″><br><br>
  <label for=»datemin»>Введите дату после 2000-01-01:</label>
  <input type=»date» name=»datemin» min=»2000-01-02″>
</form>

Попробуйте сами »

Тип ввода «datetime-local»

<input type="datetime-local"> задает поле ввода даты и времени без часового пояса.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for=»birthdaytime»>День рождения (дата и время):</label>
  <input type=»datetime-local» name=»birthdaytime»>
</form>

Попробуйте сами »

Тип ввода «email»

<input type="email"> используется для полей ввода, которые должны содержать адрес электронной почты.

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

Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к клавиатуре, чтобы соответствовать вводу электронной почты.

Пример

<form>
  <label for=»email»>Введите свой адрес электронной почты:</label>
  <input type=»email» name=»email»>
</form>

Попробуйте сами »

Тип ввода «file»

<input type="file"> определяет поле выбор файла в «браузере» и кнопку для загрузки файла.

Пример

<form>
  <label for=»myfile»>Выбрать файл:</label>
  <input type=»file» name=»myfile»>
</form>

Попробуйте сами »

Тип ввода «month»

<input type="month"> позволяет пользователю выбрать месяц и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for=»bdaymonth»>День рождения (месяц и год):</label>
  <input type=»month» name=»bdaymonth»>
</form>

Попробуйте сами »

Тип ввода «number»

<input type="number"> определяет числовое поле ввода.

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 1 до 5:

Пример

<form>
  <label for=»quantity»>Количество (от 1 до 5):</label>
  <input type=»number» name=»quantity» min=»1″ max=»5″>
</form>

Попробуйте сами »

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

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

АтрибутОписание
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» name=»quantity» min=»0″ max=»100″ step=»10″ value=»30″>
</form>

Попробуйте сами »

Тип ввода «range»

<input type="range"> определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок управления). Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие номера принимаются с помощью атибутов min, max, и step:

Пример

<form>
  <label for=»vol»>Громкость (от 0 до 50):</label>
  <input type=»range» name=»vol» min=»0″ max=»50″>
</form>

Попробуйте сами »

Тип ввода «search»

<input type="search"> используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).

Пример

<form>
  <label for=»gsearch»>Поиск Google:</label>
  <input type=»search» name=»gsearch»>
</form>

Попробуйте сами »

Тип ввода «tel»

<input type="tel"> используется для полей ввода, которые должны содержать номер телефона.

Пример

<form>
  <label for=»phone»>Введите свой номер телефона:</label>
  <input type=»tel» name=»phone» pattern=»[0-9]{3}-[0-9]{2}-[0-9]{3}»>
</form>

Попробуйте сами »

Тип ввода «time»

<input type="time"> позволяет пользователю выбрать время (без часового пояса).

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

Пример

<form>
  <label for=»appt»>Выберите время:</label>
  <input type=»time» name=»appt»>
</form>

Попробуйте сами »

Тип ввода «url»

<input type="url"> используется для полей ввода, которые должны содержать URL адрес.

В зависимости от поддержки браузера поле url адреса может быть автоматически проверено при отправке.

Некоторые смартфоны распознают тип URL адреса, и добавляют, «.com» на клавиатуре, чтобы соответствовать ввода URL адреса.

Пример

<form>
  <label for=»homepage»>Добавьте свою домашнюю страницу:</label>
  <input type=»url» name=»homepage»>
</form>

Попробуйте сами »

Тип ввода «week»

<input type="week"> позволяет пользователю выбрать неделю и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

<form>
  <label for=»week»>Выберите неделю:</label>
  <input type=»week» name=»week»>
</form>

Попробуйте сами »

HTML Упражнения

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

Упражнение:

В приведенной ниже форме добавьте поле ввода текста с именем «username» .

<form action=»/action_page.php»>
<>
</form>


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

Начните упражнение


HTML Атрибут типа ввода

ТегОписание
<input type=»»>Указывает тип ввода для отображения

Хелперы форм в Action View

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

После прочтения этого руководства, вы узнаете:

  • Как создавать формы поиска и подобного рода формы, не представляющие определенную модель вашего приложения
  • Как сделать модельно-ориентированные формы для создания и редактирования определенных записей базы данных
  • Как сгенерировать списки выбора (select box) с различными типами данных
  • Какие хелперы даты и времени предоставляет Rails
  • В чем особенность формы загрузки файлов
  • Как отправлять формы на внешние ресурсы и указывать настройку authenticity_token.
  • Как создавать сложные формы

Это руководство не является подробной документацией по доступным хелперам форм и их аргументам. Для получения полной информации, обратитесь к документации по Rails API.

Главный хелпер форм — это form_with.

<%= form_with do |form| %>
  Содержимое формы
<% end %>

При подобном вызове без аргументов, он создает тег формы, который при отправке сформирует POST-запрос на текущую страницу. Например, предположим текущая страница является домашней, тогда сгенерированный HTML будет выглядеть следующим образом (некоторые разрывы строчек добавлены для читаемости):

<form accept-charset="UTF-8" action="/" method="post">
  <input name="authenticity_token" type="hidden" value="J7CBxfHalt49OSHp27hblqK20c9PgwJ108nDHX/8Cts=" />
  Содержимое формы
</form>

Можно увидеть, что HTML содержит элемент input с типом hidden. Этот input важен, поскольку без него формы, у которых action не «GET», не могут быть успешно отправлены. Скрытый элемент input с именем authenticity_token является особенностью безопасности Rails, называемой защитой от межсайтовой подделки запроса, и хелперы форм генерируют его для каждой формы, у которых action не «GET» (при условии, что эта особенность безопасности включена). Подробнее об этом можно прочитать в руководстве Безопасность приложений на Rails.

Одной из наиболее простых форм, встречающихся в вебе, является форма поиска. Эта форма содержит:

  • элемент формы с методом «GET»,
  • метку для поля ввода,
  • элемент поля ввода текста и
  • элемент отправки.

Чтобы создать эту форму, используем form_with и объект построителя формы, который он вкладывает. Как тут:

<%= form_with url: "/search", method: :get do |form| %>
  <%= form.label :query, "Search for:" %>
  <%= form.text_field :query %>
  <%= form.submit "Search" %>
<% end %>

Это сгенерирует следующий HTML:

<form action="/search" method="get" accept-charset="UTF-8" >
  <label for="query">Search for:</label>
  <input name="query" type="text" />
  <input name="commit" type="submit" value="Search" data-disable-with="Search" />
</form>

Передача url: my_specified_path в form_with сообщает форме, куда осуществлять запрос. Однако, как объясняется ниже, в форму также можно передавать объекты ActiveRecord.

Для каждого поля ввода формы генерируется атрибут ID из его имени ("query" в примере). Эти ID могут быть очень полезны для стилизации CSS или управления элементами форм с помощью JavaScript.

Используйте «GET» как метод для форм поиска. Это позволяет пользователям добавлять в закладки определенный поиск и потом возвращаться к нему. В более общем смысле Rails призывает вас использовать правильный метод HTTP для экшна.

Объект построителя формы, вкладываемый form_with, предоставляет ряд вспомогательных методов для генерации элементов формы, таких как чекбоксы, текстовые поля, радиокнопки и так далее. Первый параметр у них это всегда имя поля ввода. Когда форма будет отправлена, имя будет передано вместе с данными формы, и, в свою очередь, помещено в params в контроллере со значением, введенным пользователем для этого поля. Например, если форма содержит <%= form.text_field :query %>, то значение этого поля можно получить в контроллере с помощью params[:query].

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

Чекбоксы — это элементы управления формой, которые дают пользователю ряд опций, которые он может включить или выключить:

<%= form.check_box :pet_dog %>
<%= form.label :pet_dog, "I own a dog" %>
<%= form.check_box :pet_cat %>
<%= form.label :pet_cat, "I own a cat" %>

Это сгенерирует следующее:

<input type="checkbox" name="pet_dog" value="1" />
<label for="pet_dog">I own a dog</label>
<input type="checkbox" name="pet_cat" value="1" />
<label for="pet_cat">I own a cat</label>

Первый параметр у check_box — это имя поля ввода. Второй параметр — это значение поля ввода. Это значение будет включено в данные формы (и будет присутствовать в params), когда чекбокс нажат.

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

<%= form.radio_button :age, "child" %>
<%= form.label :age_child, "I am younger than 21" %>
<%= form.radio_button :age, "adult" %>
<%= form.label :age_adult, "I am over 21" %>

Результат:

<input type="radio" name="age" value="child" />
<label for="age_child">I am younger than 21</label>
<input type="radio" name="age" value="adult" />
<label for="age_adult">I am over 21</label>

Как и у check_box, второй параметр для radio_button — это значение поля ввода. Так как эти две радиокнопки имеют одинаковое имя (age), пользователь может выбрать одну, и params[:age] будет содержать или "child", или "adult".

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

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

<%= form.text_area :message, size: "70x5" %>
<%= form.hidden_field :parent_id, value: "foo" %>
<%= form.password_field :password %>
<%= form.number_field :price, in: 1.0..20.0, step: 0.5 %>
<%= form.range_field :discount, in: 1..100 %>
<%= form.date_field :born_on %>
<%= form.time_field :started_at %>
<%= form.datetime_local_field :graduation_day %>
<%= form.month_field :birthday_month %>
<%= form.week_field :birthday_week %>
<%= form.search_field :name %>
<%= form.email_field :address %>
<%= form.telephone_field :phone %>
<%= form.url_field :homepage %>
<%= form.color_field :favorite_color %>

Результат:

<textarea name="message" cols="70" rows="5"></textarea>
<input type="hidden" name="parent_id" value="foo" />
<input type="password" name="password" />
<input type="number" name="price" step="0.5" min="1.0" max="20.0" />
<input type="range" name="discount" min="1" max="100" />
<input type="date" name="born_on" />
<input type="time" name="started_at" />
<input type="datetime-local" name="graduation_day" />
<input type="month" name="birthday_month" />
<input type="week" name="birthday_week" />
<input type="search" name="name" />
<input type="email" name="address" />
<input type="tel" name="phone" />
<input type="url" name="homepage" />
<input type="color" name="favorite_color" value="#000000" />

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

Поля поиска, ввода телефона, даты, времени, цвета, даты-времени, локальных даты-времени, месяца, недели, url, email, числовые и интервалов — это элементы управления HTML5. Если необходимо, чтобы у вашего приложения была совместимость со старыми браузерами, вам необходим HTML5 polyfill (предоставляемый с помощью CSS и/или JavaScript). Хотя в таких решениях нет недостатка, популярным инструментом на сегодняшний момент является Modernizr, предоставляющий простой способ добавить функциональность, основанной на обнаружении установленных особенностей HTML5.

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

Аргумент :model в form_with позволяет связать объект построителя формы с объектом модели. Это означает, что эта форма будет будет ограничена этим объектом модели, и поля формы будут предзаполнены значениями из этого объекта модели.

К примеру, если у нас есть такой объект модели @article:

@article = Article.find(42)
# => #<Article id: 42, title: "My Title", body: "My Body">

Следующая форма:

<%= form_with model: @article do |form| %>
  <%= form.text_field :title %>
  <%= form.text_area :body, size: "60x10" %>
  <%= form.submit %>
<% end %>

Выведет:

<form action="/articles/42" method="post" accept-charset="UTF-8" >
  <input name="authenticity_token" type="hidden" value="..." />
  <input type="text" name="article[title]" value="My Title" />
  <textarea name="article[body]" cols="60" rows="10">
    My Body
  </textarea>
  <input type="submit" name="commit" value="Update Article" data-disable-with="Update Article">
</form>

Тут нужно отметить несколько вещей:

  • action формы автоматически заполняется подходящим значением для @article.
  • Поля формы автоматически заполняются соответствующими значениями из @article.
  • Имена полей формы ограничиваются с помощью article[...]. Это означает, что params[:article] будет хэшем, содержащим все значения этих полей. Подробнее о значении имен полей ввода можно прочитать в разделе про именование параметров этого руководства.
  • Кнопке отправки автоматически присвоено подходящее текстовое значение.

По соглашению, поля ввода будут отражать атрибуты модели. Однако, это необязательно! Если имеется иная необходимая информация, ее можно включить в форму, также как атрибут, и она будет доступна как params[:article][:my_nifty_non_attribute_input].

Можно создать подобное привязывание без фактического создания тега <form> с помощью хелпера fields_for. Это полезно для редактирования дополнительных объектов модели в той же форме. Например, если имеется модель Person со связанной моделью ContactDetail, можно создать форму для создания обеих моделей подобным образом:

<%= form_with model: @person do |person_form| %>
  <%= person_form.text_field :name %>
  <%= fields_for :contact_detail, @person.contact_detail do |contact_detail_form| %>
    <%= contact_detail_form.text_field :phone_number %>
  <% end %>
<% end %>

которая выдаст такой результат:

<form action="/people" accept-charset="UTF-8" method="post">
  <input type="hidden" name="authenticity_token" value="bL13x72pldyDD8bgtkjKQakJCpd4A8JdXGbfksxBDHdf1uC0kCMqe2tvVdUYfidJt0fj3ihC4NxiVHv8GVYxJA==" />
  <input type="text" name="person[name]" />
  <input type="text" name="contact_detail[phone_number]" />
</form>

Объект, предоставляемый fields_for — это form builder, подобный тому, который предоставляется form_with.

Модель Article непосредственно доступна пользователям приложения, и таким образом, следуя лучшим рекомендациям разработки на Rails, вы должны объявить ее как ресурс.

Объявление ресурса имеет несколько побочных эффектов. Смотрите руководство Роутинг в Rails для получения более подробной информации по настройке и использованию ресурсов.

Когда работаем с ресурсами RESTful, вызовы form_with становятся значительно проще, если они основываются на идентификации записи. Вкратце, вы должны всего лишь передать экземпляр модели и позволить Rails выяснить имя модели и остальное:

## Создание новой статьи
# длинный стиль:
form_with(model: @article, url: articles_path)
# короткий стиль:
form_with(model: @article)

## Редактирование существующей статьи
# длинный стиль:
form_with(model: @article, url: article_path(@article), method: "patch")
# короткий стиль:
form_with(model: @article)

Отметьте, что вызов короткого стиля form_with является идентичным, независимо от того, запись новая или уже существует. Идентификация записи достаточно сообразительная, чтобы выяснить, новая ли запись, запрашивая record.persisted?. Она также выбирает правильный путь для подтверждения и имя, основанное на классе объекта.

Когда используется STI (наследование с единой таблицей) с вашими моделями, нельзя полагаться на идентификацию записей подкласса, если только их родительский класс определен ресурсом. Необходимо явно указывать :url и :scope (имя модели).

Если создать пространство имен для маршрутов, form_with также можно изящно сократить. Если в приложении есть пространство имен admin, то

form_with model: [:admin, @article]

создаст форму, которая передается ArticlesController в пространстве имен admin (передача в admin_article_path(@article) в случае с обновлением). Если у вас несколько уровней пространства имен, тогда синтаксис подобный:

form_with model: [:admin, :management, @article]

Более подробно о системе маршрутизации Rails и связанным соглашениям смотрите руководство Роутинг в Rails.

Фреймворк Rails поддерживает стиль RESTful в ваших приложениях, что подразумевает частое использование запросов «PATCH», «PUT» и «DELETE» (помимо «GET» и «POST»). Однако, большинство браузеров не поддерживают методы, отличные от «GET» и «POST», когда дело доходит до подтверждения форм.

Rails работает с этой проблемой, эмулируя другие методы с помощью POST со скрытым полем, названным "_method", который установлен для отображения желаемого метода:

form_with(url: search_path, method: "patch")

Результат:

<form accept-charset="UTF-8" action="/search" method="post">
  <input name="_method" type="hidden" value="patch" />
  <input name="authenticity_token" type="hidden" value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" />
  <!-- ... -->
</form>

При парсинге данных, отправленных с помощью POST, Rails принимает во внимание специальный параметр _method и ведет себя так, как будто бы в нем был определен этот метод HTTP («PATCH» в этом примере).

При рендере формы кнопки отправки могут переопределять атрибут method с помощью ключевого слова formmethod::

<%= form_with url: "/posts/1", method: :patch do |form| %>
  <%= form.button "Delete", formmethod: :delete, data: { confirm: "Are you sure?" } %>
  <%= form.button "Update" %>
<% end %>

Как и для элементов <form>, многие браузеры не поддерживают переопределение методов формы, объявленные с помощью formmethod, отличные от «GET» и «POST».

Rails обходит эту проблему, эмулируя остальные методы на основе POST с помощью комбинации атрибутов formmethod, value и name:

<form accept-charset="UTF-8" action="/posts/1" method="post">
  <input name="_method" type="hidden" value="patch" />
  <input name="authenticity_token" type="hidden" value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" />
  <!-- ... -->

  <button type="submit" formmethod="post" name="_method" value="delete" data-confirm="Are you sure?">Delete</button>
  <button type="submit" name="button">Update</button>
</form>

В Rails 6.0 and 5.2 все формы с использованием form_with по умолчанию реализуют remote: true. Эти формы будут отправлять данные с помощью запроса XHR (Ajax). Чтобы это отключить, добавьте local: true. Подробности смотрите в руководстве Работа с JavaScript в Rails.

Списки выбора в HTML требуют значительного количества разметки — один элемент OPTION для каждого пункта списка. Поэтому Rails предоставляет вспомогательные методы для облегчения этого бремени.

Например, скажем у нас есть список городов для выбора пользователем. Можно использовать хелпер select таким образом:

<%= form.select :city, ["Berlin", "Lisbon", "Madrid"] %>

Результат:

<select name="city">
  <option value="Berlin">Berlin</option>
  <option value="Chicago">Chicago</option>
  <option value="Madrid">Madrid</option>
</select>

Можно назначить значения <option> отличные от их надписи:

<%= form.select :city, [["Berlin", "BE"], ["Chicago", "CHI"], ["Madrid", "MD"]] %>

Результат:

<select name="city">
  <option value="BE">Berlin</option>
  <option value="CHI">Chicago</option>
  <option value="MD">Madrid</option>
</select>

Таким образом, пользователь увидит полные имена городов, но params[:city] будет одним из "BE", "CHI" или "MD".

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

<%= form.select :city, [["Berlin", "BE"], ["Chicago", "CHI"], ["Madrid", "MD"]], selected: "CHI" %>

Результат:

<select name="city">
  <option value="BE">Berlin</option>
  <option value="CHI" selected="selected">Chicago</option>
  <option value="MD">Madrid</option>
</select>

Иногда нужно улучшить пользовательский опыт, сгруппировав вместе схожие опции. Это можно сделать, передав Hash (ли совместимый Array) в select:

<%= form.select :city,
      {
        "Europe" => [ ["Berlin", "BE"], ["Madrid", "MD"] ],
        "North America" => [ ["Chicago", "CHI"] ],
      },
      selected: "CHI" %>

Результат:

<select name="city">
  <optgroup label="Europe">
    <option value="BE">Berlin</option>
    <option value="MD">Madrid</option>
  </optgroup>
  <optgroup label="North America">
    <option value="CHI" selected="selected">Chicago</option>
  </optgroup>
</select>

Подобно другим элементам формы, список выбора может быть связан с атрибутом модели. Например, если имеется такой объект модели @person:

@person = Person.new(city: "MD")

Следующая форма:

<%= form_with model: @person do |form| %>
  <%= form.select :city, [["Berlin", "BE"], ["Chicago", "CHI"], ["Madrid", "MD"]] %>
<% end %>

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

<select name="person[city]">
  <option value="BE">Berlin</option>
  <option value="CHI">Chicago</option>
  <option value="MD" selected="selected">Madrid</option>
</select>
<% end %>

Отметьте, что подходящая опция была автоматически отмечена selected="selected". Так как этот список выбора был привязан к модели, не нужно указывать аргумент :selected!

Для управления поддержкой часовых поясов в Rails, можно спрашивать своих пользователей, в какой зоне они находятся. Это потребует сгенерировать пункты списка из списка предопределенных объектов ActiveSupport::TimeZone, но можно просто использовать хелпер time_zone_select, который уже все это содержит:

<%= form.time_zone_select :time_zone %>

В Rails раньше был хелпер country_select для выбора стран, но сейчас он вынесен во внешний плагин country_select.

Если не хотите использовать поля ввода даты и времени HTML5, Rails предоставляет альтернативные хелперы формы для даты и времени, выводящие обычные списки выбора. Эти хелперы рендерят список выбора на каждый компонент (год, месяц, день и т.д.). Например, если у нас есть такой объект модели @person:

@person = Person.new(birth_date: Date.new(1995, 12, 21))

Следующая форма:

<%= form_with model: @person do |form| %>
  <%= form.date_select :birth_date %>
<% end %>

Выведет списки выбора наподобие:

<select name="person[birth_date(1i)]">
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>
  <option value="1993">1993</option>
  <option value="1994">1994</option>
  <option value="1995" selected="selected">1995</option>
  <option value="1996">1996</option>
  <option value="1997">1997</option>
  <option value="1998">1998</option>
  <option value="1999">1999</option>
  <option value="2000">2000</option>
</select>
<select name="person[birth_date(2i)]">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12" selected="selected">December</option>
</select>
<select name="person[birth_date(3i)]">
  <option value="1">1</option>
  ...
  <option value="21" selected="selected">21</option>
  ...
  <option value="31">31</option>
</select>

Отметьте, что при отправке формы не будет одиночного значения в хэше params. содержащего полную дату. Вместо этого будет несколько значений со специальными именами наподобие "birth_date(1i)". Active Record знает, как собрать эти особенно названные значения в полную дату или время, основываясь на объявленном типе атрибута модели. Таким образом, можно просто передать params[:person] в Person.new или Person#update, как будто бы форма использовала единственное поле, представляющее полную дату.

В дополнение к хелперу date_select, Rails предоставляет time_select и datetime_select.

Rails также предоставляет хелперы для рендера списков выбора для отдельных компонентов времени: select_year, select_month, select_day, select_hour, select_minute и select_second. Эти хелперы являются «чистыми» методами, что означает, что они не вызываются на экземпляре построителя формы. Например:

<%= select_year 1999, prefix: "party" %>

Выведет подобный список выбора

<select name="party[year]">
  <option value="1994">1994</option>
  <option value="1995">1995</option>
  <option value="1996">1996</option>
  <option value="1997">1997</option>
  <option value="1998">1998</option>
  <option value="1999" selected="selected">1999</option>
  <option value="2000">2000</option>
  <option value="2001">2001</option>
  <option value="2002">2002</option>
  <option value="2003">2003</option>
  <option value="2004">2004</option>
</select>

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

Часто нам нужно создать набор вариантов в форме из коллекции объектов. Например, когда мы хотим, чтобы пользователь выбрал город из нашей базы данных, и у нас есть такая модель City:

City.order(:name).to_a
# => [
#      #<City id: 3, name: "Berlin">,
#      #<City id: 1, name: "Chicago">,
#      #<City id: 2, name: "Madrid">
#    ]

Rails предоставляет хелперы для создания вариантов из коллекции без ее явного перебора. Эти хелперы определяют значение и текстовую надпись для каждого варианта, вызывая определенные методы на каждом объекте коллекции.

Чтобы создать список выбора для наших городов, можно использовать collection_select:

<%= form.collection_select :city_id, City.order(:name), :id, :name %>

Выведет:

<select name="city_id">
  <option value="3">Berlin</option>
  <option value="1">Chicago</option>
  <option value="2">Madrid</option>
</select>

С помощью collection_select мы определяем сначала метод значения (:id в вышеуказанном примере), а затем метод текстовой надписи (:name в вышеуказанном примере). Это отличается от порядка, используемого при указании вариантов для хелпера select, когда сначала идет текстовая надпись, а потом значение.

Чтобы создать набор радиокнопок для наших городов, можно использовать collection_radio_buttons:

<%= form.collection_radio_buttons :city_id, City.order(:name), :id, :name %>

Выведет:

<input type="radio" name="city_id" value="3">
<label for="city_id_3">Berlin</label>
<input type="radio" name="city_id" value="1">
<label for="city_id_1">Chicago</label>
<input type="radio" name="city_id" value="2">
<label for="city_id_2">Madrid</label>

Чтобы создать набор чекбоксов для наших городов (который позволяет выбрать более одного), можно использовать collection_check_boxes:

<%= form.collection_check_boxes :city_id, City.order(:name), :id, :name %>

Выведет:

<input type="checkbox" name="city_id[]" value="3">
<label for="city_id_3">Berlin</label>
<input type="checkbox" name="city_id[]" value="1">
<label for="city_id_1">Chicago</label>
<input type="checkbox" name="city_id[]" value="2">
<label for="city_id_2">Madrid</label>

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

<%= form_with model: @person do |form| %>
  <%= form.file_field :picture %>
<% end %>

Самое важное, это помнить при загрузке файла, что атрибут enctype формы должен быть установлен как «multipart/form-data». Это будет выполнено автоматически, если используете file_field внутри form_with. Также можно установить этот атрибут самому:

<%= form_with url: "/uploads", multipart: true do |form| %>
  <%= file_field_tag :picture %>
<% end %>

Отметьте, что в соответствии с соглашениями form_with, имена поля в вышеуказанных формах также будут отличаться. То есть, именем поля в первой форме будет person[picture] (доступное как params[:person][:picture]), а именем поля во второй форме будет просто picture (доступное как params[:picture]).

Объект в хэше params — это экземпляр ActionDispatch::Http::UploadedFile. Следующий образец кода сохраняет загруженное содержимое в #{Rails.root}/public/uploads под тем же именем, что и исходный файл.

def upload
  uploaded_file = params[:picture]
  File.open(Rails.root.join('public', 'uploads', uploaded_file.original_filename), 'wb') do |file|
    file.write(uploaded_file.read)
  end
end

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

Объект, который передается от form_with и fields_for, — это экземпляр ActionView::Helpers::FormBuilder. Form builder инкапсулирует представление элементов формы для отдельного объекта. Хотя, конечно, можно писать хелперы для своих форм обычным способом, так же как можно объявить подкласс ActionView::Helpers::FormBuilder и добавить хелперы туда. Например:

<%= form_with model: @person do |form| %>
  <%= text_field_with_label form, :first_name %>
<% end %>

может быть заменено этим

<%= form_with model: @person, builder: LabellingFormBuilder do |form| %>
  <%= form.text_field :first_name %>
<% end %>

через определение класса LabellingFormBuilder подобным образом:

class LabellingFormBuilder < ActionView::Helpers::FormBuilder
  def text_field(attribute, options={})
    label(attribute) + super
  end
end

Если это используется часто, можно определить хелпер labeled_form_with который автоматически определяет опцию builder: LabellingFormBuilder:

def labeled_form_with(model: nil, scope: nil, url: nil, format: nil, **options, &block)
  options.merge! builder: LabellingFormBuilder
  form_with model: model, scope: scope, url: url, format: format, **options, &block
end

Form builder также определяет, что произойдет, если вы сделаете:

Если f — это экземпляр ActionView::Helpers::FormBuilder, тогда это отрендерит партиал form, установив объект партиала как form builder. Если у form builder есть класс LabellingFormBuilder, тогда вместо него будет отрендерен партиал labelling_form.

8. Понимание соглашений по именованию параметров

Значения из форм могут быть на верхнем уровне хэша params или вложены в другой хэш. Например, в стандартном экшне create для модели Person, params[:person] будет обычно хэшем всех атрибутов для создания персоны. Хэш params может также содержать массивы, массивы хэшей и тому подобное.

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

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

<input name="person[name]" type="text" value="Henry"/>

хэш params будет содержать

{'person' => {'name' => 'Henry'}}

и params[:person][:name] получит отправленное значение в контроллере.

Хэши могут быть вложены на столько уровней, сколько требуется, например:

<input name="person[address][city]" type="text" value="New York"/>

вернет такой хэш params

{'person' => {'address' => {'city' => 'New York'}}}

Обычно Rails игнорирует дублирующиеся имена параметра. Если имя параметра заканчивается пустым набором квадратных скобок [], то они будут накоплены в массиве. Если нужно, чтобы пользователи могли оставить несколько телефонных номеров, можно поместить это в форму:

<input name="person[phone_number][]" type="text"/>
<input name="person[phone_number][]" type="text"/>
<input name="person[phone_number][]" type="text"/>

Что приведет к тому, что params[:person][:phone_number] будет массивом, содержащим введенные телефонные номера.

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

<input name="person[addresses][][line1]" type="text"/>
<input name="person[addresses][][line2]" type="text"/>
<input name="person[addresses][][city]" type="text"/>
<input name="person[addresses][][line1]" type="text"/>
<input name="person[addresses][][line2]" type="text"/>
<input name="person[addresses][][city]" type="text"/>

Это приведет к тому, что params[:person][:addresses] будет массивом хэшей с ключами line1, line2 и city.

Однако, имеется ограничение, в то время как хэши могут быть вложены произвольно, является допустимым только один уровень «массивности». Массивы обычно могут быть заменены хэшами; например, вместо массива объектов модели можно иметь хэш объектов модели с ключами, равными их id, индексу массива или любому другому параметру.

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

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

<%= form_with model: @person do |person_form| %>
  <%= person_form.text_field :name %>
  <% @person.addresses.each do |address| %>
    <%= person_form.fields_for address, index: address.id do |address_form| %>
      <%= address_form.text_field :city %>
    <% end %>
  <% end %>
<% end %>

Предположим, у кого-то есть два адреса с id 23 и 45, это создаст что-то подобное:

<form accept-charset="UTF-8" action="/people/1" method="post">
  <input name="_method" type="hidden" value="patch" />
  <input name="person[name]" type="text" />
  <input name="person[address][23][city]" type="text" />
  <input name="person[address][45][city]" type="text" />
</form>

Это приведет к тому, что хэш params будет выглядеть так

{'person' => {'name' => 'Bob', 'address' => {'23' => {'city' => 'Paris'}, '45' => {'city' => 'London'}}}}

Rails знает, что все эти поля ввода должны быть частью хэша person, так как fields_for вызывается для первого form builder. Определив опцию :index, сообщается Rails, что вместо именования полей ввода person[address][city], он должен вставить индекс, заключенный в [], между address и city. Это часто бывает полезно, так как тогда просто обнаружить, какая запись Address должна быть модифицирована. Также можно передавать числа с некоторым другим значением, строками или даже nil (который приведет к созданию параметра в массиве).

Чтобы создать более замысловатые вложения, можно явно указать первую часть имени поля ввода (person[address] в предыдущем примере):

<%= fields_for 'person[address][primary]', address, index: address.id do |address_form| %>
  <%= address_form.text_field :city %>
<% end %>

создаст такие поля ввода

<input name="person[address][primary][1][city]" type="text" value="Bologna" />

Как правило, конечное имя поля ввода — это сцепление имени, переданного в fields_for/form_with, значения индекса и имени атрибута. Можно также передать опцию :index прямо в хелперы, такие как text_field, но обычно будет меньше повторов, если определить это на уровне form builder, а не для отдельных элементах управления input.

Как ярлык вы можете добавить [] к имени и опустить опцию :index. Это то же самое, что определение index: address.id, таким образом

<%= fields_for 'person[address][primary][]', address do |address_form| %>
  <%= address_form.text_field :city %>
<% end %>

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

Хелперы форм Rails можно использовать и для создания форм для передачи данных внешнему ресурсу. Однако, иногда необходимо установить authenticity_token для ресурса; это можно осуществить, передав параметр authenticity_token: 'your_external_token' в опциях form_with:

<%= form_with url: 'http://farfar.away/form', authenticity_token: 'external_token' do %>
  Form contents
<% end %>

Иногда при отправке данных внешнему ресурсу, такому как платежный шлюз, поля, которые можно использовать в форме, ограничены внешним API, и генерация authenticity_token нежелательна. Чтобы не посылать токен, просто передайте false в опцию :authenticity_token:

<%= form_with url: 'http://farfar.away/form', authenticity_token: false do %>
  Form contents
<% end %>

Многие приложения выходят за рамки простых форм, редактирующих одиночные объекты. Например, при создании Person можно позволить пользователю (в той же самой форме) создать несколько записей адресов (домашний, рабочий и т.д.). При последующем редактировании этого person, пользователю должно быть доступно добавление, удаление или правка адреса, если это необходимо.

Active Record предоставляет поддержку на уровне модели с помощью метода accepts_nested_attributes_for:

class Person < ApplicationRecord
  has_many :addresses, inverse_of: :person
  accepts_nested_attributes_for :addresses

end

class Address < ApplicationRecord
  belongs_to :person
end

Это создаст метод addresses_attributes= в Person, позволяющий создавать, обновлять и (опционально) уничтожать адреса.

Следующая форма позволяет пользователю создать Person и связанные с ним адреса.

<%= form_with model: @person do |form| %>
  Addresses:
  <ul>
    <%= form.fields_for :addresses do |addresses_form| %>
      <li>
        <%= addresses_form.label :kind %>
        <%= addresses_form.text_field :kind %>

        <%= addresses_form.label :street %>
        <%= addresses_form.text_field :street %>
        ...
      </li>
    <% end %>
  </ul>
<% end %>

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

def new
  @person = Person.new
  2.times { @person.addresses.build }
end

fields_for вкладывает form builder. Имя параметра будет таким, какое ожидает accepts_nested_attributes_for. К примеру, при создании пользователя с 2 адресами, отправленные параметры будут выглядеть так

{
  'person' => {
    'name' => 'John Doe',
    'addresses_attributes' => {
      '0' => {
        'kind' => 'Home',
        'street' => '221b Baker Street'
      },
      '1' => {
        'kind' => 'Office',
        'street' => '31 Spooner Street'
      }
    }
  }
}

Ключи хэша :addresses_attributes не важны, они всего лишь должны быть различными для каждого адреса.

Если связанный объект уже сохранен, fields_for автоматически генерирует скрытое поле с id сохраненной записи. Это можно отключить, передав include_id: false в fields_for.

Как обычно, в контроллере необходимо объявить разрешенные параметры, перед их передачей в модель:

def create
  @person = Person.new(person_params)
  # ...
end

private
  def person_params
    params.require(:person).permit(:name, addresses_attributes: [:id, :kind, :street])
  end

Можно позволить пользователям удалять связанные объекты, передав allow_destroy: true в accepts_nested_attributes_for

class Person < ApplicationRecord
  has_many :addresses
  accepts_nested_attributes_for :addresses, allow_destroy: true
end

Если хэш атрибутов для объекта содержит ключ _destroy со значением, вычисляющимся как ‘true’ (например, 1, ‘1’, true или ‘true’), тогда объект будет уничтожен. Эта форма позволяет пользователям удалять адреса:

<%= form_with model: @person do |form| %>
  Addresses:
  <ul>
    <%= form.fields_for :addresses do |addresses_form| %>
      <li>
        <%= addresses_form.check_box :_destroy %>
        <%= addresses_form.label :kind %>
        <%= addresses_form.text_field :kind %>
        ...
      </li>
    <% end %>
  </ul>
<% end %>

Не забудьте обновить список разрешенных параметров в вашем контроллере, а также включить туда поле _destroy:

def person_params
  params.require(:person).
    permit(:name, addresses_attributes: [:id, :kind, :street, :_destroy])
end

Часто полезно игнорировать наборы полей, которые пользователь не заполнял. Этим можно управлять, передав :reject_if proc в accepts_nested_attributes_for. Этот proc будет вызван для каждого хэша атрибутов, отправляемого формой. Если proc возвращает false, тогда Active Record не создаст связанный объект для этого хэша. Следующий пример пытается создать адрес, если установлен атрибут kind.

class Person < ApplicationRecord
  has_many :addresses
  accepts_nested_attributes_for :addresses, reject_if: lambda {|attributes| attributes['kind'].blank?}
end

Вместо этого для удобства можно передать символ :all_blank, который создаст proc, который отвергнет записи, когда все атрибуты пустые, за исключением любого значения для _destroy.

Вместо того, чтобы рендерить несколько наборов полей раньше времени, можно добавить их только тогда, когда пользователь нажимает на кнопку ‘Добавить новый адрес’. Rails не предоставляет какой-либо встроенной поддержки для этого. При генерации новых наборов полей следует убедиться, что ключ связанного массива уникальный — наиболее распространенным выбором является текущий JavaScript date (миллисекунды после epoch).

Если нужно отрендерить поля формы вне контекста построителя формы, Rails предоставляет хелперы тега для обычных элементов формы. Например, check_box_tag:

<%= check_box_tag "accept" %>

Выведет:

<input type="checkbox" name="accept" value="1" />

Обычно у этих хелперов те же имена, что и у их аналогов в построителе форм плюс суффикс _tag. Полный список смотрите в документации FormTagHelper API.

До того, как form_with был представлен в Rails 5.1, его функционал был разделен между form_tag и form_for. Последние сейчас мягко устаревшие. Документация по их использованию находится в старых версиях этого руководства.

семантические теги html5, аудио и видео теги, вводить новые типы

основы html5

грамматика
• ContentType
◦ Расширение файла HTML5 и тип содержимого остаются без изменений, по-прежнему «.html» или «.htm»
• Объявление DOCTYPE
◦ Без учета регистра
• Укажите кодировку набора символов.

• Элементы, которые можно опустить
◦ Элементы, которые не позволяют закрывать теги: br, col, embed, hr, img, input ,,
link、meta
• Элементы, закрывающий тег которых можно опустить:
◦ li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
• Вы можете опустить все отмеченные элементы: html, head, body, colgroup, tbody.
• В качестве значения атрибута можно использовать двойные или одинарные кавычки.
Семантические теги
До выхода HTML 5 мы использовали блоки div для представления глав страницы, но эти блоки не имели практического значения. (Даже если мы используем идентификатор стиля и класс css для описания значения этого фрагмента контента). Эти теги представляют собой всего лишь инструкции, которые мы предоставляем браузеру для определения определенных частей веб-страницы. Но теперь те, кто не
• Элемент section представляет раздел на странице.
• Элемент article представляет собой часть независимого содержания, не имеющего контекста.
• элемент aside За пределами статьи, вспомогательная информация, относящаяся к содержанию статьи.
• Элемент заголовка представляет заголовок блока содержимого или всей страницы на странице.
• Элемент нижнего колонтитула представляет нижний колонтитул блока содержимого или всю страницу на странице.
• элемент nav представляет часть страницы с навигационной ссылкой.
• Элемент figure представляет часть независимого содержимого, а элемент figurecaption используется для добавления к нему заголовка (первого или последнего
позиция вложенного элемента)
• Главный элемент представляет основное содержание страницы (т. е. несовместимо).
• Группа заголовков hgroup
• метка определяет выделенный текст (диапазон)
• время
• Тег dialog определяет диалоговое окно (диалоговое окно), подобное WeChat.
• Тег embed определяет внешний интерактивный контент или плагины, такие как flash.

Теги аудио и видео:
video: тег видео
audio: тег аудио

                        Атрибуты:
                                 src = "Адрес файла"
                                 controls = "элементы управления дисплеем"
                                 autoplay = "autoplay" Google заблокирован
                                 loop = "Циклическое воспроизведение"
                                 приглушенный = "без звука"
                                 poster = "адрес изображения" отображается как первое изображение, пока пользователь не нажмет кнопку воспроизведения.
                 
                         исходный тег: определить медиаресурс (файл резервной копии)
                                 type = "тип файла"
                                 тип файла: 
                                         Видео:
                        video/ogg
                        video/webm
                        video/mp4
                                         Аудио:
                        audio/ogg
                        audio/mpeg
                        audio/wav
                                                 Основной формат аудиофайлов mp3 ogg wav

Недавно добавленный тип ввода
type = «email» Введите свой адрес электронной почты
type = «url» Введите URL-адрес
type = «range» ползунок
type = «number» Пожалуйста, введите число
type = «search» форма поиска
type = «color» Создать цветовую форму

            Как понимание
                         type = "time" ограничивает пользователя вводить тип времени
                         type = "month" ограничивает пользователей вводом типа месяца
                         type = "week" ограничивает пользователей вводом типа недели
                         type = "datetime-local" выберите местное время
                         type = ”date” год месяц день
             
                 Новые атрибуты формы:
                         обязательно Проверить, пусто ли оно (обязательное поле)
                         размер шага, определить значение -4 0 4 8
                         min ограниченный минимум
                         макс ограниченный максимум
             
                         autoplete = "Следует ли автоматически связывать информацию о подсказках"
                                 при ассоциации значений по умолчанию
                                 не имеет значения
                 
                         placeholder = "Запросить информацию о текстовом поле"
             
                         автофокус автофокус, исходное положение курсора, на странице всего один
             
                         pattern = "Регулярное выражение" Вы можете указать юридический формат самостоятельно
                                 // Регулярное выражение номера мобильного телефона: ^ 1 [3 | 5 | 8] \ d {9} $
                 
                         novalidate = "Отменить проверку"   
             
                         множественный
             
                         список действителен в сочетании с атрибутом id тега datalist
             
                 Недавно добавленные теги:
            <input type="text" list="aa" />
            <datalist>
                <option value="http://www.baidu.com"></option>
                <option value="http://www.vip.com"></option>
                <option value="http://www.mao.com"></option>
                <option value="http://www.taobao.com"></option>
            </datalist>
             
                         output output tag, используемый для вывода результата расчета или вывода скрипта

— HTML: язык разметки гипертекста

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

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

Проверка

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

  • Если для значения установлено значение , которое не может быть преобразовано в действительное число с плавающей запятой, проверка не удастся, потому что входной сигнал страдает от неправильного ввода.
  • Значение не будет меньше мин. .По умолчанию — 0.
  • Значение не будет больше макс. . По умолчанию — 100.
  • Значение будет кратно шагу . По умолчанию 1.

Value

Атрибут value содержит DOMString , который содержит строковое представление выбранного числа. Значение никогда не бывает пустой строкой ( "" ). Значение по умолчанию находится на полпути между указанным минимумом и максимумом — если максимум на самом деле меньше минимума, и в этом случае по умолчанию устанавливается значение атрибута min .Алгоритм определения значения по умолчанию:

  defaultValue = (rangeElem.max  

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

В дополнение к атрибутам, общим для всех элементов , входные данные диапазона предлагают следующие атрибуты:

Атрибут Описание
список Идентификатор элемента , который содержит необязательные предопределенные параметры
макс. Максимально допустимое значение
мин. Минимально допустимое значение
шаг Шаговый интервал, используемый как для пользовательского интерфейса, так и для целей проверки

список

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

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

max

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

Это значение должно быть больше или равно значению атрибута min . См. Атрибут HTML max .

мин.

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

Это значение должно быть меньше или равно значению атрибута max . См. Атрибут HTML min .

step

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

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

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

Значение шага по умолчанию для входов диапазона равно 1, что позволяет вводить только целые числа, , если не является целым числом; Например, если вы установите min на -10 и значение на 1.5, то шаг из 1 разрешит только такие значения, как 1,5, 2,5, 3,5, ... в положительном направлении и -0,5, -1,5, -2,5, ... в отрицательном направлении. См. Атрибут HTML step .

Нестандартные атрибуты

Атрибут Описание
Ориент Устанавливает ориентацию ползунка диапазона. Только Firefox.

orient

Подобно нестандартному свойству CSS -moz-orient, влияющему на элементы и , атрибут orient определяет ориентацию ползунка диапазона.Значения включают по горизонтали, , что означает, что диапазон отображается по горизонтали, и по вертикали, , где диапазон отображается по вертикали.

Примечание: Следующие входные атрибуты не применяются к диапазону ввода: accept , alt , checked , dirname , formaction , formenctype , formmethod , formnovalidate 9000target, formnovalidate 9000target, , высота , макс. Длина , мин. Длина , несколько , шаблон , заполнитель , только чтение , требуется , размер , src и ширинаЛюбой из этих атрибутов, если он есть, будет проигнорирован.

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

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

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

Как правило, если пользователя больше интересует процент расстояния между минимальным и максимальным значениями, чем само фактическое число, вход диапазона является отличным кандидатом. Например, в случае регулятора громкости домашней стереосистемы пользователи обычно думают «установить громкость на полпути к максимуму», а не «установить громкость на 0».5 ".

Указание минимума и максимума

По умолчанию минимальное значение равно 0, а максимальное - 100. Если это не то, что вы хотите, вы можете легко указать другие границы, изменив значения min и / или макс. атрибутов. Это может быть любое значение с плавающей запятой.

Например, чтобы запросить у пользователя значение от -10 до 10, вы можете использовать:

    

Установка степени детализации значения

По умолчанию степень детализации равна 1, что означает, что значение всегда является целым числом.Вы можете изменить атрибут step , чтобы контролировать степень детализации. Например, если вам нужно значение от 5 до 10 с точностью до двух десятичных знаков, вы должны установить значение шаг на 0,01:

.
    

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

    

Этот пример позволяет пользователю выбрать любое значение от 0 до π без каких-либо ограничений на дробную часть выбранного значения.

Добавление меток и меток

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

Мокапы управления диапазоном

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

Регулятор дальности без прикрас

Это то, что вы получите, если не укажете атрибут list или если браузер его не поддерживает.

HTML Примеры
Скриншот
Live
Регулятор диапазона с решетками

Этот элемент управления диапазоном использует атрибут list , определяющий идентификатор , который определяет серию хэш-меток на элементе управления.Их одиннадцать, так что по одному при 0%, а также на каждой отметке 10%. Каждая точка представлена ​​с использованием элемента с его значением , установленным на значение диапазона, в котором должна быть нарисована метка.

HTML Примеры
  


  
  
  
  
  
  
  
  
  
  
  

  
Скриншот
Live
Элемент управления диапазоном с решетками и метками

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

HTML Примеры
  


  
  
  
  
  
  
  
  
  
  
  

  
Скриншот
Live

Примечание : В настоящее время ни один браузер не поддерживает эти функции полностью.Например, Firefox вообще не поддерживает хэш-метки и метки, тогда как Chrome поддерживает хеш-метки, но не поддерживает метки. Версия 66 (66.0.3359.181) Chrome поддерживает метки, но тег должен быть оформлен с помощью CSS, так как его свойство display по умолчанию установлено на none , скрывая метки.

Изменить ориентацию

По умолчанию, если браузер отображает ввод диапазона как ползунок, он будет отображать его так, чтобы ручка скользила влево и вправо.Если поддерживается, мы сможем сделать диапазон вертикальным, чтобы перемещаться вверх и вниз с помощью CSS, объявив значение высоты больше, чем значение ширины. На самом деле это еще не реализовано ни одним из основных браузеров. (См. Ошибку Firefox 981916, ошибку Chrome 341071). Это тоже, возможно, все еще обсуждается.

Между тем, мы можем сделать диапазон вертикальным, повернув его с помощью преобразований CSS или настроив каждый движок браузера своим собственным методом, который включает в себя настройку внешнего вида до вертикальный ползунок , используя нестандартный Ориентируйте атрибут в Firefox или изменив направление текста для Internet Explorer и Edge.

Рассмотрим этот диапазон управления:

    
Скриншот Живой образец

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

Стандарты

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

CSS
  #volume {
  высота: 150 пикселей;
  ширина: 50 пикселей;
}  
HTML
    
Результат
Скриншот Живой образец

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

преобразование: поворот (-90deg)

Однако вы можете создать элемент управления вертикальным диапазоном, нарисовав элемент управления горизонтальным диапазоном на его стороне. Самый простой способ - использовать CSS: применив преобразование для поворота элемента, вы можете сделать его вертикальным. Давайте взглянем.

HTML

Необходимо обновить HTML, чтобы обернуть в

, чтобы мы могли исправить макет после выполнения преобразования (поскольку преобразования не влияют на макет страницы автоматически):

  
CSS

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

  .slider-wrapper {
  дисплей: встроенный блок;
  ширина: 20 пикселей;
  высота: 150 пикселей;
  отступ: 0;
}
  

Затем идет информация о стиле для элемента в зарезервированном пространстве:

 .slider-wrapper input {
  ширина: 150 пикселей;
  высота: 20 пикселей;
  маржа: 0;
  трансформация происхождения: 75 пикселей 75 пикселей;
  преобразовать: повернуть (-90deg);
}  

Размер элемента управления составляет 150 пикселей в длину и 20 пикселей в высоту. Поля устанавливаются на 0, а transform-origin смещается в середину пространства, через которое перемещается ползунок; поскольку ползунок имеет ширину 150 пикселей, он вращается через прямоугольник, размер которого составляет 150 пикселей с каждой стороны. Смещение начала координат на 75 пикселей по каждой оси означает, что мы будем вращаться вокруг центра этого пространства.Наконец, мы поворачиваем против часовой стрелки на 90 °. Результат: вход диапазона, который вращается так, чтобы максимальное значение было вверху, а минимальное значение - внизу.

Снимок экрана Живой образец

Свойство внешнего вида

Свойство Внешний вид имеет нестандартное значение ползунок-вертикальный , что, в общем, делает ползунки вертикальными.

HTML

Мы используем тот же HTML, что и в предыдущих примерах:

  
  
CSS

Мы нацелены только на входы с типом диапазона:

  input [type = "range"] {
  -webkit-appearance: вертикальный слайдер;
}  

orient attribute

Только в Firefox есть нестандартное свойство orient .

HTML

Используйте аналогичный HTML-код, как в предыдущих примерах, мы добавляем атрибут со значением по вертикали :

  
  

режим записи: bt-lr;

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

HTML

Мы используем тот же HTML, что и в предыдущих примерах:

  
  
CSS

Мы ориентируемся только на входы с типом диапазона, изменяя режим записи со значения по умолчанию на bt-lr или снизу вверх и слева направо:

  input [type = "range"] {
  режим письма: bt-lr;
}  

Собираем все вместе

Поскольку каждый из приведенных выше примеров работает в разных браузерах, вы можете объединить их все в один пример, чтобы он работал в разных браузерах:

HTML

Мы сохраняем атрибут orient со значением по вертикали для Firefox:

  
  
CSS

Мы нацелены только на входы с типом диапазона, изменяя режим записи со значения по умолчанию на bt-lr или снизу вверх и слева направо для Edge и Internet Explorer, и добавляем -webkit - внешний вид: вертикальный слайдер для всех браузеров на основе webkit:

  input [type = "range"] {
  режим письма: bt-lr;
  -webkit-appearance: вертикальный слайдер;
}  

Таблицы BCD загружаются только в браузере

Как использовать тип ввода диапазона HTML5

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

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

Как следует из названия, наиболее распространенное использование ввода ползунка - это когда мы знаем самый низкий и самый высокий входы, которые могут быть даны в качестве ответа. Например, если мы разрабатываем веб-сайт, который разрешает доступ только пользователям возрастной группы 18-40 лет. Мы можем использовать год рождения в виде скользящего диапазона ввода с наименьшим значением 1986 г., а наибольшим - 1998 г. Ввод с помощью ползунка представляет собой интуитивно понятный пользовательский интерфейс, который выступает в качестве альтернативы вводу простого текстового поля или раскрывающемуся списку с фиксированными значения.

Лучше всего ввод диапазона, если с ним связаны вычисления. Гибкость перемещения элементов управления и просмотра результата «вживую» не имеет себе равных.

Как создать элемент диапазона скольжения ввода в HTML?

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

  
  

Вот ключевые атрибуты:

  • мин (наименьшее допустимое значение в диапазоне)
  • max (максимальное допустимое значение в диапазоне)
  • шаг (значение шага увеличения / уменьшения по умолчанию равно 1)
  • Значение
  • (начальное значение или значение по умолчанию для ползунка)

Отображение текущего значения

Элемент диапазона по умолчанию будет отображать только текущую позицию ползунка, и пользователь должен угадать точное значение.Поэтому, чтобы избежать догадок, вы должны использовать одну из альтернатив для отображения текущего значения. Вот решение в основном HTML. (хотя в атрибуте используется Javascript)

Решение jQuery для отображения значений для всех элементов ввода диапазона

Более многоразовым решением было бы создать фрагмент jquery, который обрабатывает событие изменения для всех входных элементов диапазона. Вот код:

Отрицательные и десятичные значения в диапазоне ввода

Да, вы можете иметь отрицательные и десятичные значения на входе диапазона, см. Ниже некоторые примеры:

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


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


Атрибут значения

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

Пример

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









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

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

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

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

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

Пример

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









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

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

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

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

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

Пример

Неактивное поле ввода:









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

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

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

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

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

Пример

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









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

Атрибут maxlength

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

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

Пример

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









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

Атрибуты min и max

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

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

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

Пример

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


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






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

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

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

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

Пример

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




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

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

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

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

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

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

Пример

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



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

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

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

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

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

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

Пример

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



placeholder = "123-45-678"
шаблон = "[0-9] {3} - [0-9] {2} - [0-9] {3}">

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

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

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

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

Пример

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




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

Атрибут шага

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

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

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

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

Пример

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




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

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


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

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

Пример

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









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

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

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

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

Пример

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











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

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

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

Пример

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





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

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

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

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

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

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

Пример

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















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

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


Упражнения HTML

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

упражнение:

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




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

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


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

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


cfinput

Атрибут

Треб / Опт; форматы

По умолчанию

Описание

название

Обязательно; все

Имя элемента ввода формы.

автоподсказка

Дополнительно, HTML

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

  • Строка, состоящая из предлагаемых значений, разделенных разделителем, заданным атрибутом разделителя.
  • Выражение привязки, которое получает предлагаемые значения на основе текущего входного текста. Выражение связывания должно передавать параметр связывания cfautosuggestvalue для представления пользовательского ввода.
    Действительно только для cfinput type = "text".
    Дополнительные сведения см. В разделе Использование полей автоматического ввода текста в документе Разработка приложений ColdFusion

autosuggestBindDelay

Дополнительно, HTML

1 секунда

Ненулевое целое число, указывающее минимальное время в секундах между вызовами выражения привязки автозаполнения.Это значение также определяет задержку с момента, когда пользователь впервые вводит запись минимальной длины в поле, до появления окна предложения. Используйте этот атрибут, чтобы ограничить количество запросов, отправляемых на сервер, когда пользователь вводит текст. Действителен только для cfinput type = "text".
Примечание: Единственный способ получить поведение по умолчанию - это опустить атрибут. В противном случае задержка должна быть ненулевым целым числом.

autosuggestMinLength

Дополнительно, HTML

1

Минимальное количество символов, необходимое в текстовом поле перед вызовом выражения привязки для возврата элементов для предложения.Действительно только для cfinput type = "text".

переплет

Дополнительно; HTML, Flash

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

bindAttribute

Дополнительно; HTML

значение

Задает атрибут тега HTML, значение которого устанавливается атрибутом привязки.Вы можете указывать только атрибуты в дереве HTML DOM браузера, но не атрибуты, специфичные для ColdFusion.
Игнорируется, если нет атрибута привязки. Действительно только для cfinput type = "text".

bindOnLoad

Дополнительно; HTML

Логическое значение, указывающее, следует ли выполнять выражение атрибута привязки при первой загрузке формы. Игнорируется, если нет атрибута привязки.Действительно только для cfinput type = "text".

проверено

Дополнительно; все

Выбирает переключатель или флажок:

  • да
  • нет
    Для формата HTML можно указать, что элемент выбран, указав значение как отмеченное или указав атрибут без значения.

день Имена

Дополнительно; все

S, M, T, W, T, F, S

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

разделитель

Дополнительно, HTML

запятая (,)

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

отключен

Дополнительно; все

не отключен

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

  • Формы формата HTML: ColdFusion передает этот атрибут непосредственно в HTML. Чтобы отключить ввод, укажите значение disabled без значения (формат HTML) или с отключенным значением (совместимость с XHTML).Чтобы включить ввод, опустите этот атрибут.
  • Формы формата Flash: чтобы отключить ввод, укажите disabled без атрибута или disabled = "yes" (или любое положительное логическое значение ColdFusion, например true). Чтобы включить ввод, опустите атрибут или укажите disabled = "no" (или любое отрицательное логическое значение ColdFusion, например false).

включен

Дополнительно; Флэш

да

Логическое значение, указывающее, включен ли элемент управления.Отключенный элемент управления отображается светло-серым цветом. Инверсия отключенного атрибута.

первая неделя

Дополнительно; все

0

Относится только к типу поля даты. Целое число в диапазоне 0–6, которое указывает первый день недели в календаре: 0 означает воскресенье; 6 означает субботу.

высота

Дополнительно; см. Описание

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

id

Дополнительно; HTML

имя значение атрибута

Идентификатор HTML формы.

этикетка

Дополнительно; Flash, XML

Ярлык для размещения рядом с элементом управления на форме Flash.Не используется для типов кнопки, скрытого, изображения, сброса или отправки.

маска

Дополнительно; Flash, HTML

Для тегов с type = "text". Шаблон маски, который управляет шаблоном символов, который пользователи могут вводить или который форма отправляет в ColdFusion. Символы маски и соответствующие допустимые символы ввода:

  • А = А-За-Я
  • X = A-Za-z0-9
  • 9 = 0-9
  • ? = Любой символ
  • Все остальные символы = вставить буквальный символ
    Для тегов с type = "datefield" шаблон, который управляет форматом дат, который пользователь выбирает в календаре.Символы маски:
  • D = день; можно использовать символы маски 0–2.
  • M = месяц; можно использовать от 0 до 4 символов маски.
  • Y = год; может использовать 0, 2 или 4 символа.
  • E = день в неделю; можно использовать 0-4 символа.
    Дополнительные сведения см. В разделе «Использование».

соответствует

Дополнительно

ложь

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

макс. Длина

Дополнительно; все

Максимальная длина вводимого текста, если тип = «Текст» или «пароль». Для полной проверки длины укажите maxLength validation в атрибуте validate; в противном случае этот атрибут не позволяет пользователям вводить текст сверх указанной длины, но не предотвращает вставку более длинного значения.

max Отображаемые результаты

Дополнительно; HTML

10

Максимальное количество предложений для отображения в списке автоматических предложений. Действительно только для cfinput type = "text".

сообщение

Дополнительно; все

Текст сообщения, отображаемый в случае сбоя проверки.

месяц Имена

Дополнительно; все

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

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

onBindError

Дополнительно; HTML

См. Описание

Имя функции JavaScript, выполняемой, если оценка выражения привязки, включая автоматическое предложение выражения привязки, приводит к ошибке. Функция должна принимать два атрибута: код состояния HTTP и сообщение.
Если вы опустите этот атрибут и указали глобальный обработчик ошибок (с помощью theColdFusion.setGlobalErrorHandler) выводит сообщение об ошибке; в противном случае отображается всплывающее окно с ошибкой по умолчанию.

на замену

Дополнительно; все

JavaScript (HTML / XML) или ActionScript (Flash) для запуска, когда элемент управления изменяется из-за действия пользователя. Во Flash применяется только к типам поля даты, пароля и текста.

onClick

Дополнительно; все

JavaScript (HTML / XML) или ActionScript (Flash) для запуска, когда пользователь щелкает элемент управления.Во Flash применяется только к типам кнопки, флажка, изображения, радио, сброса и отправки.

при ошибке

Дополнительно; HTML, XML

Имя пользовательской функции JavaScript, выполняемой в случае сбоя проверки.

onKeyDown

Дополнительно; все

JavaScript (HTML / XML) или ActionScript (Flash) ActionScript для запуска, когда пользователь нажимает клавишу клавиатуры в элементе управления.

onKeyUp

Дополнительно; все

JavaScript (HTML / XML) или ActionScript (Flash) для запуска, когда пользователь отпускает клавишу клавиатуры в элементе управления.

on MouseDown

Дополнительно; все

JavaScript (HTML / XML) или ActionScript (Flash) для запуска, когда пользователь отпускает кнопку мыши в элементе управления.

on MouseUp

Дополнительно; все

JavaScript (HTML / XML) или ActionScript (Flash) для запуска, когда пользователь нажимает кнопку мыши в элементе управления.

on Validate

Дополнительно; HTML, XML

Имя пользовательской функции JavaScript для проверки ввода данных пользователем.Значения объекта формы, объекта ввода и объекта ввода передаются в подпрограмму, которая должна возвращать true, если проверка прошла успешно, и false в противном случае. Если используется, атрибут проверки игнорируется.

образец

Требуется, если validate = "regex"; HTML, XML

Шаблон регулярного выражения JavaScript для проверки ввода. ColdFusion использует этот атрибут только в том случае, если вы укажете regex в атрибуте validate.Пропускайте косые черты в начале и в конце. Примеры и синтаксис см. В разделе Создание динамических форм с помощью тегов cfform в книге Разработка приложений ColdFusion .

диапазон

Дополнительно; все

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

только чтение

Дополнительно; Flash, HTML

Применяется к формам HTML и Flash. Действительно только для cfinput type = "text". ColdFusion игнорирует этот атрибут для всех других типов ввода.

требуется

Дополнительно; все

  • да: поле должно содержать данные.
  • no: разрешает пустое поле.

показать

Дополнительно; HTML

правда

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

размер

Дополнительно; все

Размер элемента управления вводом. Игнорируется, если type = "radio" или "checkbox". Если указано в форме Flash, ColdFusion устанавливает значение пикселя ширины элемента управления в 10 раз больше указанного размера и игнорирует атрибут ширины.

sourceForTooltip

Дополнительно; HTML

URL-адрес страницы, отображаемой как всплывающая подсказка.Страница может включать разметку HTML для управления форматом, а подсказка может включать изображения.
Если вы укажете этот атрибут, во время загрузки подсказки появится анимированный значок с текстом «Загрузка ...».

src

Дополнительно; Flash, HTML

Применяется к типам кнопки Flash, сброса, отправки и изображения, а также к типу изображения HTML. URL-адрес изображения для использования на кнопке.

стиль

Дополнительно; все

В формате HTML или XML ColdFusion передает атрибут стиля браузеру или XML.
В формате Flash должна быть спецификацией стиля в формате CSS. Подробную информацию об указании стилей Flash см. В разделе «Создание форм во Flash» документа «Разработка приложений ColdFusion ».
В формате XML ColdFusion передает атрибут стиля в XML.

всплывающая подсказка

Дополнительно; Flash, HTML

Текст, отображаемый при наведении указателя мыши на элемент управления.
Игнорируется, если вы указываете атрибут sourceForTooltip.

тип

Дополнительно; все

текст

Тип элемента управления вводом для создания:

  • кнопка: кнопка.
  • Флажок
  • : флажок.
  • Поле даты
  • : только HTML и Flash; поле ввода даты с расширяющимся календарем, в котором пользователи выбирают дату или даты. Только в формате HTML пользователи также могут ввести дату, введя ее в это поле.
  • файл: селектор файлов; не поддерживается во Flash. Не поддерживается при использовании отправки формы Ajax для асинхронной отправки формы со страницы.
  • скрыто: невидимое управление.
  • изображение: кликабельная кнопка с изображением.
  • пароль: контроль ввода пароля; скрывает входные значения.
  • Радио
  • : радио-кнопка.
  • сброс: кнопка сброса формы.
  • submit: кнопка отправки формы.
  • текст: поле ввода текста.
    Атрибут поддерживает все типы ввода HTML 5, например электронную почту, диапазон или дату.

наперед

Дополнительно; HTML

Логическое значение, указывающее, должна ли функция автоматического предложения автоматически завершать ввод пользователя первым результатом в списке предложений. Действительно только для cfinput type = "text".

подтвердить

Дополнительно; все

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

проверить на

Дополнительно; все

on Отправить

Как сделать проверку; одно или несколько из следующих значений:

  • on Отправить
  • на сервере
  • onBlur
    Значения onBlur и onSubmit идентичны в формах Flash. Для нескольких значений используйте список, разделенный запятыми.Подробнее см. Использование.

значение

зависит от настройки типа; все

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

видимый

Дополнительно; Флэш

да

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

ширина

Дополнительно; см. Описание

Применимо к большинству типов Flash и изображений HTML в некоторых браузерах. Ширина элемента управления в пикселях. Для форм Flash ColdFusion игнорирует этот атрибут, если вы также указываете значение атрибута размера.

Не заключенные в кавычки значения атрибутов в селекторах HTML и CSS / JS · Матиас Биненс

Это один из тех постов, которые я написал, чтобы иметь возможность вернуться к нему позже.Я вижу много вопросов по этой теме, и хотя я не против объяснять одно и то же снова и снова, вероятно, проще просто записать это один раз.

Значения атрибутов без кавычек в HTML

Большинство людей привыкло указывать в кавычках все значения атрибутов в написанном ими HTML. Например:

   baz   

Можно также использовать одинарные кавычки:

   baz   

Однако следующий допустимый HTML также:

   baz   

В этом нет ничего нового - фактически, использование значений атрибутов без кавычек поддерживается начиная с HTML 2.0 (первый стандарт HTML). Однако это запрещено в XHTML. (А если серьезно, кто использует XHTML‽)

В HTML значение атрибута может использоваться без кавычек при определенных условиях. Например, если вы попытаетесь использовать значение атрибута с пробелами в нем без его цитирования , данные будут прерваны:

   




Конечно, bar не является допустимым атрибутом HTML.Таким образом, просто опуская две кавычки, вы получаете недопустимый код и элемент

, который не получает имя класса bar , которое вы хотели. И это лишь один из множества примеров…

Если вас это не испугало, вы, вероятно, захотите узнать, каковы требования к значениям атрибутов без кавычек в HTML. Давай выясним!

В спецификации HTML указано:

Атрибуты помещаются внутри начального тега и состоят из имени и значения, разделенных символом = .Значение атрибута может оставаться без кавычек, если оно не содержит пробелов или любого из " ' ` = < или > . В противном случае оно должно быть заключено в одинарные или двойные кавычки. Значение вместе с символом = можно полностью опустить, если значение представляет собой пустую строку.

Обратите внимание, что вместо «пробелов» там действительно должно быть «пробелы» (см. Ниже). Из этого объяснения не ясно, что пустая строка также не является допустимым значением атрибута без кавычек.(См. Ошибку № 12938, которая теперь исправлена.) К счастью, это объясняется в другом месте спецификации:

Имя атрибута, за которым следуют ноль или более символов пробела, за которым следует один символ U + 003D EQUALS SIGN ( = ), за которым следует ноль или более символов пробела, за которым следует значение атрибута, которое […] не должно содержать любые буквенные пробелы, любые символы U + 0022 QUOTATION MARK ( "), U + 0027 APOSTROPHE ( '), U + 003D EQUALS SIGN символы ( = ), U + 003C LESS-THAN SIGN символы ( <), символы U + 003E GREATER-THAN SIGN (> ) или символы U + 0060 GRAVE ACCENT ( `), и не должны быть пустой строкой.

Обратите внимание, что термин «пробельные символы» - это микросинтаксис, который используется во всей спецификации, сгруппировав несколько пробельных символов:

Пробел для целей данной спецификации: U + 0020 ПРОБЕЛ, U + 0009 ТАБЛИЦА СИМВОЛОВ (вкладка), U + 000A ПОДАЧА СТРОКИ (LF), U + 000C ПОДАЧА ФОРМЫ (FF) и U + 000D ВОЗВРАТ ПЕРЕВОЗКИ (CR).

Итак, после перекрестных ссылок на эти три разных раздела спецификации HTML, мы можем окончательно заключить, что допустимое значение атрибута без кавычек в HTML - это любая строка текста, которая не является пустой строкой и не содержит пробелов, табуляции и т. Д. перевод строки, подача формы, возврат каретки, ", ', ` , = , < или > .= http: //] {/ * сюда идут объявления * /}

Итак, когда допустимо опускать кавычки?

В спецификациях CSS 2.1 и CSS3 указано:

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

В спецификации о струнах сказано следующее:

Строки можно записывать в двойные или одинарные кавычки.

Идентификаторы определяются следующим образом:

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис ( - ) и подчеркивание ( _ ).

ISO 10646 определяет универсальный набор символов, который соответствует стандарту Unicode. Обратите внимание, что на самом деле речь идет о знаке дефиса-минус, а не о знаке дефиса, которым является U + 2010. Кодовая точка для дефис-минус - U + 002D, а для подчеркивания (нижняя линия) - U + 005F. Наивысшая кодовая точка, разрешенная в настоящее время Unicode, - U + 10FFFF. Таким образом, в идентификаторе допускается любой символ, соответствующий регулярному выражению [-_a-zA-Z0-9 \ u00A0- \ u10FFFF] .

Продолжение спецификации:

[Идентификаторы] не могут начинаться с цифры, двух дефисов или дефиса, за которым следует цифра. Идентификаторы могут также содержать экранированные символы и любой символ ISO 10646 в виде числового кода […]. Например, идентификатор B&W? можно записать как B \ & W \? или B \ 26 W \ 3F .

Позже это было ослаблено, чтобы разрешить в начале идентификаторов с введением настраиваемых свойств.-? \ d не является допустимым идентификатором CSS. (Я уже объяснял, как экранировать любой символ в CSS.)

Пустая строка также не является допустимым идентификатором CSS. Например, p [class =] - недопустимый селектор CSS. То же самое и с одним дефисом: не является допустимым идентификатором.

Итак, допустимое значение атрибута без кавычек в CSS - это любая строка текста, которая не является пустой строкой, не является просто дефисом (), состоит из экранированных символов и / или символов, соответствующих / [-_ \ u00A0 - \ u10FFFF] / целиком и не начинается с цифры или двух дефисов или дефиса, за которым следует цифра .

Обратите внимание, что любой допустимый селектор CSS также можно использовать с API селекторов в JavaScript. Если вы используете недопустимое значение атрибута без кавычек, весь селектор CSS станет недействительным и вызовет DOMException , если используется с querySelector или querySelectorAll . (Обратите внимание, что большинство библиотек JavaScript используют их для внутренних целей.) Важно сделать все правильно.

Атрибуты без кавычек Mothereffing

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

Тем не менее, если вы хотите узнать, является ли определенная строка допустимым значением атрибута без кавычек в HTML или CSS, вы можете просто использовать mothereff.в / без кавычек-атрибутов.

Это небольшой инструмент, который я сделал для презентации TXJS Пола Айриша. Это было задумано как шутка, но на самом деле это полезно. Наслаждаться!

Справочник по TAL

- Документация по шаблонам страниц 1.6

Операторы TAL являются атрибутами XML из пространства имен TAL. Эти атрибуты могут быть применены к документу XML или HTML, чтобы заставить его действовать как шаблон.

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

Элемент, на котором определен оператор, - это его элемент оператора . Большинство Для операторов TAL требуются выражения, но их синтаксис и семантика выражения не являются частью TAL. Для этого рекомендуется TALES.

TAL пространство имен

URI пространства имен TAL и рекомендуемый псевдоним в настоящее время определены. как:

 xmlns: tal = "http://xml.zope.org/namespaces/tal"
 

Это не URL, а просто уникальный идентификатор.Не ждите, что браузер разрешите это успешно.

Реализации не должны требовать объявления пространства имен XML, когда создание шаблонов с типом содержимого текст / html . Однако они должен требовать объявления пространства имен XML для всех других типов содержимого.

Выписки TAL

Это тальные ведомости:

тал: атрибуты
динамически изменяют атрибуты элемента.
tal: определить
определяют переменные.
тал: состояние
условий испытаний.
тал: содержание
заменить содержимое элемента.
tal: omit-tag
удалить элемент, оставив содержимое элемента.
tal: по ошибке
обрабатывать ошибки.
tal: повторить
повторить элемент.
тал: заменить
заменить содержимое элемента и удалить элемент оставив содержание.

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

Порядок действий

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

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

Из-за того, что TAL видит операторы как атрибуты XML, даже в HTML документы, он не может использовать порядок, в котором операторы написаны в теге чтобы определить порядок, в котором они выполняются. TAL также должен запрещать кратные инструкции одного и того же типа для одного элемента, поэтому это достаточно, чтобы расположить типы операторов в списке приоритетов.

Когда элемент имеет несколько операторов, они выполняются в следующем порядке:

  1. определить
  2. состояние
  3. повтор
  4. или заменить
  5. атрибуты
  6. опущенный тег

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

Может не быть очевидным, что нужен заказ. Причина, по которой должно быть одно - TAL основан на XML. Спецификация XML в частности заявляет, что процессоры XML могут свободно переписывать термины. В частности, вы не может предполагать, что атрибуты оператора XML будут обрабатываться в порядок написания, особенно если задействован другой препроцессор. Избежать ненужное распространение тегов, и по-прежнему позволяют однозначно выполнять сложный TAL, порядок приоритета был выбран в соответствии со следующим обоснование.

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

Справочник по языку

- документация Chameleon 3.8

Определяет локальные переменные.

Описание

Оператор tal: define определяет переменные. Когда вы определяете локальная переменная в элементе инструкции, вы можете использовать эту переменную в этот элемент и элементы, которые он содержит.Если вы переопределите переменную в содержащем элементе новое определение скрывает внешний элемент определение внутри внутреннего элемента.

Обратите внимание, что допустимые имена переменных - это любая строка идентификатора Python. включая подчеркивание, хотя два или более ведущих подчеркивания запрещено (используется компилятором внутри). Далее, имена с учетом регистра.

Имена переменных поддерживают базовую итеративную распаковку при окружении скобка. Это также относится к переменной, установленной tal: повторить .

встроенных функций Python всегда «в области видимости», но большинство из них могут быть переопределено (например, справка ). Исключения: float , int , len , long , str , Нет , True и False .

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

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

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

Подсказка

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

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

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