Form html android что это

Тег form в html

Тег form в html — описание

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

Из всех атрибутов элемента два являются особенно важными, они используются во всех формах: action и method . Атрибут action указывает на расположение скрипта, который обрабатывает информацию, передаваемую браузером при отправке данных формы. Скрипт может быть написан на любом языке, исполняемом на стороне сервера.

Атрибут method указывает метод отправки данных формы. Рекомендуется использовать метод POST , потому что он скрывает отправляемую информацию и позволяет передавать двоичные данные. Тем не менее, в некоторых частных случаях необходимо использовать метод GET .

Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:

• button: кнопка, при нажатии которой могут выполняться различные действия в зависимости от значения атрибута type . А именно:

• submit: отправляет данные формы на сервер;
• reset: сбрасывает значения всех элементов управления к состоянию по умолчанию;
• button: не выполняет никаких действий;
• menu: выводит меню.

• fieldset: группирует наборы элементов управления по определенному критерию;
• input: в зависимости от значения атрибута type данный элемент управления может использоваться для различных целей:

• hidden: скрытый элемент управления, используемый для передачи информации на сервер, как правило, управляется скриптом;
• text: элемент управления, используемый для ввода фрагмента текста одной строкой;
• search: используется для ввода поисковой строки;
• tel: элемент управления тега form , используемый для предоставления номера телефона;
• url: текстовое поле, используемое для ввода одного абсолютного URL-адреса ;
• email: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты;
• password: текстовое поле для ввода паролей, в котором символы скрыты точками;
• datetime: элемент управления для ввода даты и времени;
• date: элемент управления для ввода определенной даты;
• month: элемент управления для ввода определенного месяца;
• week: элемент управления для ввода определенной недели;
• time: элемент управления для ввода о времени;
• number: элемент управления для ввода определенного числа;
• range: для ввода одного или двух чисел в указанном диапазоне;
• color: для ввода цвета;
• checkbox: для ввода логического значения ( истина / ложь );
• radio: элемент управления, используемый для выбора одного из нескольких вариантов;
• file: элемент управления, используемый для загрузки файлов на сервер;
• submit: кнопка для отправки данных HTML тега form ;
• image: то же самое, что submit , но с возможностью вывести вместо кнопки по умолчанию пользовательское изображение;
• reset: кнопка, используемая для сброса значений элементов управления формы;
• button: кнопка без назначенного действия по умолчанию.

• keygen: элемент управления, используемый для генерации открытой / секретной пары ключа;
• label: используется для вывода подписей для элементов управления формы;
• object: объект представления и отображения вложенного контента;
• output: элемент управления, используемый для просмотра результатов вычислений, выполняемых на странице, или результатов взаимодействия пользователя с различными элементами управления формы;
• select: элемент управления для выбора одного или нескольких вариантов из списка;
• textarea: элемент управления, используемый для ввода фрагмента текста, состоящего из одной или более строк;
• img: используется для вывода изображения.

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

Примеры

В следующих примерах мы рассмотрим некоторые из атрибутов тега form с несколькими элементами управления.

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

Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.

Во втором примере мы добавим в тег form новые элементы управления ( пару переключателей и три чекбокса ). Мы также добавим кнопку reset , чтобы вы могли поэкспериментировать с элементами управления, изменяя их значения и снова сбрасывая с помощью кнопки.

Также мы будем использовать элемент label . С его помощью мы можем связать текст с элементом управления. Самый простой способ сделать это — заключить и текст, и элемент управления в открывающийся и закрывающийся тег.

В следующем примере мы немного изменим предыдущий HTML тег form форму, чтобы добавить некоторые из новых элементов управления HTML5 : выбора даты, поле ввода номера телефона и выбор цвета. Кроме этого мы сгруппируем элементы управления с помощью fieldset .

Обратите внимание, что мы используем для атрибута method значение « GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.

Что-то наподобие этого: «?fullname=john&birthdate=15/10/2002&…» .

И, наконец, мы создадим тег form с возможностью загрузки файла. В этом примере нам нужно обратить внимание на пару атрибутов: method , который может принимать только значение « POST «, так как это единственный метод, который может передавать двоичные данные. И enctype , который должен иметь значение « multipart/form-data «. Если данная настройка не соблюдается, загрузка файлов будет невозможна.

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

Атрибуты

Специальные атрибуты тега form :

ACCEPT-CHARSET

Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.

AUTOCOMPLETE

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

• on: браузер должен автоматически предлагать варианты. Это значение по умолчанию;
• off: браузер не должен автоматически предлагать варианты.

ENCTYPE

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

• application/x-www-form-urlencoded: пробелы заменяются знаком плюс ( «+» ), а специальные символы преобразуются в значения HEX . Это значение по умолчанию;
• multipart/form-data: кодирование не производится. Указывается при загрузке файлов;
• text/plain: только пробелы заменяются знаком плюс ( «+» ).

METHOD

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

• get: данные прикрепляются к URL-адресу ( указанному в атрибуте action ). Пары имя-значение добавляются в виде « name=value » и отделяются одна от другой знаком амперсанда ( «&» ). Вся строка добавляется к URL-адресу после знака вопроса ( «?» ). Например, строка GET может выглядеть следующим образом: «form-result.php?user=john&pass=123456» ;
• post: данные прикрепляются к телу запроса;
• dialog: специальное значение для HTML тег form внутри элемента dialog . Указывает браузеру закрыть диалоговое окно после отправки формы. Результаты должны обрабатываться с помощью скриптов.

Имя формы. Это значение не может быть пустой строкой и должно отличаться от имен других форм.

ACCEPT

Указывается разделенный запятыми список разрешенных типов контента. Это может быть полезно при загрузке файлов для фильтрации на стороне клиента типов файлов.

Источник

Ваша первая HTML форма

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

Необходимые знания:	Базовое представление о компьютерах и базовое понимание HTML.
Цель:	Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.

Что такое Веб-форма?

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

Веб-формы — их также часто называют HTML-формы — состоят из одного или нескольких элементов управления форм (иногда их также называют виджетами) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радиокнопки, большинство из которых создаются через html-элемент , однако есть и другие элементы, о которых тоже стоит узнать.

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

Проектирование формы

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

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

• На Smashing Magazine есть хорошие статьи на тему UX в HTML-формах, включая старую, но всё ещё актуальную статью Extensive Guide To Web Form Usability.
• Также есть UXMatters — хороший ресурс с полезными советами от базовых лучших практик до сложных решений, таких как мультистраничные формы.

В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.

Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.

Активное обучение: Реализация HTML-формы

Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: :

HTML-элемент также принимает атрибут type , который может быть равен одному из трёх значений: submit , reset или button .

Клик по кнопке submit (значение по умолчанию) отправляет данные из формы на страницу, определённую в атрибуте action элемента

Источник

Основы Android: создание простых пользовательских форм

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

• Элемент управления EditText
• Управление Spinner
• Элемент управления Checkbox
• Кнопка управления

Кстати, если вы ищете быстрое решение, проверьте Android Dynamic Form , плагин генератора динамических форм, доступный на Envato Market.

Для этого руководства вы разрабатываете и внедряете форму в своем приложении Android, которая позволяет пользователю предоставлять важные отзывы разработчику. Пользователю предоставляется несколько вариантов отправки различных видов отзывов. Затем этот отзыв может быть отправлен разработчику по электронной почте. Форма, которую вы создадите, в конечном итоге будет выглядеть так:

Предположения

Авторы предполагают, что читатель имеет некоторые базовые знания об Android и что все инструменты установлены и работают, в частности Eclipse, Android SDK и плагин Android ADT для Eclipse.

Шаг 0: Создание простого проекта Android

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

Шаг 1: Разработка формы

Во-первых, вам нужно подумать о том, какие данные вы хотите получить от пользователя. Форма может иметь любое количество полей. Рассмотрите типы данных, которые вы хотите собрать, и выберите соответствующий тип контроля. Например:

• Чтобы собрать ввод текста, используйте элементы управления EditText
• Чтобы ограничить пользователя фиксированным набором ответов, используйте элементы управления Spinner, аналогичные раскрывающемуся меню.
• Чтобы собрать логический (да / нет) ввод, используйте элементы управления CheckBox
• Чтобы позволить пользователю запускать события, используйте кнопки управления

Для этого урока вы будете разрабатывать форму обратной связи. Эта форма собирает пять частей данных от пользователя:

• Имя пользователя (строка)
• Электронная почта пользователя (строка)
• Тип обратной связи (варианты: Похвала, Захват, Предложение или Ошибка)
• Сообщение обратной связи (строка)
• Нужен ли пользователю ответ по электронной почте (логическое значение)

Шаг 2. Создание ресурса макета

Начните с создания ресурса макета для экрана формы. Форма будет содержать несколько полей, которые могут занимать более одного экрана (в зависимости от размера экрана устройства), поэтому следует рассмотреть возможность оборачивания всей формы в элемент управления ScrollView, чтобы включить полосы прокрутки.

Элемент управления ScrollView должен иметь ровно одно дочернее представление, поэтому подумайте, какой элемент управления макета наиболее подходит для формы, которую вы хотите создать. Формы часто содержатся в вертикально ориентированном элементе управления LinearLayout, поэтому поля форм располагаются по вертикали вниз по странице, один за другим. Это также помогает пользователю сфокусироваться с поля на поле, естественно.

Простой ресурс макета формы может выглядеть так:

Источник