diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
commit | c058fa0fb22dc40ef0225b21a97578cddd0aaffa (patch) | |
tree | df20f8b4c724b61cb9c34cdb450a7ac77d690bd0 /files/ru/orphaned/learn | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.gz translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.bz2 translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.zip |
unslug ru: move
Diffstat (limited to 'files/ru/orphaned/learn')
-rw-r--r-- | files/ru/orphaned/learn/how_to_contribute/index.html | 85 | ||||
-rw-r--r-- | files/ru/orphaned/learn/html/forms/html5_updates/index.html | 149 |
2 files changed, 234 insertions, 0 deletions
diff --git a/files/ru/orphaned/learn/how_to_contribute/index.html b/files/ru/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..caed3b7970 --- /dev/null +++ b/files/ru/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,85 @@ +--- +title: Как сделать вклад в Обучающую Зону MDN +slug: Learn/Как_сделать_вклад +tags: + - Вклад + - Документация + - Новичку + - Новичок + - Обучение + - Правила + - Руководство +translation_of: Learn/How_to_contribute +--- +<div>{{LearnSidebar}}</div> + +<p>Оказались ли вы здесь впервые или в результате глубокого поиска, вас, вероятно, привело сюда желание помочь Обучающей Зоне MDN. И это отличная новость!</p> + +<p><span class="seoSummary">На этой странице вы найдёте всё необходимое для того, чтобы помочь улучшить обучающий контент MDN. Здесь есть много вещей, которые вы можете сделать, в зависимости от того, сколько времени у вас есть и кем вы являетесь <a href="#Я_новичок">новичком</a>, <a href="#Я_веб_разработчик">веб-разработчиком</a> или <a href="#Я_учитель">учителем</a>.</span></p> + +<div class="note"> +<p>Руководство по написанию новой статьи в обучающем пространстве можно посмотреть на странице <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">How to write an article to help people learn about the Web</a>.</p> +</div> + +<h2 id="Найдите_конкретные_задачи">Найдите конкретные задачи</h2> + +<p><strong>Для организации своих задач участники сообщества используют <a href="https://trello.com/b/LDggrYSV">Trello board</a>. Там вы можете найти конкретные задачи проекта, ожидающие выполнения. Если вы хотите использовать её, просто <a href="https://trello.com/signup">создайте Trello аккаунт</a> и напишите Chris Mills, чтобы он дал доступ к записи на доску.</strong></p> + +<p>Принятие участия - это также отличный способ повеселиться, одновременно изучая новое. Если вы запутались или у вас есть вопросы, не стесняйтесь написать нам в <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">наш список рассылки</a> или <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC канал</a> (подробности указаны внизу этой страницы). <a href="https://developer.mozilla.org/en-US/profiles/chrisdavidmills">Chris Mills</a> заведует Обучающей Зоной — вы также можете попробовать написать ему напрямую.</p> + +<p>В следующих разделах описаны некоторые идеи касательно задач, которыми вы могли бы заняться.</p> + +<h2 id="Я_новичок">Я новичок</h2> + +<p>Это круто! Новички очень важны для создания и предоставления отзывов об материалах для обучения. Ваш уникальный взгляд представителя целевой аудитории данных статей может сделать вас бесценным участником нашей команды. В самом деле, если вы "застряли" в процессе изучения какой-либо темы по одной из наших статей, или находите эту статью в некотором роде запутанной, вы можете либо исправить её сами, либо сообщить об этой проблеме нам, чтобы мы позаботились о её исправлении.</p> + +<p>Вот как, например, вы можете помочь:</p> + +<dl> + <dt><a href="/ru/docs/MDN/Contribute/Howto/Tag">Добавьте теги к нашим статьям</a> (<em>5 мин</em>)</dt> + <dd>Добавление тегов к контенту MDN - один из самых легких способов внести свой вклад. Помощь в этом направлении очень ценна, поскольку теги широко применяются в MDN, чтобы вписать информацию в контекст. Начать можно с просмотра списков <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">словарных</a> и <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">обучающих статей</a>.</dd> + <dt><a href="/ru/docs/Словарь">Прочитайте и проверьте статью в словаре</a> (<em>5 мин</em>)</dt> + <dd>Нам очень важен ваш взгляд, как начинающего, на наш контент. Если вы считаете, что статья в словаре слишком сложна, значит, её необходимо улучшить. Не стесняйтесь вносить любые необходимые, на ваш взгляд, изменения. Если вам кажется, что у вас недостаточно навыков, чтобы самостоятельно отредактировать статью, можете сообщить нам о ней в нашем <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">списке рассылки</a>.</dd> + <dt><a href="ru/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Напишите новую статью для словаря</a> (<em>20 минут</em>)</dt> + <dd>Это самый эффективный способ узнать что-то новое. Выберите понятие, которое вам хотелось бы изучить, и в процессе изучения пишите о нем статью для словаря. Объяснить какую-либо вещь другим - отличный способ закрепить знание в голове, и разобраться самому, при этом помогая другим. Everybody wins!</dd> + <dt><a href="/en-US/Learn/Index">Прочитайте и проверьте обучающую статью</a> (<em>2 часа</em>)</dt> + <dd>Эта задача очень похожа на проверку статей в словаре (см. выше), она лишь занимает больше времени, поскольку обычно такие статьи значительно длиннее.</dd> +</dl> + +<h2 id="Я_веб-разработчик">Я веб-разработчик</h2> + +<p>Фантастика! Ваши технические навыки - именно то, что помогает нам убедиться в технической точности контента для новичков. Поскольку данная конкретная часть MDN посвящена обучению Вебу, постарайтесь делать ваши объяснения максимально простыми, но не чересчур простыми, они не должны стать бесполезны. Понятность важнее, чем чрезмерная точность.</p> + +<dl> + <dt><a href="/ru/docs/Словарь">Прочитайте и проверьте статью в словаре</a> (<em>5 мин</em>)</dt> + <dd>Нам важно, чтобы вы, как веб-разработчик, убедились в том, что наш контент технически точен, но при этом не слишком сложен. Не стесняйтесь делать любые изменения, которые вам покажутся нужными. Если вы хотите обсудить контент до того, как приступать к редактированию, напишите нам в <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">список рассылки</a> или <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC канал</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Напишите новую статью для словаря </a>(<em>20 минут</em>)</dt> + <dd>Разъяснение технического жаргона - хороший способ научиться быть одновременно технически точным и простым. Новички будут вам за это благодарны. У нас есть <a href="/en-US/docs/Glossary#Contribute">много терминов без определений</a>, которые нуждаются в вашем внимании. Выберите один и приступайте!</dd> + <dt><a href="/en-US/Learn/Index">Прочитайте и проверьте обучающую статью</a> (<em>2 часа</em>)</dt> + <dd>Это тоже самое, что и проверка статьи в словаре (см.выше), но занимает больше времени, поскольку обычно такие статьи значительно длиннее.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Напишите новую обучающую статью</a> (<em>4 часа или больше</em>)</dt> + <dd>MDN не хватает ясных и доходчивых статей об использовании веб-технологий (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, и т.д). Кроме того, у нас есть старый контент, который нуждается в редактуре и изменениях. Доведите ваши умения до предела, чтобы сделать веб-технологии пригодными для использования даже начинающими.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Создайте упражнения, примеры кода или интерактивные обучающие инструменты</a> (<em>? часов</em>)</dt> + <dd>Все наши обучающие статьи требуют материалов, как мы это называем, "активного обучения", так как эффективнее всего люди учатся, выполняя что-либо самостоятельно. Под такого рода материалами подразумеваются упражнения или интерактивный контент, которые помогают пользователю применять и оперировать понятиями, описанными в статье. Существует множество способов создания контента активного обучения, от написания образцов кода с помощью <a href="http://jsfiddle.net" rel="external">JSFiddle</a> или подобных инструментов, до построения fully hackable интерактивного контента в <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Раскройте ваш творческий потенциал!</dd> +</dl> + +<h2 id="Я_учитель">Я учитель</h2> + +<p>У MDN долгая история совершенствования в техническом плане, но нам не хватает глубины понимания того, как лучше обучать новичков. Именно на этом этапе мы нуждаемся в вас, как в преподавателях и педагогах. Вы можете помочь нам гарантировать, что наши материалы обеспечивают хороший, практикоориентированный образовательный путь для наших читателей.</p> + +<dl> + <dt><a href="/ru/docs/Словарь">Прочитайте и проверьте статью в словаре</a> (<em>15 мин</em>)</dt> + <dd>Просмотрите словарную статью и не стесняйтесь вносить любые необходимые, на ваш взгляд, изменения. Если вы хотели бы обсудить контент перед тем, как редактировать, напишите нам в наш <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">список рассылки</a> или <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC канал</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Напишите новую статью для словаря</a> (<em>1 час</em>)</dt> + <dd>Новички очень нуждаются в ясных, простых определениях терминов и базовом обзоре понятий в словаре. Ваш педагогический опыт может помочь нам создать превосходные словарные статьи; у нас есть <a href="/en-US/docs/Glossary#Contribute">множество терминов без определений</a>, которые нуждаются в вашем внимании. Выбирайте один из них и приступайте.</dd> + <dt><a href="/en-US/docs/tag/needsSchema">Добавьте илллюстрации и/или схемы в статью</a> (<em>1 час</em>)</dt> + <dd>Как вам, наверное, известно, иллюстрации - бесценная часть любого обучающего материала. Зачастую именно их нам не хватает на MDN, и ваши навыки могут улучшить ситуацию в данной области. Посмотрите список статей, у которых <a href="/en-US/docs/tag/needsSchema">отсутствует иллюстративный материал</a>, и выберите одну, к которой вам бы хотелось создать графику.</dd> + <dt><a href="/en-US/Learn/Index">Прочитайте и проверьте обучающую статью</a> (<em>2 часа</em>)</dt> + <dd>Это тоже самое, что и проверка статьи в словаре (см.выше), но занимает больше времени, поскольку обычно такие статьи значительно длиннее.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Напишите новую обучающую статью</a> (<em>4 часа</em>)</dt> + <dd>Нам нужны простые, доходчивые статьи о Web экосистеме и прочих практических темах в связанных областях. Поскольку данные обучающие статьи должны быть скорее образовательными, чем охватывать целиком всю имеющуюся информацию, ваш опыт касательно того, что именно нужно осветить и как, будет очень ценен.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Создайте упражнения, <abbr title="Multiple Choice Tests">викторины</abbr> или интерактивные обучающие инструменты</a> (<em>? часа</em>)</dt> + <dd>Все наши обучающие статьи требуют материалов "активного обучения", то есть упражнений или интерактивного контента, которые помогают пользователю углубиться и научиться использовать концепции, описанные в статье. В этой области вы можете сделать многое, от создания викторин до построения fully hackable интерактивного контента с <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Раскройте вашу творческую сторону!</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Создайте пути обучения</a> (<em>? часа</em>)</dt> + <dd>Чтобы предоставить прогрессивные и доступные для понимания руководства, нам необходимо объединять контент в пути. Это способ собрать существующий контент и выяснить, чего в нем недостает для написания обучающей статьи.</dd> +</dl> diff --git a/files/ru/orphaned/learn/html/forms/html5_updates/index.html b/files/ru/orphaned/learn/html/forms/html5_updates/index.html new file mode 100644 index 0000000000..ad5a8bc7e6 --- /dev/null +++ b/files/ru/orphaned/learn/html/forms/html5_updates/index.html @@ -0,0 +1,149 @@ +--- +title: Формы в HTML +slug: Web/Guide/HTML/Формы_в_HTML +tags: + - HTML + - HTML5 + - Введение + - Интернет + - Любитель + - Новичок + - Обзор + - Руководство + - Формы +translation_of: Learn/HTML/Forms/HTML5_updates +--- +<p>Элементы и атрибуты форм в <strong>HTML5</strong> предоставляют большие возможности семантической верстки, чем HTML4, а также позволяет отказаться от использования JavaScript и CSS, которое было ранее необходимо для HTML4. Большие возможности в формах HTML5 делают удобным для пользователей отправление информации с различных веб-сайтов. Они также предоставляют эти возможности для тех пользователей, у которых отключена поддержка JavaScript.</p> + +<p><span class="seoSummary">Эта статья описывает изменения в HTML-формах, представленных в HTML5. Для более подробного руководства по использованию формами, просмотрите наше обширное<a href="/ru/docs/Web/Guide/HTML/Forms"> руководство по HTML-формам</a>.</span></p> + +<h2 id="The_input_element" name="The_input_element">Элемент <code><input></code></h2> + +<p>В элементе <code>{{HTMLElement("input")}}</code> появились новые значения для атрибута {{htmlattrxref("type", "input")}}. (Просмотрите справочник {{HTMLElement("input")}} для получения полного списка атрибутов, значений и их использования для этого элемента.)</p> + +<ul> + <li><code>search</code>: Элемент представляет из себя поле для поиска. Переходы строк автоматически удаляются из значения <code>value</code>.</li> + <li><code>tel</code>: Элемент представляет из себя поле для редактирования номера телефона. Переходы строк автоматически удаляются из значения <code>value</code>. Вы можете использовать атрибуты, такие как: {{htmlattrxref("pattern", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы запретить ввод неподходящих символов.</li> + <li><code>url</code>: Элемент представляет из себя поле для редактирования <a class="external" href="https://ru.wikipedia.org/wiki/URL" title="http://en.wikipedia.org/wiki/URL">URL</a>. Переходы строк и пробелы автоматически удаляются из значения <code>value</code>.</li> + <li> + <p><code>email</code>: Элемент представляет из себя поле для ввода одного адреса электронной почты. Переходы строк автоматически удаляются из значения <code>value</code>. Может быть предоставлен недействительный адрес эл. почты, но поле ввода запретит отправку формы, если эл. адрес почты не будет соответствовать нормам ABNF.</p> + + <div class="note"><strong>Заметьте:</strong> Если установлен атрибут {{htmlattrxref("multiple", "input")}}, то может быть введено несколько адресов электронной почты, разделенных запятой, но, в данный момент, такая возможность не реализована в Firefox.</div> + </li> +</ul> + +<p>Также, элемент {{HTMLElement("input")}} получил новые атрибуты:</p> + +<ul> + <li>{{htmlattrxref("list", "input")}}: ID элемента {{HTMLElement("datalist")}}, в котором элементы {{HTMLElement("option")}} используются как подсказки для текстового поля.</li> + <li>{{htmlattrxref("pattern", "input")}}: Регулярное выражение, по которому поверяются вводимые данные. Может использоваться в элементе {{htmlattrxref("type", "input")}} со значениями <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, <code>и email</code>.</li> + <li>{{htmlattrxref("form", "input")}}: Строка, указывающая, к какому элементу {{HTMLElement("form")}} принадлежит элемент. Элемент может быть частью только одной формы.</li> + <li>{{htmlattrxref("formmethod", "input")}}: Строка, указывающая метод передачи данных (GET or POST), когда форма отправляется на сервер. Он перекрывает значение атрибута {{htmlattrxref("method", "form")}} элемента {{HTMLElement("form")}}, если установлен. Работает только, если {{htmlattrxref("type", "input")}} является <code>image</code> <code>или submit, </code>и если установлен атрибут {{htmlattrxref("form", "input")}}.</li> + <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Строка, указывающая на сообщение об ошибке, которое будет показано, если это поле не пройдет валидацию. Этот атрибут - расширение Mozilla и не является стандартом.</li> +</ul> + +<h2 id="Текстовое_поле">Текстовое поле</h2> + +<p><code><input></code> с атрибутом <code>type="text"</code> определяет однострочное поле для ввода.</p> + +<pre class="brush: html"><form> + Введите свое имя: <input type="text" name="name"> +</form></pre> + +<h2 id="Флажок"><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Флажок</strong></h2> + +<p><code><input></code> с атрибутом <code>type="checkbox"</code> определяет флажок.</p> + +<pre class="brush: html"><input type="checkbox" name="chk" value="" checked> Подписаться на рассылку</pre> + +<h2 id="The_form_element" name="The_form_element">Переключатель</h2> + +<p><code><input></code> с атрибутом <code>type="radio"</code> определяет радио кнопку.</p> + +<pre class="brush: html"><form> + <input type="radio" name="animal" value="monkey">Обезьяна<br> + <input type="radio" name="animal" value="cat">Кот<br> + <span style="font-size: 1rem;"><input type="radio" name="</span>animal<span style="font-size: 1rem;">" value="other">Другое +</span></form></pre> + +<h2 id="The_form_element" name="The_form_element"><code>Элемент <form></code></h2> + +<p>Элемент {{HTMLElement("form")}} получил новый атрибут:</p> + +<ul> + <li>{{htmlattrxref("novalidate", "form")}}: Этот атрибут предотвращает валидацию формы перед отправкой.</li> +</ul> + +<h2 id="The_datalist_element" name="The_datalist_element"><code>Элемент <datalist></code></h2> + +<p>Элемент {{HTMLElement("datalist")}} представляет собой список элементов {{HTMLElement("option")}}, который необходимо предложить при вводе поля {{HTMLElement("input")}}.</p> + +<p>Вы можете использовать атрибут {{htmlattrxref("list", "input")}} в элементе {{HTMLElement("input")}}, чтобы связать текстовое поле с элементом {{HTMLElement("datalist")}}.</p> + +<h2 id="The_output_element" name="The_output_element"><code>Элемент <output></code></h2> + +<p>Элемент <code>{{HTMLElement("output")}}</code> представляет собой результат каких-либо вычислений.</p> + +<p>Вы можете использовать атрибут {{htmlattrxref("for", "output")}} для указания связи между элементом <code>{{HTMLElement("output")}}</code> и другими элементами в документе, которые повлияли на расчет (к примеру, поля для ввода параметров). Значением атрибута {{htmlattrxref("for", "output")}} является список ID других элементов, разделенный пробелами.</p> + +<p>{{non-standard_inline}} Gecko 2.0 (but not necessarily other browser engines) supports defining custom validity constraints and error messages for {{HTMLElement("output")}} elements, and therefore applies the {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, and {{Cssxref(":-moz-ui-valid")}} CSS pseudo-classes to them. This can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").</p> + +<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">Атрибут placeholder</h2> + +<p>Атрибут {{htmlattrxref("placeholder", "input")}} в элементах <code>{{HTMLElement("input")}}</code> и <code>{{HTMLElement("textarea")}}</code> отображает подсказки для пользователей, которые показывают, что можно ввести в эти поля. Текст в placeholder не должен содержать символов перевода строки или возврата каретки.</p> + +<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">Атрибут autofocus</h2> + +<p>Атрибут {{htmlattrxref("autofocus", "input")}} позволяет указать для элемента формы автоматическое получение фокуса после полной загрузки страницы, если пользователь сам не переместит фокус на другой элемент, например, этот атрибут можно указать для различных полей ввода. Только один элемент в документе должен иметь этот атрибут, который содержит Boolean значение. Этот атрибут может быть установлен в <code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}} </code>и <code>{{HTMLElement("textarea")}}</code> элементах. {{htmlattrxref("autofocus", "input")}} нельзя установить в элементах input c атрибутом type установленным в значение hidden (это означает, что ты не можешь автоматически устанавливать фокус в скрытых полях).</p> + +<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">DOM свойство label.control</h2> + +<p>DOM интерфейс <code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> , помимо свойств, относящихся к HTML элементу <code>{{HTMLElement("label")}}</code> , предоставляет дополнительное свойство <strong> control</strong>, возвращающее поле ввода, для которого предназначен <code>{{HTMLElement("label")}}</code>. Оно либо указывается в атрибуте <code>{{htmlattrxref("for", "label")}}</code> , либо является первым вложенным полем ввода.</p> + +<h2 id="Constraint_Validation" name="Constraint_Validation">Constraint Validation</h2> + +<p>HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about the input data.</p> + +<p>If the <code>title</code> attribute is set on the {{HTMLElement("input")}} element, its value is used as tooltip. However, if the validation fails, this tooltip text will be replaced with the associated error message. It is possible to customize this error message using the non-standard {{htmlattrxref("x-moz-errormessage")}} attribute or when calling the <code>setCustomValidity()</code> method.</p> + +<pre class="brush: html"><input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail"></pre> + +<div class="note"><strong>Note:</strong> Constraint validation is not supported on {{HTMLElement("button")}} elements in a form; to style a button based on the validity of the associated form, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class.</div> + +<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">HTML Syntax for Constraint Validation</h3> + +<p>The following items in HTML5 syntax can be used to specify constraints on form data.</p> + +<ul> + <li>The {{htmlattrxref("required", "input")}} attribute on the {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements indicates that a value must be supplied. (On the {{HTMLElement("input")}} element, {{htmlattrxref("required", "input")}} applies only in conjunction with certain values of the {{htmlattrxref("type", "input")}} attribute.)</li> + <li>The {{htmlattrxref("pattern", "input")}} attribute on the {{HTMLElement("input")}} element constrains the value to match a specific regular expression.</li> + <li>The {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes of the {{HTMLElement("input")}} element constrain the minimum and maximum values that can be entered.</li> + <li>The {{htmlattrxref("step", "input")}} attribute of the {{HTMLElement("input")}} element (when used in combination with the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.</li> + <li>The {{htmlattrxref("maxlength", "input")}} attribute of the {{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements constrains the maximum number of characters (in Unicode code points) that the user can enter.</li> + <li>The values <code>url</code> and <code>email</code> for the {{htmlattrxref("type", "input")}} constrain the value to being a valid URL or e-mail address, respectively.</li> +</ul> + +<p>In addition, you can prevent constraint validation by specifying the {{htmlattrxref("novalidate", "form")}} attribute on the {{HTMLElement("form")}}, or the {{htmlattrxref("formnovalidate", "button")}} attribute on the {{HTMLElement("button")}} element and on the {{HTMLElement("input")}} element (when {{htmlattrxref("type", "input")}} is <code>submit</code> or <code>image</code>). These attributes indicate that the form is not to be validated when it is submitted.</p> + +<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">Constraint Validation API</h3> + +<p>The following DOM properties and methods related to constraint validation are available to client-side scripts:</p> + +<ul> + <li>On <code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> objects, the <code>checkValidity()</code> method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.</li> + <li>On <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">form-associated elements</a>: + <ul> + <li><code>willValidate</code> property, which is false if the element has constraints that are not satisfied.</li> + <li><code>validity</code> property, which is a <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> object representing the validity states that the element is in (i.e., constraint failure or success conditions).</li> + <li><code>validationMessage</code> property, which is a message describing any constraint failures that pertain to the element.</li> + <li><code>checkValidity()</code> method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.</li> + <li><code>setCustomValidity()</code> method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.</li> + </ul> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Forms Guide</a></li> +</ul> |