Создание форм

Создание форм

Содержание:

 

Описание формы.Создание форм

Sliders — Создание ползунка.

Числовые данные. Работа со счетчиками.

Дата код.

Код электронной почты.

Электронный адрес.

Цвета html.

Применяем стили к форме.

Пользовательский ввод.

 

 

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

 

Обновлены; палитра цветов, календарь, счетчик (spinboxes) и ползунок. Избавлена необходимость использовать JavaScript, так как во всех видах браузеров, автоматически отображаются все виды расширенных элементов. На мобильных устройствах, а также виртуальных клавиатурах планшетных и сенсорных устройств тип поля может использоваться для выбора раскладки клавиатуры. 

 

Например, браузер Safari для iOS при вводе данных в полях  URL и e-mail отображает альтернативную раскладку с удобным вводом специальных символов @: и  /.

 

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

Для каждого проекта указано название, контактного электронного адреса почты и url, по которому руководители могут просмотреть предварительную версию создаваемого приложения.

 

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

 

Давайте построим макет страницу описания проекта с использованием новых полей форм HTML5. В конечном итоге форма  выглядит,  таким образом, смотри рис.1.

 

 

 

Создание форм

 

 

Описание формы

 

Давайте создадим новую страницу HTML5 с базовой формой HTML, которая осуществляет данные для отправки методом "POST". Предполагается,  что где-то существует страница, которая эту форму обрабатывает. Поле названия проекта практически несколько не различаются, и только по этой причине, мы воспользуемся старым и проверенным типом text.

 

Html5_form/index.html

<form method="post" action="/projects/1">

<field set id="personal information">

<Legend>Project Information</legend>

<ol>

<li>

<label for="home">Name</label>

<input type="text name="name"id="name">

</li>

<li>

<input type="submit"value="Submit">

</li>

</ol>

</fieldset>

</form>

 

 Обратите внимание: при создании разметки формы в упорядоченный список включаются метки (элементы <label>). Эти данные играют, важнейшее значение для обеспечения доступности форм. Атрибут for ссылается на идентификатор ассоциированного элемента формы; это помогает экранным дикторам идентифицировать поля на странице.

 

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

 

Sliders — Создание ползунка

 

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

 

 Html5_form/index.html

<label for="priority">Priority</label>

<input type="range"min="0" max="10"

name="priority value="0" id="priority">

 

Добавьте его на форму в новом элементе и  (по аналогии с предыдущим полем). В Chrome, Safari и Opera, реализован виджет, Slider, который выглядит так.

 

 

Создание форм

 

 

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

 

Числовые данные. Работа со счетчиками.

 

Мы часто работаем с числовыми данными. И хотя ввести число с клавиатуры несложно, счетчики (spinboxes) удобны для незначительного изменения числовых данных. Счетчик представляет собою, любую геометрическую форму, в которой находится кнопочки и стрелочки, чтобы можно было увеличить или уменьшить хранимых значений. На нашей форме в поле счетчика будет храниться приблизительный объем работы в часах. Помимо упрощения ввода данных, использование этого поля четко описывает содержащиеся в поле данные.

 

 Html5_form/index.html

<label for="estimatec_hours">Estimatecl Hours</label>

<input type="number name=estimated_hours"

min="0“  max="1000"

id="estimated hours">

 

 

В Chrome, Safari и Opera поддерживается элемент-счетчик, который выглядит таким образом, или что-то подобное.

 

 

Создание форм

 

 

По умолчанию, в счетчике, допустимый клавиатурный ввод.

Однозначно, что и для ползунков, так и для самого поля, можно задавать разрешенные  значения min — max. Но эти данные  ни как не реагируют на данные, которые вводятся в поле, таким образом, вводимые данные придется ограничить с помощью сценария или же средством проверочных данных HTML5., которые будут рассматриваться ниже в примере: (Проверяем пользовательский ввод, без использования JavaScript(Обходное решение)). Обратите внимание, на возможность приращивая, параметром step.

 

Значение по умолчанию способа приращивающие приравнивается одному, но, не смотря на ограничения, вы все-таки можете присваивать любые атрибуты.

 

Дата код

 

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

 

<label for="start_date">Startdate</label>

<input type="date"name="start_date"

value="2016-02-22">

 

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

 

Код электронной почты

 

Строка e-mail предназначена, чтобы сохранять данные отдельных электронных адресов. Таким образом, это поле идеально подходит для нашего приложения.

 

 <label for="email">E-mail contact</label>

<input type="email" name="email" id="email">

 

Поле этого типа очень эффективно работает в мобильном устройстве, у которого виртуальная раскладка клавиатуры, меняется, чтобы было удобней вводить e-meil адреса. Не обделяйте вниманием символ @ на клавиатуре iPhone, а также на Android.

 

Электронный адрес

 

URL-адрес

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

 

 <label for=URL">Staging URL</label>

<input type="url" name="url" id="url">

 

 Этот тип удобен для ваших посетителей, которые заходят на ваш сайт с iPhone ну и  Android — данные устройства по-своему отображают клавиатуру для быстрого ввода веб-адреса (аналогичным образом, отображаемая клавиатура меняется на мобильных браузерах, когда нужно ввести url-адрес в строку поиска).

 

Цвета html

 

Наконец-то пользователям дана возможность выбирать цветовые коды для своих проектов. Для этой цели будет использовано поле типа color.

 

 <label for="project_coLor">Project color</label>

< input type="color" name="project color" id="project color">

 

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

(Проверяем пользовательский ввод, без использования JavaScript)

 

Применяем стили к форме.

 

Мы применим к форме простейшее оформление CSS. Создайте новый
файл с именем stylesheets/style.cssи включите ссылку на него в секцию


<head> страница формы.
<link rel="stylesheet" href=stylesheets/style.css>


Но сначала убераем нумерацию, пол и отступы из списка:


оl{
list-style: none;
margin: 0;
padding :0;
}
ol li{
clear: both;
margin: 0 0 10px 0;
padding: 0;
}


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


html5_forms/stylesheets/style.css

label{
float: left;
width: 160pх;
}
input{ border: 1px solid #fff; }
input :focus{ background-color: #ffe; }

 

 

 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

This blog is kept spam free by WP-SpamFree.