HTML5 | Формы
184
Веб-программирование — HTML5 — Формы
HTML-формы — это простые элементы управления HTML, которые применяются для сбора информации от посетителей веб-сайта. К ним относятся текстовые поля для ввода данных с клавиатуры, списки для выбора предопределенных данных, флажки для установки параметров и т. п. Существует бесчисленное количество способов использования HTML-форм, и если вы побродили по просторам Интернета всего лишь несколько дней, то, несомненно, использовали их для разных целей — от регистрации на каком-либо форуме или получения почтового ящика до просмотра биржевого курса или покупки товара в интернет-магазине.
HTML-формы существовали с самых ранних времен языка HTML, и с тех пор они нисколько не изменились, несмотря на определенные серьезные усилия. Разработчики веб-стандартов несколько лет колдовали над стандартом XForms, который должен был заменить HTML-формы, но его постиг такой же провал, как и стандарт XHTML 2.
Хотя стандарт XForms позволял легко и элегантно решать некоторые задачи, он также имел и значительные недостатки. Например, код XForms был очень объемистый, и для работы с ним нужно хорошее знание стандарта XML. Но самое большое препятствие состояло в том, что стандарт XForms не был совместим с HTML-формами ни в каких отношениях. Это означало, что разработчикам нужно было бы бросаться в неизведанные воды новой модели без вспомогательных плавсредств, а лишь со слепой верой и огромным мужеством.
Но так как разработчики основных браузеров никогда не заморачивались с реализацией XForms в своих продуктах по причине его слишком большой сложности и небольшого использования, сообщество веб-разработчиков так никогда и не сделало этот прыжок.
Стандарт HTML5 предлагает другой подход. Вместо того чтобы начинать с нуля, как в XForms, он совершенствует уже существующую модель HTML-форм. Это означает, что HTML5-формы могут работать и на старых браузерах, лишь без новых примочек и наворотов.
Что такое форма?
Скорее всего, вам приходилось работать с формами раньше. Но если нет или вы порядочно подзабыли эту тему, следующий материал позволит вам получить необходимые сведения для более углубленного изучения этой области веб-дизайна.
Веб-форма — это набор текстовых полей, списков, кнопок и других активизируемых щелчком мыши элементов управления, посредством которых посетитель страницы может предоставить ей тот или иной вид информации. Формы в Интернете повсюду — благодаря формам мы можем создавать учетные записи электронной почты, просматривать и покупать товары в интернет-магазинах, осуществлять финансовые транзакции и многое другое. Самая простая форма — это одинокое текстовое поле поисковых систем, таких как Google:
Все основные веб-формы работают одинаково.
Пользователь вводит определенную информацию, а потом нажимает кнопку, чтобы отправить введенную информацию на веб-сервер. По прибытию на веб-сервер эта информация обрабатывается каким-либо приложением, которое потом предпринимает соответствующий очередной шаг. Перед тем как отослать новую страницу назад браузеру, серверная программа может обратиться к базе данных, чтобы извлечь или сохранить информацию.
Сложность этого процесса состоит в том, что существуют сотни разных способов реализации серверного приложения, которое обрабатывает поступившие из формы данные. Некоторым разработчикам может быть достаточно элементарных сценариев для манипулирования полученными данными, в то время как другие могут использовать средства высшего уровня, которые упаковывают данные из формы в аккуратные программные объекты. Но в любом случае, задача перед этими приложениями стоит, по большому счету, одинаковая — исследовать данные из формы, выполнить какие-либо действия с ними, а потом на основе полученных результатов отправить браузеру новую страницу.
Модернизация традиционной HTML-формы
Лучший способ обучения работе с формами HTML5 — это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент <form>.
Элемент <form> удерживает вместе все элементы управления формы, которые также называются полями. Кроме этого, он также указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предоставляя URL в атрибуте
Хорошо спроектированная форма разделяется на логические фрагменты с помощью элемента <fieldset>. Каждому разделу можно присвоить название, для чего используется элемент <legend>.
В следующем листинге приводится разметка формы:
<form action="#">
<p><i>Пожалуйста, заполните форму. Обязательные поля помечены </i><em>*</em></p>
<fieldset>
<legend>Контактная информация</legend>
<label for="name">Имя <em>*</em></label>
<input><br>
<label for="telephone">Телефон</label>
<input><br>
<label for="email">Email <em>*</em></label>
<input><br>
</fieldset>
<fieldset>
<legend>Персональная информация</legend>
<label for="age">Возраст<em>*</em></label>
<input><br>
<label for="gender">Пол</label>
<select>
<option value="female">Женщина</option>
<option value="male">Мужчина</option>
</select><br>
<label for="comments">Перечислите личные качества</label>
<textarea></textarea>
</fieldset>
<fieldset>
<legend>Выберите ваших любимых животных</legend>
<label for="zebra"><input type="checkbox"> Зебра</label>
<label for="cat"><input type="checkbox"> Кошак</label>
<label for="anaconda"><input type="checkbox"> Анаконда</label>
<label for="human"><input type="checkbox"> Человек</label>
<label for="elephant"><input type="checkbox"> Слон</label>
<label for="wildebeest"><input type="checkbox"> Антилопа</label>
<label for="pigeon"><input type="checkbox"> Голубь</label>
<label for="crab"><input type="checkbox"> Краб</label>
</fieldset>
<p><input type="submit" value="Отправить информацию"></p>
</form> Добавьте немного стилей CSS:
body {
font-family: 'Palatino Linotype', serif;
max-width: 600px;
padding: 0px 30px;
}
h2 {
margin-bottom: 0px;
}
p {
margin-top: 0px;
}
fieldset {
margin-bottom: 15px;
padding: 10px;
}
legend {
padding: 0px 3px;
font-weight: bold;
font-variant: small-caps;
}
label {
width: 110px;
display: inline-block;
vertical-align: top;
margin: 6px;
}
em {
font-weight: bold;
font-style: normal;
color: #f00;
}
input:focus {
background: #eaeaea;
}
input, textarea {
width: 249px;
}
textarea {
height: 100px;
}
select {
width: 254px;
}
input[type=checkbox] {
width: 10px;
}
input[type=submit] {
width: 170px;
padding: 10px;
}
И вот результат:
Как и во всех формах, большая часть работы в нашем примере выполняете универсальным элементом <input>, который собирает данные и создает флажки, переключатели и списки.
| Элемент управления | HTML-элемент | Описание |
|---|---|---|
| Однострочное текстовое поле | <input type=»text»> <input type=»password»> |
Выводит однострочное текстовое поле для ввода текста. Если для атрибута type указано значение password, вводимые пользователем символы отображаются в виде звездочек (*) или маркеров-точек (•) |
| Многострочное текстовое поле | <textarea>…</textarea> | Текстовое поле, в которое можно ввести несколько строчек текста |
| Флажок | <input type=»checkbox»> | Выводит поле флажка, который можно установить или очистить |
| Переключатель | <input type=»radio»> | Выводит переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить. Обычно создается группа переключателей с одинаковым значением атрибута name, вследствие чего можно выбрать только один из них |
| Кнопка | <input type=»submit»> <input type=»image»> <input type=»reset»> <input type=»button»> |
Выводит стандартную кнопку, активизируемую щелчком мыши. Кнопка типа submit всегда собирает информацию с формы и отправляет ее для обработки. Кнопка типа image делает то же самое, но позволяет вместо текста на кнопке вставить изображение. Кнопка типа reset очищает поля формы от введенных пользователем данных. А кнопка типа button сама по себе не делает ничего. Чтобы ее нажатие выполняло какое-либо действие, для нее нужно добавить сценарий JavaScript |
| Список | <select>…</select> | Выводит список, из которого пользователь может выбирать значения. Для каждого значения списка добавляем элемент <option> |
Одним из ограничений HTML-форм является то, что разработчик не может контролировать каким способом браузер отображает элементы управления формы.
Например, если вы хотите заменить унылое серое поле флажка большим черно-белым полем с жирной красной галочкой, вам этого не удастся. (Одно из решений этой проблемы — создать с помощью JavaScript элемент с поведением, подобным флажку, иными словами, элемент меняет свой внешний вид, когда на нем щелкают.)
Это ограничение сохранилось и в HTML5 и распространяется на все новые элементы управления, которые мы рассмотрим. Это означает, что формы не подойдут для разработчиков, которым нужен полный контроль над внешним видом своих страниц в общем и требуются элементы управления с особым внешним видом в частности.
Теперь, когда у нас есть форма, с которой можно работать, настало время улучшить ее с помощью HTML5. Начнем мы это в следующих разделах с добавления подстановочного текста подсказок и поля с автоматическим фокусом.
Добавление подсказок
Обычно поля новой формы не содержат никаких данных. Для некоторых пользователей такая форма может быть не совсем понятной, в частности, какую именно информацию нужно вводить в конкретное поле.
Вверху, когда поле пустое, в нем отображается подстановочный текст. Внизу, когда пользователь щелкает мышью в поле (устанавливая в нем фокус), подстановочный текст исчезает. Если пользователь переходит в другое поле, не введя ничего в первое, то поле снова заполняется подстановочным текстом.
Подстановочный текст для поля создается с помощью атрибута placeholder:
<input placeholder="Иван Иванов"> ... <input placeholder="+7 (xxx) xxx-xxxx">
Браузеры, не поддерживающие подстановочный текст, просто не обращают внимания на атрибут placeholder; особенно грешит этим Internet Explorer. К счастью, это не такая уж и большая проблема, т.
к. подстановочный текст — всего лишь приятная примочка, не обязательная для функционирования формы.
В настоящее время не существует стандартного, единообразного способа изменить внешний вид подстановочного текста, например, выделить его курсивом или шрифтом определенного цвета. Со временем разработчики браузеров создадут требуемые для этого обработчики. Но пока либо нужно применять специфические для браузера CSS-псевдоклассы (а именно -webkit-input-placeholder и -moz-placeholder), либо смириться с таким порядком вещей.
А вот псевдокласс focus обеспечивается лучшей поддержкой, и его можно использовать, чтобы изменять внешний вид текстового поля при получении фокуса. Например, сделать фон поля более темным, чтобы оно выделялось среди остальных, можно следующим образом:
input:focus {
background: #eaeaea;
}Фокус
Так как форма предназначена для ввода информации, первым делом после ее загрузки пользователи захотят вводить эту информацию.
К сожалению, делать это они не смогут до тех пор, пока не щелкнут мышью по первому полю или выделят его с помощью клавиши <Tab>, установив, таким образом, фокус на этом поле.
Пользователю можно помочь в этом, установив фокус на нужном начальном поле автоматически. Это можно сделать с помощью JavaScript, вызывая метод focus() требуемого элемента <input>. Но этот подход требует лишней строки кода и иногда может вызывать раздражающие неувязки.
Например, особо проворные пользователи могут опередить вызов метода focus(), щелкнуть в каком-либо другом поле и начать вводить в нем, а когда метод, наконец, вызовется, пользователь грубо выдвинется из выбранного им поля и переместится в поле, выбранное методом. Но если управлять фокусом может браузер, он может быть несколько более смышленым и перемещать фокус только в том случае, если пользователь еще не выбрал другое поле.
На этой идее основан новый HTML5-атрибут autofocus, который можно вставить в элемент <input> или <textarea> (но только в один элемент формы), как показано в следующем примере:
<input placeholder="Иван Иванов" autofocus>
Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за исключением Internet Explorer.
Но опять же, эта проблема легко решается. Проверить поддержку атрибута autofocus конкретным браузером можно с помощью инструмента Modernizr (который мы обсуждали в статье «Поддержка браузерами HTML5») и, если необходимо, запускать собственный код для автоматического фокуса.
Введение в HTML5 | Учебник HTML5
Введение в HTML5.
HTML5 — это не новая версия старого языка разметки и даже не усовершенствованный вариант этой уже перешедшей в разряд «древних» технологии. Нет, это совершенно новая концепция построения веб-сайтов и приложений в эру мобильных устройств, облачных вычислений и сетевой передачи данных.
Все началось очень давно с простейшей версии HTML, предназначенной для создания базовой структуры страниц, организации их содержимого и распространения информации. Основной целью создания этого языка, как и самой Сети, была передача текстовой информации.
Ограниченный потенциал HTML подтолкнул компании к разработке новых языков и программного обеспечения, благодаря которым вебстраницы обрели невиданные доселе характеристики.
Первые наработки превратились в мощные и популярные плагины. Из простых игр и смешных анимированных картинок выросли замысловатые приложения, новые возможности которых навсегда изменили саму концепцию Сети.
Изо всех новинок наиболее успешными оказались Java и Flash, которые получили самое широкое распространение. Считалось, что будущее Интернета за ними. Однако по мере того как число пользователей увеличивалось, а Интернет из простого механизма соединения компьютеров превращался в глобальное поле для ведения бизнеса и социального взаимодействия, недостатки этих двух технологий становились все более явными, и в итоге им был подписан смертный приговор.
Основной недостаток Java и Flash можно описать как отсутствие интеграции. Обе технологии с самого начала воспринимались как плагины — то, что вставляется в уже существующую структуру и делит с ней некоторое экранное пространство. Между приложениями и документами невозможно было установить эффективные коммуникационные и интеграционные каналы.
Отсутствие интеграции стало определяющим фактором и положило начало развитию языка, который умеет делить пространство документа с HTML и на который при этом не распространяются ограничения плагинов. JavaScript, встраиваемый в браузеры интерпретируемый язык, очевидно, двигался в правильном направлении к цели — расширению функциональности Сети и улучшению взаимодействия с пользователем. Однако даже через несколько лет рынок так и не смог полностью принять этот язык, а его популярность упала из-за неверного применения и неудачных попыток продвижения. У критиков JavaScript были все основания для того, чтобы ругать его. В те времена JavaScript не мог заменить собой функциональность Flash и Java. И даже когда стало очевидно, что Java и Flash ограничивают масштаб веб-приложений и изолируют содержимое от контекста, пользующиеся всеобщей любовью возможности, такие как потоковая передача видео, не потеряли ведущее роли в жизни Сети, а их эффективное предоставление было возможно только с помощью этих технологий.
Несмотря на определенный успех язык Java терял позиции. Сложная природа, медленное развитие и отсутствие интеграции снизили значимость этого языка до такой степени, что сегодня он почти не используется в распространенных веб-приложениях. Вычеркнув Java из активного арсенала, рынок взглянул в сторону Flash. Однако Flash обладает теми же базовыми характеристиками, что и его конкурент в сфере построения сетевых приложений, и, таким образом, подвержен тем же рискам и обречен на ту же судьбу.
Тем временем развитие программного обеспечения, предлагающего доступ к Сети, продолжалось. Одновременно с внедрением новых возможностей и более быстрых способов доступа к Интернету разработчики браузеров непрерывно совершенствовали механизмы JavaScript. Увеличение мощи дало жизнь новым возможностям, и этот скриптовый язык готов был воплотить их.
В какой-то момент этого эволюционного процесса части разработчиков стало очевидно, что ни Java, ни Flash не смогут в итоге предоставить инструменты, необходимые для создания приложений, отвечающих требованиям неуклонно увеличивающейся пользовательской аудитории.
Эти разработчики стали внедрять JavaScript в свои приложения новыми, невиданными доселе способами. Инновации и их поразительные результаты привлекли внимание еще большего числа программистов. Скоро на свет появилось то, что знакомо нам под именем Web 2.0, а взгляды на JavaScript в сообществе разработчиков кардинальным образом изменились.
JavaScript стал тем языком, благодаря которому разработчики смогли предложить огромное количество новшеств и реализовать то, чего раньше в Сети попросту не существовало. За прошедшие годы программисты и веб-дизайнеры всего мира придумали множество невероятных трюков, позволявших преодолеть ограничения данной технологии и первоначальную нехватку мобильности. HTML, CSS и язык JavaScript создали ту идеальную комбинацию, которой недоставало для очередного рывка в эволюции Сети.
Фактически, HTML5 представляет собой усовершенствованную версию этой комбинации — клей, надежно скрепляющий все фрагменты. HTML5 предлагает стандарты для каждого аспекта Сети и ясно описывает предназначение всех участвующих технологий.
Теперь HTML обеспечивает структурные элементы, CSS фокусируется на том, как превратить эту структуру в нечто визуально привлекательное и удобное в использовании, а JavaScript предлагает мощь, необходимую для обеспечения функциональности и построения полноценных веб-приложений.
Границы между веб-сайтами и приложениями наконец-то растворились. Необходимые технологии готовы к применению. Будущее Сети выглядит очень многообещающим, а совместная эволюция и описание этих трех технологий (HTML, CSS и JavaScript) в одной мощной спецификации превращает Интернет в лидирующую платформу для разработки. Без сомнения, HTML5 идет во главе современных сетевых технологий.
Сейчас не все браузеры поддерживают функциональность HTML5, и большинство из возможностей, описанных в спецификациях HTML5, пока находятся на стадии разработки. Мы рекомендуем по мере знакомства с главами этой книги исполнять предложенные примеры кода в новейших версиях Google Chrome и Firefox. Google Chrome основывается на WebKit — браузерном механизме с открытым кодом, который поддерживает почти все возможности, уже реализованные в HTML5.
Это отличная платформа для тестирования. Firefox — один из лучших браузеров для разработчиков, а его механизм Gecko также превосходно поддерживает функциональность HTML5.
Вне зависимости от того, какой браузер вы используете, всегда помните о том, что хороший разработчик устанавливает и тестирует свой код во всех программах, предлагаемых на рынке. Тестируйте примеры кода из этой книги во всех доступных вам браузерах.
Загрузить новейшие версии браузеров вы сможете, посетив следующие веб-сайты:
http://www.google.com/chrome;
http://www.apple.com/safari/download;
http://www.mozilla.com;
http://windows.microsoft.com;
http://www.opera.com.
В конце мы рассмотрим альтернативные технологии, помогающие создавать веб-сайты и приложения, которые будут доступны и в старых версиях браузеров, и в браузерах, несовместимых с HTML5.
HTML-стили CSS
❮ Назад Далее ❯
CSS означает каскадные таблицы стилей.
CSS экономит много работы.
Он может управлять расположением нескольких
веб-страницы все сразу.
Управление текстом
Цвета, Коробки
Что такое CSS?
Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.
С помощью CSS вы можете управлять цветом, шрифтом, размером текста, интервалами между элементами, как элементы расположены и расположены, какой фон должны использоваться изображения или цвета фона, разные дисплеи для разных устройств размеры экрана и многое другое!
Совет: Слово cascading означает, что стиль примененный к родительскому элементу, также будет применяться ко всем дочерним элементам внутри родитель. Итак, если вы установите цвет основного текста на «синий», все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то другое)!
Использование CSS
CSS можно добавить в документы HTML тремя способами:
- Встроенный — с помощью
атрибут стилявнутри элементов HTML - Внутренний — с помощью элемента
< /head>Это заголовок
Это абзац.