Html форма для вывода

Формы в HTML5: Разметка

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

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

Да, HTML довольно приземленная вещь, но она необходима для большинства веб-сайтов и приложений. В HTML4 поля ввода ограничивались следующим списком:

• input type=»text»;
• input type=»checkbox»;
• input type=»radio»;
• input type=»password»;
• input type=»hidden» — для скрытых от пользователя данных;
• input type=»file» — для загрузок на сервер;
• textarea — для ввода длинных текстовых строк;
• select — для ниспадающих списков;
• button — обычно используется для подтверждения ввода данных в форму. Также могут использоваться input type=»submit» и input type=»image».

• ограничены возможности CSS , которые могут быть применены к формам ввода;
• пользовательские элементы управления, такие как выбор цвета и даты необходимо разрабатывать в коде;
• проверка на стороне клиента требует использования JavaScript .

Дополнительные поля ввода в HTML5

Множество новых типов input были представлены в HTML5 . Они обеспечены собственной поддержкой и проверяют входные данные без написания кода на JavaScript :

Атрибуты ввода

Если не указано иное, поле ввода может иметь любой из следующих атрибутов. Атрибуты типа Boolean не требуют ввода значений, например, как здесь:

Прошу заметить, что поле date использует формат YYYY-MM-DD для атрибутов value , min и max .

В следующем примере форма содержит поле обязательного ввода адреса, который обязан заканчивается на « @mysite.com » и на этом же поле стоит фокус при загрузке страницы:

Списки данных

Списки данных ( datalist ) содержат набор возможных вариантов ввода для поля input , к примеру:

В случае если поддерживается datalist , браузер предоставляет пользователю варианты автоматического завершения ввода, когда тот начинает ввод.

Полный список доступных вариантов автозаполнения может также быть отображен (либо по двойному щелчку мыши, либо по нажатию кнопки вниз).

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

Можно установить как значение, так и текст описания предлагаемых значений:

Но имейте в виду, что браузеры по-разному отрабатывают этот код. Например, Firefox предложит завершить фразу исходя из текста описания (Internet Explorer), тогда как Google Chrome предпочтет значение (IE), а сам текст покажет серым:

Отключение проверок

Проверку формы целиком можно отключить, установив атрибут novalidate элементу form . Альтернативой этому будет установка атрибута formnovalidate кнопке/изображению подтверждения формы.

И помните о том, что установка атрибута disabled для поля ввода также отключит проверку ввода.

Поля вывода

Несмотря на то, что в первую очередь мы обсудили поля ввода, HTML5 также предоставляет доступные только для чтения поля вывода:

• output — поле для вывода результатов расчета или действий пользователя;
• progress — прогресс-бар (атрибуты value и max определяют его статус);
• meter — шкала, цвет которой может переключаться между зеленым, желтым и красным в зависимости от значений, установленных для атрибутов value, min, max, low, high и optimum.

Разделение и маркировка полей ввода

Возьмем спецификации форм с whatwg.org :

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

.

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

Здесь важно то, что вы должны использовать элемент label рядом с самим полем ввода и атрибутом for , объявляя ID поля ввода, например:

 
 
First name 
 
Last name 
 
Email address 
 
  Sign up for our newsletter 

Нет стандартных элементов управления

Мы не имеем в своем распоряжении конкретно определенных элементов управления.

Это сделано намеренно: типичный указатель мыши, используемый для выбора даты, может оказаться слишком маленьким на мобильном устройстве, потому разработчик должен реализовать альтернативу для подобных устройств самостоятельно.

Поддержка браузерами

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

А типы полей для ввода даты вообще поддерживаются только в Webkit и Blink (на момент написания статьи). Неподдерживаемые поля ввода и атрибуты браузер обработает как стандартное поле ввода типа text .

Всегда используйте верный тип полей!

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

Рассмотрим поля ввода типа date . Их поддержка неоднородна и это приводит к вопросам реализации:

1. Стандартное поле ввода date всегда возвращает значение в формате YYYY-MM-DD независимо от того, какой формат выбран на локальном устройстве;
2. IE и Firefox обратятся к стандартному полю ввода text , однако ваши посетители могут ожидать ввода в формате США MM-DD-YYYY или в Европейском формате DD-MM-YYYY;
3. Дата-пикер, написанный на JavaScript , например UI на JQuery , позволяет определить собственный формат — даже YYYY-MM-DD при необходимости, но вы не можете гарантировать, что JavaScript будет включен в браузере пользователя.

Напрашивается простое решение, которое заключается в отказе от поля ввода HTML5 типа date , возврату к типу поля text и реализации собственного процесса контроля ввода. Не стоит идти таким путем.

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

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

Поля ввода из HTML5 — это будущее. Используйте их, а при необходимости добавляйте JavaScript , когда вам требуется хорошая кросс-браузерная поддержка. Но не забудьте .

Проверку на стороне сервера

Браузерная валидация не гарантирует стопроцентной уверенности в корректности введенных данных. Даже если пользователь пользуется Google Chrome последней версии, вы не убережетесь от:

• ошибок браузера или JavaScript , позволяющих ввести неверные данные;
• пользователей, редактирующих HTML или скрипты, с помощью инструментов браузера;
• передачи данных от систем, находящихся вне вашего контроля;
• перехвата данных в промежутке браузер — сервер (по HTTP-протоколу).

Проверка на стороне клиента не была и никогда не станет заменой проверки на стороне сервера. Проверка пользовательских данных на сервере имеет очень большое значение. На стороне клиенте проверку было бы неплохо иметь.

И запомните, что типы данных « Дата » могут быть получены в формате YYYY-MM-DD или же любом другом, который вы определите для пользователя ( MM-DD-YYYY , DD-MM-YYYY , и т.п.).

Проверяйте наличие первых четырех цифр в полученной последовательности знаков или используйте встроенную поддержку парсинга полей типа « Дата ».

В этой статье мы рассмотрели довольно большой объем информации, касающейся полей ввода в HTML5 . В следующей части мы рассмотрим свойства полей, связанные с CSS .

Источник

Html форма для вывода

Элемент для вывода результатов вычислений или действий пользователя.

Время чтения: меньше 5 мин

Обновлено 24 августа 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Тег позволяет выводить результаты вычислений или действий пользователя. Относится к элементам семантической вёрстки.

Пример

Скопировать ссылку «Пример» Скопировано

   
Для скольких людей надо приготовить яичницу:  
Необходимое количество яиц:  form> p>Для скольких людей надо приготовить яичницу:p> input type="number" name="peoples" oninput="eggs.value = (parseInt(peoples.value) * 2)"> p>Необходимое количество яиц:p> output name="eggs">output> form>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Элемент используется в тех случаях, когда пользователю надо показать результат работы программы в реальном времени, например:

• информация, которую пользователь вводит или изменяет в форме;
• вывод расчётов по данным, которые указал пользователь (калькулятор, гороскоп и тому подобное).

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Тег парный. Допустимо вставлять пустой тег в разметку и класть выводимое значение внутрь него при помощи JavaScript.

Источник

: Элемент вывода

HTML-элемент вывода ( ) является контейнерным элементом, в котором сайт или приложение могут выводить результаты вычислений или действий пользователя.

form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> input type="range" name="b" value="50" /> + input type="number" name="a" value="10" /> = output name="result">60output> form>