Type атрибут – Атрибут type тега | HTML справочник

Leave a Comment / Разное / By /

Атрибут type HTML тега input

Атрибут type определяет тип элемента ввода.

Тип по умолчанию — text.

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

Атрибут type для тега <input> поддерживается всеми основными браузерами, тем не менее не все браузеры корректно работают со всеми его значениями.

В HTML5 для атрибута type были добавлены следующие новые значения: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, url.

Синтаксис

<input type=»значение«>

Значения атрибута

ЗначениеОписание
buttonОбычная кнопка (как правило используется для запуска скриптов Javascript).
checkboxФлажки, которые позволяют выбрать более одного варианта из предложенных.
colorДобавлен в HTML5.
Виджет для выбора цвета.
dateДобавлен в HTML5.
Поле выбора календарной даты.
datetimeДобавлен в HTML5.
Указание даты и времени.
datetime-localДобавлен в HTML5.
Указание местной даты и времени.
emailДобавлен в 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 форма с двумя разными элементами ввода — текстовое поле и кнопка отправки данных на сервер:


<form action="//msiter.ru/demo_form.asp">
   Имя пользователя: <input type="text" name="usrname"><br>
   <input type="submit" value="Отправить">
</form>

Атрибут type тега | HTML справочник

HTML тег <button>

Значение и применение

Атрибут type (HTML тега <button>) задает тип, используемой кнопки.

Всегда указывайте для тега <button> тип атрибута type = «button» если элемент используется в качестве обычной кнопки.

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

Синтаксис:

<button type = "button | reset | submit">

Значения атрибута

ЗначениеОписание
buttonОбычная кликабельная кнопка, которая не имеет поведения по умолчанию. Может использоваться совместно с клиентскими скриптами.
resetКнопка, которая сбрасывает все значения элементов управления формы к их первоначальным значениям.
submitКнопка, которая служит для отправки данных формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически меняется в пустое или недопустимое значение.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута type HTML тега <button></title>
	</head>
	<body>
		<button type = "button" onclick = "alert('Я просто кнопка вне формы')">кнопка вне формы</button><br><br>   
		<form>
			Login: <input type = "text" name = "login"><br><br> 
			Password: <input type = "password" name = "password"><br> <br> 
			<button type = "reset">Сбросить</button><button type = "submit">Отправить</button> 
		</form>	
	</body>
</html>

В данном примере мы указали три разлиных элемента <button>:

  • первая кнопка с типом обычная кликабельная кнопка (type = «button») размещается вне формы. Для неё мы указали атрибут событий onclick, который позволяет задать срабатывание скрипта при клике левой кнопки мыши на элементе (вызываем информационное сообшение при нажатии).
  • вторая кнопка размещена внутри формы и сбрасывает все значения элементов к первоначальным (type = «reset») размещена внутри формы.
  • третяя кнопка размещена внутри формы и служит для отправки данных формы на сервер (type = «submit»).

Внутри формы для первого поля задали тип однострочное текстовое поле <input> (type = «text»), а для второго однострочное текстовое поле, предназначенное для ввода пароля в котором символы, введенные внутри поля скрываются (type = «password»).

Пример использования атрибута type HTML тега <button> (задает тип, используемой кнопки).HTML тег <button>

Новые значения атрибута type.

Вы здесь: Главная — HTML — HTML 5 — Новые значения атрибута type.

Новые значения атрибута type.

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

Email

<html>
<head>
  <title>Types</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="email">
</body>
</html>

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

Url

Поле с типом url, как и email, ничем не отличается, но проверяет,

url ли введён или что-то другое.

<input type="url">

Tel

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

<input type="tel" pattern="8[0-9]">

Number

Поле с этим типом подразумевает ввод чисел. В этом поле справа появятся две стрелочки, которые помогут указать число. Его преимуществом будут атрибуты min, max и step, которые позволяют задать минимальное, максимальное значение и шаг.

<input type="number" min="5" max="100" value="10" step="2">

В нашем случае шаг равен 2 и, следовательно, можно вводить числа 5,7,9 и т.д.

Range

Поле range уже отличается. Оно будет представлено ввиде ползунка, который вы можете двигать и тем самым выбирать нужные вам значения. Атрибуты у него такие же, как и у

number.

<input type="range" min="10" max="100" step="7">

Search

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

<input type="search">

Color

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

<input type="color">

Дата

<input type='date'>
<input type='time'>
<input type='datetime'>
<input type='datetime-local'>
<input type='month'>
<input type='week'>
 Эти значения помогут нам выбрать дату и время. Рядом с полями появятся стрелочки, как в
number, с помощью которых вы сможете указать нужное вам число, неделю, время…
  • date — дата в формате дд.мм.гггг
  • time — время в формате чч:мм
  • datetime — date и time вместе(глобальное время)
  • datetime-local — date и time(местное время)
  • month — позволяет выбрать месяц в формате месяц-год
  • week — позволяет выбрать неделю в формате неделя_год
Итак, сегодня мы узнали, какие новые значения атрибута type появились в HTML5.
  • Новые значения атрибута type. Создано 24.04.2014 20:05:55
  • Новые значения атрибута type. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Атрибут type | HTML | WebReference

Устанавливает вид маркера. Тип маркера и его значение зависит от внешнего контейнера <ul> или <ol>.

Данный атрибут устарел, взамен используйте стили.

Синтаксис

<li type="disc | circle | square">...</li>
<li type="A | a | I | i | 1">...</li>

Значения

Для маркированного списка (элемент <ul>) маркеры могут принимать один из трех видов: круг, окружность и квадрат. Значения атрибута type и получаемый вид показан в табл. 1.

Табл 1. Параметры маркированного списка
КодПример
<li type=»disc»>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<li type=»circle»>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<li type=»square»>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов элемента <ol>, который и используется для создания списка. В качестве номеров могут быть следующие значения:

  • заглавные латинские буквы;
  • строчные латинские буквы;
  • заглавные римские цифры;
  • строчные римские цифры;
  • арабские цифры.

В табл. 2 приведены различные значения атрибута type элемента <li> и результат их применения.

Табл 2. Параметры нумерованного списка
КодПример
<ol> <li type=»A»> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type=»a»> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type=»I»> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type=»i»> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type=»1″> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

Значение по умолчанию

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>LI, атрибут type</title>
 </head>
 <body>
  <ul>
   <li type="square">Чебурашка</li>
   <li>Крокодил Гена</li>
   <li type="circle">Шапокляк</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 1.

Разные маркеры в списке

Рис. 1. Разные маркеры в списке

Примечание

Для изменения вида маркеров через стили используется свойство list-style, которое добавляется к селектору ul.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>li</title>
  <style>
   ul {
    list-style: square; /* Тип маркеров */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ul>
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.04.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Атрибут type | HTML | WebReference

Задаёт MIME-тип источника, а также аудио и видеокодек — так называется алгоритм хранения воспроизводимых данных.

Синтаксис

<audio>
 <source src="<адрес>" type='<MIME-тип>; codecs="<кодек>"'>
</audio>
<video>
 <source src="<адрес>" type='<MIME-тип>; codecs="<кодек>"'>
</video>

Значения

Вначале указывается MIME-тип, затем после точки с запятой пишется ключевое слово codecs и ему присваивается через запятую значение видео и аудиокодека. Если предполагается использовать только звук, видеокодек не пишется.

Значения для некоторых типов приведены в табл. 1.

Табл. 1. Значение атрибута type в зависимости от кодеков
ВидеокодекАудиокодекКонтейнерАтрибут type
VorbisOggtype=’audio/ogg; codecs=vorbis’
SpeexOggtype=’audio/ogg; codecs=speex’
FLACOggtype=’audio/ogg; codecs=flac’
MP3type=»audio/mpeg»
H.264AACMP4type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘
TheoraVorbisOggtype=’video/ogg; codecs=»theora, vorbis»‘
TheoraSpeexOggtype=’video/ogg; codecs=»theora, speex»‘
TheoraVorbisMatroskatype=’video/x-matroska; codecs=»theora, vorbis»‘
VP8VorbisWebMtype=’video/webm; codecs=»vp8, vorbis»‘

Значение по умолчанию

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 08.11.2016

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Атрибут type | htmlbook.ru


Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+8.0+10.50+3.1+4.0+2.0+2.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Задает MIME-тип источника, а также аудио и видеокодек — так называется алгоритм хранения воспроизводимых данных.

Синтаксис

<audio>
 <source src="URL" type='MIME-тип; codecs="кодек"'>
</audio>
<video>
 <source src="URL" type='MIME-тип; codecs="кодек"'>
</video>

Значения

Вначале указывается MIME-тип, затем после точки с запятой пишется ключевое слово codecs и ему присваивается через запятую значение видео и аудиокодека. Если предполагается использовать только звук, видеокодек не пишется.

Значения для некоторых типов приведены в табл. 1.

Табл. 1. Значение атрибута type в зависимости от кодеков
ВидеокодекАудиокодекКонтейнерАтрибут type
 VorbisOggtype=’audio/ogg; codecs=vorbis’
 SpeexOggtype=’audio/ogg; codecs=speex’
 FLACOggtype=’audio/ogg; codecs=flac’
 MP3 type=»audio/mpeg»
H.264AACMP4type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘
TheoraVorbisOggtype=’video/ogg; codecs=»theora, vorbis»‘
TheoraSpeexOggtype=’video/ogg; codecs=»theora, speex»‘
TheoraVorbisMatroskatype=’video/x-matroska; codecs=»theora, vorbis»‘
VP8VorbisWebMtype=’video/webm; codecs=»vp8, vorbis»‘

Значение по умолчанию

Нет.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

seodon.ru | Теги HTML — Тег INPUT

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут type, тега <INPUT>, используется для указания типа элемента формы. В первую очередь эти элементы разделяются по их предназначению, при этом некоторые из них внешне могут выглядеть одинаково (или почти одинаково).

Значения

Значением атрибута является одно из ключевых слов.

Значение по умолчанию: text.

Синтаксис

<input type="значение">

Обязательный атрибут: нет.

Пример HTML: применение атрибута type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег INPUT, атрибут type</title>
 </head>
 <body>
  <form action="files/questions.php">
   <p>Ваше имя:<br>
    <input type="text" name="name" size="30"><br>
    Ваш пол:<br>
    <input type="radio" checked name="mankind" value="male">М
    <input type="radio" checked name="mankind" value="female">Ж<br>
   <p><input type="submit" name="ok" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *