RotorCMS + HTML5

Печать RSS
432

Автор
Последний из могикан
0
Думаю уже давно пора переходить на html5.
По сути, конфликтов с устаревшими браузерами нет,
а в нормальных браузерах, получаем некоторые полезные и удобные мелочи.
Не буду пока затрагивать полную вёрстку, а приведу лишь некоторые мелочи,
которые уже применил на сайте и надеюсь, что будет применено в роторе официально.

В полях ввода данных, с добавлением некоторых значений атрибута type=

<input name="site" type="url" value="http://" maxlength="50" /><br />
Добавлено type="url", идёт проверка на правильность вводимого урл адреса,
а в некоторых мобильных, подставляется подходящая раскладка клавиатуры.

<input name="meil" type="email" maxlength="50" value="'.$regmeil.'" />
Добавлено type="email", идёт проверка на правильность вводимого емайл адреса,
а в некоторых мобильных, подставляется подходящая раскладка клавиатуры.

В модуле реклама, в поле код цвета:

<input name="color" type="color" maxlength="7" />
Добавлено type="color", получаем выбор цвета из палитры, со вставкой в 16тиричном формате.
В Опере и Хроме работает отлично. Скриншот прикреплю в следущем посте.

Ещё есть type="search", для поисковых форм,
и очень интересное решение с type="date", для ввода даты рождения например.
В опере работает отлично, но один минус, выводит в формате, не совместимом с роторовским (дд-мм-гггг, вместо роторовского дд.мм.гггг)

Примечание: Браузеры без поддержки этих тайпов, обрабатывают просто как type="text"

Добавлено через 07:07 сек.
Обещанные скрины, в пользовательской рекламе,
пример тайп=колор

Добавлено через 08:36 сек.
И при нажатии выбора цвета
Прикрепленные файлы:
color.png
color.png (78.4Kb)
color2.png
color2.png (66.68Kb)
Автор
Последний из могикан
0
HTML5 охватывает новые типы ввода:

email (электронная почта)
url (адрес в интернете)
number (число)
range (диапазон)
Выбор даты: date (дата), month (месяц), week (неделя), time (время), datetime (дата и время), datetime-local (местные дата и время)
search (поиск)
color (цвет)

Оранжевые штаны
0
1. ®_GodZiIIa_€, хорошая работа klass
Автор
Последний из могикан
0
3. WmLiM, спасибо )
Это только начало.
После обкатки и проверки, будет добавлятся ещё.
Продолжение следует.)
Автор
Последний из могикан
0
Ну и так, копипаст, для размышления.
Сам не проверял.
Дополнительные типы и атрибуты

В HTML5 формам добавили несколько новых типов ввода, таких как url, number и email.
Они передают параметр valid когда пользователь вводит правильный email и так далее.
Тип url немного по разному обрабатывается в разных браузерах.
В опере достаточно набрать “http://”, как поле помечается действительным, а в хроме оно станет валидным после “http://g”.

Есть также еще несколько атрибутов, которые помогают валидации, такие как placeholder, required, maxlength, pattern, min, max, и step:
<input id="postcode" name="postcode" type="number" min="100000" 
max="999999" maxlength="7" required />


Ограничиваем количество чисел до 7 с помощью maxlength, и задаем диапозон с помощью min и max. Если не задавать иное значение step, то по умолчанию он равен 1.

Чтобы вызвать invalid псевдо класс на более конкретные условия, к примеру при валидации номера телефона, мы можем использовать pattern атрибут, который позволяет применять регулярные выражения для поля формы.
<input type="tel" id="tel" name="tel" pattern="\d{11}" 
placeholder="Пожалуйства введите ваш номер телефона " required />


И более сложная вариация, поле для ввода пароля.
<input id="password" name="password" type="password" 
title="Минимум 8 знаков, 1 цифра, большие и маленькие буквы" required 
pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*"
/>
П

Пацак
0
Проверку можно сделать и на JS.
Автор
Последний из могикан
0
6. Im-ieee, ну во первых, желательно как можно меньше использовать JS.
потому что он может быть либо отключен в браузере, либо не поддерживаться.
Во вторых, для слабого инета, js не самый лучший вариант.
Это особенно заметно в разных соцсетях, если инет слабоват, ничего сделать невозможно.
Ну и самое главное, если можно сделать средствами html, то зачем использовать js ?
П

Пацак
0
Ты же сам написал, что конфликтов с устаревшими браузерами в случае отсутствия функционала нет. На производительность такой код опять же не повлияет. HTML5, безусловно, предпочтительнее, но если нужна совместимость, то лучше JS.
Изменил: Петр (10.11.2012 / 14:37)
А

Оранжевые штаны
0
7. ®_GodZiIIa_€, а средства html5 не требуют проца? Или они полностью кроссбраузерны?
Автор
Последний из могикан
0
9. Башка, хтмл любой версии обрабатывается браузером...
Стикеры / Теги / Правила / Топ тем / Топ постов / Поиск