Фактически, характеристики формы HTML5 были введены в статье 28 HTML5, советы и методы HTML5, которые вы должны знать в прошлом году. Тем не менее, немного прискорбно, что введение этой части отображается в виде видео. На самом деле, это нормально, если это видео. Ключ - видео Toutube, которое нужно просмотреть. Ну, такой хороший гражданин, как я, который просто скрупулезный человек, слишком ленив, чтобы ее обмануть в других ситуациях, кроме стюардессы, поэтому контент, отображаемый в этой части видео, на самом деле пуст.
Итак, вот патч для улучшения этой части контента. Общее содержание этой статьи:
# <input type = number />
# <input type = range />
# <input type = date /> и другие элементы управления селектором времени
# <input type = color /> селектор цвета
# <input type = search />
# <Datalist> атрибут элемента и списка
# Неоднозначная связь между проверкой формы HTML5 и CSS3
Элемент формы HTML с номером Type = позволяет изменить значение в текстовом поле, нажав клавишу. Этот эффект часто наблюдается в системах Windows, таких как:
Ленивые люди предпочли бы лежать на стуле и щелкнуть мышью, чем сесть и нажимать на клавиатуру. Следовательно, по сравнению с вводом клавиатуры, есть также рынок для щелчка и ввода. Вот почему в формах HTML5 существуют элементы управления численным выбором.
Грубый HTML -код выглядит следующим образом:
Количество людей: <input type = number value = 1 />
Если вы добавите подходящий предел ширины для точек, эффект в Chrome (оцененный пользовательский интерфейс связан с темами системы), заключается в следующем:
Браузер, который в настоящее время поддерживается, является Opera 11, но кнопки, которые добавляют и вычитают значения в Opera, выглядят немного криво и имеют абстрактный стиль.
Вы можете нажать здесь жесткий: html5 форма Nubmer Control Demo
2. Тип = диапазонДиапазон китайского диапазона значений значений, и этот вид эффекта также распространен в оконной системе, как показано на следующем скриншоте:
Существует входной контроль с аналогичными эффектами в HTML5. Просто определите его тип как диапазон, так просто!
Диапазон перетаскивания: <входной тип = значение диапазона = 50 />
По умолчанию диапазон значений составляет 0 ~ 100, поэтому, если значение = 50, планка сопротивления находится в середине диапазона площади. Как показано на рисунке ниже:
My Firefox в настоящее время версия 3.6, и эта функция еще не поддерживается. Тем не менее, Chrome, Opera и Safari 4 имеют эффекты, но в конце концов, они не один и тот же отец, поэтому есть некоторые различия в внешности, поэтому эти различия здесь не будут показаны.
Вы можете нажать здесь жестко: демонстрация управления диапазоном форм HTML5
Последний элемент из 28 функций HTML5, трюков и методов, упомянутых в начале, то есть превосходным примером эффекта 28 -го элемента является эффект, реализованный на управление диапазоном, который также включает в себя атрибуты MIN, максимальные атрибуты и атрибуты Step. Это пример, который стоит наблюдать и учиться. Что касается этого примера демонстрации, вы можете нажать здесь резко.
3. type = date и другие управления временемЭто контроль селектора времени. Если вы выберете долгое время, не беспокойтесь о каком-либо плагине JS. Просто возьмите атрибут свидания, и тогда вы можете общаться со старуней, которая подметала пол рядом с вами во время кофе. Если вы не верите в это, посмотрите:
Выберите Дата: <Ввод типа = значение даты = 2011-01-04 />
В результате, в поддержанных браузерах, таких как Opera, доступны следующие эффекты:
Это селектор времени, который не жив!
Помимо его уродливой внешности, остальные довольно восхитительны.
Пространство класса времени, не только тип даты, но и тип времени, но и DateTime, неделя и месяц.
Очевидно, что, как следует из названия, тип даты состоит в том, чтобы выбрать дату, тип времени должен выбрать время, DateTime - выбрать дату и время, а неделя - это неделя, а месяц осознает выбрать месяц.
Вы можете нажать здесь жестко: HTML5 форма времени класса класса
Я проверил его и только что обновил сафари до версии 5.0. Я обнаружил, что в настоящее время Opera Browser поддерживает этот тип контроля времени. Эффекты следующие:
Когда тип = время, эффект несколько похож на тип = число. Вы можете переключить события, нажав. По умолчанию каждая точка - один раз, время переключается на 1 минуту, а мышь давно нажата, а мышь также действительна.
Выберите Время: <Ввод типа = значение времени = 22: 52 />
Выберите время:
Под типом = неделя, когда мышь проходит мимо, цвет фона даты каждой строки (представляет неделю) станет темнее в совокупности, как показано на рисунке ниже:
Когда тип = месяц, цвет фона за весь месяц становится темнее, как показано на рисунке ниже:
Значения данных после выбора двух следующих:
4. Тип = цветЭто контроль селектора цвета, который довольно мощный. Это очень просто в использовании, следующим образом:
Выберите цвет: <input type = value =#34538b />
Эффект по умолчанию в Opera Browser заключается в следующем:
Управление входом по умолчанию имеет круглый цвет с #34538B. Мы нажимаем, чтобы сбросить, и в результате вытирайте и расширяем панель веб -цвета:
Нажмите кнопку ниже с другими ... словами, и в результате великолепная панель выбора цвета была расширена:
Это круто, это очень легко использовать, о хе -хе.
Вы можете нажать здесь жестко: HTML5 Form Color Выбор управления управлением управлением
5. type = searchЭто функция поиска. Я помню, когда я увидел, что входная коробка типа поиска автоматически будет иметь значок с увеличением поиска. Тем не менее, я не видел этого теста (это во сне), и эффект пользовательского интерфейса этого атрибута очень сдержанный и холодный. В браузере Webkit Core, когда есть значение, после ящика ввода будет сексуальный крест, как показано ниже:
Я не нашел ничего особенного ни о чем еще, поэтому я только что упомянул об этом. Вы можете нажать здесь жестко: HTML5 Тип поиска демо управляйте демонстрацией
6. <Datalist> атрибут элемента и спискаDatalist-очень редкий элемент, который реализует эффект раскрытия списка данных, а стиль пользовательского интерфейса немного похож на автозаполнение.
Чтобы привести простой пример:
Следующий HTML -код:
List: <input type=text list=mydata placeholder=popular movie rankings/> <datalist id=mydata> <option label=Top1 value=Let the bullets fly> <option label=Top2 value=If you are the one 2> <option label=Top3 value=Laughing Jianghu> <option label=Top4 value=Orphan of Zhao> <option label=Top5 value=The little thing about first love> </datalist>
Результат заключается в следующем после того, как входная коробка сфокусирует:
Эта вещь, этот атрибут - хорошая вещь. Не ходите и узнайте, что он имеет только эффекты только в последнем браузере Opera. Неизвестно, поддержат ли другие браузеры его в будущем.
С HTML5 некоторые новые псевдо-классы также появились в селекторной части CSS3, например:
Например, следующие коды CSS и HTML:
input [type = text]: Focus: Valid, input [type = email]: Focus: Valid, input [type = number]: Focus: in-range {upline: 2px green solid; } input [type = text]: Focus: Invalid, input [type = email]: Focus: Invalid, input [type = number]: Focus: Off-range {upline: 2px Red Solid; }<p> Обычное входное поле: <input type = text /> < /p> <p> Ввод почтовой почты: <входной тип = электронная почта /> < /p> <p> Числовое поле ввода: <входной тип = номер min = 0 max = 10 /> (0 ~ 10) < /p>
Возьмите поле ввода почты в качестве примера. Когда входной текст не является законным почтовым ящиком, набросок ввода ящика будет отображать красную границу предупреждения:
С вводом символов, когда почтовый ящик является законным, пограничный красный будет покраснеть в безопасную зеленую границу:
Проверка, а также дисплей в стиле, и т. Д. Все завершены браузером и CSS. Я подумал об этом 10 лет спустя, вау, это сеть, все так красиво.
Некоторые другие особенности форм HTML5, такие как требуемый, автофокус, заполнитель, шаблон и т. Д., Были показаны и объяснены в 28 функциях HTML5, советах и методах, которые вы должны знать, поэтому я не буду вдаваться в подробности здесь.
Если вы заинтересованы в HTML5, я лично рекомендую прочитать предыдущую статью о 28 вещах. Можно сказать, что содержание этой статьи является дальнейшим улучшением и дополнением к определенной точке (другие новые функции форм HTML5). Первое имеет большое значение, и эта статья в лучшем случае-соевый соус высокого уровня.
Наконец, поскольку это все вещи HTML5, если браузер, который вы пытаетесь сделать сейчас, является IE, даже если вы позволите своему браузеру какое-то время летать, вы не увидите эти привлекательные эффекты. Поэтому рекомендуется перейти к последней версии современных браузеров.
Справочная статья:Новые функции формы в HTML5: http://dev.opera.com/articles/view/new-form-features-in-html5/