Аштимель: Что такое HTML и зачем он нужен каждому веб-разработчику / Skillbox Media

HTML5 | Формы

184

Веб-программирование — HTML5 — Формы

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

HTML-формы существовали с самых ранних времен языка HTML, и с тех пор они нисколько не изменились, несмотря на определенные серьезные усилия. Разработчики веб-стандартов несколько лет колдовали над стандартом XForms, который должен был заменить HTML-формы, но его постиг такой же провал, как и стандарт XHTML 2.

Хотя стандарт XForms позволял легко и элегантно решать некоторые задачи, он также имел и значительные недостатки. Например, код XForms был очень объемистый, и для работы с ним нужно хорошее знание стандарта XML. Но самое большое препятствие состояло в том, что стандарт XForms не был совместим с HTML-формами ни в каких отношениях. Это означало, что разработчикам нужно было бы бросаться в неизведанные воды новой модели без вспомогательных плавсредств, а лишь со слепой верой и огромным мужеством.

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

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

HTML5-формы также позволяют применять новые возможности, которые уже используются разработчиками в настоящее время. Эти возможности более доступны, не требуют написания страниц сценариев JavaScript или применения инструментариев JavaScript сторонних разработчиков.

Что такое форма?

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

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

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

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

Модернизация традиционной HTML-формы

Лучший способ обучения работе с формами HTML5 — это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент <form>.

Элемент <form> удерживает вместе все элементы управления формы, которые также называются полями. Кроме этого, он также указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предоставляя URL в атрибуте

action. Но если вся работа будет выполняться на стороне клиента сценариям JavaScript, то для атрибута action можно просто указать значение #.

Хорошо спроектированная форма разделяется на логические фрагменты с помощью элемента <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>, который собирает данные и создает флажки, переключатели и списки.

Для ввода одной строки текста применяется элемент <input>, а для нескольких — элемент <textarea>; элемент <select> создает выпадающий список. Краткое обозрение этих и других элементов управления форм приведено в таблице:

Элементы управления формы
Элемент управления 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») и, если необходимо, запускать собственный код для автоматического фокуса.

HTML тег

onplayСкрипт викликається коли медіа дані готові почати відтворення.
onafterprintСкрипт виконується тільки після як документ надрукований.
onbeforeprintСкрипт виконується перед тим, як документ надрукований.
onbeforeunloadСкрипт виконується коли документ ось-ось буде вивантажений
onhashchangeСкрипт виконується коли там відбулися зміни до частини якоря в URL
onloadВикликається після того як завантаження елемента завершене.
onmessageСкрипт виконується коли викликане повідомлення.
onofflineСпрацьовує коли браузер починає працювати в автономному режимі
ononlineСпрацьовує коли браузер починає працювати в режимі онлай.
onpagehideСкрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshowСкрипт виконується коли користувач заходить на сторінку.
onpopstateСкрипт виконується коли змінено історію одного вікна.
onresizeСкрипт виконується, коли розмір вікна браузера змінюється.
onstorageСкрипт виконується, коли вміст Web Storage оновлюється.
onunloadВикликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblurСкрипт виконується, коли елемент втрачає фокус.
onchangeВикликається в той момент, коли значення елемента змінюється.
oncontextmenuСкрипт виконується коли викликається контекстне меню.
onfocusВикликається в той момент, коли елемент отримує фокус.
oninputСкрипт викликається коли користувач вводить дані поле.
oninvalidСкрипт виконується, коли елемент недійсний.
onresetВикликається, коли натискається у формі кнопка типу Reset.
onsearchВикликається, коли користувач щось пише в поле пошуку (для &lt;input type=&quot;search&quot;&gt;)
onselectВикликаєтсья після того як будь-який текст був обраний в елементі.
onsubmitВикликається при відправленні форми.
onkeydownПодія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypressВикликається коли корисрувач натиснув на клавішу.
onkeyupВикликається коли користувач відпускає клавішу.
ondblclickВиникає при подвійному клацанні ЛКМ на елементі.
ondragПеріодично викликається при операції перетягування.
ondragendВикликається коли користувач відпускає перелягуваний елемент.
ondragenterВикликається, коли перетягуваний елемент входить в цільову зону.
ondragleaveВикликається, коли перетягуваний елемент виходть з зони призначення.
ondragoverВикликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstartВикликається, коли користувач починає перетягувати елемент, або виділений текст.
ondropВикликається, коли перетягуваний елемент падає до зони призначення.
onmousedownВикликається, коли користувач затискає ЛКМ на елементі.
onmousemoveВикликається, коли курсор миші переміщається над елементом.
onmouseoutВикликається, коли курсор виходить за межі елемента.
onmouseoverВиконується, коли курсор наводиться на елемент.
onmouseupВикликається, коли користувач відпускає кнопку миші.
onscrollВикликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheelВикликається, коли користувач прокручує коліщатко миші.
oncopyВикликається, коли користувач копіює вміст елемента.
oncutВикликається, коли користувач вирізає вміст елемента.
onpasteВикликається, коли користувач вставляє вміст в елемент.
onabortВиконується при перериванні якоїсь події.
oncanplayСкрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythroughСкрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechangeСкрипт виконується коли змінюється кий в &lt;track&gt; елемента
ondurationchangeВикликається коли змінюється довжина медіа файлу.
onemptiedВикликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onendedВикликається коли медіа елемент повністю відтворив свій зміст.
onshowВикликається, коли елемент &lt;menu&gt; буде відображено як контекстне меню.
onloadedmetadataСкрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddataВикликається коли медіа данні завантажено.
onloadstartВикликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpauseВикликається коли відтворення медіа даних призупинено.
onplayingВикликається коли розпочато відтворення медіа даних.
onprogressПодія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechangeВикликається коли змінюється швидкість відтворення медіа даних.
onseekedВикликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseekingВикликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalledСкрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspendСкрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
Оставить комментарий

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.