html поле для вывода текста
Многострочный текст
Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
Между тегами можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| cols | Ширина поля в символах. |
| disabled | Блокирует доступ и изменение элемента. |
| maxlength | Максимальное число символов текста, которое можно ввести. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| readonly | Устанавливает, что поле не может изменяться пользователем. |
| rows | Высота поля в строках текста. |
| wrap | Параметры переноса строк. |
Создание поля многострочного текста показано в примере 6.1.
Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).
Пример 1. Текстовое поле
HTML5 IE Cr Op Sa Fx
Результат примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Дополнительно поле может находиться в двух состояниях — блокированном и только для чтения. Спецификация HTML5 не определяет вид поля и текста в подобных состояниях, поэтому браузеры по-разному его отображают (рис. 2).
 |  |
| Internet Explorer | Opera |
 |  |
| Chrome | Firefox |
Текст внутри блокированного поля нельзя выделить и добавить, также содержимое такого поля не отправляется формой на сервер. Текст внутри поля для чтения доступен для копирования, но его нельзя отредактировать. В примере 2 показан способ создания поля для чтения.
Пример 2. Поле для чтения
HTML5 IE Cr Op Sa Fx
Учтите, что поле для чтения по своему виду не отличается от обычного текстового поля, но пользователь не сможет в него ничего добавить. Так что используйте его осмотрительно, чтобы не вводить людей в заблуждение.
Формы в HTML5: Разметка
Содержание цикла статей «Формы в HTML 5»:
Я рекомендую вам эту статью к прочтению, даже если вы уже знакомы с формами — вы найдете здесь множество новых атрибутов и выявите много подводных камней!
Да, HTML довольно приземленная вещь, но она необходима для большинства веб-сайтов и приложений. В HTML4 поля ввода ограничивались следующим списком:
Дополнительные поля ввода в HTML5
| Тип | Описание |
| Для ввода email адреса | |
| Tel | Для ввода номера телефона — никакого строгого синтаксиса не применяется, но удаляются разрывы строк |
| url | Для ввода URL-адреса |
| Search | Для ввода поискового запроса, автоматически удаляются разрывы строк |
| Number | Для ввода числа размерности floating point |
| Range | Элемент управления для ввода приближенного значения. Как правило, представлен в виде слайдера |
| Date | Для ввода даты (день, месяц, год) |
| Datetime | Для ввода даты (день, месяц, год, час, минута, секунда и микросекунды, основанные на данных UTC) |
| datetime-local | Для ввода даты и времени без временной зоны |
| Month | Для ввода месяца и года без временной зоны |
| Week | Для ввода номера недели без временной зоны |
| Time | Для ввода времени без временной зоны |
| Color | Для выбора цвета |
Атрибуты ввода
Если не указано иное, поле ввода может иметь любой из следующих атрибутов. Атрибуты типа Boolean не требуют ввода значений, например, как здесь:
В следующем примере форма содержит поле обязательного ввода адреса, который обязан заканчивается на « @mysite.com » и на этом же поле стоит фокус при загрузке страницы:
Списки данных
Но имейте в виду, что браузеры по-разному отрабатывают этот код. Например, Firefox предложит завершить фразу исходя из текста описания (Internet Explorer), тогда как Google Chrome предпочтет значение (IE), а сам текст покажет серым:
Отключение проверок
И помните о том, что установка атрибута disabled для поля ввода также отключит проверку ввода.
Поля вывода
Несмотря на то, что в первую очередь мы обсудили поля ввода, HTML5 также предоставляет доступные только для чтения поля вывода:
Разделение и маркировка полей ввода
Возьмем спецификации форм с whatwg.org :
Нет стандартных элементов управления
Мы не имеем в своем распоряжении конкретно определенных элементов управления.
Это сделано намеренно: типичный указатель мыши, используемый для выбора даты, может оказаться слишком маленьким на мобильном устройстве, потому разработчик должен реализовать альтернативу для подобных устройств самостоятельно.
Поддержка браузерами
Не все поля ввода и атрибуты полей поддерживается всеми браузерами. Более того, большинство современных браузеров от IE10 и выше поддерживают только основные поля, такие как электронная почта и номер телефона.
Всегда используйте верный тип полей!
Важно всегда использовать правильный тип полей ввода для данных, соответствующий тем данным, которые вы запрашиваете. Это может показаться не очевидным, но вы столкнетесь с ситуациями, когда вам захочется использовать стандартный ввод текста.
Вы вряд ли сможете создать собственный датапикер, который будет работать абсолютно на всех устройствах, на всех разрешениях экрана, будет поддерживать клавиатуру, мышь и сенсорный ввод и продолжать работать, когда JavaScript отключен.
К примеру, мобильные браузеры часто опережают своих настольных братьев и предоставляют отличные варианты управления с сенсорного экрана.
Проверку на стороне сервера
Браузерная валидация не гарантирует стопроцентной уверенности в корректности введенных данных. Даже если пользователь пользуется Google Chrome последней версии, вы не убережетесь от:
Проверка на стороне клиента не была и никогда не станет заменой проверки на стороне сервера. Проверка пользовательских данных на сервере имеет очень большое значение. На стороне клиенте проверку было бы неплохо иметь.
Проверяйте наличие первых четырех цифр в полученной последовательности знаков или используйте встроенную поддержку парсинга полей типа « Дата ».
Формы HTML5: разметка
HTML формы могут казаться простыми, но они необходимы для большинства веб-сайтов и приложений. В HTML4 типы полей ввода были ограничены следующим списком:
Дополнительные типы полей
В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода
Атрибуты полей ввода
Кроме перечисленных выше, поля ввода могут иметь любой из специфичных для формы атрибутов. Некоторые из них булевого типа, что означает, что они не требуют значений, например:
конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например
указывает способ ввода. Наиболее полезные возможности:
Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max.
Следующий пример показывает поле, требующее обязательного ввода email, заканчивающегося на @mysite.com, на которое смещается фокус при загрузке страницы.
Списки данных
Список данных содержит набор подходящих значений для любого типа поля, например:
Списки данных можно заполнять с помощью JavaScript, если вы хотите получать их по AJAX.
Отключение валидации
Отключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы.
Запомните, что выставление полю атрибута disabled отключит валидацию этого поля.
Поля вывода
Ранее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации
Разделение и подпись полей
Согласно спецификации, каждый элемент формы считается параграфом, и отделяется от остальных частей элементом
Итересно. Я в целях разделения использую div, хотя сомневаюсь, что это имеет большое значение. Тег p короче, разве что вам нужно будет применять дополнительный стиль, чтобы убрать поля.
Элементы управления не стандартизированы
Не существует предписаний по оформлению элементов форм, которым должны следовать производители браузеров. Это сделано намерено: стандартный элемент формы для выбора дат, ориентированный на мышь, может быть слишком мал для пользователя мобильного устройства, так что производитель может сам позаботиться о создании альтернативной версии элемента формы для сенсорных интерфейсов.
Поддержка браузерами
Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.
Для не поддерживаемых типов полей браузер откатится до стандартного поля ввода типа text, а не поддерживаемые атрибуты и их значения проигнорирует.
Всегда используйте правильный тип!
Важно использовать правильный тип поля для ожидаемого типа вводимых данных. Может, это и очевидно, но будут ситуации, когда вам нужно будет воспользоваться простым текстовым полем.
Рассмотрим даты. Поддержка в браузерах неоднородна, и это приводит к проблемам при внедрении.
За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется.
Валидация на серверной стороне
Валидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome, то и тогда вы не сможете избежать:
И, наконец, помните, что даты могут быть получены в различных форматах, будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости.
В этой статье я рассказал о многих аспектах разметки HTML5 форм. В следующей статье мы рассмотрим CSS-свойства, относящиеся к формам.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/html5-forms-markup/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 41653
Правила перепечатки
5 последних уроков рубрики «HTML5»
Расширяем возможности HTML за счёт создания собственных тегов
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
Определение доступности атрибута HTML5 с помощью JavaScript
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
HTML5: API работы с вибрацией
Создание форм с помощью Webix Framework — 4 практических примера
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
Тег form в html
Тег form в html — описание
Тег form добавляет контейнер для размещения элементов управления, с которыми пользователи могут взаимодействовать, чтобы отправить информацию на сервер. Форма используется для сбора информации о посетителях сайта, комментариев, мнений и многого другого. А также для авторизации на некоторых сайтах.
Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:
Формы являются мощным инструментом, который не только помогает собирать ценную информацию о пользователях, но и позволяет разработчикам создавать сложные приложения.
Примеры
В следующих примерах мы рассмотрим некоторые из атрибутов тега form с несколькими элементами управления.
В нашем первом примере создается простая форма авторизации с тремя элементами: текстовое поле, поле для ввода пароля и кнопка отправки данных. Тег form action и method указывают местоположение скрипта, отвечающего за обработку данных формы, и метод, используемый для их отправки.
Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.
Обратите внимание, что мы используем для атрибута method значение « GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.
Кроме этого, наша форма должна содержать поле для выбора загружаемого файла через проводник.
Атрибуты
Специальные атрибуты тега form :
ACCEPT-CHARSET
Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.
AUTOCOMPLETE
Одно из двух значений этого атрибута тега form указывают браузеру, должен ли он отображать варианты для поля ввода элемента управления. Браузеры обычно выполняют это действие, извлекая данные из базы, содержащей введенные ранее. Возможно два значения, оба не зависят от регистра:
ENCTYPE
Значение, указывающее метод, который будет использоваться для кодирования данных при отправке формы. Возможны три значения, которые не зависят от регистра:
METHOD
Метод, который должны использовать браузеры для отправки данных формы. Возможны три значения, без учета регистра:
Имя формы. Это значение не может быть пустой строкой и должно отличаться от имен других форм.
ACCEPT
Указывается разделенный запятыми список разрешенных типов контента. Это может быть полезно при загрузке файлов для фильтрации на стороне клиента типов файлов.
Ваша первая HTML форма
Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.
| Необходимые знания: | Базовое представление о компьютерах и базовое понимание HTML. |
|---|---|
| Цель: | Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях. |
Что такое Веб-форма?
Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).
В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (валидация форм), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.
Проектирование формы
Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.
Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:
В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.
Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.
Активное обучение: Реализация HTML-формы
Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: :