Пока нам удалось создать несколько интересных версий сайта. Мы еще не охватили формы, в которых пользователи могут вводить данные. Формы широко используются по всему Интернету: поисковые системы вроде Google или Bing, поля статуса в Facebook, редактор писем в Gmail позволяют набирать или отправлять информацию.
Давайте сделаем простую форму, что позволит пользователям комментировать нашу статью. Мы хотим, чтобы форма выглядела как на следующем рисунке:
Теперь выберем отдельные компоненты, которые составляют форму. Мы будем использовать выделение одинаковым цветом для элементов, выполняющих аналогичные функции.
Как видите, синий цвет указывает на имена или описание каждого поля. Зелёные элементы показывают места, где вы можете ввести однострочный текст. Оранжевая область позволяет вводить длинные куски текста, а фиолетовый цвет используется для кнопки отправки формы. Для каждой группы мы будем использовать один и тот же тег.
Для имен задействуем
Форма
Мы должны включить соответствующий тег, который говорит браузеру: «Эй, форма начинается здесь!». Это очень похоже на тег
для указания, откуда начинать статью. В HTML мы используем тег
Форма
Теперь мы хотим добавить первое описание: «Ваше имя». Начиная отсюда мы будем рассматривать фрагменты кода, которые содержатся в разделе
Здесь у нас есть элемент
Ниже показано, как это поле выглядит для таких типов полей.
Вы будете использовать в коде
для указания, что пользователь может набирать текст в этом поле. Обратите внимание, что текстовые поля могут быть оформлены с помощью CSS. Мы можем изменить рамку, ширину или расстояние между текстом и границей текстового поля. Грубый пример показан ниже.
Атрибут name
используется для именования каждого поля. Это полезно, когда вы посылаете форму на сервер, помогает определить, какое значение из какого поля приходит.
Отметим также взаимосвязь между значением id
и значением атрибута for
атрибута в
В атрибуте for
вы должны использовать идентификатор поля, описание которого находится в
Давайте сделаем другую форму, теперь для поля email.
Единственная разница в том, что атрибут type
имеет значение email
. Смысл его, конечно, в том, что пользователь может ввести свою электронную почту. Обратите внимание, что набирается в поле email должно быть проверено на правильность адреса электронной почты. Если это некорректный адрес, то браузер отобразит сообщение об ошибке и не станет отправлять форму.
Следующим полем для добавления является место для комментария. Для длинных текстов мы используем тег
Обратите внимание, что мы использовали два новых атрибута: rows
и cols
. Атрибут rows
применяется для установки количества строк текста, которые могут быть введены в поле, пока не появится полоса прокрутки. cols
применяется для определения количества символов в каждой строке. Попробуйте самостоятельно изменить значения и посмотреть, как всё поле расширяется или сжимается соответственно.
Последнее, что нам нужно добавить, это кнопка для отправки формы.
Элемент
содержит атрибут type
равный submit
. То что вы напишите в атрибуте value
будет отображаться как текст на кнопке.
Перевод
Когда браузеры стали поддерживать JavaScript, за ним быстро закрепились две основные задачи: эффекты при наведении мышью и улучшения для веб-форм. Потом в CSS появился псевдо-класс :hover
и необходимость в скриптах для многих ситуаций первого плана отпала.
Эта история постоянно повторяется. Как только определенный шаблон или задача становятся достаточно популярными, они почти непременно в конце концов упрощаются в техническом плане и делаются более доступными. Именно так в CSS3 появилось много функций для создания простых анимаций, для которых прежде требовался JavaScript.
Говоря о формах, тут возможности CSS довольно ограничены. И теперь на сцену снова выходит HTML5. Следуя тому же принципу, он вводит новые функции, которые на самом деле вовсе не новые, но сделаны проще и удобнее.
Нетрудно догадаться, что прежде они были частью отдельной спецификации WHATWG под названием Web Forms 2.0.
Текст-заглушка
Существует распространенный шаблон для оформления поисковых форм:
Если поле пусто - вставить туда текст-заглушку.
Когда поле в фокусе - убрать заглушку.
Если пользователь оставил поле незаполненным и убрал фокус - вернуть ее.
При этом заглушка обычно выделяется немного более светлым цветом, чем вводимый в поле текст, что достигается при помощи CSS, JavaScript, или сочетания обоих.
В HTML5 все это реализуется при помощи простого параметра placeholder
:
Так это будет выглядеть в браузере. Owl stretching
- текст по умолчанию, приведенный в качестве примера.
В тех браузерах, что поддерживают этот атрибут, он работает прекрасно, но их пока не так много. Вам решать, что делать с остальными. В принципе, можно не напрягаться и не делать ничего совсем - данная функция все-таки хоть и удобна и приятна, но не жизненно важна. Но как вариант, можно разработать JavaScript-альтернативу; в этом случае сначала нужно будет убедиться, что браузер действительно не поддерживает placeholder
.
Вот пример простой функции, которая проверяет поддержку определенного параметра:
Function elementSupportsAttribute(element,attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
}
Она создает «фантомный» элемент в памяти - не на самой странице, - и затем смотрит, есть ли у прототипа этого элемента свойство с тем же же названием, что и параметр, которые вы проверяете. Функция вернет либо true
, либо false
.
С ее помощью вы можете подсунуть альтернативный код только для тех браузеров, которые не поддерживают данную возможность HTML5:
If (!elementSupportsAttribute("input","placeholder")) {
// Заглушка при помощи JavaScript описывается здесь.
}
Автофокус
«Привет, я функция автофокуса. Я знакома вам по таким ролям, как Google: мне повезет
и Twitter: What’s happening?
»
Этот шаблон очень прост и относительно легко реализуется в JavaScript. Суть его в том, что, когда страница загружена, нужно автоматически поставить фокус на определенном поле.
HTML5 позволяет использовать для этого булев параметр autofocus
:
Проблема только в том, что эта функция может ужасно раздражать. Очень часто, листая страницы в интернете, я использую клавишу пробела для быстрой прокрутки содержимого. На сайтах вроде Твиттера с этим автофокусом, я часто обнаруживаю, что вместо прокрутки заполняю поле пробелами.
Логика того, зачем этот параметр включен в спецификацию, вполне ясна, но он не идеален в плане юзабилити. Потому я советую его использовать аккуратно и только в случае явной пользы и при минимальной вероятности неудобств.
Одним из преимуществ переложения роли выполнения этой функции со скриптов на разметку состоит в том, что теоретически пользователи смогут ее отключать в настройках своего браузера. Ни один браузер, впрочем, пока это не позволяет, но все еще впереди. Как бы там ни было, сейчас она может быть отключена только вместе с JavaScript вообще - не самое лучшее решение; все равно что выкалывать себе глаза, чтобы избежать слишком яркого света.
Так же как и с параметром placeholder
можно проверить наличие поддержки автофокуса в браузере и, при необходимости, добавить альтернативный код на JavaScript:
If (!elementSupportsAttribute("input","autofocus")){
document.getElementById("status").focus();
}
Параметр autofocus
можно применить не только к элементам input
, но к любым другим типам полей, например textarea
или select
. И, разумеется, только единожды на странице.
Required
JavaScript часто используется для проверки заполненности формы на стороне клиента. Снова, часть этой задачи теперь переложена на HTML5. Теперь можно указать, что определенное поле обязательно к заполнению при помощи булева параметра required
.
Теоретически, наличие незаполненного поля с этим параметром само себе должно не дать пользователю отправить данные на обработку. Но хотя пока браузеры этого и не делают, его все равно можно интегрировать для привычной обработки форм JavaScript-ом. Просто теперь вместо отбора элементов по, скажем class=«required»
, можно искать их по конкретно параметру required
.
Автозаполнение
Современные браузеры не столько просто отображают веб-страницы, но и стараются повысить юзабилити, безопасность и удобство пользования ими. Функция автозаполнения форм - пример такого подхода. Большую часть времени она довольно полезна, но иногда может немного раздражать или даже быть потенциальным риском для безопасности. Я не против, когда браузер запоминает мои контактные данные, но я бы не хотел, чтобы он хранил логин и пароль от моего банковского счета на случай, если компьютер украдут.
HTML5 позволяет отключить автозаполнение как для отдельного поля, так и для целой формы. Параметр autocomplete
- не булев, хоть и принимает всего два значения: on
и off
.
В этом примере данные формы, обозначенные атрибутом name
(login
и password
), будут переданы в файл по адресу /example/handler.php. Если атрибут action
не указывать, то передача происходит на адрес текущей страницы.
Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге
Информация о марке, модели и альтернативных названиях конкретного устройства, если таковые имеются. ДизайнИнформация о размерах и весе устройства, представленная в разных единицах измерения. Использованные материалы, предлагаемые цвета,...
Сегодня компьютерные технологии, стремительно развиваются, совершенствуя другие отрасли производства. Для развития других технологий, с помощью компьютерных, нужны специальные программы. Эти программы устанавливают на многие заводы и фабрики, чтобы...
Инструкция Два сравнительно небольших экрана могут с легкостью заменить один широкоформатный с большой диагональю. Иногда подключение второго позволяет использовать одновременно несколько функций одного компьютера. Современные видеоадаптеры в...