Значение url
‒ URL поле;
‒ наведение курсора;
‒ фокус.
Поддержка браузерами
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | |
| 5.0 | 4.10.5.1.4 URL state (type=url) |
| 5.1 | 4.10.5.1.4. URL state (type=url) |
| XHTML | |
| 1.0 | |
| 1.1 | |
Сопутствующие атрибуты
autocomplete Автозаполнение значения URL поля. autofocus Автоматческая фокусировка на URL поле после полной загрузки страницы. disabled Блокировка URL поля.
disabled=»disabled»
form Присоединение URL поля к форме. list Создание списка рекомендованных вариантов URL-адресов.
maxlength Задаёт максимально-допустимое количество вводимых символов. minlength Задаёт минимально-допустимое количество вводимых символов. name Присваивает имя URL полю. pattern Устанавливает критерий/шаблон ввода. placeholder Указывает текст-подсказку для пустого поля.
placeholder=»Текст-подсказка»
readonly Указывает, что URL поле доступно только для чтения (изменение/редактирование запрещено). required Указывает, что URL поле обязательно для заполнения. size Задаёт ширину URL поля по количеству вводимых символов.
size=»10″
value Указывает значение URL поля (отправляется на сервер или используется скриптами).
Примечание: Данный атрибут должен иметь значение, которое является допустимым URL-адресом не содержит символов «LF» ПЕРЕВОД СТРОКИ [ U+000A ] или «CR» ВОЗВРАТ КАРЕТКИ [ U+000D ].
value=»www.example.ex»
Input type url для чего
Введенное значение автоматически проверяется, чтобы убедиться, что оно либо пустое, либо правильное formatted URL, прежде чем можно будет отправить form. Псевдоклассы :valid и :invalid CSS автоматически применяются соответствующим образом для визуального обозначения того, является ли текущее значение поля допустимым URL или нет.
В браузерах, которые не поддерживают ввод типа url , ввод url возвращается к стандартному вводу text .
Value
- Пустая строка («»), указывающая, что пользователь не ввел значение или значение было удалено.
- Единственный правильно сформированный абсолютный URL. Это не обязательно означает, что адрес URL существует, но, по крайней мере, он правильно отформатирован. Проще говоря, это означает urlscheme://restofurl .
См. Validation для получения подробной информации о том, как URLs проверяется, чтобы убедиться, что они правильно отформатированы.
Additional attributes
list
Значения атрибута списка — это id элемента , расположенного в том же документе. предоставляет список предопределенных значений, которые можно предложить пользователю для этого входа. Любые значения в списке, несовместимые с type , не включены в предлагаемые параметры. Предоставленные значения являются рекомендациями, а не требованиями: пользователи могут выбрать из этого предопределенного списка или указать другое значение.
maxlength
Максимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести во ввод url . Это должно быть целочисленное значение 0 или выше. Если maxlength не указан или задано недопустимое значение, вход url не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength .
Ввод завершится ошибкой constraint validation , если длина текстового значения поля больше длины кодовых единиц maxlength UTF-16. Проверка ограничения применяется только тогда, когда значение изменяется пользователем.
minlength
Минимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести во ввод url . Это должно быть неотрицательное целое число, меньшее или равное значению, заданному maxlength . Если minlength не указан или задано недопустимое значение, вход url не имеет минимальной длины.
Ввод не будет выполнен constraint validation , если длина текста, введенного в поле, меньше, чем длина кодовых единиц minlength UTF-16. Проверка ограничения применяется только тогда, когда значение изменяется пользователем.
pattern
Атрибут pattern , если он указан, является регулярным выражением, которому должен соответствовать входной value , чтобы значение передавалось constraint validation . Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp и задокументированное в нашем guide on regular expressions ; при компиляции регулярного выражения указывается флаг ‘u’ , чтобы шаблон обрабатывался как последовательность кодовых точек Unicode, а не как ASCII.. Вокруг текста шаблона не следует указывать косую черту.
Если указанный шаблон не указан или недействителен, регулярное выражение не применяется и этот атрибут полностью игнорируется.
Примечание. Используйте атрибут title , чтобы указать текст, который большинство браузеров будет отображать в качестве всплывающей подсказки, чтобы объяснить, какие требования должны соответствовать шаблону. Вы также должны включить другой пояснительный текст рядом.
Дополнительные сведения и пример см. в разделе Pattern validation .
placeholder
Атрибут placeholder — это строка, предоставляющая пользователю краткую подсказку о том, какая информация ожидается в поле. Это должно быть слово или короткая фраза, демонстрирующая ожидаемый тип данных, а не поясняющее сообщение. Текст не должен включать возврат каретки или перевод строки.
Если содержимое элемента управления имеет одну направленность ( LTR или RTL ), но необходимо представить заполнитель в противоположном направлении, вы можете использовать символы форматирования двунаправленного алгоритма Unicode, чтобы переопределить направленность внутри заполнителя; см. How to use Unicode controls for bidi text для получения дополнительной информации.
Примечание. По возможности избегайте использования атрибута placeholder . Это не так полезно с семантической точки зрения, как другие способы объяснения вашего form, и может вызвать неожиданные технические проблемы с вашим контентом. См. labels для получения дополнительной информации.
readonly
Атрибут Boolean, который, если он присутствует, означает, что это поле не может быть отредактировано пользователем. Однако его value по-прежнему можно изменить с помощью кода JavaScript, непосредственно устанавливающего свойство HTMLInputElement value .
Примечание. Поскольку поле только для чтения не может иметь значение, required не оказывает никакого влияния на входные данные с также указанным атрибутом readonly .
size
Атрибут size — это числовое значение, указывающее, сколько символов должно быть в поле ввода. Значение должно быть числом больше нуля, а значение по умолчанию равно 20. Поскольку ширина символов различается, это может быть или не быть точным, и на это не следует полагаться; результирующий ввод может быть уже или шире, чем указанное количество символов, в зависимости от символов и шрифта (параметры font в use).
Это не устанавливает ограничения на количество символов, которые пользователь может ввести в поле. Он лишь указывает приблизительно, сколько можно увидеть одновременно. Чтобы установить верхний предел длины входных данных, используйте атрибут maxlength .
spellcheck
spellcheck — это глобальный атрибут, который используется для указания, следует ли включать проверку орфографии для элемента. Его можно использовать на любом редактируемом контенте, но здесь мы рассмотрим специфику, связанную с использованием spellcheck на элементах . Допустимые значения для spellcheck :
Отключите проверку орфографии для этого элемента.
Включите проверку орфографии для этого элемента.
«» (пустая строка) или нет значения
Следуйте поведению элемента по умолчанию для проверки орфографии. Это может быть основано на настройке spellcheck родителя или других факторах.
В поле ввода может быть включена проверка орфографии, если для него не установлен атрибут readonly и он не отключен.
Значение, возвращаемое при чтении spellcheck , может не отражать фактическое состояние проверки орфографии в элементе управления, если настройки user agent’s переопределяют настройку.
Non-standard attributes
В некоторых браузерах также доступны следующие нестандартные атрибуты. Как правило, вам следует избегать их использования, за исключением случаев, когда это бесполезно.
autocorrect
Расширение Safari, атрибут autocorrect — это строка, указывающая, следует ли активировать автоматическое исправление, пока пользователь редактирует это поле. Допустимые значения:
Включить автоматическое исправление опечаток, а также обработку текстовых подстановок, если таковые настроены.
Отключите автоматическое исправление и замену текста.
mozactionhint
Расширение Mozilla, которое дает подсказку о том, какое действие будет выполнено, если пользователь нажмет кнопку Enter or Return при редактировании поля.
Этот атрибут устарел: вместо этого используйте глобальный атрибут enterkeyhint .
Использование входов URL
Когда вы создаете ввод URL с правильным значением type , url , вы получаете автоматическую проверку того, что введенный текст, по крайней мере, находится в правильном form, чтобы потенциально быть законным URL. Это может помочь избежать случаев, когда пользователь неправильно набирает адрес своего веб-сайта или предоставляет неверный адрес.
Однако важно отметить, что этого недостаточно для того, чтобы гарантировать, что указанный текст является URL, который действительно существует, соответствует пользователю сайта или приемлем каким-либо другим образом. Это гарантирует, что значение поля имеет правильный формат URL.
Примечание. Пользователь может работать с вашим HTML за кулисами, поэтому ваш сайт не должен использовать эту проверку в целях безопасности. Вы должны проверять URL на стороне сервера любой транзакции, в которой предоставленный текст может иметь какие-либо последствия для безопасности любого рода.
Простой вход URL
В настоящее время все браузеры, реализующие этот элемент, реализуют его как стандартное поле ввода текста с базовыми функциями проверки. В самом базовом form вход URL может быть реализован следующим образом:
input id="myURL" name="myURL" type="url" />
Обратите внимание, что он считается действительным, когда он пуст и когда введен один правильно отформатированный адрес URL, но в противном случае он не считается действительным. При добавлении атрибута required разрешены только правильно сформированные URLs; ввод больше не считается действительным, когда он пуст.
Ничего волшебного здесь не происходит. Отправка этого form приведет к отправке на сервер следующих данных: myURL=http%3A%2F%2Fwww.example.com . Обратите внимание, как символы экранируются по мере необходимости.
Placeholders
Здесь у нас есть ввод url с заполнителем http://www.example.com . Обратите внимание, как заполнитель исчезает и появляется снова, когда вы манипулируете содержимым поля редактирования.
input id="myURL" name="myURL" type="url" placeholder="http://www.example.com" />
Управление размером ввода
Вы можете контролировать не только физическую длину поля ввода, но также минимальную и максимальную длину, разрешенную для самого вводимого текста.
Физический размер входного элемента
Физическим размером поля ввода можно управлять с помощью атрибута size . С его помощью вы можете указать количество символов, которое поле ввода может отображать за раз. Например, в этом примере поле ввода url имеет ширину 30 символов:
input id="myURL" name="myURL" type="url" size="30" />
Длина значения элемента
size не зависит от ограничения длины введенного URL. Вы можете указать минимальную длину в символах для введенного URL, используя атрибут minlength ; аналогичным образом используйте maxlength , чтобы установить максимальную длину введенного URL.. Если maxLength превышает size , содержимое поля ввода будет прокручиваться по мере необходимости, чтобы показать текущий выбор или точку вставки при манипулировании содержимым.
В приведенном ниже примере создается поле ввода адреса URL шириной 30 символов, требующее, чтобы содержимое было не короче 10 и не длиннее 80 символов.
input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" />
Примечание. Эти атрибуты также влияют на проверку; значение короче или длиннее указанной длины minimum/maximum будет классифицироваться как недопустимое; кроме того, большинство браузеров не позволят пользователю ввести значение, превышающее указанную максимальную длину.
Предоставление параметров по умолчанию
Предоставление единого значения по умолчанию с использованием атрибута value
Как всегда, вы можете указать значение по умолчанию для поля ввода url , установив его атрибут value :
input id="myURL" name="myURL" type="url" value="http://www.example.com" />
Предлагаемые значения
Сделав еще один шаг, вы можете предоставить список параметров по умолчанию, из которых пользователь может выбирать, указав атрибут list . Это не ограничивает пользователя этими параметрами, но позволяет ему быстрее выбирать часто используемый URLs. Это также намекает на autocomplete . Атрибут list указывает идентификатор , который, в свою очередь, содержит один элемент для каждого предлагаемого значения; value каждого option является соответствующим предлагаемым значением для поля ввода URL.
input id="myURL" name="myURL" type="url" list="defaultURLs" /> datalist id="defaultURLs"> option value="https://developer.mozilla.org/"> option> option value="http://www.google.com/"> option> option value="http://www.microsoft.com/"> option> option value="https://www.mozilla.org/"> option> option value="http://w3.org/"> option> datalist>
Использование меток для предлагаемых значений
Вы можете включить атрибут label в один или все ваши элементы , чтобы предоставить текстовые метки. Некоторые браузеры могут отображать только метки, в то время как другие могут отображать и метку, и URL..
input id="myURL" name="myURL" type="url" list="defaultURLs" /> datalist id="defaultURLs"> option value="https://developer.mozilla.org/" label="MDN Web Docs"> option> option value="http://www.google.com/" label="Google"> option> option value="http://www.microsoft.com/" label="Microsoft"> option> option value="https://www.mozilla.org/" label="Mozilla"> option> option value="http://w3.org/" label="W3C"> option> datalist>
Validation
Предупреждение. Проверка HTML form не заменяет сценарии, обеспечивающие правильность формата введенных данных. Для кого-то слишком просто внести коррективы в HTML, которые позволят им обойти проверку или полностью удалить ее. Также возможно, что кто-то полностью обойдет ваш HTML и отправит данные непосредственно на ваш сервер. Если ваш код на стороне сервера не может проверить данные, которые он получает, может произойти катастрофа, когда данные в неправильном формате (или данные, которые слишком велики, имеют неправильный тип и т. д.) введены в вашу базу данных.
Basic validation
Браузеры, поддерживающие тип ввода url , автоматически обеспечивают проверку, чтобы в поле ввода вводился только текст, соответствующий стандартному формату для URLs.
Синтаксис URL довольно сложен. Определяется WHATWG’s URL Living Standard и описан для новичков в нашей статье What is a URL?
Требуется изготовление URL
Как упоминалось ранее, чтобы сделать запись URL обязательной перед отправкой form (вы не можете оставить поле blank),, вам просто нужно включить атрибут required во входные данные.
form> input id="myURL" name="myURL" type="url" required /> button>Submit button> form>
Попробуйте отправить вышеуказанный form без введенного значения, чтобы посмотреть, что произойдет.
Pattern validation
Если вам нужно ограничить введенный URL дальше, чем просто «любая строка, похожая на URL», вы можете использовать атрибут pattern , чтобы указать regular expression , значение которого должно совпадать, чтобы значение было действительным.
Например, допустим, вы создаете страницу поддержки для сотрудников Myco, Inc., которая позволит им обратиться за помощью в свой ИТ-отдел, если на одной из их страниц возникнет проблема. В нашем упрощенном form пользователю необходимо ввести URL страницы, на которой возникла проблема, и сообщение с описанием неисправности. Но мы хотим, чтобы URL успешно проверял только то, находится ли введенный URL в домене Myco.
Поскольку входные данные типа url проверяются как на стандартную проверку URL, так и на заданную pattern , это легко реализовать. Давайте посмотрим, как:
form> div> label for="myURL">Enter the problem website address: label> input id="myURL" name="myURL" type="url" required pattern=".*\.myco\..*" title="The URL must be in a Myco domain" /> span class="validity"> span> div> div> label for="myComment">What is the problem? label> input id="myComment" name="myComment" type="text" required /> span class="validity"> span> div> div> button>Submit button> div> form>
Прежде всего указывается атрибут required , что делает обязательным предоставление действительного URL.
Во-вторых, на входе url мы устанавливаем pattern на «.*\.myco\..*» . Это простое регулярное выражение requests представляет собой строку, содержащую любое количество символов, за которой следует точка, за которой следует «myco», за которой следует точка, за которой следует любое количество символов. И поскольку браузер запускает как стандартный фильтр URL, так и наш пользовательский шаблон для указанного текста, мы получаем проверку, которая говорит: «Убедитесь, что это действительный URL, а также в Myco domain.»».
Это не идеально, но достаточно для требований этой простой демонстрации.
Рекомендуется использовать атрибут title вместе с pattern . Если вы это сделаете, title должен описать шаблон; он должен объяснять, какой формат должны иметь данные, а не какую-либо другую информацию. Это связано с тем, что title может отображаться или произноситься как часть сообщения об ошибке проверки. Например, браузер может отобразить сообщение «The, введенный текст не соответствует требуемому pattern.», за которым следует указанный вами title . Если ваш title похож на «URL»,, результатом будет сообщение «The, введенный текст не соответствует требуемому шаблону. URL»,, что не очень удобно для пользователя.
Вот почему вместо этого мы указываем, что строка «The URL должна находиться в домене myco». При этом результирующее полное сообщение об ошибке может выглядеть примерно так: введенный текст «The не соответствует требуемому шаблону. URL должен находиться в домене myco domain.».
Примечание. Если у вас возникли проблемы при написании регулярных выражений проверки и они не работают должным образом, проверьте консоль браузера; там могут быть полезные сообщения об ошибках, которые помогут вам решить проблему.
Examples
Больше нечего сказать о входах типа url ; см. многочисленные примеры в разделах Pattern validation и Using URL inputs .
input ( type=url ) element
If you don’t know what an element is or how you must use it, I recommend you read the » HTML tags and attributes» tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The input element, having the «url» value in its type attribute, represents a field for a single absolute URL . The control associated to this field is a text box that allows users to edit a single line of plain text.
Browsers could perform some kind of validation on URL inputs. In such cases, the pattern attribute may be used to perform a second check after the standard validation, allowing authors to set further restrictions.
Browsers, aware of the type of data this field should receive, may provide autocompletion options based on the «History» or «Favorite websites» the user has browsed in the past.
Browser support for URL inputs is incomplete. Authors may need to rely on client-side scripts to provide extra functionality for this type of fields, until support grows.
Examples
In our first example we’ll create a form with a URL input. Here, we’ll make use of the placeholder attribute, which has been introduced in HTML 5. This attribute allows us to give a hint about the data that’s expected to be provided in the control, like examples or short descriptions. This hint will be displayed inside the control (as if it were the value) only while the control has no real value. When the user starts typing, the placeholder text will be removed from the control.
action="../../form-result.php" method="post" target="_blank"> Website: type="url" name="website" placeholder="Do you have a website?"> type="submit" value="Send data"> Now we’ll use the value attribute to provide the control with an initial value, that will be set when the page loads and when the reset button is pressed. Here we’ll use it to suggest an option that we think the user would choose, but it can be handy in other situations, like when showing values the user has already entered in a previous form.
action="../../form-result.php" method="post" target="_blank"> Favorite search engine: type="url" name="searchengine" value="http://www.google.com"> type="submit" value="Send data"> type="reset" value="Reset form"> Now let’s check another new attribute in HTML 5: list . This attribute links the control to a datalist element by referencing its id attribute. The associated datalist provides a number of suggestions that users can pick to automatically fill the control’s value.
Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.
action="../../form-result.php" method="post" target="_blank"> Favorite search engine: type="url" name="searchengine" list="urlslist"> type="submit" value="Send data"> >"urlslist"> value="http://www.duckduckgo.com"> value="http://www.google.com"> value="http://www.yahoo.com"> value="http://www.bing.com"> Our final example combines two attributes, also new in HTML 5, that usually work well together. These are pattern and required . Their importance becomes evident when the author needs to set rules about the format of data that can be input in a control.
The pattern attribute, helps by estabishing a regular expression that any input value must comply with. When it’s set, the title attribute takes particular relevance, as it’s responsible of providing an explanation about the rules that apply on the field. Browsers may use this information to compose the error message shown to the user after an unsuccessful submission.
In the other hand, the required attribute disallows users to leave the field empty. Both attributes, together, indicate that the control must be filled and specify how it must be filled.
The presence of these attributes implies that form submission will be prevented until their requirements are fulfilled. Browsers will show error messages when users attempt to submit non complying fields.
A regular expression is a sequence of characters that forms a search pattern, mainly for use in pattern matching with strings or search-and-replace like operations.
Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.
action="../../form-result.php" method="post" target="_blank"> Your website (.com only): type="url" name="website" pattern=".+\.com" title="Only well-formed .com URLs are allowed"> type="submit" value="Send data"> Attributes
Specific attributes
autofocus
A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value «autofocus» or the empty string («»), or if it’s just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.
Website: type="url" name="website" autofocus> disabled
A boolean value indicating wether the control is disabled or not. If the attribute takes the value «disabled» or the empty string («»), or if it’s just present, the control will be disabled.
Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren’t sent when the form is submitted.
action="../../form-result.php" method="post" target="_blank"> URL: type="url" name="urlfield" value="http://" disabled> type="submit" value="Send data"> form
The value of the id attribute of the form with which this control is associated to.
This attribute is new in HTML 5 and helps defining the pertenence of controls in nested or distant forms.
Website: type="url" name="website" form="form1"> >"form1" action="../../form-result.php" method="post" target="_blank"> type="submit" value="Send data"> list
A token matching the value of the id attribute of the datalist this control is assopciated with. The datalist referenced by this attribute will provide a number of suggestions that users can pick to autocomplete the control.
Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.
action="../../form-result.php" method="post" target="_blank"> Favorite social network: type="url" name="socialnetwork" list="sociallist"> type="submit" value="Send data"> >"sociallist"> value="http://www.facebook.com"> value="http://www.twitter.com"> value="http://plus.google.com"> value="http://www.instagram.com"> maxlength
An integer indicating the maximum number of characters the value of this control may have.
Authors shouldn’t rely on the maxlength attribute. Users can always submit the form with browsers (some intentionally) not supporting this feature.
action="../../form-result.php" method="post" target="_blank"> Website: type="url" name="website" maxlength="40"> type="submit" value="Send data"> minlength
An integer indicating the minimum number of characters the value of this control may have.
Authors shouldn’t rely on the minlength attribute. Users can always submit the form with browsers (some intentionally) not supporting this feature.
Browser support for the minlength attribute is extremely low (as of 2014/12/18). Authors shouldn’t rely on this attribute until support grows.
action="../../form-result.php" method="post" target="_blank"> Website: type="url" name="website" minlength="8"> type="submit" value="Send data"> name
A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.
Currently, the value isindex , formerly used in a special way by some browsers and included in the HTML standard, isn’t permitted in this attribute.
action="../../form-result.php" method="post" target="_blank"> New URL: type="url" name="newurl"> type="submit" value="Send data"> pattern
A regular expression to match against the control’s value before the form is submitted. This attribute can be used to specify a format that users will have to comply with when filling the field. If this pattern isn’t respected, an error message will be shown upon submission and the process will be cancelled (unless the formnovalidate attribute is present in the form or submission button).
The title attribute takes a special meaning when this attribute is present: it’s expected to provide an explanation about the rules that apply on the field. Browsers may use the information in title to compose the error message shown to the user when the process of submission is cancelled.
A regular expression is a sequence of characters that forms a search pattern, mainly for use in pattern matching with strings or search-and-replace like operations.
Browsers could perform some kind of validation on URL inputs. In such cases, the pattern attribute may be used to perform a second check after the standard validation, allowing authors to set further restrictions.
action="../../form-result.php" method="post" target="_blank"> Base URL (.com only): type="url" name="baseurl" pattern="http://[A-Za-z]+[A-Za-z0-9\.-]*[^\.]\.com" title="A valid value must begin with the string 'http://', followed by a valid .com domain name"> type="submit" value="Send data"> placeholder
A run of text that’s supposed to provide a hint about how the field should be filled in, like examples or short descriptions. Browsers may display the contents of this attribute in the control while it has no value. As soon as users start to write down their own text, the placeholder text should dissapear from the control.
Authors shouldn’t use this attribute to replace the label. Labels are suposed to provde a title, while the placeholder should give a small hint about how to fill the field. Morover, the placeholder text is expected to disapear when the user starts typing in the control.
action="../../form-result.php" method="post" target="_blank"> Website: type="url" name="website" placeholder="http://www.you-website.com"> type="submit" value="Send data"> readonly
A boolean value instructing the browser to prevent the user from changing the control’s value. If this attribute has the value «readonly» or the empty string («»), or if it’s just present, the user won’t be allowed to change the value in the control.
Although this attribute prevents the control’s value from being edited, not all interaction is blocked: users will still be able to select and copy the text in the control.
action="../../form-result.php" method="post" target="_blank"> Resource: type="url" name="resource" value="http://" readonly> type="submit" value="Send data"> required
A boolean value indicating wether this control can be left empty or not. If this attribute has the value «required» or the empty string («»), or if it’s just present, the user will have to fill the control in order to be able to submit the form .
If a control with the required attribute present is left blank, supporting browsers will throw an error upon submission and cancel the process immediately.
Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.
action="../../form-result.php" method="post" target="_blank"> Resource: type="url" name="resource" required> type="submit" value="Send data"> size
An integer to use as width of the element, in number of characters that should be visible in the control simultaneously.
As characters usually don’t have the same width, browsers may define a character witdth according to certain criteria (like average or maximum width).
action="../../form-result.php" method="post" target="_blank"> URL: type="url" name="urlfield" size="20"> type="submit" value="Send data"> type
A value indicating the type of the field that this element represents. There are twenty two possible values (case-insensitive):
- hidden: a hidden control used to send information to the server, typically managed by scripts.
- text: a control used to input a single-line piece of text.
- search: same as text but for search purposes.
- tel: a control used to provide a telephone number.
- url: a text box used to input a single and absolute URL .
- email: a control designed to edit one or more e-mail addresses.
- password: a text box for editing passwords, where the characters are represented by dots.
- date: a control to input a specific date.
- month: a control to input a specific month.
- week: a control to input a specific week.
- time: a control to input a specific time.
- datetime-local: a control to input a specific local date and time.
- number: a control to input a number.
- range: a control to input one or two numbers inside a range.
- color: a control to input a color.
- checkbox: a control to input a boolean value (true/false).
- radio: a control used to choose one single option among many.
- file: a control used to upload files to the server.
- submit: a button used to submit the form.
- image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
- reset: a button used to reset the form’s controls to their default values.
- button: a button with no default action associated.
When this attribute isn’t present, the element behaves as it would have the value «text».
type="url" name="website"> value
An initial value for the control, that will be set when the page loads and when the reset button is pressed.
action="../../form-result.php" method="post" target="_blank"> Favorite social network: type="url" name="socialnetwork" value="http://www.facebook.com"> type="submit" value="Send data"> type="reset" value="Reset form"> Global attributes
For information about global attributes refer to this list of global attributes in HTML 5.
Events
Global events
For information about global events refer to this list of global events in HTML 5.
Tutorials
- How to begin
- HTML tags and attributes
- The document structure
- Content grouping and structure
- Links in HTML
- Organizing a website
- Tables in HTML
- Basic HTML forms
- Cascading Style Sheets (CSS)
Reference
- HTML elements
- Character encoding
- Character entity reference
- Global events
- Global attributes
- Color codes
- Language tags
- Internet media types
- URIs and URLs
HTML Тег
Параметр определяет поле для ввода URL.
Входное значение автоматически проверяется перед отправкой формы.
Совет: Всегда добавляйте тег для лучшей доступности!
Поддержка браузеров
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.
| Атрибут | |||||
|---|---|---|---|---|---|
| type=»url» | Да | 10.0 | Да | Да | 10.1 |
Синтаксис
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.