Вторник, 13 Ноября 2012 15:51

Новые типы input в HTML5

Written by 
Оцени эту запись
(8 Голоса)

В HTML5 ввели несколько интересных типов тега <input>. Рассмотрим некоторые из них.

 

Ранее в формах мы активно использовали text, radio, checkbox, submit. А теперь есть возможность сделать более интересную и разнообразную форму. Среди новых типов input в HTML5 есть такие как:

 

  • search
  • color
  • date
  • time
  • range
  • url

 

Кроме этого введена валидация формы на клиентской стороне.

 

Я немного остановлюсь на самих тегах, а потом приведу пример стилизации их под webkit.

 

Итак, 

 

<input type="search">

 

 

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

 

<input type="color">

 

 

По сути, этот элемент является стандартным colorpicker'ом. А это очень приятно.

 

<input type="date">

 

 

Календарь с выбором даты. Есть аналогичные календари с датой и временем.

 

<input type="time">

 

 

Выбор времени с возможностью вписать значение или выбрать при помощи стрелочек больше/меньше.

 

<input type="range">

 

 

Очень нравится эта штука. Уже есть набор статей на эту тему. Например, стилизация для webkit Стилизация input range для WebKit браузеров.

 

 

<input type="url">

 

 

При отправке формы с таким полем input, проверяется валидность введенного адреса.

 

 

А теперь немного о стилизации.

 

Есть интересный файлик, в котором собраны стандартные стили для WebKit - http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css, в нем можно подсмотреть стандартные стили для некоторых из этих элементов. Соответственно, изменив их, получим кастомный элемент. Возьмем, например, <input type="color">:

 

 

 

input[type="color"] {
    -webkit-appearance: square-button;
    width: 44px;
    height: 23px;
}
 
input[type="color"]::-webkit-color-swatch-wrapper {
    display:-webkit-box;
    padding: 4px 2px;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    width: 100%;
    height: 100%
}
 
input[type="color"]::-webkit-color-swatch {
    background-color: #000000;
    border: 1px solid #777777;
    -webkit-box-flex: 1;
    -webkit-user-modify: read-only !important;
}
 
input[type="color"][list] {
    -webkit-appearance: menulist;
    width: 88px;
    height: 23px;
}
 
input[type="color"][list]::-webkit-color-swatch-wrapper {
    padding-left: 8px;
    padding-right: 24px;
}
 
input[type="color"][list]::-webkit-color-swatch {
    border-color: #000000;
}
 
 
Такая штучка у нас получилась:
 

 

В том же файле (ссылка выше) можно найти и стилизацию окошка валидации формы - ::-webkit-validation-bubble

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов