Что такое input. Группировка элементов формы. Создание полей формы
Чаще всего в формах используется тег . Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге и задается с помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута type .
Атрибуты тега
type Основной атрибут, задающий тип элемента. Если атрибут не указан, то по умолчанию используется значение text .Возможные значения:
Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип .
Как организовать поддержку старых браузеров описано на примере даты .
Autocomplete="off"
Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п.
.setAttribute("autocomplete","off");
autofocus
Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
...
...
...
Пример эмуляции свойства автофокус для старых браузеров .
disabled
Делает элемент недоступным. Недоступные элементы не передаются на сервер.
name
Имя поля. Каждое создаваемое поле ввода должно
иметь собственное уникальное имя, иначе сценарий
не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно
соответствовать имени, которое описано для него в программе обработки.
value
Значение поля по умолчанию или надпись на кнопке.
size
Размер поля типа .
maxlength
Ограничение на количество символов, которые можно ввести в поле типа .
readonly="readonly" или ""
Запрещает изменение элемента.
required
Автоматически проверяет заполнено ли поле.
Для подсветки правильно заполненного обязательно поля можно использовать следуюшую конструкцию style:
min
Минимальное значение числа в поле типа number
.
max
Максимальное значение числа в поле типа number
.
step
Шаг изменения числа в поле типа number
.
pattern
Шаблон поля ввода. Проверка корректности ввода данных. Примеры шаблонов для html5 form input pattern .
placeholder
Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса.
Пример настройки стиля подсказки:
В IE и Firefox (до 18 версии) placeholder считается псевдоклассом, а в остальных – псевдоэлементом.
РЕЗУЛЬТАТ:
List
Список вариантов, которые можно выбирать при наборе в текстовом поле.
Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
Типы элемента INPUT
Кнопка BUTTON
Кнопка BUTTON предназначена для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция. Атрибут value задает надпись на кнопке. Атрибут onclick задает JavaScript-обработчик, который вызывается при щелчке на кнопке. Атрибут name служит для JavaScript-именования кнопки (на сервер не передается).
Пример
РЕЗУЛЬТАТ:
Кнопка SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки . Сама она не передается, а служит только для управления.
Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit , заданный в теге
РЕЗУЛЬТАТ:
Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
РЕЗУЛЬТАТ:
Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.
Пример
РЕЗУЛЬТАТ:
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.
Совет: осторожно относитесь к выбору надписи на кнопке RESET . Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.
Пример
РЕЗУЛЬТАТ:
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и
главнейшим элементом форм. Этот тип используется тегом
по умолчанию, его можно не указывать,
чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input
,
то тогда атрибут type="text"
пропускать нельзя.
Имя поля, задаваемое атрибутом name
, всегда обязательно, так как
базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
РЕЗУЛЬТАТ:
Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку , то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.
Поле ввода чисел NUMBER
Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.
Пример
РЕЗУЛЬТАТ:
Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как положительным, так и отрицательным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
РЕЗУЛЬТАТ:
Для задания любого шага используйте step="any" .
Пример
РЕЗУЛЬТАТ:
Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion , которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple , при этом для разделения адресов используется запятая (,)
Пример
Всем привет, сегодня ты получишь ответы и такие вопросы как:
Что такое тег input?
Какие атрибуты может принимать тег input?
Какие бывают теги input?
И далее, далее, далее...
input
Что такое input?
Если переводить дословно или просто вспомнить как переводиться, то что-то вроде ввод
. Да, примерно такое у тега input назначение, с помощью него мы можем вводить или передавать данные, но тег input может принимать разные виды благодаря атрибуту type.
Атрибут type
Атрибут type(или тип ) позволяет нам выбрать тип "инпута". По умолчанию стоит текстовый тип. Выглядит он как текстовое поле, это такое поле, куда обычно вы вводите свои данные, к примеру логин и пароль. Рассмотрим некоторые типы тега input.
- type="button"
- type="radio"
- type="checkbox"
- type="file"
- type="hidden"
- type="submit"
- type="reset"
- type="password"
Не много о типах radio и checkbox . Если из списка чекбоксов вы можете выбрать несколько пунктов, то радио-кнопка позволяет выбрать только один пункт. Каждый из этих input полезен по своему.
html 5 input
С приходом html 5, у тега input появились новые типы, смотрим:
- type="date"
- type="number"
- type="range"
- type="email"
- type="color"
Подробнее про тип range обязательно посмотрите в видео ниже =)
Пошли дальше
Атрибут name
Атрибут name задает имя инпуту, с помощью имя, к примеру, мы можем обозначить индивидуально поля и принимать данные по POST-запросам, в которые пропишем это имя, на php.
Contents
Что такое input ? edit
‘Input ’ («вводимая информация», прим. пер. ) это короткое слово, которым мы договорились обозначать «предложения, которые вы читаете и слушаете ». Input это противоположность слову ‘Output ’, которое в наших статьях значит «предложения, которые вы говорите или пишете».
Модель обучения языку edit
Вы никогда не задумывались почему можно говорить на родном языке так легко? Вы хотите сказать что-то (выразить какие-то идеи) - и правильные фразы и предложения просто приходят к вам в голову. Большая часть процесса неосознанная: что-то просто появляется в вашей голове. Вы можете сказать это или нет, но вы не знаете, откуда это пришло. Вот модель, которая объясняет, как это возможно:
- Вы получили input - вы читали и слушали предложения на каком-то языке. Если вы поняли эти предложения, они хранятся в вашем мозге. А точнее, они хранятся в разделе мозга, ответственном за язык.
- Вы хотите сказать или написать что-то на этом языке (вы хотите создать output), ваш мозг при этом ищет предложение, которое вы слышали или читали ранее, - предложение, которое совпадает по смыслу с тем, что вы хотите произвести. Так, мозг имитирует предложение (создавая такое же, или похожее) и вы говорите ваше собственное предложение в языке. Этот процесс подсознательный: мозг делает его автоматически.
Комментарий к модели edit
Конечно, эта модель очень упрощенная. Мозг ищет не целые предложения, а скорее части предложений (законченные по смыслу выражения). Он может построить очень сложные и длинные предложения из этих частей. Так что мозг не просто «имитирует» одно предложение за раз. Он использует много предложений одновременно, чтобы построить что-то оригинальное. Например мозг знает, что можно взять известное предложение и заменить в нем субъект. Например, если вы слышали «кошка под столом», можно легко сказать «собака под столом» или «книга под креслом».
input необходим для мозга. Чем больше правильных и понятных предложений знает мозг, тем лучше он способен выражать мысли.
Эта модель описывает ребенка постигающего его родной язык. Ребенок слушает его родителей и других людей. Его мозг понимает и запоминает слышимое и все лучше и лучше способен думать самостоятельно. Уже к 5 годам ребенок говорит довольно хорошо.
Но эта же модель может работь и при изучении иностранного языка. По сути мы считаем, что это едиственный способ овладеть языком в совершенстве.
Что эта модель значит для изучающих иностранный язык? Самое важное:
- мозг мыслит, основываясь на уже известном (input). Поэтому нужно кормить мозг правильными и понятными выражениями . До того, как вы начнете говорить, мозг должен запомнить достаточно правильных выражений на этом языке.
- речь и письмо (output) не столь важны . Они не улучшат языковые навыки. Вы легко можете навредить своему английскому, пытаясь что-то сказать или написать слишком рано или невнимательно.
- вам не нужны грамматические правила . Вы научились говорить на родном языке, не задумываясь о том, что такое падеж или местоимение. Вы можете изучить иностранный язык точно так же.
Как input может изменить ваш английский. edit
Если вы запомните все новые фразы из нескольких книг на английском, вы заметите, что он стал намного лучше. Вы будете удивлены, но подобные фразы будут просто приходить к вам в голову, когда вы говорите или пишете! И вы будете говорить практически без ошибок. Во время следующего теста по английкому вы безусловно заметите разницу. Например при необходимость выбрать ответ вы будете «чувстовать» правильный ответ. Вы можете не знать, «почему» он правильный (вы не знаете, какое это правило грамматики), но вы будете знать, что он правильный. Вы будете это знать, потому что вы знаете похожие предложения, и они правильные.
Это касается любой темы в языке. Выкиньте учебник английского! Вы будете понимать, что “I have seen Paul yesterday” неправильно, а “I saw Paul yesterday” правильно. Первое предложение будет просто звучать неправильно. Почему? Вы читали предложения, похожие на второе 200 раз, и похожие на первое 0 раз.
Я никогда не забуду, когда я открыл учебник “Practical English Usage”. Я уже заканчивал среднюю школу, и мой английский уже был на высоте. Учебник был полон вопросов и грамматических правил. Для каждого вопроса были несколько примеров, правильных и неправильных. Когда я смотрел на неправильный пример, я удивлялся «конечно он неправильный, звучит просто ужасно». Когдя я читал правило для него, я думал «я не знал, что для этого есть правило». У меня сложилось вмечатления, что я не знал ни одного правила из книги… Я в них не нуждался. (И даже если бы я захотел, я бы не смог запомнить все правила). Я мог просто посмотреть на предложение и сказать, выглядит ли оно правильно или нет . Я стал как носитель языка. За счет чтения книг, просмотра сериалов, прослушивания музыки и т.д. я получил много input’a. Существует много примеров, когда люди приблизились к совершенству от этого - например Майкл, я, и другие авторы секции
Тег (от англ. input - вход) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.
Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Основной атрибут , определяющий вид элемента - type . Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.
Синтаксис
Закрывающий тег не требуется.
WAI ARIA
Нет значения role по-умолчанию.
Допустимые значения role:
- button
- checkbox
- combobox
- link
- menuitem
- menuitemcheckbox
- menuitemradio
- option
- radio
- searchbox
- slider
- spinbutton
- switch
- textbox
Атрибуты
- accept - Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
- alt - Альтернативный текст для кнопки с изображением.
- autocomplete - Включает или отключает автозаполнение.
- autofocus - Устанавливает фокус в поле формы.
- checked - Предварительно активированный переключатель или флажок.
- dirname - Параметр, который передаёт на сервер направление текста.
- disabled - Блокирует доступ и изменение элемента.
- form - Связывает поле с формой по её идентификатору.
- formaction - Определяет адрес обработчика формы.
- formenctype - Устанавливает способ кодирования данных формы при их отправке на сервер.
- formmethod - Сообщает браузеру каким методом следует передавать данные формы на сервер.
- formnovalidate - Отменяет встроенную проверку данных на корректность.
- formtarget - Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
- list - Указывает на список вариантов, которые можно выбирать при вводе текста.
- max - Верхнее значение для ввода числа или даты.
- maxlength - Максимальное количество символов разрешённых в тексте.
- min - Нижнее значение для ввода числа или даты.
- minlength - Минимальное количество символов разрешённых в тексте.
- multiple - Позволяет загрузить несколько файлов одновременно.
- name - Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
- pattern - Устанавливает шаблон ввода.
- placeholder - Выводит подсказывающий текст.
- readonly - Устанавливает, что поле не может изменяться пользователем.
- required - Обязательное для заполнения поле.
- size - Ширина текстового поля.
- src - Адрес графического файла для поля с изображением.
- step - Шаг приращения для числовых полей.
- type - Сообщает браузеру, к какому типу относится элемент формы.
- value - Значение элемента.
accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.
Применяется к полю для отправки файла ().
Поддержка браузерами
Значение по умолчанию
alt
Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.
Синтаксис
Значения
Любая подходящая текстовая строка.
Значение по умолчанию
autocomplete
Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
Синтаксис
Значения
- on - Включает автозаполнение текста.
- off - Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).
Значение по умолчанию
Зависит от настроек браузера.
autofocus
Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут autofocus не установлен.
checked
Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton) может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
Значения
Значение по умолчанию
dirname
При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (иврита, к примеру) значение будет rtl .
Синтаксис
Значения
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют.dir .
Значение по умолчанию
disabled
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
form
Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами
Значения
Идентификатор формы (значение атрибута id элемента