Input type html5: The HTML5 input types — Learn web development

Leave a Comment / Html / By /

Новые возможности input в HTML5

Знакомый тег input в HTML5 приобрёл новые возможности. Теперь можно задавать такие значения, как number, date, time, color, range и др. Лучше один увидеть, чем долго рассказывать.

Information
  1. Имя (text)
  2. Шкала (range)
  3. Числа (number)
  4. Дата (date)
  5. Время (time)
  6. Электронная почта (email)
  7. Веб-адрес (url)
  8. Цвет (color)

Исходник примера.

<form method="post" action="test.php">
    <fieldset>
        <legend>Information</legend>
        <ol>
            <li>
                <label for="name">Имя (text)</label>
                <input type="text" name="name" />
            </li>
            <li>
                <label for="priority">Шкала (range)</label>
                <input type="range" min="0" max="10" name="priority" value="0" />
            </li>
            <li>
            <label for="number">Числа (number)</label>
            <input type="number" name="number" min="0" max="12" />
            </li>
            <li>
            <label for="date">Дата (date)</label>
            <input type="date" name="date" value="2016-08-09" />
            </li>
            <li>
            <label for="time">Время (time)</label>
            <input type="time" name="time" />
            </li>
            <li>
            <label for="email">Электронная почта (email)</label>
            <input type="email" name="email" />
            </li>
            <li>
            <label for="url">Веб-адрес (url)</label>
            <input type="url" name="url" />
            </li>
            <li>
            <label for="color">Цвет (color)</label>
            <input type="color" name="color" />
            </li>
            <li>
                <input type="submit" value="Send" />
            </li>
            
        </ol>
    </fieldset>
</form>

number

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

step. По умолчанию приращение равно 1, но ему также можно присвоить любое числовое значение.

<input type="number" name="number" step="2" min="4" max="12" />

В этом примере мы ограничили ввод чисел от 4 до 12, а числа увеличиваются на две единицы. Напоминаю, только при работе с стрелками в элементе управления.

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

range

Тип range имеет те же атрибуты. При нажатии кнопки Send в адресной строке вы сможете увидеть выбранное значение под именем priority.

search

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

<input type="search">

datetime-local/datetime

Кроме отдельных элементов date и time есть ещё совмещённый элемент datetime-local без учета временной зоны и datetime c учетом временной зоны.

month/week

Также есть элемент month для выбора месяца и week для выбора недели.

email

Поля email приносят особенно заметную пользу на мобильных устройствах, на которых раскладка виртуальной клавиатуры изменяется для удобства ввода адресов электронной почты. Обратите внимание на присутствие символа @ в клавиатурах iPhone и Android.

url

url особенно удобен, если ваши посетители просматривают сайт с устройств iPhone или Android — устройство отображает совершенно иную раскладку клавиатуры с кнопками для ускоренного ввода веб-адресов (по аналогии с клавиатурой, отображаемой при вводе URL-адреса в адресной строке мобильного браузера).

datalist

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

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

<form>
<input type="text" name="search" placeholder="Поиск" list="search"><br><br>
<datalist>
  <option value="Васька" />
  <option value="Мурзик" />
  <option value="Рыжик" />
  <option value="Барсик" />
</datalist> 
</form>

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

fieldset/legend

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

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

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

Заголовок группы
Реклама

input html 5 — Примеры

шпаргалка блоггера

NMitra

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

Значения type
ТипОписание
<input type=»text» autofocus maxlength=»10″/>
текстовое поле
<input type=»password»/>
при вводе символы отмечаются звёздочками
<input type=»email»/>
показывает ошибку, если введён не email
<input type=»file»/>
для ввода файла с компьютера
<input type=»tel» pattern=»\(\d\d\d\) ?\d\d\d-\d\d-\d\d» placeholder=»(###) ###-##-##»/>
номер телефона в определённом формате
<input type=»URL»/>
URL
<input type=»search» results=»5″ autosave=»some_unique_value»/>
форма поиска.
Для отмены стандартных стилей в Safari и Chrome применяется свойство: -webkit-appearance: none;
<input type=»color»/>
для выбора цвета
<input type=»number» min=»0″ max=»100″ step=»5″/>
для выбора цифр, например, количества единиц товара. Рядом отображаются стрелочки-переключатели. Узнать больше об input type="number".
<input type=»date» max=»2012-04-20″ min=»2012-04-10″ value=»2012-04-10″/>
для выбора даты в формате yyyy-mm-dd. Выводит выпадающий календарь.
<input type=»datetime»/>
для выбора даты и времени в формате yyyy-mm-dd HH:MM. Выводит выпадающий календарь.
<input type=»datetime-local»/>
для выбора даты и местного времени в формате yyyy-mm-dd HH:MM. Выводит выпадающий календарь.
<input type=»month»/>
для выбора года и месяца в формате yyyy-mm. Выводит выпадающий календарь.
<input type=»week»/>
для выбора года и недели в формате yyyy-W. Выводит выпадающий календарь.
<input type=»time»/>
для выбора времени в формате HH:MM. Выводит выпадающий календарь.
<input type=»range»/>
показывает ползунок. Узнать больше об input type="range".
<input type=»checkbox»/> <input type=»checkbox»/>
позволяет выбрать несколько вариантов
<input type=»radio» checked=»checked» name=»raz»/> <input type=»radio» name=»raz»/>
выбор одного из вариантов
<input type=»button» value=»кнопка»/>
кнопка
<input type=»submit» value=»кнопка»/>
кнопка для отправки данных на сервер
<input type=»image» src=»http://1. bp.blogspot.com/_hljKDuw-cxQ/SDEJPIeJG2I/AAAAAAAAGaM/N_Lu4sxLH_4/s00/lpDemoBuscador.gif»/>
рисунок для отправки данных на сервер
<input type=»reset» value=»сброс»/>
кнопка для возврата к исходному состоянию
<input type=»hidden» value=»скрытое поле»/>
скрытое поле

« следующие записи предыдущие записи »

Объясните форму новых типов ввода в HTML5?

В этой статье мы обсудим функциональность новых типов ввода формы, предоставляемых HTML5. Иногда при заполнении регистрационной формы или любой онлайн-формы требуется следовать правильному формату для заполнения конкретных данных. Теперь легко использовать веб-форму для заполнения общих данных, таких как дата , электронная почта, URL-адрес и т. д. В форме HTML5 представлено почти 13 новых типов ввода. Мы увидим все типы ввода и поймем их один за другим.

Атрибуты типа ввода:

  1. цвет : Этот тип ввода позволяет пользователю выбирать цвет из палитры цветов.
  2. дата : Этот тип ввода позволяет пользователю выбрать дату из раскрывающегося календаря.
  3. время: Этот тип ввода позволяет пользователю вводить время.
  4. datetime: Этот тип ввода позволяет пользователю выбирать дату и время вместе с часовым поясом.
  5. datetime-local: Этот тип ввода позволяет пользователю выбрать местную дату и время.
  6. неделя : Этот тип ввода позволяет пользователю выбрать неделю и год из раскрывающегося календаря.
  7. электронная почта : Этот тип ввода позволяет пользователю ввести адрес электронной почты.
  8. месяц : Этот тип ввода позволяет пользователю выбрать месяц и год из раскрывающегося календаря.
  9. номер: Этот тип ввода позволяет пользователю вводить числовое значение.
  10. диапазон: Этот тип ввода позволяет пользователю вводить числовое значение в пределах заданного диапазона .
  11. поиск: Этот тип ввода позволяет пользователю ввести строку поиска в поле ввода.
  12. тел: Этот тип ввода позволяет пользователю ввести номер телефона.
  13. url: Этот тип ввода позволяет пользователю вводить URL.

Мы будем использовать вышеуказанные атрибуты и поймем их использование на примере.

Пример 1: В этом примере вы узнаете о цвете, дате и времени типа ввода.

Синтаксис даты: 

 <Входной тип = "Дата">

Синтаксис времени: 

 <Ввод типа = "Время">

Синтаксис цвета: 

 <Входной тип = " цвет">

Примечание: дата и время не поддерживаются браузерами Internet Explorer и Safari.

DateTime Syntax: 

 <входной тип = ”DateTime”>

DateTime-Local Syntax: 

 <Входной тип = "DateTime-Local">

-недельный синтаксис: 

 <>

-недельный синтаксис: 9005

 <>

-недельный. ="week">

Примечание: datetime-local и week не поддерживаются браузерами Firefox, Safari и Internet Explorer.

HTML

< html >

   

< head >

     < style >

         h2 {

             цвет: зеленый;

             text-align: center;

         }

   

         body {

             text-align: center;

         }

     style >

head >

   

< body >

     < h2 >Welcome To GeeksforGeeks h2 >

   

     < form >

         < label for = "дата" >Введите дату-время: метка >

         < ввод 0126 = "datetime" />

     form >

     < br />

   

     < Форма >

< Метка для = "Дата = " > "0126 label >

         < input type = "datetime-local" />

     form >

     < br />

   

     < form >

         < label for = "time" >Select Week : label >

         < input type = "week" />

     form >

body >

 

HTML >

Выход:

Пример 3: В этом. диапазон тип ввода.

Синтаксис электронной почты:

 

Синтаксис месяца:
2 Примечание: месяц не поддерживается браузерами Firefox, Safari и Internet Explorer.

Синтаксис номеров: 

 <Входной тип = "номер">

Синтаксис диапазона: 

 <Входной тип = "Диапазон">

1212121212121212121299129 .

< html >

   

< головка >

     < style >

         h2 {

             color: green;

             text-align: center;

}

Тело {

;

         }

     style >

head >

   

< body >

     < h2 >Добро пожаловать в GeeksforGeeks h2 >

5

5  

50125      < form >

         < label for = "mail" >Enter Email : label >

         < input type = "email" />

     form >

     < br />

   

     < form >

         < label for = "date " >Выберите месяц : метка >

         < вход = тип

6 "month" />

     form >

     < br />

   

     < form >

< Метка для = "Число" > Выбрать: " > Выбрать: " >. 0126 >

         < input type = "number" />

     form >

     < br />

   

     < form >

         < label for = "number" >Select Number in Range : label >

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

     form >

body >

   

html >

Output:

Пример 4: В этом примере вы узнаете о типах ввода search, tel и url .

Синтаксис поиска:

Тел Синтаксис:

Примечание:   В настоящее время тел не поддерживается ни одним браузером.

Url Syntax:

HTML

< html >

   

< головка >

< Стиль >

H2 {

: Green;

             text-align: center;

}

Тело {

;

         }

     style >

head >

   

< body >

< h2 >Добро пожаловать в GeeksforGeeks!0126 < form >

         < label for = "search" >Enter Search string : label >

         < input type = "search" placeholder = "search . .." />

     form >

     < br />

   

     < form >

         < метка для = "номер" >Введите № телефона0126 < input type = "tel" placeholder = "xxx-xxx-xxxx" />

     form >

     < br />

   

     < form >

         < label for = "url" >Enter Url : label >

         < input type = "url " Заполнитель = " https: // www . .. » />

.0126 >

. HTML5 Doctor

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

Эта статья представляет собой отрывок из главы 6 книги «Начало HTML5 и CSS3: развитие сети», написанной Кристофером Мерфи, Оли Стадхольмом, Ричардом Кларком и Дивья Маниан, опубликованной Apress.

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

Новые типы ввода

HTML5 представляет не менее десятка (да, это 13!) новых типов ввода для форм. Мы кратко рассмотрим каждый из них и объясним, почему вы должны использовать их прямо сейчас. Эти новые типы ввода имеют двойное преимущество: их использование означает сокращение времени разработки и улучшение взаимодействия с пользователем. Мы рассмотрим новые типы ввода:

.
  • поиск
  • электронная почта
  • адрес
  • тел.
  • номер
  • Диапазон
  • дата
  • месяц
  • неделя
  • время
  • дата-время
  • дата-время-местный
  • цвет

поиск

г.

Поиск кажется подходящим местом для начала нашего исследования типов ввода HTML5. Когда мы говорим о поиске, мы имеем в виду не только Google, Bing или Yahoo. Мы говорим о поле поиска на том сайте электронной коммерции, на котором вы только что совершили покупку, в Википедии и даже в вашем личном блоге. Вероятно, это самое распространенное действие, выполняемое в Интернете каждый день, но оно не очень семантически размечено, не так ли? Все мы склонны писать примерно так:

 <тип ввода="текст" имя="поиск">

Ну, а что, если бы мы могли написать что-то вроде …

С помощью HTML5 мы можем. Чувствует себя намного лучше, не так ли? Настольные браузеры будут отображать это аналогично стандартному текстовому полю, пока вы не начнете печатать. В этот момент в правой части поля появляется маленький крестик. Обратите внимание на крестик на рис. 1. Это позволяет быстро очистить поле, как встроенное поле поиска Safari.

Рис. 1. type="search" , отображаемый в Safari для Windows

Однако на мобильном устройстве все становится интереснее. Возьмем пример iPhone, показанный на рис. 2; когда вы фокусируетесь на вводе с помощью type="search" , обратите внимание на клавиатуру, в частности на кнопку действия на клавиатуре (внизу справа). Вы заметили, что там написано «Поиск», а не обычное «Перейти»? Это тонкая разница, которую большинство пользователей даже не заметят, но те, кто заметят, позволят себе кривую улыбку.

Рисунок 2. type="search" на iPhone

Как вы уже видели на примере новых атрибутов, браузеры, которые их не понимают, просто изящно деградируют. То же самое относится ко всем новым типам ввода, обсуждаемым здесь. Если браузер не понимает type="search" , по умолчанию будет использоваться type="text" . Это означает, что вы ничего не теряете. Фактически, вы используете прогрессивное улучшение и помогаете пользователям получить лучший опыт. Посмотрим правде в глаза: заполнение веб-форм не очень весело, поэтому все, что вы можете добавить, чтобы обеспечить более плавную работу, тем лучше.

электронная почта

С точки зрения рендеринга, тип ввода электронной почты ничем не отличается от стандартного типа ввода текста и позволяет вводить один или несколько адресов электронной почты. В сочетании с требуемым атрибутом браузер затем может искать шаблоны, чтобы убедиться, что был введен действительный адрес электронной почты. Естественно, эта проверка является рудиментарной, возможно, она ищет символ @ или точку (.) и не допускает пробелов. Opera 9.5+, Firefox 4+, Internet Explorer 10 и Chrome 5+ уже реализовали эту базовую проверку. Браузер даже выдает пользователю сообщение об ошибке (см. Opera на рис. 3), если введенный адрес электронной почты недействителен. Вы можете стилизовать поле при вводе значения с помощью :valid , :invalid или :required псевдокласс (при условии, что у вас есть обязательный атрибут на входе), как объяснил Locum Dr. Peter.
Рисунок 3. Сообщение об ошибке адреса электронной почты Opera

Чтобы узнать больше о стилизации форм с использованием псевдоклассов, «CSS Ninja» Райан Седдон подготовил отличную демонстрацию на A List Apart.

В спецификации указано, что разрешены один или несколько адресов электронной почты. Это означает, что множественный атрибут можно использовать с type="email" тоже.

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

Но всегда есть подвох, верно? На момент написания статьи существовала проблема интернационализации с type="email" . При использовании его с двухбайтовыми интернационализированными доменными именами браузеры делают их недействительными; так что этот пример

9009@]*">

Альтернативным решением является продолжение использования type="email" с атрибутом formnovalidate на кнопке отправки следующим образом. Это гарантирует, что при отправке формы не будет выполняться проверка, которая может или может не подходить для ваших нужд.

 




Или вы можете использовать атрибут novalidate в своей форме, например:

Проблемы интернационализации в стороне, помните, как мы говорили, что у типов ввода HTML5 есть двойное преимущество — меньше времени на разработку и лучший пользовательский интерфейс? Вернемся назад и еще раз посмотрим на iPhone, как показано на рисунке 4.

Рис. 4. iPhone отображает пользовательскую клавиатуру при использовании type="email".

На этот раз ты это заметил? Нет? Посмотрите еще раз на клавиатуру. Правильно, клавиатура другая. Для @ и . символов, чтобы помочь вам заполнить поле более эффективно. Как мы обсуждали с type="search" , нет никаких недостатков в использовании type="email" прямо сейчас. Если браузер его не поддерживает, он ухудшится до type="text" . А в некоторых браузерах пользователи протянут руку помощи.

адрес

В настоящее время ведутся споры о том, должен ли пользователь вводить http:// в поле используя input="url" . Поставщики браузеров обсуждают возможность добавления префикса http:// к URL-адресу после проверки при отправке формы. Актуальную информацию см. в спецификации HTML5.

Тип ввода url , как и следовало ожидать, предназначен для веб-адресов. Вы можете использовать атрибут Multiple для ввода более одного URL-адреса. Как и type="email" , браузер выполнит простую проверку этих полей и выдаст сообщение об ошибке при отправке формы. Это, вероятно, включает в себя поиск косой черты, точек и пробелов и, возможно, обнаружение действительного домена верхнего уровня (например, .com или .co.uk). Используйте тип ввода url следующим образом:

Опять же, мы посмотрим, как iPhone отображает type="url" . Как вы можете видеть на рисунке 5, он снова обновил экранную клавиатуру, чтобы сделать заполнение поля максимально простым для пользователя, заменив клавишу пробела по умолчанию на точку, косую черту и клавиши .com. (Чтобы получить доступ к другим окончаниям, таким как .org и .net, нажмите и удерживайте клавишу .com.)

Рис. 5. type="url" активирует клавиатуру для URL на iPhone.

тел

тел отличается от электронная почта и URL тем, что не применяется какой-либо конкретный синтаксис. Телефонные номера различаются по всему миру, что затрудняет гарантию какого-либо конкретного обозначения, за исключением разрешения ввода только цифр и, возможно, символа +. Вполне возможно, что вы можете проверить определенные телефонные номера (если вы можете гарантировать формат), используя проверку на стороне клиента. type="tel" размечается следующим образом:

И снова iPhone распознает type="tel" , только на этот раз он делает еще один шаг вперед и полностью меняет клавиатуру на стандартную клавиатуру телефона, как показано слева на рис. 6. Помимо iPhone, некоторые Устройства Android (такие как HTC Desire, показанный справа на рис. 6) также отображают цифровую клавиатуру для type="tel" . Это очень удобно, не так ли? Хорошие, большие клавиши для ввода номера телефона помогут вам быстро заполнить эту большую, неприятную форму.

Рисунок 6. type="tel" на iPhone и некоторых устройствах Android динамически меняет клавиатуру на цифровую клавиатуру. (Скриншот для Android предоставлен Стюартом Лэнгриджем).

номер

число , как и следовало ожидать, используется для указания числового значения. Как и в случае с большинством этих новых типов ввода, Opera первой реализовала type="number" . Он, Safari и Chrome отображают ввод как элемент управления Spinbox (см. рис. 7), с помощью которого вы можете щелкать стрелки для перемещения вверх или вниз. Или, если хотите, вы можете ввести прямо в поле. Firefox, с другой стороны, отображает поле как стандартное текстовое поле. Поддержка type=”number” также есть в IE 10, хотя если вы вводите нечисловой символ, поле очищается, когда фокус теряется, и пользователю не предоставляется никакой обратной связи.

Рис. 7. type="number" в Opera

С помощью дополнительных атрибутов min , max и step мы можем изменить значение шага по умолчанию для этого элемента управления Spinbox, а также установить минимальное, максимальное и начальное значения. значения (с использованием стандартного атрибута HTML value ). В этом примере показано, как работают эти атрибуты:

  5" value="9" name="размер обуви">

В этом примере min представляет минимальное значение, которое может принять поле, а max представляет максимальное значение. Если мы достигнем максимального или минимального значения, соответствующая стрелка на элементе управления счетчиком станет серой, и вы больше не сможете с ней взаимодействовать. шаг — это приращение, на которое значение должно увеличиваться или уменьшаться, при этом значение шага по умолчанию равно 1. Это означает, что мы можем включать отрицательные значения или шаг вверх с шагом 0,5 или 5. значение — это атрибут, к которому вы привыкли в предыдущих версиях. HTML. Каждый из атрибутов является необязательным, и устанавливаются значения по умолчанию, если они не используются.

В отличие от реализации Opera, iPhone (рис. 8) и некоторые устройства Android (например, HTC Desire, показанный справа на рис. 6-13) просто отображают поле как стандартное текстовое поле, но оптимизируют клавиатуру для облегчения ввода.

Рис. 8. type="number" на iPhone и Android HTC Desire (снимок экрана для Android предоставлен Стюартом Лэнгриджем)

Чтобы заставить iPhone отображать стандартную телефонную клавиатуру, как мы видели для type="text" Крис Койер из CSS Tricks придумал небольшой обман, который вы можете использовать. Вместо того, чтобы использовать type="number", используйте стандартный ввод type="text" и добавьте атрибут шаблона, который принимает только числа, как показано ниже. Это решение не идеально, но если вы считаете, что оно может быть полезным, Крис снял короткое видео, показывающее его в действии.

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

диапазон

Примечание. Для браузеров, которые не поддерживают type="range" , Remy Sharp создал полифилл JavaScript, чтобы заполнить пробелы. Подробнее об этом можно узнать в его блоге.

Тип ввода диапазона похож на число, но более специфичен. Он представляет числовое значение в заданном диапазоне. Какая разница, я слышу, как ты плачешь? Потому что, когда вы используете диапазон , точное значение не имеет значения. Это также позволяет браузерам предлагать более простое управление, чем для номер . В Opera, Safari, Internet Explorer 10 и Chrome type="range" отображается как ползунок (см. рис. 6-14). При перемещении ползунка в IE 10 появляется всплывающая подсказка, показывающая текущее значение. Кроме того, в Opera, если CSS определяет высоту больше, чем ширину, ползунок будет отображаться вертикально, в отличие от стандартного горизонтального отображения.

В следующем коде показано, как мы можем отметить наш уровень квалификации по шкале от 1 до 100, установив атрибуты min и max (см. рис. 9). Мы также можем установить начальную точку для диапазона , используя атрибут value .

 <тип ввода = "диапазон" мин = "1" макс = "100" значение = "0">
Рисунок 9. type="range" в Chrome

Даты и время

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

Если вы когда-либо бронировали билеты онлайн, вы сталкивались с инструментами выбора даты, которые помогут вам быстро и легко выбрать нужную дату. Возможно, вы даже реализовали средство выбора даты на своем собственном веб-сайте. Как правило, это делается с помощью библиотеки JavaScript, такой как jQuery, Dojo или YUI. Это может быть проблемой, когда вам нужно загрузить целую библиотеку и связанные с ней плагины только для реализации простого средства выбора даты. Что ж, с HTML5 мы получаем эту функциональность, встроенную в браузер. Не только это, но мы не должны останавливаться только на выборе одной даты; мы можем выбрать неделю, месяц, время, дату и время и даже дату и время с часовым поясом, используя различные типы ввода. Разметка довольно проста.

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

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

дата

На рис. 10 показано, как Opera 10.5 отрисовывает type="date" .

Рисунок 10. type="date" в Opera 10.5

Эти средства выбора даты не ограничиваются настольными устройствами; некоторые устройства Blackberry и Chrome для Android отображают встроенное средство выбора даты при использовании с type="date" (см. рис. 11).

Рисунок 11. type="date" на Blackberry (снимок экрана предоставлен Теренсом Иденом)
месяц

Далее на рис. 12 показано type="month" , которое может, например, использоваться для даты истечения срока действия кредитной карты.
Рисунок 12. type="month" в Opera 10.5
неделя

Вы также можете перейти к type="week" . Обратите внимание, как Opera выделяет конкретную неделю с помощью того же элемента управления выбора даты, как показано на рис. 13.
Рисунок 13. type="week" в Opera 10.5
time

На рис. 14 видно, что type="time" отображает счетчик, аналогичный использовавшемуся ранее для выбора точного времени.
Рисунок 14. type="time" в Opera 10.5
datetime

Мы можем объединить дату и время, используя type="datetime" для указания точного времени в данный день, как показано на рисунке 15.
Рисунок 15. type="datetime" в Opera 10.5
datetime-local

Наконец, на рис. 16 показано, что мы можем добиться чуть более детального управления, выбрав точное время в заданный день с изменением местного часового пояса, используя type="datetime-local" .
Рисунок 16. type="datetime-local" в Opera 10.5
Предостережения относительно даты и времени

В этих реализациях есть два предостережения. Во-первых, в текущей реализации невозможно ввести дату в поле (во всех браузерах). Однако средство выбора даты доступно с клавиатуры. Однако мы можем предвидеть потенциальную проблему; если они реализованы в форме, которую клерк по вводу данных регулярно заполняет, они, вероятно, будут быстрее вводить дату, чем пролистывать ее с помощью клавиатуры или выбирать из средства выбора даты. Во-вторых, невозможно изменить внешний вид средства выбора даты. Мы склонны думать, что это хорошо, поскольку пользователи получат одинаковый опыт работы со всеми посещаемыми ими веб-сайтами (при условии, что они все время используют один и тот же браузер). Несомненно, тем не менее, корпорациям потребуется фирменный выбор даты. Safari 5 и Chrome 5 реализовали эти типы ввода, но, к сожалению, они не очень удобны для пользователя. Даты должны быть введены в том же формате, что и элемент времени, с которым мы встречались ранее в книге. Таким образом, для дат формат будет ГГГГ-ММ-ДД, а для дат со временем пользователь должен будет ввести ГГГГММ-ДДТ00:00Z, что совсем не очень удобно.

Как и в случае с другими новыми типами ввода, если браузер их не распознает, по умолчанию он просто вернется к type="text" и позволит пользователю продолжить использовать ваш выбор даты JavaScript.

цвет

Тип ввода цвета говорит сам за себя: он позволяет пользователю выбрать цвет и возвращает шестнадцатеричное значение этого цвета. Ожидается, что пользователи смогут либо ввести значение, либо выбрать его из палитры цветов, которая будет встроена либо в операционную систему, либо в собственную реализацию браузера. В Opera 11 реализован type=”color” с простой палитрой цветов, которая предлагает ряд стандартных вариантов выбора цвета или вариант выбора «Другой», который вызывает палитру цветов операционной системы (показана справа на рис. 17).
Рис. 17. type="color" в Opera слева и результат нажатия кнопки Other, показанный справа 18.

Рисунок 18. type="color" на Blackberry (скриншот предоставлен Теренсом Иденом)

Обзор типов ввода

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *