Xwab
Форумыnavigate_nextHTML/CSS

full html 5 + css 3 + js форма
Сообщения
Mars

Вот пример такой формы
http://xmast.net/html5form.html
поддерживается пока только в Opera 11 (в хроме не проверял)
и то в Opera 11 глючит input tel

Основные фишки:
1. placeholder - полупрозрачная подсказка к элементу формы, автоматически исчезающая при работе с элементом
2. инпуты email, tel, number (есть ещё много новых из этой же серии, но в данной форме я использовал только эти)
3. взаимодействие css 3 с html 5
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: 1px #0f0 solid;
}

input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: 1px #f00 solid;
}

и многое другое)

21 Янв 2011, 17:54
Logan

Круто, спасибо!) Будем учить...

21 Янв 2011, 17:59
Mars

Вот ещё мне понравились паттерны в тегах:
<input type="text" id="login" name="login" placeholder="Введите ваш логин" required pattern="[a-zA-Z0-9]+"
autocomplete="off" maxlength="15" title="Логин может содержать только английские буквы и цифры">

тип - текст
id, name, maxlength, title - тут всё понятно
placeholder - это собственно placeholder
required - если это поле будет пустое форма выдаст ошибку и не отправится
pattern="[a-zA-Z0-9]+" - регулярка для проверки правильности, если будет неправильно выдаст ошибку + добавит title в конец ошибки
autocomplete="off" - браузер не будет спрашивать "Сохранить пароль?"

21 Янв 2011, 18:08
Sandr

Mars, html всё ближе к тому, чтобы стать япом)

21 Янв 2011, 18:12
Mars

Sandr, не пори херню

21 Янв 2011, 18:14
Sandr

Mars, я ничего не порю. Возможно я преувеличил! HTML ещё очень далеко до япа, и скорее всего он им и не станет. Если я ошибся, так поправь меня, прокомментировав мою ошибку.

21 Янв 2011, 18:24
Mars

html - язык разметки, на нём ничего нельзя сделать и сам он ничего не умеет делать

21 Янв 2011, 20:43
Sandr

Mars, ну, какбы я знал что это язык разметки) Но на нём можно сделать, например простую страничку, правдо.. статичную(( или ты имел в виду ничего нельзя сделать в области программирования?

21 Янв 2011, 21:08
manyrus

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

21 Янв 2011, 21:12
Mars

manyrus, о чём ваще твой пост? я своими словами писал, алсо не считаю себя идиотом чтобы читать про формы на хабре

23 Янв 2011, 3:03
Ответить на тему