Улучшите ваши формы с помощью HTML5!

Автор Тема: Улучшите ваши формы с помощью HTML5!  (Прочитано 2576 раз)

Оффлайн dbaikАвтор темы

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 137
  • Сообщений: 338
  • Карма: 31
  • Пол: Мужской
  • Кесарю - кесарево.
    • Интернет-магазин подарков, приколов и интересных вещей podarki31.ru

Оффлайн dbaikАвтор темы

  • Старожил
  • ****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 137
    • Сообщений: 338
    • Карма: 31
    • Пол: Мужской
    • Кесарю - кесарево.
      • Интернет-магазин подарков, приколов и интересных вещей podarki31.ru
HTML  в действительности не обновлялся с версии 4 выпущенной ещё в 1998 году. Однако сообщество WHATWG работает над HTML с 2004 года, а затем передаёт материалы в W3C, где они становятся спецификацией HTML5. В этой статье показаны некоторые новые функциональные возможности форм HTML5 предлагаемые в главе Web Forms 2. Опера поддерживает Web Forms 2, начиная с версии 9.5 или более поздней версии.

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

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Может быть написан с использованием новой функциональности следующим образом:

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Часть кода была удалена из примера и заменена новым атрибутом autofocus. Атрибут autofocus фактически убирает необходимый элемент <script> и атрибут id у <input>, который используется скриптом. Атрибут method может быть опущен для элемента <form>, потому что форма использует запрос GET по умолчанию. Кроме того, значение text используется для <input> по умолчанию. В Web Forms 2 вы можете также опустить атрибут action когда он содержит пустую строку. Действительно, это даст вам тот же результат.

Валидация форм
В настоящее время веб-разработчики используют классные скрипты для валидации формы на стороне клиента. Скоро вы сможете просто написать следующее:

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Я утверждаю, что это читается почти так же как английский! Когда пользователь пытается отправить форму, пользовательский агент проверяет что все условия выполняются, и если это так, он отправляет форму, в противном случае показывает сообщение об ошибке. Конечно, вы всегда должны иметь проверку на стороне сервера, но в случае, если пользовательский агент поддерживает новые формы, это может спасти вашего пользователя от нескольких раундов ошибок. Лучше для юзабилити и пропускной способности канала.

В примере выше я ввела несколько новых элементов форм: email и url. А также новый атрибут доступный для всех элементов форм: required. Кроме того, Web Forms 2 включают поля для даты, времени и чисел.

Стилизация полей
Если вы хотите стилизовать обязательное поле формы (<input required>) это довольно тривиально с помощью некоторых новых псевдоклассов:

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Источник: htmlbook.ru


Оффлайн Sevab

  • Администратор
  • Бизнес оценка: (6, 100%)
  • *****
  • СПАСИБО: 9916
  • Сообщений: 14532
  • Карма: 665
  • Пол: Мужской
    • Trust Directory Project

Оффлайн Sevab

  • Администратор
  • *****
Re: Улучшите ваши формы с помощью HTML5!
« Ответ #1 : 28-02-2011, 18:17:46 »
Ну что-же, мир постепенно движется к штмл5. и хотим мы этого или не хотим, но нам придется его использовать. Тем более что так действительно удобнее.

Оффлайн armid

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 60
  • Сообщений: 1246
  • Карма: 122
  • Зануда
  • Награды КМС поисковой оптимизации Почетный гражданин нашего форума
    • Студент КПИ

Оффлайн armid

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 60
    • Сообщений: 1246
    • Карма: 122
    • Зануда
    • Награды КМС поисковой оптимизации Почетный гражданин нашего форума
      • Студент КПИ
Re: Улучшите ваши формы с помощью HTML5!
« Ответ #2 : 02-03-2011, 11:06:07 »
И проще такие небольшие, но очень полезные вещи делать.
Опять же у кого отключен яваскрипт тот не почувствует разницу.


 

Похожие темы

  Тема / Автор Ответов Последний ответ
18 Ответов
3967 Просмотров
Последний ответ 28-01-2012, 14:52:42
от Gigs
3 Ответов
1770 Просмотров
Последний ответ 08-10-2012, 12:40:16
от Salpis invest
1 Ответов
1191 Просмотров
Последний ответ 16-11-2012, 08:38:45
от STRIJ
7 Ответов
4411 Просмотров
Последний ответ 12-05-2013, 03:36:09
от burara
5 Ответов
1112 Просмотров
Последний ответ 22-10-2015, 08:34:42
от olfa