какое значение следует задать атрибуту type чтобы оно превращало входной тэг в форму отправки
Атрибут type HTML тега input
Атрибут type определяет тип элемента ввода.
Тип по умолчанию — text.
Этот атрибут не является обязательным, однако лучше всегда определять его.
Атрибут type для тега поддерживается всеми основными браузерами, тем не менее не все браузеры корректно работают со всеми его значениями.
В HTML5 для атрибута type были добавлены следующие новые значения: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, url.
Синтаксис атрибута
Значения атрибута
| Значение | Описание |
|---|---|
| button | Обычная кнопка (как правило используется для запуска скриптов Javascript). |
| checkbox | Флажки, которые позволяют выбрать более одного варианта из предложенных. |
| color | Добавлен в HTML5. Виджет для выбора цвета. |
| date | Добавлен в HTML5. Поле выбора календарной даты. |
| datetime | Добавлен в HTML5. Указание даты и времени. |
| datetime-local | Добавлен в HTML5. Указание местной даты и времени. |
| Добавлен в HTML5. Для адресов электронной почты. | |
| file | Поле для ввода имени файла, который пересылается на сервер. |
| hidden | Скрытое поле, которое не отображается на странице. |
| image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. |
| month | Добавлен в HTML5. Выбор месяца. |
| number | Добавлен в HTML5. Ввод чисел. |
| password | Текстовое поле, в котором все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. |
| radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. |
| range | Добавлен в HTML5. Ползунок для выбора чисел в указанном диапазоне. |
| reset | Кнопка сброса данных в исходные значения. |
| search | Добавлен в HTML5. Поле поиска. |
| submit | Кнопка отправки данных формы на сервер. |
| tel | Добавлен в HTML5. Для телефонных номеров. |
| text | Текстовое поле. Значение по умолчанию. |
| time | Добавлен в HTML5. Для времени. |
| url | Добавлен в HTML5. Для веб-адресов. |
| week | Добавлен в HTML5. Выбор недели. |
Пример использования атрибута
HTML форма с двумя разными элементами ввода — текстовое поле и кнопка отправки данных на сервер:
Атрибуты input в HTML: Атрибут type.
Но с применением HTML-атрибута type для мы можем создавать и другие поля с абсолютно разным назначением. Именно об этих возможностях мы поговорим в этом видео уроке.
Значений атрибута type довольно большое количество. И после этого видео мы сможем добавлять в форму чекбоксы, кнопки-картинки, поля ввода пароля, кнопки загрузки файлов, скрытые поля, кнопки сброса и кнопки отправки данных. То есть в одном видео уроке мы охватим довольно много возможностей, которые мы можем применять при выводе HTML формы на странице.
input type button
Именно такой синтаксис позволит добавить в форму кнопку. Только естественно должны присутствовать необходимые знаки и кавычки. То есть полный и правильный синтаксис кнопки будет выглядеть так:
Ничего особенно в такой кнопке нет. Это самая обычная кнопка-пустышка, для которой мы можем назначить какие-нибудь действия, например с помощью HTML-событий.
input type reset
Данный синтаксис позволит нам добавить еще одну кнопку. В отличие от предыдущей, эта кнопка выполняет некое действие, а именно, сброс данных заполненных в форме. То есть если у нас есть форма с заполненными полями, не важно какими, мы можем с помощью такой кнопки осуществить сброс данных сразу во всех полях и вернуть значения к исходным.
Полный синтаксис кнопки сброса будет выглядеть следующим образом:
input type submit
Это, пожалуй, самый важный элемент формы, который позволяет оправить данные формы, например обработчику. Это поле также представляет собой кнопку при нажатии, на которую происходит оправка данных. Что касается всех этих кнопок то можно отметить, что это не единственный способ добавления кнопок в форму HTML. Но об этом мы еще поговорим в последующих видео уроках.
Чтобы добавить кнопку отправки данных на страницу мы должны прописать следующий код внутри формы:
Но это не единственный вариант отправки данных формы.
input type image
C помощью значения image для атрибута type мы можем добавить в форму картинку, которая будет выполнят то же самое, что и кнопка отправки, то есть отправлять данные формы. Единственное отличие в том, что это уже будет не кнопка, а изображение. Картинка может быть совершенно любой, например нарисованная заранее кнопка отправки.
input type file
А может он позволить добавить еще одну интересную кнопку, которая существует для отправки файлов. Фактически с помощью такой кнопки мы указываем имя файла, который должен быть отправлен на сервер после нажатия на кнопку отправки данных.
В этом случае, пожалуй, самый простой синтаксис:
После добавления такого кода внутри формы появится кнопка с помощью, которой мы сможем выбрать файл на компьютере, который необходимо загрузить на сервер и затем его отправить.
input type password
Кроме того если вспоминать о текстовых полях, то мы можем с помощью значения password указать специальное поле для ввода пароля. Оно отличается от обычного текстового поля тем, что вводимый текст отображается в виде звездочек или точек, чтобы никто не мог видеть вводимый пароль.
Такой код должен быть использован для вызова поля ввода пароля на странице.
Но и это еще не все значения атрибута type которые мы можем использовать при выводе формы.
input type checkbox
Значение checkbox позволяет добавить в форму чекбокс или флажок. Если говорить простым языком, то мы можем добавить возможность выбора нескольких вариантов из предложенных, с помощью проставления галочек. Наверняка Вы с таким когда-нибудь уже сталкивались, например, при участии в каком-нибудь опросе или при заполнении формы, где необходимо выбрать один или несколько вариантов ответов из предложенных, поставив чекбокс.
Что касается синтаксиса, то он довольно прост:
Естественно это самый минимум, который необходим для вывода чекбоксов.
input type radio
Значение radio не говорит о том, что мы будем слушать радио, и вообще это поле никак не связано с радио электроникой. Мы просто с помощью этого значения можем добавит в форму некую радио-кнопку, с помощью которой, опять же, будет осуществляться выбор варианта ответа из предложенных. Однако в отличие от чекбокса, в этом случае предоставляется возможность выбора только одного единственного варианта ответа. Так же часто может встречаться в различных опросах, но и в формах обратной связи тоже имеет место быть.
Синтаксис здесь также прост и логичен:
input type hidden
Все эти вопросы мы рассмотрим в видео уроке. Вопросов довольно много и все они довольно интересны и наверняка смогут пригодиться при создании, например формы обратной связи на сайте.
Видео урок: Атрибуты input в HTML: Атрибут type.
HTML-справочник и другие материалы можно и нужно скачать здесь!
Атрибут type
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
Значения
В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.
| Тип | Описание | Вид |
|---|---|---|
| button | Кнопка. | |
| checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. | Пиво Чай Кофе |
| file | Поле для ввода имени файла, который пересылается на сервер. | |
| hidden | Скрытое поле. Оно никак не отображается на веб-странице. | |
| image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. | |
| password | Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. | |
| radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. | Пиво Чай Кофе |
| reset | Кнопка для возвращения данных формы в первоначальное значение. | |
| submit | Кнопка для отправки данных формы на сервер. | |
| text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. |
В HTML5 добавлены новые значения, представленные в табл. 2.
| Тип | Описание |
|---|---|
| color | Виджет для выбора цвета. |
| date | Поле для выбора календарной даты. |
| datetime | Указание даты и времени. |
| datetime-local | Указание местной даты и времени. |
| Для адресов электронной почты. | |
| number | Ввод чисел. |
| range | Ползунок для выбора чисел в указанном диапазоне. |
| search | Поле для поиска. |
| tel | Для телефонных номеров. |
| time | Для времени. |
| url | Для веб-адресов. |
| month | Выбор месяца. |
| week | Выбор недели. |
Поддержка этих значений браузерами показана в табл. 3.
Какое значение следует задать атрибуту type чтобы оно превращало входной тэг в форму отправки
Это поле, которое позволяет выбрать цвет.
Пример
Атрибут value используют для установки исходного цвета, его можно не указывать.
Поле ввода даты
Поле типа date позволяет ввести дату с помощью календаря.
Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.
Пример
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)
Пример
Файл FILE
Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.
Пример
Сценарий получения файла на PHP:
Браузер Chrome понимает дополнительные атрибуты «webkitdirectory directory«, указание которых у input позволяет выбирать целые папки:
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Поле ввода чисел NUMBER
Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.
Пример
Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
Для задания любого шага используйте step=»any».
Пример
Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.
Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:
Если нужно убрать стрелочки в поле number, задайте стиль:
Поле ввода пароля PASSWORD
Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются точки. Такая возможность очень важна, когда нужно ввести секретную информацию, типа пароля, которую не должны видеть другие.
Пример
Переключатель RADIO
Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии.
По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.
Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.
Пример
Ползунок RANGE
Поле предназначено для ввода числа в указанном диапазоне.
Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).
Пример
Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.
Пример
Поле range отображается разными браузерами по-разному.
Если хотите своё оформление, задайте стили для ползунка:
Но победить до конца стили IE11 не удастся!
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.
Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.
Пример
Кнопка SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.
Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге
Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.
Пример
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type=»text»], то тогда атрибут type=»text» пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.
HTML Формы
Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту.
По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:
Нет ничего сложного в создании HTML-форм. Самый простой способ получить представление о формах — это разобрать небольшой HTML-код, а затем посмотреть, как он работает. В следующем примере показан синтаксис создания простой HTML-формы:
Пример: Простая HTML-форма
Моя первая форма:
Имя:
Фамилия:
Элемент —>
Вместе с этим атрибутом можно использовать атрибут maxlenght, значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size, рекомендуется использовать средства каскадных таблиц стилей (CSS).
Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.
Переключатели (radio)
Элемент типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:
Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value. Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:
Пример: Использование переключателей
Флажки (checkbox)
Элемент типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name, однако каждый флажок имеет собственное значение. Основной синтаксис флажка:
Атрибут checked, как и в случае с переключателями, указывает, что данный флажок должен быть установлен по умолчанию при загрузке страницы. Данный атрибут может быть установлен одновременно для нескольких флажков группы.
В следующем примере использование флажков заданы несколько выбранных по умолчанию вариантов ответа:
Пример: Использование переключателей
Какие музыкальные жанры Вы любите?
Кнопки подтверждения (submit) и очистки (reset)
Пример: Использование submit и reset
Подпишись на рассылку новостей:
После щелчка на кнопке Reset происходит сброс любых введенных пользователем данных.
Атрибут action.
Главным для элемента
Атрибут method
Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST. Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET. Рассмотрим применение каждого из них.
Метод POST
Метод POST упаковывает данные формы и отсылает их серверу незаметно для пользователя, поскольку данные содержатся в теле сообщения. Веб-браузер, при использовании метода POST отправляет на сервер запрос, состоящий из специальных заголовков за которыми следуют данные формы. Так как содержимое этого запроса доступно только серверу, метод POST применяется для передачи конфиденциальных данных, таких как пароли, реквизиты банковских карт и другая персональная информация пользователей. Метод POST также подходит для отправки больших объемов информации, так как в отличие от метода GET, у него нет ограничений по количеству передаваемых символов.
Метод GET
Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET, ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET, давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:
Элемент-переключатель
Добавьте нужные элементы в HTML-код, чтобы в результате получилась форма, приведенная в задании. В качестве имени для всех элементов установите name=»genre», а значения (value) соответственно: «rock», «pop» и «jazz».
Однострочное поле ввода текста
Добавьте нужные элементы в HTML-код, чтобы в результате получилась форма, приведенная в задании. В качестве имени (name) текстовых полей установите по порядку:»firstname», «lastname» и «login».
Значения по умолчанию
Для текстовых полей, приведенных в форме добавьте значения по умолчанию соответственно: «Ваше имя», «Ваша фамилия» и «до 10 знаков» как показано в задании.
Кнопки отправки данных и сброса
Разместите кнопки отправки данных и сброса в нижней части формы. По умолчанию на кнопке отправки данных отобразите надпись «Отправить запрос», а на кнопке сброса «Начать заново».