Что означает input. Что такое HTML input type? Теги Form и Input для создания кнопок, чекбоксов и радиокнопок

Элемент (от англ. "input" ‒ «ввод») является основным элементом формы (HTML тег

) и определяет пользовательское поле для ввода информации.

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

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

Примечание: Тег не может содержать какой-либо контент, он может содержать только атрибуты.

Синтаксис

Закрывающий тег

Не требуется.

Атрибуты

type Основной атрибут, определяет тип элемента ввода. Если атрибут не указан, то по умолчанию используется значение "text" .
Возможные значения:
  • button – определяет активную кнопку с надписью.
  • checkbox – определяет элементы управления флажки.
  • color – генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
  • date – определяет поле для ввода календарной даты (год, месяц, день).
  • datetime – определяет поле для ввода даты и времени.
  • datetime-local – определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
  • email – определяет поле для адреса электронной почты.
  • file – определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
  • hidden – определяет скрытое поле ввода (не отображается на Web-странице).
  • image – определяет изображение, как кнопку для отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src , чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height , чтобы определить размер изображения в пикселях.
  • month – позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2017-07).
  • number – определяет поле для ввода чисел.
  • password – определяет поле для ввода пароля (замаскированные символы).
  • radio – создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными. Атрибут checked указывает, что вариант выбран по умолчанию.
  • range – создает ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
    • min = 1
    • max = 100
    • value = min + (max - min) / 2, или min , если max < min
    • step = 1
  • reset – создает кнопку сброса данных формы в первоначальное состояние.
  • search – определяет текстовое поле для ввода строки поиска.
  • submit – определяет кнопку "Отправить" для отправки данных формы на сервер.
  • tel – определяет поле для ввода телефонного номера.
  • text – определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
  • time – определяет поле для ввода времени в 24-часовом формате, например 17:30.
  • url – определяет поле для ввода URL-адреса.
  • week – позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2017-W15).

Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип text .

accept Устанавливает типы/форматы файлов, которые можно прикреплять к форме (отправлять на сервер). Атрибут используется только для . alignУстарел Определяет выравнивание ввода изображения (только для ). alt Альтернативный текст для кнопки с изображением. autocomplete HTML5 Включает или отключает автозаполнение. autofocus HTML5 Указывает, что элемент должен автоматически получать фокус при загрузке страницы. borderУстарел Толщина рамки вокруг изображения. checked Указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для type = "checkbox" > и ). dirname HTML5 Параметр, который передаёт на сервер направление текста. disabled Блокирует доступ и изменение элемента. form HTML5 Задает форму (элемент ) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы () в этом же документе. formaction HTML5 Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для type = "image" > и ). formenctype HTML5 Определяет, как данные формы должны быть закодированы при передаче на сервер (только для type = "image" > и ). formmethod HTML5 Определяет метод HTTP для отправки данных (только для type = "image" > и ). formnovalidate HTML5 Отменяет встроенную проверку данных на корректность (только для type = "submit" > ). formtarget HTML5 Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. По умолчанию установлено значение _self - отображает ответ в текущем окне. Атрибут используется только только для type = "image" > и type = "submit" > . list HTML5 Указывает на список вариантов, которые можно выбирать при вводе текста. Значение атрибута должно соответствовать идентификатору элемента . max HTML5 Верхнее значение для ввода числа или даты. maxlength HTML5 Указывает максимально допустимое количество символов в элементе. Только для элементов управления следующих типов: text , search , tel , url , email и password (остальные игнорируются). min Нижнее значение для ввода числа или даты. minlength HTML5 Минимальное количество символов разрешённых в тексте. Только для элементов управления следующих типов: text , search , tel , url , email и password . multiple HTML5 Указывает, что пользователь может ввести более одного значения в элементе (только для type = "file" > и type = "email" > ). name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. pattern HTML5 Устанавливает шаблон ввода с которым сверяется значение введённое в элементе. Синтаксис регулярного выражения соответствует языку JavaScript . Только для элементов управления следующих типов: text , search , tel , url , email и password (остальные игнорируются). placeholder HTML5 Выводит подсказывающий текст. Атрибут может быть использован с полями данных определенных типов (атрибут type ) со значениями email , password , search , tel , text и url ). readonly Указывает, что поле ввода доступно только для чтения. required HTML5 Обязательное для заполнения поле. size src Задаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для ). step HTML5 Шаг приращения для числовых полей. Только для элементов управления следующих типов: number , range , tel , date , date , time , datetime-local , month , time и week (остальные игнорируются). Значение по умолчанию 1. value Значение элемента. width HTML5

Элемент поддерживает

Приветствую вас, уважаемые читатели блога сайт. Сегодня я хочу поговорить о такой , как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.

Зачем нужны и как работают формы на современных сайтах

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

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

Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, трех ) и .

По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.

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

Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны.

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

Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action.

Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:

" name="title">

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

Теги Form и Input для создания кнопок, чекбоксов и радиокнопок

Любая форма должна быть заключена в открывающий и закрывающий тэги Form . Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:

  1. Name – уникальное имя, которое нужно указывать, если в Html файле, где вы что-то делаете, будет использоваться несколько вебформ
  2. Action – обязательный атрибут указывающий путь к скрипту, которому будут переданы данные из нее для дальнейшей обработки
  3. Method – с помощью него вы можете изменить метод передачи данных из этой вебформы скрипту файла обработчика. Если вы его не укажете, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений, и к тому же открытым способом передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST , предназначенный специально для передачи текстовых сообщений закрытым способом

Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input . Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.

C помощью Input и Type можно создавать следующие элементы:

  1. однострочные текстовые поля (Type="Text")
  2. поля для ввода пароля (Type="Password")
  3. чекбоксы (Type="Checkbox")
  4. радиокнопки (Type="Radio")
  5. скрытые поля (Type="Hidden")
  6. обычные кнопки (Type="Button")
  7. кнопки для отправки данных в обработчик (Type="Submit")
  8. кнопки для приведения вебформы к исходному состоянию (Type="Reset")
  9. поля для загрузки файлов на сервер (Type="File)
  10. кнопки с изображением (Type="Image")

Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.

Примеры форм, созданных на Input с различными значениями для Type

Другие атрибуты тэга Input и примеры их использования

Рассмотрим, для чего нужны остальные атрибуты:

  1. Name – в случае, если данные должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.
  2. Size — с помощью него задается размер поля создаваемой вебформы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если Size не указан, то ширина будет принята по умолчанию равной 24 символам
  3. Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью Maxlength можно задать это ограничение. Больше символов, чем в нем будет указано, вам ввести в поле не удастся
  4. Value — с помощью него можно задать, что именно будет написано по умолчанию в поле или же на кнопке отправки данных
  5. Checked — это атрибут-флаг, который можно вставить в Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данная радиокнопка или чекбокс будут активными при загрузке страницы с вебформой (в них уже будет стоять галочка)

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

Введите Ваш E-mail:

Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):

Вам нравится ресурс KtoNanNovenkogo.ru?

Да?
Нет?

Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).

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

Рассмотрим пример создание вебформы с чекбоксами (Checkbox):

Какой движок(и) сайта вы предпочитаете?

WordPress
Joomla
SMF

Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).

Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ

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

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

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

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

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

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

Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.

Открывающий тег Form в таком случае должен выглядеть примерно так:

Select и Option — тэги выпадающих списков

Все элементы вебформы, которые создают поля с выпадающими списками, формируются одинаковым образом. Сначала задается контейнер поля со списком с помощью открывающего и закрывающего Html тега Select. А затем внутри этого контейнера создаются отдельные контейнеры с пунктами (элементами) этого списка. Это делается с помощью открывающих и закрывающих тэгов Option.

Получается примерно так:

Но это упрощенная конструкция, т.к. у Select и Option имеется ряд атрибутов , которые определяют свойства и внешний вид создаваемого поля с выпадающим списком.

  1. Name — вы должны задать уникальное имя для данного элемента вебформы, создаваемого с помощью Select. Это имя будет передано на сервер в программу обработчик данных в качестве имени для переменной. В качестве значения этой переменной будет передано значение атрибута Value (задается в Option для каждого пункта) того пункта выпадающего списка, который выберет пользователь.
  2. Size — с помощью него можно задать количество отображаемых пунктов. Иначе говоря, с помощь Size можно задать высоту списка, измеряемую в количестве отображаемых строк. Если вы не указываете в явном виде значение Size в теге Select, то будет использоваться значение высоты выпадающего списка по умолчанию, при этом она будет разной в случае отсутствия или присутствия в Select атрибута Multiple:
    1. Если Multiple в Select присутствует, то высота выпадающего списка в вебформе будет по умолчанию равна количеству его элементов. Т.е. будут показаны все элементы выпадающего списка с множественным выбором. См. пример множественного ниже. Если атрибут Size в Select задать меньше количества пунктов, то справа появится полоса прокрутки.
    2. Если Multiple в Select отсутствует, то высота выпадающего списка в вебформе будет по умолчанию равна одной строке. Т.е. видна будет только одна строка, а остальные пункты будут доступны только при нажатии на кнопку лифта (справа). См. пример приведенный ниже
  3. Multiple — приписывание данного атрибута в теге Select позволит вам создать выпадающий список с возможность одновременного выбора нескольких пунктов. Подробнее об этом атрибуте читайте ниже.

Формы с выпадающими списками можно разделить на два варианта. В первом варианте вы сможете выбрать только один элемент (строку) поля с выпадающим списком, во втором варианте — удерживая Ctrl или Shift сможете выбрать одновременно несколько из имеющихся пунктов.

При этом во втором варианте будут отправлены на сервер данные о всех выбранных пунктах. Какой именно выпадающий список будет создан, определяется наличием или отсутствием в тэге Select атрибута Multiple.

Multiple указывается в Select без параметра, т.к. пишется просто Multiple и все. Если он присутствует, то будет создана вебформа выпадающего списка с возможностью множественного выбора (удерживая Ctrl или Shift).

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

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

Если в тэге Select атрибута Multiple не будет, то выбрать можно будет только один элемент этого выпадающего списка (строку).

Пример, в котором можно выбрать только один пункт, вы можете видеть здесь:

Label Select SelectED сайт Legend

Атрибуты тега Option


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

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

Например так:

Label Select
SelectED сайт Legend

Textarea — создание текстового поля в форме

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

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

Что вы можете сообщить о себе?

Вместе с Textarea можно использовать следующие атрибуты:

  1. Name — вы задаете имя для этого элемента вебформы. Оно будет передано на сервер в программу обработчика данных
  2. Cols — вы можете задать с помощью него ширину создаваемого многострочного поля в символах.
  3. Rows — задаем высоту создаваемого многострочного поля (в строках). Если строк у текста, вводимого пользователем, окажется больше, чем высота многострочного поля для текста, то справа от поля в вебформе появится полоса прокрутки.
  4. Readonly — запрет пользователям на изменение или добавление своего текста в это поле (только для чтения).
  5. Disabled — пользователь, так же как в случае с атрибутом Readonly, не сможет изменить содержимое текстового поля в вебформе, но оно изменит свой цвет на серый, обозначающий его неактивность.

Label — для чего нужен этот Html тэг в форме

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

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

Label
Select
SelectED

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

Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:



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

Fieldset и Legend — разбиваем форму на части

Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.

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

Вот пример создания групп с помощью Fieldset и Legend:



Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на
");">

Вам может быть интересно

Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Списки в Html коде - теги UL, OL, LI и DL
MailTo - что это и как в Html создать ссылку для отправки Емейла
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах

Всем привет, сегодня ты получишь ответы и такие вопросы как:
Что такое тег input?
Какие атрибуты может принимать тег input?
Какие бывают теги input?
И далее, далее, далее...

input

Что такое input?
Если переводить дословно или просто вспомнить как переводиться, то что-то вроде ввод . Да, примерно такое у тега input назначение, с помощью него мы можем вводить или передавать данные, но тег input может принимать разные виды благодаря атрибуту type.

Атрибут type

Атрибут type(или тип ) позволяет нам выбрать тип "инпута". По умолчанию стоит текстовый тип. Выглядит он как текстовое поле, это такое поле, куда обычно вы вводите свои данные, к примеру логин и пароль. Рассмотрим некоторые типы тега input.


  1. type="button"
  2. type="radio"
  3. type="checkbox"
  4. type="file"
  5. type="hidden"
  6. type="submit"
  7. type="reset"
  8. type="password"

Не много о типах radio и checkbox . Если из списка чекбоксов вы можете выбрать несколько пунктов, то радио-кнопка позволяет выбрать только один пункт. Каждый из этих input полезен по своему.

html 5 input

С приходом html 5, у тега input появились новые типы, смотрим:

  1. type="date"
  2. type="number"
  3. type="range"
  4. type="email"
  5. type="color"

Подробнее про тип range обязательно посмотрите в видео ниже =)
Пошли дальше

Атрибут name

Атрибут name задает имя инпуту, с помощью имя, к примеру, мы можем обозначить индивидуально поля и принимать данные по POST-запросам, в которые пропишем это имя, на php.

Если вы никогда не сталкивались с языком разметки, вы вряд ли поймете, что такое HTML input type. Тем, кто работает с HTML, эти объяснения ни к чему. А вот новичкам, которые только изучают этот язык, будет полезно познакомиться с одним из атрибутов.

Язык

Что же такое этот HTML и кому он нужен? Впервые он стал известен еще в 1993 году. Это стандартизированный инструмент, условно - для создания документов в Интернете. Чтобы не углубляться в непростую терминологию программистов, можно это все объяснить проще. Большая часть веб-страниц, которые вы видите в сети, состоит из команд и кодов. Все они и составляют этот язык.

Главным приложением, которое воспроизводит HTML, считается браузер. Именно для него и адаптированы все команды. Он интерпретирует все результаты, которые могут быть написаны в обычном "Блокноте", в форматированный текст на экране.

Структура

Чтобы не потеряться во всем текстовом массиве, который написан на языке разметки, и найти там нужные атрибуты HTML - input type, документ структурируют. Он состоит из элементов, которые заключены в теги.

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

И

Метки со слешем (/) обычно завершают команду и называются закрывающими. Есть теги, которые не требуют закрытия. Например,
- это метка, которая создает пропуск строки.

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

Форма

Чтобы найти атрибут HTML input type, нужно изучить понятие «форма». Одно из определений говорит о том, что это элемент, который помогает пользователю ввести информацию на сайте для последующей её обработки. Чтобы объяснить проще, нужно вспомнить веб-страницу. Вы наверняка видели на сайтах разные элементы в интерфейсе, которые представлены полями для ввода текста, кнопками, переключателями и флажками.

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

Обратная связь

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

Если вам не нужно собирать и анализировать информацию, то этому тегу не обязательно находиться внутри

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

Разнообразие

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

Значения

Есть десяток значений для input type. Text создает на страничке «рамочку» для ввода информации. Может использоваться для разных целей: поиска материалов на странице, ввода личных данных и пр. Похожее поле задается значением password. Внешне выглядит как текстовое, но вся информация, которая туда вводится, обозначается «звездочками». Этот вариант часто применяют для того, чтобы окружающие не могли узнать, какой пароль вы вводите.

Есть еще два похожих значения для атрибута type: checkbox и radio. Первый вариант представляет собой флажок. Если вам нужно на сайте сделать опрос, то checkbox преобразовывается во флажок. Причем выбирать нужно несколько вариантов. Второй вариант создан с такой же целью, но называется «переключателем». Разрешает использовать один вариант ответа.

Много есть атрибутов, которые имитируют кнопки в HTML. Input type submit создает популярную кнопку, благодаря которой можно переслать введенные данные на сервер. Есть похожая, называется image. Она делает то же самое, но приобретает вид картинки, чтобы не выглядеть статично. Есть просто кнопка со значением button.

Как уже говорилось ранее, благодаря тегу < input > можно создавать элементы для или картинок. Для этого используется значение для атрибута type - file. Вы наверняка видели подобный элемент на веб-странице. Особенно там, где можно загружать файлы.

Последнее значение для HTML input type - hidden. С помощью него на веб-странице может появиться скрытое поле. Оно никак не отображается для пользователя, но помогает разработчику. К примеру, если на сервер нужно передать информацию, которая была создана им же ранее. Так появляются некие метки, которые заметны только в самом файле с кодом. Также, благодаря этому значению формируют скрытые данные для php или js.

Другие атрибуты

В HTML form < input > type - не единственный атрибут. Целый список можно найти в любом электронном учебнике по изучению языка разметки. К примеру, можно использовать align, с помощью которого можно определять выравнивание изображения. Этот атрибут работает не только с формами. Его можно применять, например, если вы на сайт добавили карту со своим местоположением, но хотите её разместить по-другому. Тогда можно этому атрибуту дать значение middle, top, left и т.п.

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

Атрибут list может помочь с составлением списка вариантов. Если пользователь в текстовое поле начинает вводить данные, может появиться небольшой список слов, подходящих для него. Можно заблокировать доступ и изменение элемента с помощью атрибута disabled. Таких атрибутов больше 30. Они дают возможность программисту корректировать работу подобных элементов, задавать им значение, тип, форму и т.д.

Выводы

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

Чаще всего в формах используется тег . Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге и задается с помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута 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 , заданный в теге . Ведь чтобы передать введенные в форму данные, в общем случае совсем не обязательно нажимать на кнопку SUBMIT . Можно просто нажать на клавиатуре клавишу ENTER , находясь в любом текстовом поле ввода. При этом произойдет передача данных.

Пример

РЕЗУЛЬТАТ:

Атрибут 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 , при этом для разделения адресов используется запятая (,)

Пример



Top