Атрибуты input в HTML: Атрибут type.
В прошлом видео мы начали знакомство с формами в HTML. И поговорили о том, как добавляется форма на страницу сайта. Кроме этого мы начали разговор об атрибуте type
тега <input>
, и теперь знаем, как сделать текстовое поле.
Но с применением HTML-атрибута type
для <input>
мы можем создавать и другие поля с абсолютно разным назначением. Именно об этих возможностях мы поговорим в этом видео уроке.
Значений атрибута type
довольно большое количество. И после этого видео мы сможем добавлять в форму чекбоксы, кнопки-картинки, поля ввода пароля, кнопки загрузки файлов, скрытые поля, кнопки сброса и кнопки отправки данных. То есть в одном видео уроке мы охватим довольно много возможностей, которые мы можем применять при выводе HTML формы на странице.
input type button
Именно такой синтаксис позволит добавить в форму кнопку. Только естественно должны присутствовать необходимые знаки и кавычки. То есть полный и правильный синтаксис кнопки будет выглядеть так:
Ничего особенно в такой кнопке нет. Это самая обычная кнопка-пустышка, для которой мы можем назначить какие-нибудь действия, например с помощью HTML-событий.
input type reset
Данный синтаксис позволит нам добавить еще одну кнопку. В отличие от предыдущей, эта кнопка выполняет некое действие, а именно, сброс данных заполненных в форме. То есть если у нас есть форма с заполненными полями, не важно какими, мы можем с помощью такой кнопки осуществить сброс данных сразу во всех полях и вернуть значения к исходным.
Полный синтаксис кнопки сброса будет выглядеть следующим образом:
input type submit
Это, пожалуй, самый важный элемент формы, который позволяет оправить данные формы, например обработчику. Это поле также представляет собой кнопку при нажатии, на которую происходит оправка данных. Что касается всех этих кнопок то можно отметить, что это не единственный способ добавления кнопок в форму HTML. Но об этом мы еще поговорим в последующих видео уроках.
Чтобы добавить кнопку отправки данных на страницу мы должны прописать следующий код внутри формы:
Но это не единственный вариант отправки данных формы.
input type image
C помощью значения image
для атрибута type
мы можем добавить в форму картинку, которая будет выполнят то же самое, что и кнопка отправки, то есть отправлять данные формы. Единственное отличие в том, что это уже будет не кнопка, а изображение. Картинка может быть совершенно любой, например нарисованная заранее кнопка отправки.
В этом случае синтаксис будет отличаться от обычной кнопки отправки тем, что будет отсутствовать параметр value
но будет присутствовать параметр src
.
Итак, с кнопками и отправкой данных мы разобрались. Что еще может позволить нам атрибут
тега <input>
?
input type file
А может он позволить добавить еще одну интересную кнопку, которая существует для отправки файлов. Фактически с помощью такой кнопки мы указываем имя файла, который должен быть отправлен на сервер после нажатия на кнопку отправки данных.
В этом случае, пожалуй, самый простой синтаксис:
После добавления такого кода внутри формы появится кнопка с помощью, которой мы сможем выбрать файл на компьютере, который необходимо загрузить на сервер и затем его отправить.
input type password
Кроме того если вспоминать о текстовых полях, то мы можем с помощью значения password
указать специальное поле для ввода пароля. Оно отличается от обычного текстового поля тем, что вводимый текст отображается в виде звездочек или точек, чтобы никто не мог видеть вводимый пароль.
Такой код должен быть использован для вызова поля ввода пароля на странице.
Но и это еще не все значения атрибута type которые мы можем использовать при выводе формы.
input type checkbox
Значение checkbox
позволяет добавить в форму чекбокс или флажок. Если говорить простым языком, то мы можем добавить возможность выбора нескольких вариантов из предложенных, с помощью проставления галочек. Наверняка Вы с таким когда-нибудь уже сталкивались, например, при участии в каком-нибудь опросе или при заполнении формы, где необходимо выбрать один или несколько вариантов ответов из предложенных, поставив чекбокс.
Что касается синтаксиса, то он довольно прост:
Естественно это самый минимум, который необходим для вывода чекбоксов.
input type radio
Значение radio
не говорит о том, что мы будем слушать радио, и вообще это поле никак не связано с радио электроникой. Мы просто с помощью этого значения можем добавит в форму некую радио-кнопку, с помощью которой, опять же, будет осуществляться выбор варианта ответа из предложенных. Однако в отличие от чекбокса, в этом случае предоставляется возможность выбора только одного единственного варианта ответа. Так же часто может встречаться в различных опросах, но и в формах обратной связи тоже имеет место быть.
Синтаксис здесь также прост и логичен:
Хочу еще раз отметить, что это тот минимум, который необходим как в случае с радио кнопками, так и с чекбоксами. Кроме того желательно использовать параметр value
, чтобы приходил именно тот ответ который выбрал пользователь, но об этом подробнее в видео уроке.
И последняя возможность с использованием атрибута type
.
C использованием значения hidden
мы можем добавить в форму пустое невидимое или скрытое поле, которое никак не отображается на странице вообще. Подобные скрытые поля используются для подстановки необходимых нам данных и впоследствии получения их вместе с остальными данными, которые будут заполнены пользователем. Все необходимые данные мы можем прописать в параметре value
. И тогда синтаксис такого поля чаще всего будет выглядеть таким образом:
Все эти вопросы мы рассмотрим в видео уроке. Вопросов довольно много и все они довольно интересны и наверняка смогут пригодиться при создании, например формы обратной связи на сайте.
Видео урок: Атрибуты input в HTML: Атрибут type.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующий раз…
input | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка 1 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка Да |
---|---|---|---|---|---|---|---|---|---|---|---|---|
type="button" | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка 1 | WebView Android | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка 1.0 |
type="checkbox" | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
type="color" | Chrome Полная поддержка 20 | Edge Полная поддержка 14 | Firefox Полная поддержка 29
| IE Нет поддержки Нет | Opera Полная поддержка 12 | Safari Полная поддержка 12.1 | WebView Android Полная поддержка 4.4 | Chrome Android Полная поддержка 25 | Firefox Android Полная поддержка 27 | Opera Android Полная поддержка 12 | Safari iOS Полная поддержка 12.2 | Samsung Internet Android Полная поддержка 1.5 |
type="date" | Chrome Полная поддержка 20 | Edge Полная поддержка 12 | Firefox Полная поддержка 57 | IE Нет поддержки Нет | Opera Полная поддержка 11 | Safari Нет поддержки Нет
| WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 57 | Opera Android Полная поддержка 11 | Safari iOS Полная поддержка 5 | Samsung Internet Android Полная поддержка Да |
type="datetime-local" | Chrome Полная поддержка 20 | Edge Полная поддержка 12 | Firefox Нет поддержки Нет
| IE Нет поддержки Нет | Opera Полная поддержка 11 | Safari Нет поддержки Нет
| WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка 11 | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
type="email" | Chrome Полная поддержка 5 | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка 10 | Opera Полная поддержка 11 | Safari Полная поддержка Да | WebView Android ? | Chrome Android ? | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка 3.1
| Samsung Internet Android ? |
type="file" | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1
| IE Полная поддержка Да | Opera Полная поддержка 11 | Safari Полная поддержка 1 | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 11 | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
type="hidden" | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка 2 | Safari Полная поддержка 1 | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
type="image" | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android ? | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android ? |
x-moz-errormessage attribute ЭкспериментальнаяУстаревшаяНестандартная | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox Нет поддержки ? — 66 | IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android Нет поддержки ? — 66 | Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
type="month" | Chrome Полная поддержка 20 | Edge Полная поддержка 12 | Firefox Нет поддержки Нет
| IE Нет поддержки Нет | Opera Полная поддержка 11 | Safari Нет поддержки Нет
| WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Нет поддержки Нет | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
type="number" | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка 10 | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
type="password" | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 2 | Opera Полная поддержка 2 | Safari Полная поддержка 1 | WebView Android ? | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
type="radio" | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
type="range" | Chrome |
НОУ ИНТУИТ | Лекция | HTML-формы
Аннотация: В этой лекции разбирается возможность взаимодействия читателя HTML-страниц с сервером Web-узла. Подробно описывается подмножество HTML, которое носит название HTML-формы.
HTML-формы
Формы были созданы и используются в WWW для получения отклика пользователя на предоставленную информацию и сбора данных о пользователе. После заполнения пользователем формы и запуска процесса ее обработки, информация из нее попадает к программе, работающей на сервере. Простота использования тега <MAILTO:> в формах позволяет даже владельцам небольших страниц получать отклик от своих читателей. Для обработки большого количества откликов используются программы, поддерживающие Common Gateway Interface (CGI) и расположенные на сервере, в адрес которого поступают отклики. Таким образом пользователь может интерактивно взаимодействовать с Web-сервером через Internet.
Задание формы — элемент FORM
Элемент FORM обозначает документ как форму и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов <INPUT> , размещенных внутри пары <FORM> и </FORM>. В форме используется как метод ( method ), так и действие ( action ) для описания обработки данных, вводимых пользователем в форму. Метод ( GET или POST ) определяет, как должны обрабатываться входные данные из формы, а действие указывает на URI (Uniform Resource Identifier) программы, ответственной за обработку этих данных.
<FORM METHOD=post ACTION=mailto:[email protected]>
Определение элементов управления формы — тег <INPUT>
Данный тег используют для определения области внутри формы, куда вводятся данные. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута TYPE.
Атрибут TYPE=text
Когда пользователю необходимо ввести небольшое количество текста (одну или несколько строк), используется тег <INPUT> , и атрибут TYPE устанавливается в значение text. Это значение принято по умолчанию и указывать его необязательно. Кроме того, задается атрибут NAME для определения наименования переменной поля.
Ваше имя <INPUT NAME=Name SIZE=35>
Имеется еще три дополнительных атрибута, которые можно использовать. Первый называется MAXLENGTH, он ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено. Вторым атрибутом является SIZE, определяющий размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. Если значение MAXLENGTH больше, чем SIZE, браузер будет прокручивать данные в окне. Последним из дополнительных атрибутов является атрибут VALUE, обеспечивающий начальное значение поля ввода.
Атрибут TYPE=checkbox
Для создания независимых флагов в формах HTML используется тег <INPUT> со значением атрибута TYPE=checkbox. В зависимости от содержания формы пользователь может отметить несколько флагов. Когда форма использует тег <INPUT> со значением атрибута CHECKBOX, в нем должны присутствовать и атрибуты NAME, и VALUE. Атрибут NAME указывает на наименование данного поля (флага) ввода. В атрибуте VALUE будет содержаться значение поля.
<BR>Россия<INPUT NAME="Страна" TYPE=checkbox VALUE="Россия"> Страны СНГ<INPUT NAME="Страна" TYPE=checkbox VALUE="СНГ">
В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED.
Атрибут TYPE=radio
В некоторых случаях требуется организовать выбор одного из нескольких возможных значений. Для создания формы ввода при выборе пользователем одного значения из нескольких возможных необходимо использовать тег <INPUT> с атрибутом TYPE=radio. Когда в форме применяется данный атрибут, в теге <INPUT> должны быть указаны атрибуты NAME и VALUE. Атрибут NAME указывает наименование соответствующего поля (кнопки). Атрибут VALUE содержит значение поля.
<BR>Пол мужской<INPUT NAME="Пол" TYPE=radio VALUE="Мужской"> Пол женский<INPUT NAME="Пол" TYPE=radio VALUE="Женский">
Атрибут TYPE=image
В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для этого программисты используют тег <INPUT> с атрибутом TYPE=image. Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он «обрабатывает» введенную в форму информацию. Когда форма использует атрибут image, тег <INPUT> должен содержать также атрибуты NAME и SRC. NAME указывает наименование поля ввода формы. Атрибут SRC содержит URI файла — источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG>.
<BR>Выберите точку<INPUT TYPE=image NAME=point SRC=image.gif>
Атрибут TYPE=password
Если в форме требуется организовать ввод пароля, то атрибут TYPE можно установить в значение password ( TYPE=password ). Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены.
<BR>Подпись<INPUT NAME=login>Пароль <INPUT TYPE=password NAME="Слово">
Атрибут TYPE=reset
Когда пользователь заполняет форму, ему может потребоваться начать все сначала. На такой случай существует кнопка Reset, по которой пользователь может щелкнуть мышью, чтобы вернуться к первоначальным значениям полей. Когда пользователь выбирает данную кнопку, форма восстанавливает первоначальные значения всех элементов, в которых присутствует атрибут TYPE=reset. Для создания кнопки Reset используется тег <INPUT> с атрибутом TYPE=reset. Браузер в свою очередь будет выводить изображение данной кнопки. Если в форме используется атрибут reset, тег <INPUT> может дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки.
<INPUT TYPE=reset VALUE="Очистить форму">
Атрибут TYPE=submit
Используя форму HTML для ввода информации от пользователя, необходимо обеспечить пользователю возможность завершить ввод данных. Для этого используется тег <INPUT> с атрибутом TYPE=submit. Браузер, в свою очередь, выводит данный элемент, как кнопку, по которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Когда в форме используется тег <INPUT> с атрибутом submit, данный элемент может содержать два дополнительных атрибута: NAME и VALUE. Атрибут NAME хранит название переменной поля в вашей форме. Атрибут VALUE — определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов.
<BR><INPUT TYPE=submit VALUE="Отправить сообщение">
Скрытые поля. Добавление в тег INPUT атрибута TYPE=hidden позволит включить в отправляемую форму значения атрибутов NAME и VALUE, которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных.
Атрибут formtarget тега | HTML справочник
HTML тег <input>Значение и применение
Атрибут formtarget (HTML тега <input>) задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self — отображает ответ в текущем окне. Атрибут используется только для <input type = «image» и <input type = «submit»>.
Обращаю Ваше внимание, что если атрибут formtarget используется, то он переопределяет значение атрибута target элемента <form>.
Поддержка браузерами
Синтаксис:
<input formtarget = "_blank | _self | _parent | _top | framename">
Значения атрибута
Значение | Описание |
---|---|
_blank | Ответ будет отображен в новом окне или вкладке |
_self | Ответ отображается в том же окне. Это значение по умолчанию. |
_parent | Отображает ответ во фрейм родителе, если фреймов нет, то это значение работает как _self. |
_top | Загружает ответ в полном исходном окне, и отменяет все остальные фреймы. Если нет родителей, то ведет себя точно так же, как _self. |
framename | Ответ отображается в окне <iframe> с указаным именем. |
Отличия HTML 4.01 от HTML 5
Атрибут formtarget считается новым в HTML 5.Пример использования
<!DOCTYPE html> <html> <head> <title>Использование атрибута formtarget HTML тега <input></title> </head> <body> <form id = "subscribeForm"> <!-- определяем id для нашей формы --> Имя: <input type = "text" name = "userName"> <!-- определяем элемент управления для ввода текстовой информации --> E-mail: <input type = "email" name = "email"> <!-- определяем элемент управления для ввода адреса электронной почты --> <input type = "submit" value = "Подписаться" formaction = "script.php" formtarget = "_blank"> <!-- определяем элемент управления для отправки формы --> </form> </body> </html>
В данном примере мы создали форму (HTML тег <form>), глобальным атрибутом id указали для неё идентификатор. Внутри формы мы поместили элементы управления <input>, которые позволяют пользователю ввести логин, адрес электронной почты и отправить нашу форму. Для элемента управления, предназначенного для отправки формы (type = «submit») мы указали:
- Атрибутом formaction указали URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (script.php).
- Атрибутом formtarget указали, что ответ будет отображен в новом окне («_blank»).
Результат нашего примера:
Пример использования атрибута formtarget HTML тега <input>. HTML тег <input>Атрибут enctype | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Определяет способ кодирования данных формы при их отправке на сервер. Обычно устанавливать значение атрибута enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (input type=»file»), следует определить атрибут enctype как multipart/form-data.
Синтаксис
<form enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">
...
</form>
Значения
- application/x-www-form-urlencoded
- Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня).
- multipart/form-data
- Данные не кодируются. Это значение применяется при отправке файлов.
- text/plain
- Пробелы заменяются знаком +, буквы и другие символы не кодируются.
Обязательный атрибут
Нет.
Значение по умолчанию
application/x-www-form-urlencoded
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег FORM, атрибут enctype</title>
</head>
<body>
<form action="handler.php"
enctype="multipart/form-data" method="post">
<p>Загрузите файл с картинкой</p>
<p><input type="file" name="pic"></p>
</form>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Поле для отправки файла
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Входное значение HTML Атрибут
❮ HTML-тег
Пример
HTML-форма с начальными (по умолчанию) значениями:
<форма
action = "/ action_page.php">
Определение и использование
Атрибут value указывает значение элемента .
Атрибут value используется по-разному для разных типов ввода:
- Для «кнопка», «сброс» и «отправить» — это определяет текст на кнопке
- Для «текста», «пароля» и «скрытого» — определяет начальное (по умолчанию) значение поля ввода
- Для «флажок», «радио», «изображение» — оно определяет значение, связанное со входом (это также значение, которое отправляется при отправке)
Примечание: Атрибут значения нельзя использовать с .
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает атрибут.
Атрибут | |||||
---|---|---|---|---|---|
значение | Да | Да | Да | Да | Да |
Синтаксис
Значения атрибута
Значение | Описание |
---|---|
текст | Указывает значение элемента |
Tag HTML-тег ,
атрибутов ввода HTML
В этой главе описываются различные атрибуты для элемента HTML
.
Атрибут значения
Атрибут входного значения
указывает начальное значение для поля ввода:
Пример
Поля ввода с начальными (по умолчанию) значениями:
<форма>
form>
Атрибут только для чтения
Атрибут input readonly
указывает, что поле ввода доступно только для чтения.
Поле ввода, доступное только для чтения, не может быть изменено (однако пользователь может добавить к нему вкладку, выделить его и скопировать из него текст).
Значение поля ввода только для чтения будет отправлено при отправке формы!
Пример
Поле ввода только для чтения:
<форма>
form>
Атрибут отключен
Атрибут отключенного ввода
указывает, что поле ввода должно быть отключено.
Отключенное поле ввода невозможно использовать и его нельзя щелкнуть.
Значение отключенного поля ввода не будет отправлено при отправке формы!
Пример
Отключенное поле ввода:
<форма>
form>
Атрибут размера
Атрибут input size
определяет
видимая ширина, в символах, поля ввода.
Значение по умолчанию для размера
- 20.
Примечание: Атрибут size
работает со следующими типами ввода: текст, поиск, тел, URL, электронная почта и
пароль.
Пример
Установите ширину поля ввода: