Html тег

Параметр READONLY

Описание

Когда к тегу <INPUT> добавляется параметр readonly,
контентовое поле не может изменяться пользователем, в том числе вводиться новый
контент или модифицироваться существующий. Кроме того, такое поле не может получить
фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее,
состояние и содержимое поля можно менять с помощью скриптов.

<input type=»text» readonly>

<input type=»password» readonly>

Значение по умолчанию

По умолчанию это значение выключено.

Пример 9. Поле только для чтения

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

Результат примера показан ни рис. 4.

Рис. 4. контентовое поле только для чтения

Input type=submit

Как я уже писал выше, тег инпут предназначен не только для полей ввода, переключателей и чекбоксов, с его помощью так же делаются кнопки. Делают их корректным объявлением  атрибута type: button или submit, атрибут submit говорит о том что при клике на этот инпут данные из формы будут переданы на сервер. На страничку его добавляют так:

<input type="submit" class="submit" value="Отправить" />

а теперь немножко стилей:

.submit {
	cursor: pointer;
	border: 1px solid #cecece;
	background: #f6f6f6;
	box-shadow: inset 0px 20px 20px #ffffff;
	border-radius: 8px;
	padding: 8px 14px;
	width: 120px;
}
.submit:hover {
	box-shadow: inset 0px -20px 20px #ffffff;
}
.submit:active {
	margin-top: 1px;
	margin-bottom: -1px;
	zoom: 1;
}

CheckBoxList

Некоторые голосования предполагают возможность выбора больше одного варианта. Так же реализованы и тесты, которые вы проходите в конце лекций.

          <asp:Label ID="Label1" runat="server" Text="Как реализуется связывания с данными в ваших ASP.NET 2.0 приложениях?"></asp:Label> 
          <asp:CheckBoxList ID="CheckBoxList1" runat="server"> 
              <asp:ListItem>На каждой страничке создаётся SqlDataSource с ним идёт декларативное связывание.</asp:ListItem> 
              <asp:ListItem>В проекте есть DataSet, на страничках ObjectDataSourcе'ы, и с ними декларативное связывание.</asp:ListItem> 
              <asp:ListItem>Недекларавтивное связывание, запрос прописан на каждой страничке.</asp:ListItem> 
              <asp:ListItem>Недекларавтивное связывание с использованием одного большого DataSet'а</asp:ListItem> 
          </asp:CheckBoxList> 

Если в CheckBoxList множество вариантов, то можно их расположить в несколько столбцов. При этом можно двигаться сверх вниз-справа налево, или наоборот. Это зависит от RepeatDirection — Horizontal или Vertical. Текст может быть расположен справа или слева от флажка.

Как использовать тип type hidden на сайте.

HTML :

Покажем поле ввода с type=»hidden».

Если вы не видите поле ввода, то это нормально, потому, что данное поле и называется скрытым.

Вы можете навести мышку на поле нажать исследовать элемент и посмотреть в коде, на поле с типом hidden, вы должны увидеть вот такое :

<input name=»example2″ type=»hidden» value=»здесь помещаем данные, которые будут отправлены на сервер из поля hidden»>

Нам понадобится тег form + атрибут value.

<form method=»post»>
<input name=»example» type=»hidden» value=»здесь помещаем данные, которые будут отправлены на сервер из поля hidden»>
<input name=»example_submit» type=»submit» value=»Отправить»>
</form>

Еще один тип submit

PHP :

И php метод post.

+ Получаем данные из value в php.

Textarea

Данный тег на HTML страницу выводится так:

<textarea></textarea>

по умолчанию у этого тега присутствуют некоторые параметры:

• за правый нижний угол текстовой области можно потянуть мышкой и текстовая область будет увеличиваться
• справа присутствует постоянная прокрутка в браузерах IE

уберем эти мелочи, открываем наш файл стилей и пишем следующие свойства:

textarea {
	/* = Убираем скролл */
	overflow: auto;

	/* = Убираем увеличение */
	resize: none;
	width: 300px;
	height: 50px;

	/* = Добавим фон, рамку, отступ*/
	background: #f6f6f6;
	border: 1px solid #cecece;
	border-radius: 8px 0 0 0;
	padding: 8px 0 8px 10px;
}

Теперь наше поле для ввода текста имеет привлекательный вид. Следующим этапом стилизируем переключатели radio.

Использование скрытых входов

Как упоминалось выше,скрытые входы могут быть использованы везде,где вы хотите включить данные,которые пользователь не может увидеть или отредактировать вместе с формой,когда она отправлена на сервер.Давайте рассмотрим некоторые примеры,которые иллюстрируют ее использование.

Отслеживание отредактированного содержимого

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

1. Пользователь решает отредактировать некоторое содержание,над которым он имеет контроль,например,запись в блоге или запись о продукте.Он начинает редактирование с нажатия кнопки редактирования.
2. Редактируемое содержимое берётся из базы данных и загружается в HTML-форму,чтобы пользователь мог вносить изменения.
3. После редактирования пользователь отправляет форму,а обновленные данные отправляются обратно на сервер для обновления в базе данных.

Идея здесь заключается в том,что во время выполнения шага 2 идентификатор обновляемой записи хранится в скрытом виде.Когда форма отправляется в шаге 3,ID автоматически отправляется обратно на сервер с содержанием записи.ID позволяет серверному компоненту сайта точно знать,какая запись должна быть обновлена предоставленными данными.

Вы можете увидеть полный пример того, как это может выглядеть, в разделе « » ниже.

Улучшение безопасности веб-сайтов

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

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

Примечание. Размещение секрета на скрытом входе не делает его безопасным. Состав и кодировка ключа будут делать это. Значение скрытого ввода состоит в том, что он хранит секрет, связанный с данными, и автоматически включает его, когда форма отправляется на сервер. Вам нужно использовать хорошо продуманные секреты, чтобы действительно защитить свой сайт.

HTML: The Markup Language Reference

« input type=file
input type=image »

input type=hidden – hidden input control

The
input
element
with a type attribute whose
value is «»
represents a value that is not intended to be examined or
manipulated by the user.

Permitted attributes

global attributes
&
&
&
& ★
&

global attributes

Any attributes permitted globally.

name =

The name part of the name/value pair associated with this
element for the purposes of form submission.

disabled =
«disabled»
or «» (empty string) or

Specifies that the element represents a disabled
control.

form = NEW

The value of the
id
attribute on the

with which to associate the element.

type = «hidden»

Specifies that its
input
element
represents a value that is not intended to be examined or
manipulated by the user.

value =

Specifies a value for the
input
element.

Additional constraints and admonitions

• The interactive element input must not
  appear as a descendant of the a element.
• The interactive element input must not
  appear as a descendant of the button element.
• Any input element descendant of a label element
  with a for attribute must have an
  ID value that matches that for attribute.
• The list attribute of the “input”
  element must refer to a datalist element.
• The usemap attribute on the input element is obsolete.
  Use the img element instead of the input element for image maps.
• The align attribute on the input element is obsolete.
  Use CSS instead.

DOM interface

interface HTMLInputElement :  {
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute boolean ;
           attribute boolean ;
           attribute boolean ;
           attribute boolean ;
  readonly attribute  ;
  readonly attribute FileList ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute boolean ;
           attribute DOMString ;
           attribute DOMString ;
           attribute boolean ;
  readonly attribute  ;
           attribute DOMString ;
           attribute long ;
           attribute DOMString ;
           attribute boolean ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute boolean ;
           attribute boolean ;
           attribute unsigned long ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute Date ;
           attribute double ;
  readonly attribute  ;
           attribute DOMString ;

  void (in optional long n);
  void (in optional long n);

  readonly attribute boolean ;
  readonly attribute  ;
  readonly attribute DOMString ;
  boolean ();
  void (in DOMString error);

  readonly attribute  ;

  void ();
           attribute unsigned long ;
           attribute unsigned long ;
  void (in unsigned long start, in unsigned long end);
};

« input type=file
input type=image »

Example Application

Let us create a test JSF application to test the above tag.

home.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>JSF Tutorial!</title>
      <h:head>
         
         <script type = "text/javascript">
            function showHiddenValue() { 
               alert(document.getElementById('jsfForm:hiddenField').value);	 
            }
         </script>
      </h:head>
   </head>
   
   <body>
      <h2>h:inputHidden example</h2>
      <hr />
      
      <h:form id = "jsfForm">
         <h3>Get value from inputHidden field</h3>
         <h:inputHidden value = "Hello World" id = "hiddenField" />
         <h:commandButton value = "Show Hidden Value" onclick = "showHiddenValue()" />
      </h:form> 
   
   </body>
</html>

Once you are ready with all the changes done, let us compile and run the application as we did in JSF — Create Application chapter. If everything is fine with your application, this will produce the following result.

jsf_basic_tags.htm

Video

Селект

Изменение селекта сбрасывает фокус

Пользователи программ чтения с экрана и клавиатуры не нажимают на опции, чтобы выбрать их в раскрывающемся списке. Вместо этого они просматривают опции, перемещая стрелки или табуляторы вниз по списку. Перемещение по опциям таким образом по очереди меняет фокус на каждую последующую опцию. Это представляет проблему, когда объекты на странице запускаются для изменения при изменении фокуса в списке параметров. Каждый раз, когда программа чтения с экрана или клавиатура начинает перемещаться по параметрам, страница обновляется и фокус теряется. Это создает очень запутанный опыт, и во многих случаях все параметры в списке недоступны.

Решение

Убедитесь, что когда устройство чтения с экрана или пользователь клавиатуры перемещаются по опциям, страница не обновляется, а фокус остается в раскрывающемся списке. Кроме того, не перезагружайте страницу при изменении, лучше делать это когда пользователь нажимает клавишу ввода, ликает или или обрабатывать событие .

Обратите внимание, что после селекта есть кнопка, которая и будет запускать обработчик после изменения значения поля

Селект без лейбла

Все поля формы нуждаются в лейблах, которые видны и остаются видимыми для каждого пользователя. Лейблы помогают всем пользователям понять назначение поля формы. Лейблы, которые правильно связаны со своим полем формы с использованием стандартной разметки HTML, программно соединяют лейбл с полем формы независимо от визуального макета страницы. Это дает пользователям программы чтения с экрана четкое представление об использовании поля формы.

В ситуациях, когда ограниченное пространство или дизайн делают невозможным или нежелательным использование видимого лейбла, он может быть визуально скрыта (но быть доступной для программ чтения с экрана), за исключением случая, если первая опция в селекте выбранная по умолчанию включает текст, который маркирует поле.

Альтернативный вариант:

Добавьте элемент по умолчанию к элементу , который включает тот же или подобный текст, что и предполагаемый лейбл:

Кастомные селекты не доступны

Селект должен быть доступен для навигации по опциям с помощью клавиши Tab, у него должен быть правильно связанный лейбл, он должен указывать пользователю тип элемента управления, которым он является, и он должен указывать на текущий выбранный элемент или элементы.

Если это возможно, всегда отдавайте предпочтение системным селектам перед кастомными решениями.

Если все-таки вы должны использовать кастомный селект, вам нужно будет вручную контролировать состояние ряда атрибутов ARIA с помощью JavaScript. Рассмотрите, пожалуйста в качестве основы реализацию от рабочей группы WAI-ARIA.

Why Hide a Field?

fields are used programatically, to pass information about the current page to the server.

For example, if a user fills out an enquiry form, we may want to obtain their IP address using a snippet of PHP. We may also want to grab the URL of the referring page. You can see this in action in our code sample; the form captures the information, but does not display it.

Hidden fields allow us to send all kinds of information along with a form message, without the user having to be involved in the process. Hidden fields can also be used to pass information back to scripts. This may include security tokens, or the name of the relevant row in the database. The user does not need to see this data, but it is passed back to the server on submission so that scripts function correctly behind the scenes.

Claire Broadley

Value

В элемента атрибута имеет , который содержит скрытые данные , которые вы хотите включить , когда форма передается на сервер. Это, в частности, не может быть отредактировано или просмотрено пользователем через пользовательский интерфейс, хотя вы можете изменить значение с помощью инструментов разработчика браузера.

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

Динамический пользовательский интерфейс

Несомненно, модель элементов управления облегчает извлечение информации о форме. Еще более примечательно то, что она упрощает жизнь при необходимости добавления информации к странице. Почти все свойства веб-элемента управления можно читать и устанавливать. Это означает, что, например, свойство текстового поля Text можно установить так же просто, как и прочитать его.

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

С другой стороны, ситуация упрощается при определении в ASP.NET элемента управления Label (метка):

Теперь можно просто установить его свойства:

Этот код обладает несколькими преимуществами. Во-первых, его намного легче написать (причем без ошибок)

В данном примере экономия незначительна, однако она становится весьма существенной, если принимать во внимание полную страницу ASP.NET, на которой необходимо динамически изменять сложные блоки HTML, содержащие ссылки, изображения и стили

Во-вторых, основанный на элементах управления код также намного легче разместить внутри страницы. Вы можете написать код ASP.NET независимо от того, где происходит соответствующее действие. С другой стороны, в случае классической ASP вам придется позаботиться о расположении содержимого на странице и соответствующем размещении кода блоков сценариев. Если страница содержит динамические области, она может превратиться в путаницу из блоков сценариев, не связанных между собой и не упорядоченных.

Другим (менее заметным, но более значительным) преимуществом модели элементов управления является способ сокрытия низкоуровневых подробностей HTML. Это не только дает возможность писать код без изучения всех индивидуальных особенностей HTML, но также позволяет страницам поддерживать более широкий диапазон браузеров. Поскольку элемент управления визуализирует себя сам, он обладает способностью адаптировать свой вывод с целью поддержки различных браузеров, усовершенствованных клиентских свойств или даже других стандартов, связанных с HTML, наподобие XHTML или WML. По существу код уже не привязан непосредственно к стандарту HTML.

#3. Увеличение размера значка при наведении

Из всех четырёх примеров этот является самым тонким, как с точки зрения кода, так и с визуальной. В этом случае значок смотрового окна будет слегка выплывать и увеличиваться в размере.

CSS

В стиле CSS для этого примера ничего особенного. По большей части в начале очень похоже на первые примеры, когда состояние default ничем не отличается. Ниже приведен код для контейнера и input

Обратите внимание, что на этот раз переход на input отсутствует

Еще раз у нас есть правила placeholder.

По внешнему виду, значок для этого примера такой же. Та же позиция, тот же цвет и прочее. Однако, я добавила к нему переход. Эти переходы назначены всем свойствам, что более коротко, чем их индивидуальное изложение.

Добавление эффектов Hover

В приведенном выше коде есть несколько вещей. Во-первых, мы поменяли цвет значка при наведении и переместили немного выше, чтобы он центрировался по вертикали, когда увеличится. Во-вторых, мы добавили трансформацию иконке при наведении так, чтобы она становилась в 1,5 раза больше первоначального размера. Поскольку ранее определённый переход был настроен для воздействия на все свойства, кажется, что значок растёт при наведении.

Еще раз взглянем на CSS3 Transitions And Transforms From Scratch, чтобы узнать больше о трансформации.

Значение атрибута type: range

Поле ввода типа range элемента <input> позволит создать такой элемент интерфейса, как ползунковый регулятор. Ползунок предназначен только для выбора числовых значений в некоем диапазоне, при этом для пользователя не все браузеры отображают текущее числовое значение. Основной синтаксис создания ползунка:

Нижняя и верхняя границы диапазона min и max ограничивают значения, которые могут храниться в поле формы. Диапазон по умолчанию — от 0 до 100. Атрибут step позволяет разработчикам указывать шаг изменения чисел (по умолчанию 1). Текущее значение задается в атрибуте value. По умолчанию value = (max + min)/2. Вышеперечисленные атрибуты не являются обязательными и, если их опустить, то в таком случае они принимают значения по умолчанию.

HTML тег

Все элементы тега форм создаются с помощью тега <input>.

Синтаксис <input>

Первое на что стоит обратить внимание, что тег не нужен закрывающий тег. У поля есть два самых важных параметра, которые я вынес в обязательные, это name и type

• name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
• type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
  • text — текстовое поле. Одно из самых часто используемых значений
  • password — текстовое поле, но с той особенностью, что при вводе символы скрыты
  • radio — радиокнопки
  • checkbox — переключатели
  • submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
  • reset — кнопка для очистки всей формы
  • hidden — скрытое поле
  • button — кнопки для обработки каких-то действий (не путать с submit!)
  • file — для загрузки файлов на сервер
  • image — поле с изображением (используется крайне редко)
• value=»значение» — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

Значение атрибута type: tel

Элемент <input> типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Несмотря на то, что телефонный номер представляет из себя числовой формат вводимых данных, в браузерах поле типа tel ведет себя как обычное текстовое поле ввода. Однако, применение типа поля ввода tel приводит к появлению на экранах мобильных устройств специальной клавиатуры, предназначенной для облегчения ввода информации. Синтаксис поля ввода номера телефона:

• Результат
• HTML-код
• Попробуй сам » /

Телефон:

Значение
Описание

button
Создает кнопку с произвольным действием, действие по умолчанию не определено:

checkbox
Создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вариантов:Я знаю HTML

color

Генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB:

date

Позволяет вводить дату в формате дд.мм.гггг.:
День рождения:

datetime-local

Позволяет вводить дату и время, разделенные прописной английской буквой по шаблону дд.мм.гггг чч:мм:
Дата встречи — день и время:

email

Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов:
E-mail:

file
Позволяет загружать файлы с компьютера пользователя:
Выберите файл:

hidden
Создает скрытый элемент, не отображаемый пользователю. Информация,
хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером.

image
Создает элемент в виде графического изображения, действующий аналогично кнопке Submit:

month

Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм:

number

Создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step:
Укажите число (от 1 до 10):

password
Текстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой либо другим, установленным браузером значком:
Введите пароль:

radio
Создает элемент-переключатель в виде небольшого кружка (иногда их называют радио-кнопками):
Радио-кнопки:

range

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

reset
Создает кнопку, которая очищает поля формы от введенных пользователем данных:

search

Создает поле поиска, по умолчанию поле ввода имеет прямоугольную форму:
Поиск:

submit
Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее на сервер обработчику:

text
Создает однострочное поле ввода текста:

time

Допускает ввод значений в 24-часовом формате, например 17:30. Браузеры отображают его как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускают ввод только значений времени:
Выберите время:

url

Заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса:
Главная страница:

week

Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:

DOM interface #

interface HTMLInputElement :  {
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute boolean ;
           attribute boolean ;
           attribute boolean ;
           attribute boolean ;
  readonly attribute  ;
  readonly attribute FileList ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute boolean ;
           attribute DOMString ;
           attribute DOMString ;
           attribute boolean ;
  readonly attribute  ;
           attribute DOMString ;
           attribute long ;
           attribute DOMString ;
           attribute boolean ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute boolean ;
           attribute boolean ;
           attribute unsigned long ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute DOMString ;
           attribute Date ;
           attribute double ;
  readonly attribute  ;
           attribute DOMString ;

  void (in optional long n);
  void (in optional long n);

  readonly attribute boolean ;
  readonly attribute  ;
  readonly attribute DOMString ;
  boolean ();
  void (in DOMString error);

  readonly attribute  ;

  void ();
           attribute unsigned long ;
           attribute unsigned long ;
  void (in unsigned long start, in unsigned long end);
};

Как улучшить веб-формы для пользователей

Используйте возможности Web Forms 2.0.

Веб-формы всегда требовали улучшений. Стандартные средства HTML не могли обеспечить решение многих задач разработчиков. На помощь приходил JavaScript, с помощью которого можно как угодно манипулировать с содержимым страницы. Аналогичная ситуация была и с CSS. Множество анимаций и визуальные эффекты реализовали при помощи скриптов.

С появлением HTML5 и CSS3 возможности веб-разработки расширились. Чтобы решить многие стандартные задачи, уже не приходилось использовать скрипты. HTML5 принес с новые возможности для веб-форм, включая спецификацию Web Forms 2.0. Разработчики получили возможность использовать новые значения для атрибута type. Чтобы предложить пользователям удобные веб-формы, можно использовать:

Дату и время

Многие сайты, например, бронирования отелей или такси, используют виджеты выборе даты и времени. В HTML5 можно реализовать простой календарь с помощью полей:

• date — год, месяц и день;
• datetime — год, месяц, день, час, минута, секунда, а также часовой пояс (устаревший тип, рекомендуется использовать datetime-local);
• datetime-local — аналог datetime, без часового пояса;
• month — год и месяц;
• week — год и номер недели;
• time — время в часах, минутах, секундах, долях секунд.

Числовой счетчик

Для решения многих задач достаточно использовать обычное текстовое поле. Но там, где нужен ввод точного числового значения, можно задействовать поле типа number. Его атрибуты min и max определяют минимальное и максимальное значение, а step — шаг. Пример:

<input type=»number» value=»0″ min=»0″ max=»10″ step=»1″>

Слайдер

Есть много JavaScript библиотек, которые позволяют создать слайдеры или ползунки с выбором значения из заданного диапазона. Сделать простой ползунок теперь можно средствами HTML. Пример:

<p>Выберите значение от 0 до 50:</p> <div> <input type=»range» name=»volume» min=»0″ max=»50″> <label for=»volume»>Объем</label></div>

Выбор цвета

В HTML5 есть поля для выбора цвета. Можно задать любые значения в шестнадцатеричной системе счисления и предложить пользователям выбрать. Пример:

<p>Выберите цвет элемента:</p><div> <input type=»color» name=»color1″ value=»#ff0000″> <label for=»color1″>Цвет 1</label></div><div> <input type=»color» name=»color2″ value=»#f6b73c»> <label for=»color2″>Цвет 2</label></div>

Паттерны

Атрибут pattern позволяет проверить ввод данных в форму. Пример:

<input type=»password» name=»pwd» pattern=».{12,}» title=»Минимальная длина пароля должна быть от 12 символов»>

<input type=»password» name=»pwd» pattern=»(?=.*\d)(?=.*)(?=.*).{12,}» title=»Пароль должен содержать минимум 1 цифру, заглавную и строчную буквы и быть не менее 12 символов»>

<input type=»url» name=»address» pattern=»https?://.+» title=»Введите https://»>

Другие полезные атрибуты

В HTML5 есть и другие полезные атрибуты для форм.

• Атрибут placeholder позволяет вписывать текст, который отображается, когда поле пустое, и исчезает при фокусе.
• Атрибут autofocus автоматически ставит фокус на поле после загрузки страницы.
• Атрибут required помечает, что поле обязательное для заполнения.
• Атрибут autocomplete включает автозаполнение формы (запоминает ранее введенные данные). Отключается установкой значения off: autocomplete=»off».

Checkbox

Чекбоксы выводятся на HTML страницу таким же методом как и radio переключатели:

<input type="checkbox" id="checkbox1" />
<input type="checkbox" id="checkbox2" />
<input type="checkbox" id="checkbox3" />

Со стилизацией с помощью одного CSS тут та же история, что и с radio кнопками. Для стилизации чекбоксов нужен немного другой логический подход: выводим столько чекбоксов сколько задано но вместо атрибута checkbox ставим атрибут hidden и перед каждым input’ом добавим div:

<div class="checkboxes">
	<div class="check">
		jQuery
		<input type="checkbox" value="jQuery" />
	</div>
	<div class="check">
		HTML
		<input type="checkbox" value="HTML" />
	</div>
	<div class="check">
		CSS
		<input type="checkbox" value="CSS" />
	</div>
	<div class="check">
		PHP
		<input type="checkbox" value="PHP" />
	</div>
	<div class="check">
		MySql
		<input type="checkbox" value="MySql" />
	</div>
</div>

дальше добавим стилей, для активного и неактивного чекбокса

/*	=	CheckBox */
/* Стилизируем чекбокс, точнее скрываем его */
.check input {
	position: absolute;
	left: -10000px;
}
.check {
	background-position: 0 3px;
	padding-left: 25px;
	cursor: pointer;
	position: relative;
}
.check.active {
	background-position: 0 -27px;
}

теперь очередь jQuery:

// Checkbox
// Отслеживаем событие клика по диву с классом check
$('.checkboxes').find('.check').click(function(){
	// Пишем условие: если вложенный в див чекбокс отмечен
	if( $(this).find('input').is(':checked') ) {
		// то снимаем активность с дива
		$(this).removeClass('active');
		// и удаляем атрибут checked (делаем чекбокс не отмеченным)
		$(this).find('input').removeAttr('checked');

	// если же чекбокс не отмечен, то
	} else {
		// добавляем класс активности диву
		$(this).addClass('active');
		// добавляем атрибут checked чекбоксу
		$(this).find('input').attr('checked', true);
	}
});

А теперь займемся селектами:

Инструменты разработки форм

Развитие инструментов разработки позволило упростить создание форм. На смену обычному HTML пришла генерация содержимого форм на основе JSON Schema.

Это выглядит примерно так. Формируется json с полями, их типами, атрибутами и данными:

{ «schema»: { «message»: { «type»: «string», «title»: «Сообщение» }, «author»: { «type»: «object», «title»: «Автор», «properties»: { «name»: { «type»: «string», «title»: «Имя» }, «gender»: { «type»: «string», «title»: «Пол», «enum»: } «magic»: { «type»: «integer», «title»: «Магический номер», «default»: 42 } } } }}

На выходе генерируется форма следующего вида:

JSON Schema решают несколько проблем:

• экономят время на разработку форм;
• сокращают общее количество кода;
• делают функционал форм гибким;
• задают понятную всем разработчикам структуру.

Итого

События изменения данных:

Ещё особенность: в IE8- события , , и аналогичные не всплывают. То есть, обработчики нужно назначать на сам элемент, без делегирования.