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/learn/html | |
| 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/learn/html')
26 files changed, 333 insertions, 4215 deletions
diff --git a/files/ru/learn/html/forms/how_to_build_custom_form_widgets/index.html b/files/ru/learn/html/forms/how_to_build_custom_form_widgets/index.html deleted file mode 100644 index 8a4ca2d6b8..0000000000 --- a/files/ru/learn/html/forms/how_to_build_custom_form_widgets/index.html +++ /dev/null @@ -1,792 +0,0 @@ ---- -title: Как создавать пользовательские виджеты форм -slug: Learn/HTML/Forms/How_to_build_custom_form_widgets -tags: - - HTML - - Web - - Пример - - Продвинутый - - Руководство - - Формы -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</div> - -<p class="summary">Существует много случаев, когда возможностей <a href="/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">стандартных виджетов HTML форм</a> недостаточно. Если вы хотите <a href="/en-US/docs/Advanced_styling_for_HTML_forms">придать лучший вид</a> каким-либо виджетам как, например, {{HTMLElement("select")}}, или вы хотите создать особое поведение виджета, то у вас нет другого выбора, кроме как создать собственные виджеты.</p> - -<p>В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмем пример: переделка элемента {{HTMLElement("select")}} .</p> - -<div class="note"> -<p><strong>Замечание:</strong> Мы сфокусируемся на создании виджетов, а не на том чтобы сделать код универсальным и многоразовым; поэтому будут использоваться некоторый нетривиальный JavaScript код и манипуляции DOM в неизвестном контексте, что выходит за рамки этой статьи.</p> -</div> - -<h2 id="Дизайн_структура_и_семантика">Дизайн, структура и семантика</h2> - -<p>В начале создания пользовательского виджета необходимо обрисовать что именно вы хотите. Это сэкономит драгоценное время. Особенно важно четко определить все состояния вашего виджета. Чтобы это сделать, лучше начать с существущего виджета, состояния и реакции которго хорошо известны, так что вы сможете просто подражать им насколько это возможно.</p> - -<p>В нашем примере мы будем переделывать элемент {{HTMLElement("select")}}. Вот такой результат мы хотим достичь:</p> - -<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p> - -<p>Этот скриншот показывает три основных состояния нашего виджета: нормальное состояние (слева); активное состояние (посередине) и развернутое состояние (справа).</p> - -<p>С точки зрения реакций нужно чтобы наш виджет взаимодействовал как с мышью, так и с клавиатурой, так же как и стандартный виджет. Давайте сначала определим, как виджет приходит в каждое состояние:</p> - -<dl> - <dt>Виджет в нормальном состоянии когда:</dt> - <dd> - <ul> - <li>страница загружается</li> - <li>виджет был активным и пользователь кликает где-то вне виджета</li> - <li>виджет был активным и пользователь перемещает фокус на другой виджет при помощи клавиатуры</li> - </ul> - - <div class="note"> - <p><strong>Замечание:</strong> Перемещение фокуса по странице обычно осуществялется клавишей "tab", но не везде. Например в Safari циклический переход между ссылками на странице осуществляется по усмолчанию <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">комбинацией Option+Tab</a>.</p> - </div> - </dd> - <dt>Виджет в активном состоянии когда:</dt> - <dd> - <ul> - <li>пользователь кликает на него</li> - <li>пользователь нажимает клавишу Tab, и он получает фокус</li> - <li>виджет был в развернутом состоянии и позователь кликает на виджет.</li> - </ul> - </dd> - <dt>Виджет в развернутом состоянии:</dt> - <dd> - <ul> - <li>виджет в любом другом состоянии и пользователь кликает на него</li> - </ul> - </dd> -</dl> - -<p>Теперь, когда мы знаем, как изменяются состояния, важно определить, как изменить значение виджета:</p> - -<dl> - <dt>Значение изменяется когда:</dt> - <dd> - <ul> - <li>пользователь кликает на один-из-вариантов когда виджет в развернутом состоянии</li> - <li>пользователь нажимает клавиши стрелка вверх или вниз когда виджет в активном состоянии</li> - </ul> - </dd> -</dl> - -<p>Наконец, давайте определим, как будут вести себя варианты виджета:</p> - -<ul> - <li>когда виджет развернут, выбранный вариант подсвечен</li> - <li>когда курсор мыши находится над вариантом, он подсвечен и ранее подсвеченный вариант возвращается в его обычное состояние</li> -</ul> - -<p>Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдет если пользователь нажмет клавишу "tab" когда виджет в развернутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто опеределяет какими должны быть реакции виджета сами не реализуют их.</p> - -<p>Другой забавный пример: что произойдет, если пользователь нажмет клавишу вверх или вниз когда виджет находитися в развернутом состоянии? Это немного сложнее. Если вы предположите, что активное и развернутое состояние полностью различны, то ответом снова будет "ничего не произойдет" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развернутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развернутом состоянии (мы определили только то, что произойдет, когда виджет развернется, но ничего более).</p> - -<p>В нашем примере пропущенные спецификации очевидны, так что мы с ними справимся, но это может стать реальной проблемой для новых экзотических виджетов, когда никто не имеет ни малейшего представления о том как они должны реагировать. Всегда лучше потратить время на этом этапе дизайна, потому что если вы плохо определите, или забудете определить реакцию виджета, то будет очень сложно изменять ее, когда пользователи уже привыкнут. Если у вас есть сомнения - спросите мнения у окружающих, и, если позволяет бюджет, не стесняйтесь <a href="https://ru.wikipedia.org/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">выполнять пользовательские тесты</a>. Этот процесс называется UX Design (<a href="https://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%81_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%BC">Дизайн взаимодействия с пользователем</a>). Если вы хотите узнать больше об этой теме, вам следует посетить следующие полезные ресурсы:</p> - -<ul> - <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li> - <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li> - <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li> -</ul> - -<div class="note"> -<p><strong>Замечание: </strong>Также, в большинстве систем, есть способ развернуть элемент {{HTMLElement("select")}} чтобы посмотреть все доступные варианты (это то-же что кликнуть мышью элемент {{HTMLElement("select")}} ). Это возможно комбинацией Alt+Стрелка вниз для Windows и не реализовано в нашем примере —но это будет просто сделать, так как механизм уже реализован дл события <code>click</code>.</p> -</div> - -<h3 id="Определение_структуры_и_семантики_HTML">Определение структуры и семантики HTML</h3> - -<p>Теперь, когда основной функционал виджета определен, пора начать создание виджета. Первым делом определим его HTML структуру и придадим основную семантику. Вот все что нам нужно чтобы переделать элемент {{HTMLElement("select")}}:</p> - -<pre class="brush: html"><!-- Это основной контейнер для нашего виджета. - Аттрибут tabindex позволяет пользователю переместить фокус на виджет. - Позже мы увидим, что лучше его установить через JavaScript. --> -<div class="select" tabindex="0"> - - <!-- Этот контейнер послужит для отображения текущего значения виджета --> - <span class="value">Cherry</span> - - <!-- Этот контейнер содержит все варинты. доступные для нашего виджета. - Так как это список, то есть смысл использовать элемент ul. --> - <ul class="optList"> - <!-- Каждый вариант содержит то значение, которое будет отображено, позже мы увидим - как получить то значение, которое будет отппралено вместе с данными формы --> - <li class="option">Cherry</li> - <li class="option">Lemon</li> - <li class="option">Banana</li> - <li class="option">Strawberry</li> - <li class="option">Apple</li> - </ul> - -</div></pre> - -<p>Обратите внимание на использование имен классов: они описывают каждый соответствующий элемет независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придется жестко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.</p> - -<h3 id="Создание_внешнего_вида_с_помощью_CSS">Создание внешнего вида с помощью CSS</h3> - -<p>Теперь у нас есть структура и мы можем заняться дизайном нашего виджета. Весь смысл создания нашего собственного виджета в том, чтобы мы могли придать ему такой внешний вид, как мы захотим. Поэтому мы разделим нашу работу с CSS на две части: в первой части будут правила CSS абсолютно необходимые чтобы реакции нашего виджета были как у элемента {{HTMLElement("select")}} , а вторая чать будет состоять из красивеньких рюшечек, чтобы виджет выглядел так, как нам нравится.</p> - -<h4 id="Обязательные_стили">Обязательные стили</h4> - -<p>Обязательные стили - это те, которые необходимы для обработки трех состояний нашего виджета..</p> - -<pre class="brush: css">.select { - /* Это создаст контекст позиционирования для списка вариантов */ - position: relative; - - /* Это сделает наш виджет частью текстового потока и одновременно сделает его - изменяемого размера */ - display : inline-block; -}</pre> - -<p>Еще нам нужен дополнительный класс <code>active,</code> чтобы определить, как будет выглядеть наш виджет в активном состоянии. Так как наш виджет может находится в фокусе, то мы укажем этот стиль еще и для псевдокласса {{cssxref(":focus")}} чтобы быть уверенными, что виджет будет вести себя одинаково.</p> - -<pre class="brush: css">.select .active, -.select:focus { - outline: none; - - /* Это свойство - box-shadow - необязательно, однако нам важно видеть активное состояние - т.к. мы используем его по умолчанию. Можете спокойно его переопределить. */ - box-shadow: 0 0 3px 1px #227755; -}</pre> - -<p>Теперь давайте стилизуем список опций:</p> - -<pre class="brush: css">/* Селектор .select здесь применен для удобства (<a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%B0%D1%85%D0%B0%D1%80">синтаксический сахар</a>), чтобы быть уверенными, - что определяемые классы находятся в нашем виджете. */ -.select .optList { -/* Это позволит нам быть уверенными, что список вариантов будет показан ниже значения - и вне HTML потока */ - position : absolute; - top : 100%; - left : 0; -}</pre> - -<p>Еще нам нужен дополнительный класс, для обращения к списку вариантов, когда он скрыт. Это необходимо чтобы справиться с различиями активного и развернутого состояния, т.к. они не совсем совпадают.</p> - -<pre class="brush: css">.select .optList.hidden { - /* Это самый простой из доступных способов путь скрыть список, - а о доступности мы еще поговрим в конце */ - max-height: 0; - visibility: hidden; -}</pre> - -<h4 id="Украшательства">Украшательства</h4> - -<p>Теперь, когда основная функциональность на месте, можем начинать развлекаться. То, что мы сделаем дальше, является всего лишь примером того, что возможно, и будет соответствовать скриншоту в начале этой статьи. Но вы можете свободно эксперементировать и посмотреть на что вы способны.</p> - -<pre class="brush: css">.select { - /* Все размеры будут выражены в em по соображениям удобства - (чтобы быть уверенными, что виджет будет изменять размер если пользователь будет - использовать увеличение в текстовом режиме браузера). Вычисления сделаны из расчета что - 1em == 16px что является умолчанием для большинства браузеров. - Если вы затрудняетесь с преобразованием px в em, попробуйте http://riddle.pl/emcalc/ */ - font-size : 0.625em; /* это (10px) новый размер шрифта для нашего контекста для значения - em в исходном контексте */ - font-family : Verdana, Arial, sans-serif; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - /* Нам нужно добавить дополнительное пространство для стрелки вниз */ - padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */ - width : 10em; /* 100px */ - - border : .2em solid #000; /* 2px */ - border-radius : .4em; /* 4px */ - box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */ - - /* Первое объявление - для бразуеров не поддерживающих линейный градиент. - Второе объявление - потому что основанные на WebKit браузеры еще не избавились от префикса в нем. - Если вам нужна поддержка устаревших браузеров, попробуйте http://www.colorzilla.com/gradient-editor/ */ - background : #F0F0F0; - background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); - background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); -} - -.select .value { - /* Так как значение может быть шире, чем наш виджет, нужно быть уверенными, что оно не изменит - ширину виджета */ - display : inline-block; - width : 100%; - overflow : hidden; - - vertical-align: top; - - /* И, если содержимое слишком длинное, лучше иметь красивенькие точечки. */ - white-space : nowrap; - text-overflow: ellipsis; -}</pre> - -<p>Нам не нужен дополнительный элемент, чтобы создать стрелку вниз; вместо этого мы используем псевдоэлемент {{cssxref(":after")}}. Также её можно создать при помощи простого фонового изображения в классе <code>select</code>.</p> - -<pre class="brush: css">.select:after { - content : "▼"; /* Мы используем Unicode символ U+25BC; смотрите http://www.utf8-chartable.de */ - position: absolute; - z-index : 1; /* Важно чтобы стрелка не перекрывала элементы списка */ - top : 0; - right : 0; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - height : 100%; - width : 2em; /* 20px */ - padding-top : .1em; /* 1px */ - - border-left : .2em solid #000; /* 2px */ - border-radius: 0 .1em .1em 0; /* 0 1px 1px 0 */ - - background-color : #000; - color : #FFF; - text-align : center; -}</pre> - -<p>Далее стилизуем список вариантов:</p> - -<pre class="brush: css">.select .optList { - z-index : 2; /* Мы явно сказали, что список вариантов всегда будет перекрывать стрелку вниз */ - - /* это сбросит значения стиля по умолчанию для элемента ul */ - list-style: none; - margin : 0; - padding: 0; - - -moz-box-sizing : border-box; - box-sizing : border-box; - - /* Это для того, чтобы убедиться что если значения будут короче виджета - то список вариантов останется таким же по размеру как и сам виджет */ - min-width : 100%; - - /* В случае, если список слишком длинный, его содержимое не будет помещаться по вертикали - (что автоматически добавит полосу прокрутки), но этого никогда не произойдет по горизонтали - (потому что мы не установили ширину и содержимое списка будет регулировать ее - автоматически. Если это будет невозможно - содержимое будет обрезано.) */ - max-height: 10em; /* 100px */ - overflow-y: auto; - overflow-x: hidden; - - border: .2em solid #000; /* 2px */ - border-top-width : .1em; /* 1px */ - border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */ - - box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */ - background: #f0f0f0; -}</pre> - -<p>Для вариантов нам нужно добавить класс <code>highlight</code> чтобы сделать возможным индентифицировать значение которе пользователь выберет (или выбрал).</p> - -<pre class="brush: css">.select .option { - padding: .2em .3em; /* 2px 3px */ -} - -.select .highlight { - background: #000; - color: #FFFFFF; -}</pre> - -<p>Итак, вот результат с нашими тремя состояниями:</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Основное состояние</th> - <th scope="col" style="text-align: center;">Активное состояние</th> - <th scope="col" style="text-align: center;">Развернутое состояние</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td> - <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td> - <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td> - </tr> - <tr> - <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Посмотреть исходный код</a></td> - </tr> - </tbody> -</table> - -<h2 id="Оживи_свой_виджет_с_JavaScript">Оживи свой виджет с JavaScript</h2> - -<p>Теперь, когда наш дизайн и структура готовы, мы можем написать код на JavaScript чтобы виджет действительно заработал.</p> - -<div class="warning"> -<p><strong>Предупреждение:</strong> Следующий код представлен в образовательных целях и не может быть использован как-есть. Помимо прочего, как мы убедимся, он не пригоден для дальнейшего развития и не будет работать в устаревших браузерах. В нем также есть избыточность которую необходимо оптимизировать использования в рабочем режиме.</p> -</div> - -<div class="note"> -<p><strong>Замечание:</strong> Создание многократно используемых виджетов может быть немного сложнее. <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component draft</a> является одним из ответов на этот конкретный вопрос. <a href="http://x-tags.org/" rel="external" title="http://x-tags.org/">The X-Tag project</a> попытка реализовать эту спецификацию; пожалуйста, посмотрите этот проект.</p> -</div> - -<h3 id="Почему_он_не_работает">Почему он не работает?</h3> - -<p>Прежде чем мы начнем, запомните одну важную вещь о JavaScript: в браузере <strong>это ненадежная технология</strong>. Когда вы создаете пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях JavaScript невозможно запустить в браузере:</p> - -<ul> - <li>Пользователь отключил JavaScript: Это самый редкий случай; сейчас очень мало людей отключают JavaScript.</li> - <li>Скрипт не загружается. Это один из самых распространенных случаев, особенно в мобильном мире, где сеть не очень надежная.</li> - <li>Скрипт глючит.Вы должны всегда учитывать эту возможность.</li> - <li>Скрипт конфликтует со сторонним скриптом. Это может случиться со скриптами отслеживания или любыми закладурками (bookmarklets), которые использует пользователь.</li> - <li>Скрипт конфликтует с расширением браузера или зависит от него (такими как расширение <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> в Firefox, или расширенние <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> в Chrome).</li> - <li>Пользователь использует устаревший браузер, и одна из требуемых функций не поддерживается. Это часто случается, когда вы используете передовые API.</li> -</ul> - -<p>Из-за этого очень важно серьезно подумать о том, что произойдет, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.</p> - -<p>В нашем примере, если наш JavaScript код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.</p> - -<p>Во-первых нам нужно добавить стандартный элемент {{HTMLElement("select")}} перед каждым использованием нашего пользовательского виджета. Это также необходимо, чтобы отправить данные из нашего пользовательского виджета вместе с остальными данными формы; подробнее рассмотрим это позже.</p> - -<pre class="brush: html"><body class="no-widget"> - <form> - <select name="myFruit"> - <option>Cherry</option> - <option>Lemon</option> - <option>Banana</option> - <option>Strawberry</option> - <option>Apple</option> - </select> - - <div class="select"> - <span class="value">Cherry</span> - <ul class="optList hidden"> - <li class="option">Cherry</li> - <li class="option">Lemon</li> - <li class="option">Banana</li> - <li class="option">Strawberry</li> - <li class="option">Apple</li> - </ul> - </div> - </form> - -</body></pre> - -<p>Во-вторых нам нужно два новых класса, чтобы скрыть ненужные элементы (то есть "настоящие" элементы {{HTMLElement("select")}}, если скрипт запустился, или наш пользовательский виджет, если скрипт не запустился). По умолчанию наш HTML код скрывает наш пользовательский виджет.</p> - -<pre class="brush: css">.widget select, -.no-widget .select { - /* Этот CSS селектор значит: - - или мы присваиваем классу body значение "widget" и таким образом мы скрываем элемент {{HTMLElement("select")}} - - или мы не меняем класс body, тогда класс body остается в значении "no-widget", - и элементы, чей класс "select" будут скрыты */ - position : absolute; - left : -5000em; - height : 0; - overflow : hidden; -}</pre> - -<p>Теперь нам нужен модуль JavaScript, чтобы определить, запущен скрипт или нет. Этот модуль очень простой: если наш скрипт запустится во время загрузки страницы, то он удалит класс класс <code>no-widget</code> и добавит класс <code>widget</code>, чем поменяет видимость элемента {{HTMLElement("select")}} и нашего пользовательского виджета.</p> - -<pre class="brush: js">window.addEventListener("load", function () { - document.body.classList.remove("no-widget"); - document.body.classList.add("widget"); -});</pre> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Без JS</th> - <th scope="col" style="text-align: center;">С JS</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td> - <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td> - </tr> - <tr> - <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Посмотреть исходный код</a></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Замечание:</strong> Если вы действительно хотите сделать свой код универсальным и многоразовым, то вместо переключения классов гораздо лучше просто добавить класс элементам {{HTMLElement("select")}} чтобы их скрыть, и динамически добавлять дерево DOM представляющее пользовательский виджет после каждого элемента {{HTMLElement("select")}} на странице.</p> -</div> - -<h3 id="Облегчение_работы">Облегчение работы</h3> - -<p>В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все еще есть нюансы с устраевшеними браузерами (особенно со старым добрым Internet Explorer).</p> - -<p>Чтобы избежать неприятностей с устаревшими браузерами есть два способа: использовать отдельный фреймворк такой как <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external" title="http://dojotoolkit.org/">Dojo</a>, <a href="http://yuilibrary.com/" rel="external" title="http://yuilibrary.com/">YUI</a>, и т.п., или самостоятельно реализовать недостающие функции которые вам нужны (что можно легко сделать через условную загрузку, например используя библиотеку <a href="http://yepnopejs.com/" rel="external" title="http://yepnopejs.com/">yepnope</a>).</p> - -<p>Мы планируем использовать следующие функции (от самых рискованных до самых безопасных):</p> - -<ol> - <li>{{domxref("element.classList","classList")}}</li> - <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li> - <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (This is not DOM but modern JavaScript)</li> - <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li> -</ol> - -<p>Помимо доступности этих специфических функций, остается еще одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. Это важно потому, что объекты <code>Array</code> поддерживают функцию <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, а {{domxref("NodeList")}} не поддерживает. Так как {{domxref("NodeList")}} очень похож на <code>Array</code> и нам очень удобно использовать <code>forEach</code>, мы можем просто добавить <code>forEach</code> к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:</p> - -<pre class="brush: js">NodeList.prototype.forEach = function (callback) { - Array.prototype.forEach.call(this, callback); -}</pre> - -<p>Мы не шутили, когда сказали, что это легко сделать.</p> - -<h3 id="Создание_процедур_обработки_событий">Создание процедур обработки событий</h3> - -<p>Итак, начало положено, и мы можем приступить к функциям, которые будут использоваться для взаимодействия с пользователем.</p> - -<pre class="brush: js">// Эта функция будет вызываться каждый раз, когда наш виджет будет деактивирован -// Ей передается один параметр -// select : DOM нода класса `select` который должен быть деактивирован -function deactivateSelect(select) { - - // Если виджет не активен, то и делать-то нечего - if (!select.classList.contains('active')) return; - - // Получаем список опций для нашего виджета - var optList = select.querySelector('.optList'); - - // Закрываем список опций - optList.classList.add('hidden'); - - // и деактивируем сам виджет - select.classList.remove('active'); -} - -// Эта функция бедт вызываться какждый раз, когда пользователь захочет (де)активровать наш виджет -// Ей передаются два параметра: -// select : DOM нода класса `select` для активации -// selectList : список всех DOM нод с классом `select` -function activeSelect(select, selectList) { - - // Если виджет активен, то и делать-то нечего - if (select.classList.contains('active')) return; - - // Нам нужно отключить активное состояние всех наших виджетов - // Так как функция deactivateSelect соответствует всем требованиям - // функции forEach мы вызываем ее без использования промежуточной анонимной функции - selectList.forEach(deactivateSelect); - - // А теперь мы возвращаем активное состояние нужного виджета - select.classList.add('active'); -} - -// Эта функция будет вызываться каждый раз, когда пользователь будет открывать/закрывать список вариантов -// Ей передается один параметр: -// select : DOM нода со списком для переключения состояния -function toggleOptList(select) { - - // Список хранится в виджете - var optList = select.querySelector('.optList'); - - // Мы меняем класс виджета чтобы показать/скрыть его - optList.classList.toggle('hidden'); -} - -// Эта функция будет вызываться каждый раз, когда нам нужно подсветить вариант -// Ей передаются два параметра: -// select : DOM нода класса `select` содержащая вариант для подсветки -// option : DOM нода класса `option` для подсветки -function highlightOption(select, option) { - - // Мы получаем список всех вариантов доступных в нашем элементе - var optionList = select.querySelectorAll('.option'); - - // Мы удаляем подсветку всех вариантов - optionList.forEach(function (other) { - other.classList.remove('highlight'); - }); - - // Подсвечиваем нужный вариант - option.classList.add('highlight'); -};</pre> - -<p>Это все, что вам нужно для обработки различных состояний пользовательского виджета.</p> - -<p>Далее мы связываем эти функции с соответствующими событиями:</p> - -<pre class="brush: js">// Мы обрабатываем событие при загрузке документа. -window.addEventListener('load', function () { - var selectList = document.querySelectorAll('.select'); - - // Каждый наш собственный виджет должен быть проинициализирован - selectList.forEach(function (select) { - - // также как и его элементы `option` - var optionList = select.querySelectorAll('.option'); - - // Когда пользователь проводит мышью над элементом `option`, мы подсвечиваем этот вариант - optionList.forEach(function (option) { - option.addEventListener('mouseover', function () { - // Замечание: использование переменных `select` и `option` - // ограничено рамками нашей функции. - highlightOption(select, option); - }); - }); - - // Когда позоватль кликает на наш виджет - select.addEventListener('click', function (event) { - // Замечание: использование переменной `select` - // ограничено рамками нашей функции. - - // Мы переключаем видимость списка вариантов - toggleOptList(select); - }); - - // Когда виджет получает фокус - // Виджет получает фокус когда пользователь кликает на него - // или переходит на него клавишей табуляции - select.addEventListener('focus', function (event) { - // Замечание: использование переменных `select` и `selectList` - // ограничено рамками нашей функции. - - // Мы активируем наш виджет - activeSelect(select, selectList); - }); - - // Когда виджет теряет фокус - select.addEventListener('blur', function (event) { - // Замечание: использование переменной `select` - // ограничено рамками нашей функции. - - // Мы деактивируем виджет - deactivateSelect(select); - }); - }); -});</pre> - -<p>В этот момент наш виджет будет изменятт состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберемся дальше.</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Пример</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Посмотреть исходный код</a></td> - </tr> - </tbody> -</table> - -<h3 id="Обработка_значения_виджета">Обработка значения виджета</h3> - -<p>Теперь, когда наш виджет работает, мы должны добавить код, чтобы обновить его значение в соответствии с выбором пользователя и сделать возможным отправку этого значения вместе с данными формы.</p> - -<p>Самый простой способ сделать это - использовать встроенный виджет который также есть в нашей форме. Такой виджет будет отслеживать значение со всеми встроенными элементами управления, предоставленными браузером, и значение будет отправлено, как обычно, при отправке формы. Нет смысла заново изобретать велосипед, когда все это уже сделано за нас.</p> - -<p>Как было показано ранее, у нас есть стандартный виджет {{HTMLElement("select")}} в качестве запасного варианта для повышения доступности; поэтому мы просто синхронизируем его значение с нашим собственнным виджетом:</p> - -<pre class="brush: js">// Эта функция обновляет отображенное значение и синхронизирует его со стандартным виджетом -// Ей передается два параметра: -// select : DOM нода класса `select` содержащая значение которое будет обновлено -// index : индекс выбранного значения -function updateValue(select, index) { - // Нам нужно получить стандартный виджет для данного пользовательского - // В нашем примере стандартный виджет является братом (sibling) пользовательского виджета - var nativeWidget = select.previousElementSibling; - - // Нам также нужно получить значение заполнителя нашего пользовательского виджета - var value = select.querySelector('.value'); - - // И нам нужен весь список вариантов - var optionList = select.querySelectorAll('.option'); - - // Установим значение текущего номера выбранного элемента равным index - nativeWidget.selectedIndex = index; - - // Соответственно установим значение заполнителя - value.innerHTML = optionList[index].innerHTML; - - // И мы подсвечиваем соответствующий вариант нашего пользовательского виджета - highlightOption(select, optionList[index]); -}; - -// Эта функция возвращает текущий номер выбранного элемента в стандартном виджете -// Ей передается один параметр: -// select : DOM нода класса `select` соответствующая стандарному виджету -function getIndex(select) { - // Нам нужно получить доступ к стандартному виджету соответствующему данному - // пользовательскому виджету - // В нашем примере стандартный виджет - брат (sibling) пользовательского виджета - var nativeWidget = select.previousElementSibling; - - return nativeWidget.selectedIndex; -};</pre> - -<p>Исползуя эти две функции мы можем связать стандартный виджет с пользовательским:</p> - -<pre class="brush: js">// Мы обрабатываем привязку события при загрузке документа. -window.addEventListener('load', function () { - var selectList = document.querySelectorAll('.select'); - - // Каждый пользовательский виджет необходимсо инциализировать: - selectList.forEach(function (select) { - var optionList = select.querySelectorAll('.option'), - selectedIndex = getIndex(select); - - // Мы делаем наш пользовательский виджет фокусируемым - select.tabIndex = 0; - - // Мы делаем стандартный виджет более не фокусируемым - select.previousElementSibling.tabIndex = -1; - - // Убеждаемся, что выбранное по умолчанию значение корректно отображено - updateValue(select, selectedIndex); - - // Кажды раз когда пользователь кликает на вариант, мы соответсвенно обновляем значение - optionList.forEach(function (option, index) { - option.addEventListener('click', function (event) { - updateValue(select, index); - }); - }); - - // Когда виджет находится в фокусе, с каждым нажатием на клаиатуре, мы соответственно - // обновляем значение - select.addEventListener('keyup', function (event) { - var length = optionList.length, - index = getIndex(select); - - // Когда пользователь нажимает стрелку вниз, мы переходим на следующий вариант - if (event.keyCode === 40 && index < length - 1) { index++; } - - // Когда пользователь нажимает стрелку вверх, мы переходим на предыдущий вариант - if (event.keyCode === 38 && index > 0) { index--; } - - updateValue(select, index); - }); - }); -});</pre> - -<p>В приведенном выше коде стоить отметить совйство <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.</p> - -<p>С этим мы закончили! Вот результат:</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Пример</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4">Посмотреть исходный код</a></td> - </tr> - </tbody> -</table> - -<p>Но секундочку, мы точно закончили?</p> - -<h2 id="Делаем_доступным">Делаем доступным</h2> - -<p>Мы создали нечто работающее, и, хотя это далеко от полнофункционального селектбокса, работает это хорошо. Однако то, что мы сделали, это не более, чем возня с DOM. У него нет настоящей семантики, и хотя оно выглыдит как селектбокс, с точки зрения браузера - это не так, поэтому вспомогательные технологии не смогут понять что это селектбокс. Короче говоря, этот хорошенький селектбокс не является доступным для людей с ограниченными возможностями!</p> - -<p>К счастью существует решение, и оно называется <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">W3C спецификацию</a> специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретенный элемент выглядит как будто он был тем стандартным, за которого он себя выдает. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.</p> - -<h3 id="Аттрибут_role">Аттрибут <code>role</code></h3> - -<p>Ключевой аттрибут используемый в <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> - это <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a>. Аттрибут <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> принимает значение, определяющее для чего используется элемент. Каждая роль определяет свои собственные требования и поведение. В нашем примере мы используем роль <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code>. Это "составная роль" ("composite role"), т.е. элементы такой роли имеют потомков, у каждого из которых есть отдельная роль (в данном случае, как минимум один дочерний элемент с ролью <code>option</code>).</p> - -<p>Стоит также отметить что ARIA определяет роли, которые по умолчанию применяются к стандартной разметке HTML. Например, элемент {{HTMLElement("table")}} соответствует роли <code>grid</code>, а элемент {{HTMLElement("ul")}} соответствует роли <code>list</code>. Так как мы используем элемент {{HTMLElement("ul")}}, то нам необходимо убедиться что роль <code>listbox</code> нашего виджета заменит роль <code>list</code> элемента {{HTMLElement("ul")}}. С этой целью, мы будем использовать роль <code>presentation</code>. Эта роль разработана чтобы можно было отметить, что элемент не имеет особого значения, а используется исключительно чтобы представить информацию. Мы применим его к нашему элемету {{HTMLElement("ul")}}.</p> - -<p>Чтобы ввести роль <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> нам нужно просто внести следующие изменения в HTML:</p> - -<pre class="brush: html"><!-- Мы добавили аттрибут role="listbox" в наш элемент верхнего уровня --> -<div class="select" role="listbox"> - <span class="value">Cherry</span> - <!-- Также мы добавили аттрибут role="presentation" в элемент ul --> - <ul class="optList" role="presentation"> - <!-- И мы добавили аттрибут role="option" во все элементы li --> - <li role="option" class="option">Cherry</li> - <li role="option" class="option">Lemon</li> - <li role="option" class="option">Banana</li> - <li role="option" class="option">Strawberry</li> - <li role="option" class="option">Apple</li> - </ul> -</div></pre> - -<div class="note"> -<p><strong>Замечание:</strong> Включение как атрибута <code>role</code> так и атрибута <code>class</code> необходимо только если вы хотите обеспечить поддержку устаревших браузеров, которые не поддерживают <a href="/en-US/docs/CSS/Attribute_selectors">селекторы атрибутов CSS</a>.</p> -</div> - -<h3 id="Атрибут_aria-selected">Атрибут <code>aria-selected</code> </h3> - -<p>Использовать только аттрибут <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> недостаточно. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> также предоставляет множество атрибутов состояний и свойств. Чем больше и уместнее вы их используете, тем ваш виджет будет более понятен для вспомогательных технологий. В нашем случае мы ограничимся использованием одного аттрибута: <code>aria-selected</code>.</p> - -<p>Атрибут <code>aria-selected</code> используется для отметки текущего выбранного варианта; это позволяет ассистивным технологиям информировать пользователя о текущем выборе. Мы будем используя JavaScript динамически отмечать выбранный вариант каждый раз, когда пользователь его выбирает. С этой целью нам нужно пересмотреть нашу функцию <code>updateValue()</code>:</p> - -<pre class="brush: js">function updateValue(select, index) { - var nativeWidget = select.previousElementSibling; - var value = select.querySelector('.value'); - var optionList = select.querySelectorAll('.option'); - - // Мы уверены что все варианты не выбраны - optionList.forEach(function (other) { - other.setAttribute('aria-selected', 'false'); - }); - - // Мы уверены что выбранный вариант отмечен - optionList[index].setAttribute('aria-selected', 'true'); - - nativeWidget.selectedIndex = index; - value.innerHTML = optionList[index].innerHTML; - highlightOption(select, optionList[index]); -};</pre> - -<p>Вот окончательный результат всех этих изменений (вы сможете это лучше прочувствовать если испробуете это со вспомогательными технологиями, такими как <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> или <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>):</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Пример</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Посмотреть исходный код</a></td> - </tr> - </tbody> -</table> - -<h2 id="Заключение">Заключение</h2> - -<p>Мы рассмотрели все основы создания пользовательского виджета формы, и это, как вы видите, нетривиальная задача, и часто проще и лучше положиться на сторонние библиотеки, чем писать их самому с нуля (если, конечно, ваша цель - не создать такую библиотеку).</p> - -<p>Вот несколько библиотек, которые вам стоит рассмотреть перед тем как создавать собственную:</p> - -<ul> - <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li> - <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li> - <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li> - <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a">и многие другие…</a></li> -</ul> - -<p>Если вы хотите двигаться далее, то код в этом примере нуждается в некоторм улучшении прежде чем станет универсальным и многоразовым. Это упражнение, которое вы можете попробовать выполнить. Две подсказки, которые помогут вам в этом: первый аргумент всех наших функций одинаков, это значит что эти функции должны быть в одном контексте. Было бы разумным создать объект для совместного использования этого контекста. Также вам нужно сделать его функциональным; это значит, что ему необходимо одинаково хорошо работать с различными браузерами, чья соместимость с Web стандартами очень отличается. Повеселись!</p> - -<p>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</p> - -<h2 id="В_этом_модуле">В этом модуле</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша первая HTML форма</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML форму</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">The native form widgets</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Отправка данных формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Проверка данных формы</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать пользовательские виджеты форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> -</ul> diff --git a/files/ru/learn/html/forms/how_to_structure_an_html_form/index.html b/files/ru/learn/html/forms/how_to_structure_an_html_form/index.html deleted file mode 100644 index 741d773dba..0000000000 --- a/files/ru/learn/html/forms/how_to_structure_an_html_form/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Как структурировать HTML-формы -slug: Learn/HTML/Forms/How_to_structure_an_HTML_form -tags: - - HTML-форма - - Веб-форма - - Изучение - - Новичок - - Структурирование - - Форма -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Forms/Ваша_первая_HTML_форма", "Learn/HTML/Forms/Стандартные_виджеты_форм", "Learn/HTML/Forms")}}</div> - -<p class="summary">Получив базовые знания, теперь мы более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям форм.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Уровень подготовки:</th> - <td>Основы компьютерной грамотности, и базовые <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">знания HTML</a>.</td> - </tr> - <tr> - <th scope="row">Цель:</th> - <td>Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании.</td> - </tr> - </tbody> -</table> - -<p>Гибкость HTML форм делает их одной из самых сложных структур в <a href="/en-US/docs/Learn/HTML" title="/en-US/docs/HTML">HTML</a>; вы можете создать любую форму, используя элементы и атрибуты форм. Использование правильной структуры, при создании HTML форм, поможет гарантировать их удобство и <a href="/en-US/docs/Learn/Accessibility">доступность</a>.</p> - -<h2 id="Элемент_<form>">Элемент <form></h2> - -<p>Элемент {{HTMLElement("form")}} формально определяет форму и атрибуты, которые определяют поведение этой формы. Каждый раз, когда вы хотите создать HTML-форму, вам нужно начать с создания элемента {{HTMLElement("form")}}, поместив внутрь него всё содержимое. Многие вспомогательные технологии или браузерные плагины могут обнаруживать элементы {{HTMLElement("form")}} и реализовывать специальные хуки, чтобы их было проще использовать.</p> - -<p>Мы уже встречались с этим в предыдущей статье.</p> - -<div class="blockIndicator warning"> -<p><strong>Внимание:</strong> Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера. </p> -</div> - -<p>Стоит учесть, что всегда можно использовать элементы формы вне {{HTMLElement("form")}}. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью аттрибута <code>form</code>. В HTML5 был представлен аттрибут <code>form</code> для элементов HTML форм, который позволяет явно связать элемент с формой, даже если он не заключён внутри {{ HTMLElement("form") }}.</p> - -<h2 id="Элементы_<fieldset>_и_<legend>">Элементы <fieldset> и <legend></h2> - -<p>Элемент {{HTMLElement("fieldset")}} - это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок {{HTMLElement("fieldset")}}, добавив элемент {{HTMLElement("legend")}} сразу после открывающего тега {{HTMLElement("fieldset")}}. Текст элемента {{HTMLElement("legend")}} формально описывает назначение содержимого {{HTMLElement("fieldset")}}.</p> - -<p>Различные вспомогательные технологии будут использовать {{HTMLElement("legend")}} как часть метки <code>label</code> всех элементов внутри {{HTMLElement("fieldset")}}. Например, такие экранные дикторы как <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> или <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> произносят заголовок формы {{HTMLElement("legend")}} перед произношением названия меток элементов.</p> - -<p>Небольшой пример:</p> - -<pre class="brush:html; notranslate"><form> - <fieldset> - <legend>Fruit juice size</legend> - <p> - <input type="radio" name="size" id="size_1" value="small"> - <label for="size_1">Small</label> - </p> - <p> - <input type="radio" name="size" id="size_2" value="medium"> - <label for="size_2">Medium</label> - </p> - <p> - <input type="radio" name="size" id="size_3" value="large"> - <label for="size_3">Large</label> - </p> - </fieldset> -</form></pre> - -<div class="note"> -<p><strong>Примечание</strong>: Вы можете найти этот пример в <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">также посмотрите на результат</a>).</p> -</div> - -<p>Читая эту форму, экранный диктор произнесёт "Fruit juice size small" для первого элемента, "Fruit juice size medium" - для второго, "Fruit juice size large" - для третьего.</p> - -<p>Вариант использования в этом примере является одним из наиболее важных. Каждый раз, когда у вас есть набор переключателей, вам нужно поместить их внутри {{HTMLElement("fieldset")}}. Также {{HTMLElement("fieldset")}} можно использовать для разделения формы. В идеале, длинную форму разделяют на несколько страниц, однако, если она должна находиться на одной странице, распределение связанных элементов в разные {{HTMLElement("fieldset")}} может повысить удобство использования.</p> - -<p>Из-за своего влияния на вспомогательные технологии элемент {{HTMLElement("fieldset")}} является одним из ключевых элементов для построения доступных форм; однако вы не должны им злоупотреблять. Если возможно, старайтесь проверять, как <a href="https://www.nvaccess.org/download/">экранный диктор</a> интерпретирует вашу форму. </p> - -<h2 id="Элемент_<label>">Элемент <label></h2> - -<p>В предыдущей статье мы увидели, что элемент {{HTMLElement("label")}} принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предущей статьи:</p> - -<pre class="brush: html notranslate"><label for="name">Name:</label> <input type="text" id="name" name="user_name"></pre> - -<p>При правильно связанном элементе <code><label></code> с элементом <code><input></code> через атрибуты <code>for</code> и <code>id</code> соответственно (атрибут <code>for</code> ссылается на атрибут <code>id</code> соответствующего виджета формы), скринридер прочтет вслух что-то наподобие "Name, edit text".</p> - -<p>Если <code><label></code> не правильно установлен, скринридер прочитает это как "Edit text blank", что не несет в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.</p> - -<p>Обратите внимание на то, что виджет формы может быть вложен в элемент {{HTMLElement("label")}}, как на примере:</p> - -<pre class="brush: html notranslate"><label for="name"> - Name: <input type="text" id="name" name="user_name"> -</label></pre> - -<p>Однако даже в таких случаях лучшей всё равно указывать атрибут <code>for</code>, так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.</p> - -<h3 id="Лейблы_тоже_кликабельны!">Лейблы тоже кликабельны!</h3> - -<p>Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-посказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать ее как можно больше.</p> - -<p>Например:</p> - -<pre class="brush:html; notranslate"><form> - <p> - <label for="taste_1">I like cherry</label> - <input type="checkbox" id="taste_1" name="taste_cherry" value="1"> - </p> - <p> - <label for="taste_2">I like banana</label> - <input type="checkbox" id="taste_2" name="taste_banana" value="2"> - </p> -</form></pre> - -<div class="note"> -<p><strong>Примечание</strong>: Вы можете посмотреть этот пример тут <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">также можно посмотреть код вживую</a>).</p> -</div> - -<h3 id="Несколько_лейблов">Несколько лейблов</h3> - -<p>На самом деле вы можете добавить несколько текстов-подсказок на один виджет формы, но это не очень хорошая идея, так как у некоторых вспомогательных технологий могут возникнуть проблемы с обработкой такой структуры. Вместо использования нескольких лейблов, лучше вложить виджет формы внутрь одного элемента {{htmlelement("label")}}. </p> - -<p>Рассмотрим этот пример:</p> - -<pre class="brush: html notranslate"><p>Required fields are followed by <abbr title="required">*</abbr>.</p> - -<!-- Тогда это: --> -<div> - <label for="username">Name:</label> - <input type="text" name="username"> - <label for="username"><abbr title="required">*</abbr></label> -</div> - -<!-- лучше сделать таким образом: --> -<div> - <label for="username"> - <span>Name:</span> - <input id="username" type="text" name="username"> - <abbr title="required">*</abbr> - </label> -</div> - -<!-- Но этот вариант лучше всего: --> -<div> - <label for="username">Name: <abbr title="required">*</abbr></label> - <input id="username" type="text" name="username"> -</div></pre> - -<p>{{EmbedLiveSample("Multiple_labels", 120, 120)}}</p> - -<p>Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдет требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.</p> - -<ul> - <li>В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь "edit text blank" и отдельно читаемые тексты-подсказки. Множественные элементы <code><label></code> могут быть неправильно интерпретированы программой чтения с экрана.</li> - <li>Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как "name star name edit text", однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связанао с текстом-подсказкой.</li> - <li>Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как "name star edit text".</li> -</ul> - -<div class="note"> -<p><strong>Примечение</strong>: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведет себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.</p> -</div> - -<div class="note"> -<p><strong>Примечание</strong>: Вы можете найти этот пример на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">также можно посмотреть вживую</a>). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!</p> -</div> - -<h2 id="Частоиспользуемые_с_формами_HTML-структуры">Частоиспользуемые с формами HTML-структуры</h2> - -<p>Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.</p> - -<p>Как вы можете заметить в примерах, оборачивать лейбл и виджет формы в элемент {{HTMLElement("div")}} — это общепринятая практика. Элемент {{HTMLElement("p")}} также часто используется, как и HTML-списки (последние часто используются для структурирования множественных чекбоксом или радио-кнопок).</p> - -<p>В добавок к элементу {{HTMLElement("fieldset")}} часто используют HTML-заголовки (например, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}) и секционирование (например, {{HTMLElement("section")}}) для стуктурирования сложных форм.</p> - -<p>Прежде всего, вам нужно найти стиль, который будет удобен именно вам для программирования и который также позволит создавать доступные и удобные формы.</p> - -<p>Каждый отдельный раздел функциональности содержится в элементах {{HTMLElement ("section")}} и {{HTMLElement ("fieldset")}}, содержащий переключатели. Каждый отдельный раздел функциональности должен находиться в отдельном элементе {{HTMLElement ("section")}} с элементами {{HTMLElement ("fieldset")}}, содержащими переключатели.</p> - -<h3 id="Активное_обучение_построение_структуры_формы">Активное обучение: построение структуры формы</h3> - -<p>Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (<a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Основные нативные элементы управления формами</a>). А пока внимательно прочитайте описание, следуя приведенным ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.</p> - -<ol> - <li>Для начала сделайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">пустого шаблона</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS для нашей платёжной формы</a> в новой директории на вашем компьютере.</li> - <li>Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-елемента {{htmlelement("head")}}: - <pre class="brush: html notranslate"><link href="payment-form.css" rel="stylesheet"></pre> - </li> - <li>Далее начните создавать свою форму с добавления внешнего элемента {{htmlelement("form")}}: - <pre class="brush: html notranslate"><form> - -</form></pre> - </li> - <li>Внутри тега <code><form></code>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения: - <pre class="brush: html notranslate"><h1>Payment form</h1> -<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p></pre> - </li> - <li>Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент {{htmlelement("section")}}. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка ({{htmlelement("li")}}). Наконец, у нас есть два текстовых поля {{htmlelement("input")}} и связанные с ними элементы {{htmlelement("label")}}, которые находятся внутри элементов {{htmlelement("p")}}, а также поле для ввода пароля. Добавьте этот код в вашу форму: - <pre class="brush: html notranslate"><section> - <h2>Contact information</h2> - <fieldset> - <legend>Title</legend> - <ul> - <li> - <label for="title_1"> - <input type="radio" id="title_1" name="title" value="M." > - Mister - </label> - </li> - <li> - <label for="title_2"> - <input type="radio" id="title_2" name="title" value="Ms."> - Miss - </label> - </li> - </ul> - </fieldset> - <p> - <label for="name"> - <span>Name: </span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="text" id="name" name="username"> - </p> - <p> - <label for="mail"> - <span>E-mail: </span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="email" id="mail" name="usermail"> - </p> - <p> - <label for="pwd"> - <span>Password: </span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="password" id="pwd" name="password"> - </p> -</section></pre> - </li> - <li>Сейчас мы перейдём к второму разделу <code><section></code> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <code><p></code>. Первый — это выпадающее меню ({{htmlelement("select")}}) для выбора типа кредитной карты. Второй — это элемент <code><input></code> с типом <code>number</code> для ввода номера карты. Последний виджет — это элемент <code><input></code> с типом <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">date</span></font> для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a>.<br> - <br> - Вставьте следующий код под предыдущим разделом: - <pre class="brush: html notranslate"><section> - <h2>Payment information</h2> - <p> - <label for="card"> - <span>Card type:</span> - </label> - <select id="card" name="usercard"> - <option value="visa">Visa</option> - <option value="mc">Mastercard</option> - <option value="amex">American Express</option> - </select> - </p> - <p> - <label for="number"> - <span>Card number:</span> - <strong><abbr title="required">*</abbr></strong> - </label> - <input type="number" id="number" name="cardnumber"> - </p> - <p> - <label for="date"> - <span>Expiration date:</span> - <strong><abbr title="required">*</abbr></strong> - <em>formatted as mm/yy</em> - </label> - <input type="date" id="date" name="expiration"> - </p> -</section></pre> - </li> - <li>Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент {{htmlelement("button")}} с типом <code>submit</code>, для отправки данных. Добавьте этот код в конец вашей формы: - <pre class="brush: html notranslate"><p> <button type="submit">Validate the payment</button> </p></pre> - </li> -</ol> - -<p>Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">payment-form.html</a> и <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">живой пример</a>):</p> - -<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}</p> - -<h2 id="Протестируйте_себя!">Протестируйте себя!</h2> - -<p>Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure">Test your skills: Form structure</a>.</p> - -<h2 id="Заключение">Заключение</h2> - -<p>Теперь у вас есть все необходимые знания для того, чтобы правильно структурировать вашу HTML-форму. Мы подробнее раскроем затронутые здесь темы в нескольких последующих статьях. В следующей же статье мы изучим все возможные типы виджетов форм, которые могут понадобиться для сбора информации от ваших пользователей.</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Forms/Ваша_первая_HTML_форма", "Learn/HTML/Forms/Стандартные_виджеты_форм", "Learn/HTML/Forms")}}</p> - -<h2 id="В_этом_разделе">В этом разделе</h2> - -<ul> - <li><a href="/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма">Ваша первая HTML форма</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-формы</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм">Стандартные виджеты форм</a></li> - <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> - <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/Styling_HTML_forms">Стили HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li> - <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/Валидация_формы">Проверка данных формы</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/Отправка_и_Получение_данных_формы">Отправка данных формы</a></li> -</ul> - -<h3 id="Дополнительные_темы">Дополнительные темы</h3> - -<ul> - <li><a href="/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать пользовательские виджеты форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> -</ul> diff --git a/files/ru/learn/html/forms/index.html b/files/ru/learn/html/forms/index.html deleted file mode 100644 index 02e36df560..0000000000 --- a/files/ru/learn/html/forms/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Руководство по HTML-формам -slug: Learn/HTML/Forms -tags: - - HTML - - Web - - Начинающие - - Руководство - - Формы -translation_of: Learn/Forms ---- -<p>{{LearnSidebar}}</p> - -<p>Данное руководство представляет собой серию статей, которые помогут Вам освоить HTML-формы. HTML формы являются очень мощным инструментом для взаимодействия с пользователями; однако, в силу исторических и технических причин, не всегда очевидно, как использовать их в полной мере. В этом руководстве мы рассмотрим все аспекты HTML-форм, от структуры к стилизации, от обработки данных до пользовательских виджетов. Вы научитесь пользоваться Великой силой, которую они предлагают!</p> - -<h2 id="Необходимые_условия">Необходимые условия</h2> - -<p>Перед началом этого модуля вам следует изучить хотя бы <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>. На данный момент у вас не должно возникнуть сложностей с пониманием <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%B0_2">Основных руководств</a> и использованием нашего руководства по <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">Стандартным виджетам форм</a>.</p> - -<p>Остальные части модуля немного сложнее — легко поместить виджет формы на страницу, но вы не сможете много сделать без использования продвинутых особенностей форм, CSS и JavaScript. Поэтому, перед тем как вы перейдёте к другим частям модуля, мы рекомендуем изучить немного CSS и JavaScript.</p> - -<div class="blockIndicator note"> -<p><strong>Примечание:</strong>Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Основные_руководства_2"> Основные руководства<a id="Основные_руководства" name="Основные_руководства"></a></h2> - -<dl> - <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма">Ваша первая HTML-форма</a></dt> - <dd>Первая статья в серии дает вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.</dd> - <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a></dt> - <dd>Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.</dd> -</dl> - -<h2 id="Какие_виджеты_форм_доступны">Какие виджеты форм доступны?</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">Стандартные виджеты форм</a></dt> - <dd>Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.</dd> -</dl> - -<h2 id="Валидация_и_подтверждение_данных_форм">Валидация и подтверждение данных форм</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Отправка данных форм </a></dt> - <dd>Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.</dd> - <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Валидация данных форм</a></dt> - <dd>Одной отправки данных не достаточно — нам нужно убедиться что данные, введенные пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.</dd> -</dl> - -<h2 id="Продвинутые_руководства"> Продвинутые руководства</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать собственные виджеты форм</a></dt> - <dd>В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функционала. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье(с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Отправка форм при помощи JavaScript</a></dt> - <dd>В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-формы в старых браузерах</a></dt> - <dd>Статья раскрывает особенности обнаружения и т.д. (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Кросс-браузерное тестирование</a> для более глубокого понимания)</dd> -</dl> - -<h2 id="Руководства_по_стилизации_форм">Руководства по стилизации форм</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Стилизация HTML-форм</a></dt> - <dd>Вступительная статья по стилизации форм с помощью CSS, включая все необходимые основы.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Продвинутая стилизация HTML-форм</a></dt> - <dd>В этой статье мы рассмотрим продвинутые техники стилизации форм, которые необходимо использовать при работе с некоторыми более сложными для стилизации элементами.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Таблица совместимости свойств для виджетов форм</a></dt> - <dd>Последняя статья содержит удобный справочник, позволяющий узнать, с какими элементами формы совместимы свойства CSS.</dd> -</dl> - -<h2 id="Смотри_также">Смотри также</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Ссылка на элементы HTML-форм</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input">Ссылка на виды HTML-элемента <input></a> </li> -</ul> diff --git a/files/ru/learn/html/forms/sending_forms_through_javascript/index.html b/files/ru/learn/html/forms/sending_forms_through_javascript/index.html deleted file mode 100644 index d98ccea1ac..0000000000 --- a/files/ru/learn/html/forms/sending_forms_through_javascript/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: Отправка форм при помощи JavaScript -slug: Learn/HTML/Forms/Sending_forms_through_JavaScript -translation_of: Learn/Forms/Sending_forms_through_JavaScript ---- -<div>{{LearnSidebar}}</div> - -<p><span class="seoSummary">HTML формы могут декларативно отправлять <a href="/en-US/docs/HTTP">HTTP</a>-запросы. Но формы также могут подготовить HTTP-запросы для отправки с помощью JavaScript, например при помощи <code>XMLHttpRequest</code>. В этой статье исследуются подобные подходы.</span></p> - -<h2 id="Формы_не_всегда_формы">Формы не всегда формы</h2> - -<p>В современных веб-приложениях, одностраничных приложениях и приложениях на основе фреймворков, обычно <a href="/en-US/docs/HTML/Forms">HTML-формы</a> используются для отправки данных без загрузки нового документа при получении данных ответа. В начале поговорим о том почему это требует другого подхода.</p> - -<h3 id="Получение_контроля_над_глобальным_интерфейсом">Получение контроля над глобальным интерфейсом</h3> - -<p>Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счет предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).</p> - -<p>Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытатся отправить свои данные, приложение берет контроль и асинхронно передает данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.</p> - -<p>Асинхронная отправка произвольных данных обычно называется <a href="/en-US/docs/AJAX">AJAX</a>, что означает <strong>"Asynchronous JavaScript And XML" </strong>(Асинхронный JavaScript и XML).</p> - -<h3 id="Чем_он_отличается">Чем он отличается?</h3> - -<p>Объект {{domxref("XMLHttpRequest")}} (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, {{domxref("XMLHttpRequest")}} был разработан для получения и отправки <a href="/en-US/docs/XML">XML</a> в качестве формата обмена, который со временем был заменен на <a href="/en-US/docs/JSON">JSON</a>. Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы (<code>application/x-www-form-urlencoded</code>) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в <code>multipart/form-data</code>.</p> - -<div class="blockIndicator note"> -<p><strong>Замечание</strong>: Сейчас <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> часто используется вместо XHR — это современная, обновленная версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидете в этой статье можно заменить на Fetch.</p> -</div> - -<p>Если вы управляете фронтендом (кодом, который выполняется в браузере) и бкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.</p> - -<p>Но если вы хотите использовать сторонний сервис, то вам необходимо отправлять данные в формате, который требуется сервису.</p> - -<p>Так как нам следует отправлять подобные данные? Ниже обписаны различные необходимые вам техники.</p> - -<h2 id="Отправка_данных_формы">Отправка данных формы</h2> - -<p>Есть три способа отправки данных формы:</p> - -<ul> - <li>Создание <code>XMLHttpRequest</code> вручную.</li> - <li>Использование самостоятельного <code>FormData</code> объекта.</li> - <li>Использование <code>FormData</code> связанного с <code><form></code> элементом.</li> -</ul> - -<p>Давайте рассмотрим их подробнее:</p> - -<h3 id="Создание_XMLHttpRequest_вручную">Создание XMLHttpRequest вручную</h3> - -<p>{{domxref("XMLHttpRequest")}} это самый безопасный и надежный способ создавать HTTPзапросы. Для отправки данных формы с помощью {{domxref("XMLHttpRequest")}}, подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.</p> - -<p>Посмотрите на пример:</p> - -<pre class="brush: html notranslate"><button>Click Me!</button></pre> - -<p>И на JavaScript:</p> - -<pre class="brush: js notranslate">const btn = document.querySelector('button'); - -function sendData( data ) { - console.log( 'Sending data' ); - - const XHR = new XMLHttpRequest(); - - let urlEncodedData = "", - urlEncodedDataPairs = [], - name; - - // Turn the data object into an array of URL-encoded key/value pairs. - for( name in data ) { - urlEncodedDataPairs.push( encodeURIComponent( name ) + '=' + encodeURIComponent( data[name] ) ); - } - - // Combine the pairs into a single string and replace all %-encoded spaces to - // the '+' character; matches the behaviour of browser form submissions. - urlEncodedData = urlEncodedDataPairs.join( '&' ).replace( /%20/g, '+' ); - - // Define what happens on successful data submission - XHR.addEventListener( 'load', function(event) { - alert( 'Yeah! Data sent and response loaded.' ); - } ); - - // Define what happens in case of error - XHR.addEventListener( 'error', function(event) { - alert( 'Oops! Something went wrong.' ); - } ); - - // Set up our request - XHR.open( 'POST', 'https://example.com/cors.php' ); - - // Add the required HTTP header for form data POST requests - XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' ); - - // Finally, send our data. - XHR.send( urlEncodedData ); -} - -btn.addEventListener( 'click', function() { - sendData( {test:'ok'} ); -} ) -</pre> - -<p>Это результат:</p> - -<p>{{EmbedLiveSample("Building_an_XMLHttpRequest_manually", "100%", 50)}}</p> - -<div class="note"> -<p><strong>Note:</strong> This use of {{domxref("XMLHttpRequest")}} is subject to the {{glossary('same-origin policy')}} if you want to send data to a third party web site. For cross-origin requests, you'll need <a href="/en-US/docs/HTTP/Access_control_CORS">CORS and HTTP access control</a>.</p> -</div> - -<h3 id="Using_XMLHttpRequest_and_the_FormData_object">Using XMLHttpRequest and the FormData object</h3> - -<p>Building an HTTP request by hand can be overwhelming. Fortunately, the <a href="http://www.w3.org/TR/XMLHttpRequest/" rel="external">XMLHttpRequest specification</a> provides a newer, simpler way to handle form data requests with the {{domxref("XMLHttpRequest/FormData","FormData")}} object.</p> - -<p>The {{domxref("XMLHttpRequest/FormData","FormData")}} object can be used to build form data for transmission, or to get the data within a form element to manage how it's sent. Note that {{domxref("XMLHttpRequest/FormData","FormData")}} objects are "write only", which means you can change them, but not retrieve their contents.</p> - -<p>Using this object is detailed in <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using FormData Objects</a>, but here are two examples:</p> - -<h4 id="Using_a_standalone_FormData_object">Using a standalone FormData object</h4> - -<pre class="brush: html notranslate"><button>Click Me!</button></pre> - -<p>You should be familiar with that HTML sample. Now for the JavaScript:</p> - -<pre class="brush: js notranslate">const btn = document.querySelector('button'); - -function sendData( data ) { - const XHR = new XMLHttpRequest(), - FD = new FormData(); - - // Push our data into our FormData object - for( name in data ) { - FD.append( name, data[ name ] ); - } - - // Define what happens on successful data submission - XHR.addEventListener( 'load', function( event ) { - alert( 'Yeah! Data sent and response loaded.' ); - } ); - - // Define what happens in case of error - XHR.addEventListener(' error', function( event ) { - alert( 'Oops! Something went wrong.' ); - } ); - - // Set up our request - XHR.open( 'POST', 'https://example.com/cors.php' ); - - // Send our FormData object; HTTP headers are set automatically - XHR.send( FD ); -} - -btn.addEventListener( 'click', function() - { sendData( {test:'ok'} ); -} )</pre> - -<p>Here's the live result:</p> - -<p>{{EmbedLiveSample("Using_a_standalone_FormData_object", "100%", 50)}}</p> - -<h4 id="Using_FormData_bound_to_a_form_element">Using FormData bound to a form element</h4> - -<p>You can also bind a <code>FormData</code> object to an {{HTMLElement("form")}} element. This creates a <code>FormData</code> object that represents the data contained in the form.</p> - -<p>The HTML is typical:</p> - -<pre class="brush: html notranslate"><form id="myForm"> - <label for="myName">Send me your name:</label> - <input id="myName" name="name" value="John"> - <input type="submit" value="Send Me!"> -</form></pre> - -<p>But JavaScript takes over the form:</p> - -<pre class="brush: js notranslate">window.addEventListener( "load", function () { - function sendData() { - const XHR = new XMLHttpRequest(); - - // Bind the FormData object and the form element - const FD = new FormData( form ); - - // Define what happens on successful data submission - XHR.addEventListener( "load", function(event) { - alert( event.target.responseText ); - } ); - - // Define what happens in case of error - XHR.addEventListener( "error", function( event ) { - alert( 'Oops! Something went wrong.' ); - } ); - - // Set up our request - XHR.open( "POST", "https://example.com/cors.php" ); - - // The data sent is what the user provided in the form - XHR.send( FD ); - } - - // Access the form element... - const form = document.getElementById( "myForm" ); - - // ...and take over its submit event. - form.addEventListener( "submit", function ( event ) { - event.preventDefault(); - - sendData(); - } ); -} );</pre> - -<p>Here's the live result:</p> - -<p>{{EmbedLiveSample("Using_FormData_bound_to_a_form_element", "100%", 50)}}</p> - -<p>You can even get more involved with the process by using the form's {{domxref("HTMLFormElement.elements", "elements")}} property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the example in {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.</p> - -<h2 id="Dealing_with_binary_data">Dealing with binary data</h2> - -<p>If you use a {{domxref("XMLHttpRequest/FormData","FormData")}} object with a form that includes <code><input type="file"></code> widgets, the data will be processed automatically. But to send binary data by hand, there's extra work to do.</p> - -<p>There are many sources for binary data, including {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement","Canvas")}}, and <a href="/en-US/docs/WebRTC/navigator.getUserMedia">WebRTC</a>. Unfortunately, some legacy browsers can't access binary data or require complicated workarounds. To learn more about the <code>FileReader</code> API, see <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a>.</p> - -<p>The least complicated way of sending binary data is by using {{domxref("XMLHttpRequest/FormData","FormData")}}'s <code>append()</code> method, demonstrated above. If you have to do it by hand, it's trickier.</p> - -<p>In the following example, we use the {{domxref("FileReader")}} API to access binary data and then build the multi-part form data request by hand:</p> - -<pre class="brush: html notranslate"><form id="theForm"> - <p> - <label for="theText">text data:</label> - <input id="theText" name="myText" value="Some text data" type="text"> - </p> - <p> - <label for="theFile">file data:</label> - <input id="theFile" name="myFile" type="file"> - </p> - <button>Send Me!</button> -</form></pre> - -<p>As you see, the HTML is a standard <code><form></code>. There's nothing magical going on. The "magic" is in the JavaScript:</p> - -<pre class="brush: js notranslate">// Because we want to access DOM nodes, -// we initialize our script at page load. -window.addEventListener( 'load', function () { - - // These variables are used to store the form data - const text = document.getElementById( "theText" ); - const file = { - dom : document.getElementById( "theFile" ), - binary : null - }; - - // Use the FileReader API to access file content - const reader = new FileReader(); - - // Because FileReader is asynchronous, store its - // result when it finishes to read the file - reader.addEventListener( "load", function () { - file.binary = reader.result; - } ); - - // At page load, if a file is already selected, read it. - if( file.dom.files[0] ) { - reader.readAsBinaryString( file.dom.files[0] ); - } - - // If not, read the file once the user selects it. - file.dom.addEventListener( "change", function () { - if( reader.readyState === FileReader.LOADING ) { - reader.abort(); - } - - reader.readAsBinaryString( file.dom.files[0] ); - } ); - - // sendData is our main function - function sendData() { - // If there is a selected file, wait it is read - // If there is not, delay the execution of the function - if( !file.binary && file.dom.files.length > 0 ) { - setTimeout( sendData, 10 ); - return; - } - - // To construct our multipart form data request, - // We need an XMLHttpRequest instance - const XHR = new XMLHttpRequest(); - - // We need a separator to define each part of the request - const boundary = "blob"; - - // Store our body request in a string. - let data = ""; - - // So, if the user has selected a file - if ( file.dom.files[0] ) { - // Start a new part in our body's request - data += "--" + boundary + "\r\n"; - - // Describe it as form data - data += 'content-disposition: form-data; ' - // Define the name of the form data - + 'name="' + file.dom.name + '"; ' - // Provide the real name of the file - + 'filename="' + file.dom.files[0].name + '"\r\n'; - // And the MIME type of the file - data += 'Content-Type: ' + file.dom.files[0].type + '\r\n'; - - // There's a blank line between the metadata and the data - data += '\r\n'; - - // Append the binary data to our body's request - data += file.binary + '\r\n'; - } - - // Text data is simpler - // Start a new part in our body's request - data += "--" + boundary + "\r\n"; - - // Say it's form data, and name it - data += 'content-disposition: form-data; name="' + text.name + '"\r\n'; - // There's a blank line between the metadata and the data - data += '\r\n'; - - // Append the text data to our body's request - data += text.value + "\r\n"; - - // Once we are done, "close" the body's request - data += "--" + boundary + "--"; - - // Define what happens on successful data submission - XHR.addEventListener( 'load', function( event ) { - alert( 'Yeah! Data sent and response loaded.' ); - } ); - - // Define what happens in case of error - XHR.addEventListener( 'error', function( event ) { - alert( 'Oops! Something went wrong.' ); - } ); - - // Set up our request - XHR.open( 'POST', 'https://example.com/cors.php' ); - - // Add the required HTTP header to handle a multipart form data POST request - XHR.setRequestHeader( 'Content-Type','multipart/form-data; boundary=' + boundary ); - - // And finally, send our data. - XHR.send( data ); - } - - // Access our form... - const form = document.getElementById( "theForm" ); - - // ...to take over the submit event - form.addEventListener( 'submit', function ( event ) { - event.preventDefault(); - sendData(); - } ); -} );</pre> - -<p>Here's the live result:</p> - -<p>{{EmbedLiveSample("Dealing_with_binary_data", "100%", 150)}}</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>Depending on the browser and the type of data you are dealing with, sending form data through JavaScript can be easy or difficult. The {{domxref("XMLHttpRequest/FormData","FormData")}} object is generally the answer, and you can use a <a href="https://github.com/jimmywarting/FormData">polyfill</a> for it on legacy browsers.</p> - -<h2 id="See_also">See also</h2> - -<h3 id="Learning_path">Learning path</h3> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">HTML5 input types</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Additional form controls</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> -</ul> - -<h3 id="Advanced_Topics">Advanced Topics</h3> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> -</ul> diff --git a/files/ru/learn/html/forms/styling_html_forms/index.html b/files/ru/learn/html/forms/styling_html_forms/index.html deleted file mode 100644 index f8cc1644dc..0000000000 --- a/files/ru/learn/html/forms/styling_html_forms/index.html +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: Стили HTML форм -slug: Learn/HTML/Forms/Styling_HTML_forms -translation_of: Learn/Forms/Styling_web_forms ---- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}</p> - -<p class="summary"><span class="seoSummary">В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!</span></p> - -<h2 id="Почему_так_сложно_стилизовать_виджеты_форм_с_помощью_CSS">Почему так сложно стилизовать виджеты форм с помощью CSS?</h2> - -<p>На заре Интернета, примерно в 1995 году, в <a href="http://www.ietf.org/rfc/rfc1866.txt">HTML 2</a> были добавлены элементы управления формой. Из-за сложности виджетов форм разработчики решили полагаться на базовую операционную систему для управления ими и их рендеринга.</p> - -<p>Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.</p> - -<p>Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все еще чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.</p> - -<p>Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации <a href="/en-US/docs/HTML/Forms">HTML форм</a>.</p> - -<h3 id="Не_все_виджеты_созданы_равными_когда_задействован_CSS">Не все виджеты созданы равными, когда задействован CSS</h3> - -<p>В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:</p> - -<h4 id="Хорошая">Хорошая</h4> - -<p>Некоторые элементы могут быть стилизованы с небольшим количеством проблем на разных платформах. К ним относятся следующие структурные элементы:</p> - -<ol> - <li>{{HTMLElement("form")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("output")}}</li> -</ol> - -<p>Сюда также входят все виджеты текстового поля (как однострочные, так и многострочные) и кнопки.</p> - -<h4 id="Плохая">Плохая</h4> - -<p>Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углубленных знаний CSS3.</p> - -<p>Они включают в себя элемент {{HTMLElement ("legend")}}, но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент {{htmlattrxref ("placeholder", "input")}} не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.</p> - -<p>Мы опишем, как обрабатывать эти более конкретные случаи, в статье <a href="/en-US/docs/Advanced_styling_for_HTML_forms">«Расширенные стили для HTML-форм».</a></p> - -<h4 id="The_ugly">The ugly</h4> - -<p>Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} and {{HTMLElement("datalist")}} elements. The file picker widget is also known not to be stylable at all. The new {{HTMLElement("progress")}} and {{HTMLElement("meter")}} elements also fall in this category.</p> - -<p>The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you'll be able to style. We explore how to do this in the article <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a>.</p> - -<h2 id="Basic_styling">Basic styling</h2> - -<p>To style <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms#The_good" title="/en-US/docs/HTML/Forms/Styling_HTML_forms#The_good">elements that are easy to style</a> with CSS, you shouldn't face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way.</p> - -<h3 id="Search_fields">Search fields</h3> - -<p>Search boxes are the only kind of text fields that can be a little tricky to style. On WebKit based browsers (Chrome, Safari, etc.), you'll have to tweak it with the <code>-webkit-appearance</code> proprietary property. We discuss this property further in the article: <a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a>.</p> - -<h4 id="Example">Example</h4> - -<pre class="brush: html"><form> - <input type="search"> -</form> -</pre> - -<pre class="brush: css">input[type=search] { - border: 1px dotted #999; - border-radius: 0; - - -webkit-appearance: none; -}</pre> - -<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p> - -<p>As you can see on this screenshot of the search field on Chrome, the two fields have a border set as in our example. The first field is rendered without using the <code>-webkit-appearance</code> property, whereas the second is rendered using <code>-webkit-appearance:none</code>. This difference is noticeable.</p> - -<h3 id="Fonts_and_text">Fonts and text</h3> - -<p>CSS font and text features can be used easily with any widget (and yes, you can use {{cssxref("@font-face")}} with form widgets). However, browsers' behaviors are often inconsistent. By default, some widgets do not inherit {{cssxref("font-family")}} and {{cssxref("font-size")}} from their parents. Many browsers use the system default appearance instead. To make your forms' appearance consistent with the rest of your content, you can add the following rules to your stylesheet:</p> - -<pre class="brush: css">button, input, select, textarea { - font-family : inherit; - font-size : 100%; -}</pre> - -<p>The screenshot below shows the difference; on the left is the default rendering of the element in Firefox on Mac OS X, with the platform's default font style in use. On the right are the same elements, with our font harmonization style rules applied.</p> - -<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p> - -<p>There's a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. This decision is yours to make, as the designer of your site, or Web application.</p> - -<h3 id="Box_model">Box model</h3> - -<p>All text fields have complete support for every property related to the CSS box model ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, and {{cssxref("border")}}). As before, however, browsers rely on the system default styles when displaying these widgets. It's up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you'll face a little difficulty if you want to give them a consistent size.</p> - -<p><strong>This is because each widget has their own rules for border, padding and margin.</strong> So if you want to give the same size to several different widgets, you have to use the {{cssxref("box-sizing")}} property:</p> - -<pre class="brush: css">input, textarea, select, button { - width : 150px; - margin: 0; - - -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */ - -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */ - box-sizing: border-box; -}</pre> - -<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p> - -<p>In the screenshot above, the left column is built without {{cssxref("box-sizing")}}, while the right column uses this property with the value <code>border-box</code>. Notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform's default rules for each kind of widget.</p> - -<h3 id="Positioning">Positioning</h3> - -<p>Positioning of HTML form widgets is generally not a problem; however, there are two elements you should take special note of:</p> - -<h4 id="legend">legend</h4> - -<p>The {{HTMLElement("legend")}} element is okay to style, except for positioning. In every browser, the {{HTMLElement("legend")}} element is positioned on top of the top border of its {{HTMLElement("fieldset")}} parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the {{cssxref("position")}} property. But otherwise it is part of the fieldset border.</p> - -<p>Because the {{HTMLElement("legend")}} element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it's quite often paired with a title, and then hidden in an accessible way. For example:</p> - -<h5 id="HTML">HTML</h5> - -<pre class="brush: html"><fieldset> - <legend>Hi!</legend> - <h1>Hello</h1> -</fieldset></pre> - -<h5 id="CSS">CSS</h5> - -<pre class="brush: css">legend { - width: 1px; - height: 1px; - overflow: hidden; -}</pre> - -<h4 id="textarea">textarea</h4> - -<p>By default, all browsers consider the {{HTMLElement("textarea")}} element to be an inline block, aligned to the text bottom line. This is rarely what we actually want to see. To change from <code>inline-block</code> to <code>block</code>, it's pretty easy to use the {{cssxref("display")}} property. But if you want to use it inline, it's common to change the vertical alignment:</p> - -<pre class="brush: css">textarea { - vertical-align: top; -}</pre> - -<h2 id="Example_2">Example</h2> - -<p>Let's look at a concrete example of how to style an HTML form. This will help make a lot of these ideas clearer. We will build the following "postcard" contact form:</p> - -<p><img alt="This is what we want to achieve with HTML and CSS" src="/files/4149/screenshot.png" style="border-style: solid; border-width: 1px; height: 249px; width: 370px;"></p> - -<p>If you want to follow along with this example, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/forms/postcard-example/postcard-start.html">postcard-start.html file</a>, and follow the below instructions.</p> - -<h3 id="The_HTML">The HTML</h3> - -<p>The HTML is only slightly more involved than the example we used in <a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">the first article of this guide</a>; it just has a few extra IDs and a title.</p> - -<pre class="brush: html"><form> - <h1>to: Mozilla</h1> - - <div id="from"> - <label for="name">from:</label> - <input type="text" id="name" name="user_name"> - </div> - - <div id="reply"> - <label for="mail">reply:</label> - <input type="email" id="mail" name="user_email"> - </div> - - <div id="message"> - <label for="msg">Your message:</label> - <textarea id="msg" name="user_message"></textarea> - </div> - - <div class="button"> - <button type="submit">Send your message</button> - </div> -</form></pre> - -<p>Add the above code into the body of your HTML.</p> - -<h3 id="Organizing_your_assets">Organizing your assets</h3> - -<p>This is where the fun begins! Before we start coding, we need three additional assets:</p> - -<ol> - <li>The postcard <a href="/files/4151/background.jpg" title="The postcard background">background</a> — download this image and save it in the same directory as your working HTML file.</li> - <li>A typewriter font: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external" title="http://www.fontsquirrel.com/fonts/Secret-Typewriter">The "Secret Typewriter" font from fontsquirrel.com</a> — download the TTF file into the same directory as above.</li> - <li>A handdrawn font: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external" title="http://www.fontsquirrel.com/fonts/Journal">The "Journal" font from fontsquirrel.com</a> — download the TTF file into the same directory as above.</li> -</ol> - -<p>Your fonts need some more processing before you start:</p> - -<ol> - <li>Go to the fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>.</li> - <li>Using the form, upload both your font files and generate a webfont kit. Download the kit to your computer.</li> - <li>Unzip the provided zip file.</li> - <li>Inside the unzipped contents you will find two <code>.woff</code> files and two <code>.woff2</code> files. Copy these four files into a directory called fonts, in the same directory as before. We are using two different files for each font to maximise browser compatibility; see our <a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> article for a lot more information.</li> -</ol> - -<h3 id="The_CSS">The CSS</h3> - -<p>Now we can dig into the CSS for the example. Add all the code blocks shown below inside the {{htmlelement("style")}} element, one after another.</p> - -<p>First, we prepare the ground by defining our {{cssxref("@font-face")}} rules, all the basics on the {{HTMLElement("body")}} element, and the {{HTMLElement("form")}} element:</p> - -<pre class="brush: css">@font-face { - font-family: 'handwriting'; - src: url('fonts/journal-webfont.woff2') format('woff2'), - url('fonts/journal-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'typewriter'; - src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), - url('fonts/veteran_typewriter-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -body { - font : 21px sans-serif; - - padding : 2em; - margin : 0; - - background : #222; -} - -form { - position: relative; - - width : 740px; - height : 498px; - margin : 0 auto; - - background: #FFF url(background.jpg); -}</pre> - -<p>Now we can position our elements, including the title and all the form elements:</p> - -<pre class="brush: css">h1 { - position : absolute; - left : 415px; - top : 185px; - - font : 1em "typewriter", sans-serif; -} - -#from { - position: absolute; - left : 398px; - top : 235px; -} - -#reply { - position: absolute; - left : 390px; - top : 285px; -} - -#message { - position: absolute; - left : 20px; - top : 70px; -}</pre> - -<p>That's where we start working on the form elements themselves. First, let's ensure that the {{HTMLElement("label")}}s are given the right font:</p> - -<pre class="brush: css">label { - font : .8em "typewriter", sans-serif; -}</pre> - -<p>The text fields require some common rules. Simply put, we remove their {{cssxref("border","borders")}} and {{cssxref("background","backgrounds")}}, and redefine their {{cssxref("padding")}} and {{cssxref("margin")}}:</p> - -<pre class="brush: css">input, textarea { - font : .9em/1.5em "handwriting", sans-serif; - - border : none; - padding : 0 10px; - margin : 0; - width : 240px; - - background: none; -}</pre> - -<p>When one of these fields gains focus, we highlight them with a light grey, transparent, background. Note that it's important to add the {{cssxref("outline")}} property, in order to remove the default focus highlight added by some browsers:</p> - -<pre class="brush: css">input:focus, textarea:focus { - background : rgba(0,0,0,.1); - border-radius: 5px; - outline : none; -}</pre> - -<p>Now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults.</p> - -<p>The single-line text field needs some tweaks to render nicely in Internet Explorer. Internet Explorer does not define the height of the fields based on the natural height of the font (which is the behavior of all other browsers). To fix this, we need to add an explicit height to the field, as follows:</p> - -<pre class="brush: css">input { - height: 2.5em; /* for IE */ - vertical-align: middle; /* This is optional but it makes legacy IEs look better */ -}</pre> - -<p>{{HTMLElement("textarea")}} elements default to being rendered as a block element. The two important things here are the {{cssxref("resize")}} and {{cssxref("overflow")}} properties. Because our design is a fixed-size design, we will use the <code>resize</code> property to prevent users from resizing our multi-line text field. The {{cssxref("overflow")}} property is used to make the field render more consistently across browsers. Some browsers default to the value <code>auto</code>, while some default to the value <code>scroll</code>. In our case, it's better to be sure every one will use <code>auto</code>:</p> - -<pre class="brush: css">textarea { - display : block; - - padding : 10px; - margin : 10px 0 0 -10px; - width : 340px; - height : 360px; - - resize : none; - overflow: auto; -}</pre> - -<p>The {{HTMLElement("button")}} element is really convenient with CSS; you can do whatever you want, even using <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>:</p> - -<pre class="brush: css">button { - position : absolute; - left : 440px; - top : 360px; - - padding : 5px; - - font : bold .6em sans-serif; - border : 2px solid #333; - border-radius: 5px; - background : none; - - cursor : pointer; - --webkit-transform: rotate(-1.5deg); - -moz-transform: rotate(-1.5deg); - -ms-transform: rotate(-1.5deg); - -o-transform: rotate(-1.5deg); - transform: rotate(-1.5deg); -} - -button:after { - content: " >>>"; -} - -button:hover, -button:focus { - outline : none; - background: #000; - color : #FFF; -}</pre> - -<p>And voila!</p> - -<div class="note"> -<p><strong>Note</strong>: If your example does not work quite like you expected and you want to check it against our version, you can find it on GitHub — see it <a href="https://mdn.github.io/learning-area/html/forms/postcard-example/">running live</a> (also see <a href="https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example">the source code</a>).</p> -</div> - -<h2 id="Conclusion">Conclusion</h2> - -<p>As you can see, as long as we want to build forms with just text fields and buttons, it's easy to style them using CSS. If you want to know more of the little CSS tricks that can make your life easier when working with form widgets, take a look at the form part of <a href="http://necolas.github.com/normalize.css" rel="external" title="http://necolas.github.com/normalize.css">the normalize.css project</a>.</p> - -<p><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">In the next article</a>, we will see how to handle form widgets which fall in the "bad" and "ugly" categories.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> -</ul> diff --git a/files/ru/learn/html/forms/валидация_формы/index.html b/files/ru/learn/html/forms/валидация_формы/index.html deleted file mode 100644 index f2c5f362ac..0000000000 --- a/files/ru/learn/html/forms/валидация_формы/index.html +++ /dev/null @@ -1,906 +0,0 @@ ---- -title: Проверка данных формы (проверка валидности формы на стороне клиента) -slug: Learn/HTML/Forms/Валидация_формы -translation_of: Learn/Forms/Form_validation ---- -<p> - <audio class="audio-for-speech"></audio> -</p> - -<div class="translate-tooltip-mtz" style="left: 0px; top: 3716px;"> -<div class="header"> -<div class="header-controls"></div> - -<div class="translate-icons"><img class="from"> <img class="arrow"> <img class="to"></div> -</div> - -<div class="translated-text"> -<div class="words"></div> - -<div class="sentences"> -<div class="translated-sentence-wrapper sound-anchor"> -<div class="translated-sentence word-text"><</div> - -<div class="buttons"></div> -</div> - -<div class="translit"><</div> -</div> -</div> -</div> - -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</div> - -<p class="summary">Проверка данных формы позволяет нам удостовериться в том, что пользователи заполняют форму в правильном формате, убедиться, что отправленные данные будут успешно работать с нашими приложениями. Эта статья расскажет, что вам нужно знать о проверке формы.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Предпосылки:</th> - <td>Компьютерная грамотность, разумное понимание <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, и <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> - </tr> - <tr> - <th scope="row">Задача:</th> - <td>Понимать что такое проверка формы (валидация) формы, почему это важно и как это реализовать.</td> - </tr> - </tbody> -</table> - -<h2 id="Что_такое_валидация_формы">Что такое валидация формы?</h2> - -<p>Откройте любой популярный сайт с формой регистрации и вы заметите, что они дают вам обратную связь, когда вы вводите ваши данные не в том формате, который они ожидают от вас. Вы получите подобные сообщения:</p> - -<ul> - <li>"Это поле обязательно для заполнения" (вы не можете оставить это поле пустым)</li> - <li>"Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделенные тире, за ними слеуют четыре цифры)</li> - <li>"Пожалуйста введите настоящий адрес электронной почты" (если ваша запись не в формате"somebody@example.com")</li> - <li>"Ваш пароль должен быть от 8 до 30 символов длиной, и содержать одну заглавную букву, один символ, и число"</li> -</ul> - -<p>Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохраненными в базе данных; если нет - оно выдает вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.</p> - -<p>Мы хотим сделать заполнение веб-форм максимально простым. Итак, почему мы настаиваем на подтверждении наших форм? Существуют три основные причины:</p> - -<ul> - <li><strong>Мы хотим получить нужные данные в нужном формате</strong> — наши приложения не будут работать должным образом, если данные нашего пользователя хранятся в неправильном формате, если они вводят неправильную информацию или вообще не передают информацию.</li> - <li><strong>Мы хотим защитить учетные записи наших пользователей</strong> — заставляя наших пользователей вводить защищенные пароли, это упрощает защиту информации об их учетной записи.</li> - <li><strong>Мы хотим обезопасить себя</strong> — существует множество способов, которыми злоумышленники могут злоупотреблять незащищенными формами, чтобы повредить приложение, в которое они входят (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a>).</li> -</ul> - -<h3 id="Различные_типы_валидации_формы">Различные типы валидации формы</h3> - -<p>Существует два разных типа проверки формы, с которыми вы столкнетесь в Интернете:</p> - -<ul> - <li><strong>Проверка на стороне клиента - </strong>это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как дает мгновенный ответ. Ее можно далее подразделить на: - - <ul> - <li><strong>JavaScript</strong> проверка выполняется с использованием JavaScript. Полностью настраиваемая.</li> - <li><strong>Встроенная проверка формы, </strong>используя функции проверки формы HTML5. Для этого обычно не требуется JavaScript. Встроенная проверка формы имеет лучшую производительность, но она не такая настраиваемая, как с использованием JavaScript.</li> - </ul> - </li> - <li><strong>Проверка на стороне сервера</strong> - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдает ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">серверные фреймворки</a> имеют функции для проверки и очистки данных (что делает их безопасными).</li> -</ul> - -<p>В реальном мире разработчики склонны использовать комбинацию проверки на стороне клиента и сервера.</p> - -<h2 id="Использование_встроенной_проверки_формы">Использование встроенной проверки формы</h2> - -<p>Одной из особенностей HTML5 является возможность проверки большинства пользовательских данных без использования скриптов. Это делается с помощью <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/Constraint_validation">атрибутов проверки элементов формы</a>, которые позволяют вам указывать правила ввода формы, например, нужно ли заполнять значение, минимальная и максимальная длина данных, должно ли это быть число, адрес электронной почты, адрес или что-то еще, и шаблон, которому это должно соответствовать. Если введенные данные соответствуют всем этим правилам, данные считаются валидными; если нет - невалидными.</p> - -<p>Когда элемент валидный, следующие утверждения верны:</p> - -<ul> - <li>Элемент соответствует CSS псевдо-классу {{cssxref(":valid")}} ; это позволяет вам применить конкретный стиль к валидным элементам.</li> - <li>Если пользователь пытается отправить данные, браузер отправит форму, если нет ничего, остановит отправку (например, JavaScript).</li> -</ul> - -<p>Когда элемент невалидный, следующие утверждения верны:</p> - -<ul> - <li>Элемент соответствует CSS псевдо-классу {{cssxref(":invalid")}}, и иногда другим UI псевдо-классам (например, {{cssxref(":out-of-range")}}), в зависимости от ошибки; это позволяет вам применить конкретный стиль к невалидным элементам.</li> - <li>Если пользователь пытается отправить данные, браузер заблокирует форму и выдаст сообщение об ошибке.</li> -</ul> - -<div class="blockIndicator note"> -<p>Note: Вот несколько ошибок, которые не позволяют форме быть подтверждённой: {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} or {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, or a {{domxref('validityState.customError','customError')}}.</p> -</div> - -<h2 id="Примеры_встроенных_форм_валидации">Примеры встроенных форм валидации</h2> - -<h3 id="Ограничения_проверки_элементов_input_-_простое_начало">Ограничения проверки элементов input - простое начало</h3> - -<p>В этом разделе мы рассмотрим некоторые функции HTML5, которые можно использовать для проверки {{HTMLElement("input")}} элементов.</p> - -<p>Начнем с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст {{HTMLElement("input")}} соответствующий ярлык (label) и отправку (submit) {{htmlelement("button")}}. Вы можете найти исходный код на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>,и живой пример ниже:</p> - -<pre class="notranslate"><form> - <label for="choose">Would you prefer a banana or cherry?</label> - <input id="choose" name="i_like"> - <button>Submit</button> -</form></pre> - -<pre class="notranslate">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 2px solid black; -} -</pre> - -<p>{{EmbedLiveSample("Simple_start_file", "100%", 80)}}</p> - -<p>Для начала сделаем копию <code>fruit-start.html</code>в новом каталоге на жестком диске.</p> - -<h3 id="Требуемый_атрибут_required">Требуемый атрибут (required)</h3> - -<p>Простейшей функцией проверки HTML5 для использования является {{htmlattrxref("required", "input")}} атрибут. Если вы хотите сделать ввод обязательным, вы можете пометить элемент, используя этот атрибут. Если этот атрибут установлен, форма не будет отправляться (и будет отображаться сообщение об ошибке), когда поле пустое (поле input также будет считаться невалидным).</p> - -<p>Добавьте атрибут <code>required</code> в ваш input, как показано ниже:</p> - -<pre class="brush: html notranslate"><form> - <label for="choose">Would you prefer a banana or cherry?</label> - <input id="choose" name="i_like" required> - <button>Submit</button> -</form></pre> - -<p>Также обратите внимание на CSS, включенный в файл примера:</p> - -<pre class="notranslate">input:invalid { - border: 2px dashed red; -} - -input:invalid:required { - background-image: linear-gradient(to right, pink, lightgreen); -} - -input:valid { - border: 2px solid black; -}</pre> - -<p>В этом случае к input будет применяться ярко-красный пунктирный border, когда он невалидный, и более тонкая черная граница, когда он валидный. Попробуйте новое поведение в приведенном ниже примере:</p> - -<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p> - -<div class="blockIndicator note"> -<p>Note: Вы можете найти этот пример на GitHub как <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (также смотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">source code</a>.)</p> -</div> - -<p>Попробуйте эту форму без значения. Обратите внимание как невалидный ввод получает фокус, сообщение об ошибке ("Пожалуйста заполните поле") появляется, и форма не отправляется.</p> - -<h3 id="Проверка_с_регулярными_выражениями">Проверка с регулярными выражениями</h3> - -<p>Другая полезная функция проверки - это <kbd><a href="/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/pattern">pattern</a> </kbd>атрибут , который ожидает <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> в качестве значения. Регулярное выражение (regex) - это шаблон который используется для проверки соответствия символов в текстовых строках, поэтому он идеально подходит для проверки формы, а также для многих других целей в JavaScript.</p> - -<p>Регулярные выражения довольно сложны, и мы не будем подробно разбирать их в этой статье. Ниже приведены некоторые примеры, чтобы вы представляли себе, как они работают:</p> - -<ul> - <li><code>a</code> — соответствует одному символу <code>a</code> (не <code>b</code>, не <code>aa</code>, итд.)</li> - <li><code>abc</code> — соответствует <code>a</code>, далее <code>b</code>, далее <code>c</code>.</li> - <li><code>a*</code> — соответствует символу <code>a</code>, 0 или более раз (<code>+</code> соответствует символу один или несколько раз).</li> - <li><code>[^a]</code> — соответствует одному символу, <strong>не </strong>a.</li> - <li><code>a|b</code> — соответствует одному символу a или b.</li> - <li><code>[abc]</code> — соответствует одному символу a, b, или c.</li> - <li><code>[^abc]</code> — соответствует одному символу кроме a, b, или c.</li> - <li><code>[a-z]</code> — соответствует одному символу в диапазоне a–z, только в нижнем регистре (вы можете использовать <code>[A-Za-z]</code> для заглавных и прописных букв, и<code>[A-Z]</code> только для заглавных букв).</li> - <li><code>a.c</code> — соответсвует <code>a</code>, за ним следует любой элемент, за ним следует <code>c</code>.</li> - <li><code>a{5}</code> — соответствует <code>a</code>, 5 раз.</li> - <li><code>a{5,7}</code> — соответствует <code>a</code>, от 5 до 7 раз, но не больше и не меньше.</li> -</ul> - -<p>Вы также можете использовать числа и другие символы в этих выражениях, например:</p> - -<ul> - <li><code>[ -]</code> — соответствует пробелу или тире.</li> - <li><code>[0-9]</code> — соответствует любой цифре в диапазоне от 0 до 9.</li> -</ul> - -<p>Вы можете комбинировать их практически, как хотите, указывая разные части, одну за другой:</p> - -<ul> - <li><code>[Ll].*k</code> — Один символ L, в верхнем или нижнем регистре, за ним следует ни одного или несколько символов любого типа за которыми следует <code>k</code> в нижнем регистре.</li> - <li><code>[A-Z][A-Za-z' -]+</code> — Один символ верхнего регистра, за которым следует один или несколько символов, которые представляют собой букву верхнего или нижнего регистра, тире, апостроф или пробел. Это можно использовать для проверки названия городов / городов англоязычных стран, которые должны начинаться с заглавной буквы, но не содержать других символов. Примеры из UK включая Manchester, Ashton-under-lyne, и Bishop's Stortford.</li> - <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Внутренний телефонный номер США — три цифры, затем пробел или тире, затем три цифры,затем пробел или тире, затем четыре цифры. Возможно, вам придется сделать это более сложным, поскольку некоторые люди пишут свой код области в круглых скобках, но это работает для простой демонстрации.</li> -</ul> - -<p>В любом случае, давайте реализуем пример - обновим ваш HTML, чтобы добавить атрибут шаблона, например:</p> - -<pre class="brush: html notranslate"><form> - <label for="choose">Would you prefer a banana or a cherry?</label> - <input id="choose" name="i_like" required pattern="banana|cherry"> - <button>Submit</button> -</form></pre> - -<div class="hidden"> -<pre class="brush: css notranslate">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 2px solid black; -}</pre> -</div> - -<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 50)}}</p> - -<p>В этом примере {{HTMLElement("input")}} элемент принимает одно из двух возможных значений: строку "banana" или строку "cherry".</p> - -<p>На этом этапе попробуйте изменить значение внутри атрибута <code>pattern</code> чтобы сопоставить некоторые из примеров, которые вы видели ранее, и посмотрите, как это влияет на значения, которые вы можете ввести, чтобы сделать входное значение валидным. Попробуйте написать свои собственные, и посмотрите, как это работает! Попробуйте сделать их связанными с фруктами, где это возможно, поэтому ваши примеры имеют смысл!</p> - -<div class="note"> -<p><strong>Примечание:</strong> Некоторые {{HTMLElement("input")}} типы элементов не нуждаются в атрибуте {{htmlattrxref("pattern","input")}} чтобы быть валидными. Указание типа <code>email</code> например, проверяет введенное значение через регулярное выражение, соответствующее хорошо сформированному адресу электронной почты (или списку email адресов, разделенных запятыми, если в нем присутствует атрибут {{htmlattrxref("multiple","input")}} attribute). В качестве еще одного примера, поле с типом <code>url</code> автоматически требует правильно сформированного URL.</p> -</div> - -<div class="note"> -<p><strong>Примечание</strong>: Элемент {{HTMLElement("textarea")}} не поддерживает атрибут {{htmlattrxref("pattern","input")}}.</p> -</div> - -<h3 id="Ограничение_длины_ваших_записей">Ограничение длины ваших записей</h3> - -<p>Все текстовые поля, созданные с помощью элементов ({{HTMLElement("input")}} или {{HTMLElement("textarea")}}) могут быть ограничены по размеру, используя атрибуты {{htmlattrxref("minlength","input")}} и{{htmlattrxref("maxlength","input")}}. Поле невалидно если его значение короче чем {{htmlattrxref("minlength","input")}} или значение длиннее значения {{htmlattrxref("maxlength","input")}}. Браузеры часто не позволяют пользователю вводить более длинное значение, чем ожидалось, в текстовые поля в любом случае, но полезно иметь этот мелкозернистый элемент управления.</p> - -<p>Для числовых полей (например <code><input type="number"></code>), атрибуты {{htmlattrxref("min","input")}} и {{htmlattrxref("max","input")}} также обеспечивают ограничение валидации. Если значение поля меньше атрибута {{htmlattrxref("min","input")}} или больше атрибута {{htmlattrxref("max","input")}}, поле будет невалидным.</p> - -<p>Давайте посмотрим на другой пример. Создайте новую копию файла <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p> - -<p>Теперь удалите содержимое элемента <code><body></code>, и замените его следующим:</p> - -<pre class="brush: html notranslate"><form> - <div> - <label for="choose">Would you prefer a banana or a cherry?</label> - <input id="choose" name="i_like" required minlength="6" maxlength="6"> - </div> - <div> - <label for="number">How many would you like?</label> - <input type="number" id="number" name="amount" value="1" min="1" max="10"> - </div> - <div> - <button>Submit</button> - </div> -</form></pre> - -<ul> - <li>Здесь вы увидите, что мы задали полю <code>text</code> <code>minlength</code> <code>maxlength</code> равную 6 — такая же длина, как banana и cherry. Ввод меньшего количества символов будет отображаться как невалидный, а вводить больше в большинстве браузеров невозможно.</li> - <li>Мы также дали полю <code>number</code> <code>min</code> 1 и <code>max</code> 10 - числа введенные вне этого диапазона будут отображаться как невалидные, и вы не сможете использовать стрелки приращения / уменьшения, чтобы переместить значение за пределами этого диапазона.</li> -</ul> - -<div class="hidden"> -<pre class="notranslate">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 2px solid black; -} - -div { - margin-bottom: 10px; -}</pre> -</div> - -<p>Вот живой пример:</p> - -<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 70)}}</p> - -<div class="note"> -<p><strong>Примечание</strong>: <code><input type="number"></code> (и другие типы, например <code>range</code>) могут также содержать атрибут {{htmlattrxref("step", "input")}} который указывает, какой инкремент будет увеличиваться или уменьшаться, когда используются элементы управления входом (например, номерные кнопки вверх и вниз)</p> -</div> - -<h3 id="Полный_пример">Полный пример</h3> - -<p>Вот полный пример, чтобы показать использование встроенных функций проверки HTML:</p> - -<pre class="brush: html notranslate"><form> - <p> - <fieldset> - <legend>Title<abbr title="This field is mandatory">*</abbr></legend> - <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label> - <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label> - </fieldset> - </p> - <p> - <label for="n1">How old are you?</label> - <!-- The pattern attribute can act as a fallback for browsers which - don't implement the number input type but support the pattern attribute. - Please note that browsers that support the pattern attribute will make it - fail silently when used with a number field. - Its usage here acts only as a fallback --> - <input type="number" min="12" max="120" step="1" id="n1" name="age" - pattern="\d+"> - </p> - <p> - <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label> - <input type="text" id="t1" name="fruit" list="l1" required - pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"> - <datalist id="l1"> - <option>Banana</option> - <option>Cherry</option> - <option>Apple</option> - <option>Strawberry</option> - <option>Lemon</option> - <option>Orange</option> - </datalist> - </p> - <p> - <label for="t2">What's your e-mail?</label> - <input type="email" id="t2" name="email"> - </p> - <p> - <label for="t3">Leave a short message</label> - <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> - </p> - <p> - <button>Submit</button> - </p> -</form></pre> - -<pre class="brush: css notranslate">body { - font: 1em sans-serif; - padding: 0; - margin : 0; -} - -form { - max-width: 200px; - margin: 0; - padding: 0 5px; -} - -p > label { - display: block; -} - -input[type=text], -input[type=email], -input[type=number], -textarea, -fieldset { -/* требуется для правильной формы формы - элементов в браузерах на основе WebKit*/ - -webkit-appearance: none; - - width : 100%; - border: 1px solid #333; - margin: 0; - - font-family: inherit; - font-size: 90%; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -input:invalid { - box-shadow: 0 0 5px 1px red; -} - -input:focus:invalid { - outline: none; -}</pre> - -<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p> - -<h3 id="Индивидуальные_сообщения_об_ошибках">Индивидуальные сообщения об ошибках</h3> - -<p>Как видно из приведенных выше примеров, каждый раз, когда пользователь пытается отправить невалидную форму, браузер отображает сообщение об ошибке. Способ отображения этого сообщения зависит от браузера.</p> - -<p>Эти автоматизированные сообщения имеют два недостатка:</p> - -<ul> - <li>Нет стандартного способа изменить внешний вид используя CSS.</li> - <li>Они зависят от языка браузера, что означает, что у вас может быть страница на одном языке, но сообщение об ошибке отображаться на другом языке.</li> -</ul> - -<table> - <caption>Французская версия сообщений обратной связи на странице на английском языке</caption> - <thead> - <tr> - <th scope="col">Браузер</th> - <th scope="col">Отображение</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 17 (Windows 7)</td> - <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td> - </tr> - <tr> - <td>Chrome 22 (Windows 7)</td> - <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td> - </tr> - <tr> - <td>Opera 12.10 (Mac OSX)</td> - <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td> - </tr> - </tbody> -</table> - -<p>Чтобы настроить внешний вид и текст этих сообщений, вы должны использовать JavaScript; нет способа сделать это, используя только HTML и CSS.</p> - -<p>HTML5 предоставляет <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api">API проверки ограничений </a>(API - Application Programing interface, программный интерфейс приложения, англ.) для проверки и настройки состояния элемента формы. Помимо прочего, можно заменить текст сообщения об ошибке. Давайте посмотрим на небольшой пример:</p> - -<pre class="brush: html notranslate"><form> - <label for="mail">I would like you to provide me an e-mail</label> - <input type="email" id="mail" name="mail"> - <button>Submit</button> -</form></pre> - -<p>В JavaScript вы вызываете метод <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a>:</p> - -<pre class="brush: js notranslate">var email = document.getElementById("mail"); - -email.addEventListener("input", function (event) { - if (email.validity.typeMismatch) { - email.setCustomValidity("I expect an e-mail, darling!"); - } else { - email.setCustomValidity(""); - } -});</pre> - -<p>{{EmbedLiveSample("Customized_error_messages", "100%", 50)}}</p> - -<h2 id="Проверка_форм_с_использованием_JavaScript">Проверка форм с использованием JavaScript</h2> - -<p>Если вы хотите контролировать внешний вид собственных сообщений об ошибках или работать с браузерами, которые не поддерживают встроенную проверку формы HTML, вы должны использовать JavaScript.</p> - -<h3 id="API_проверки_валидности_HTML5">API проверки валидности HTML5</h3> - -<p>Все больше браузеров теперь поддерживают API проверки ограничений, и он становится надежным. Этот API состоит из набора методов и свойств, доступных для каждого элемента формы.</p> - -<h4 id="Свойства_API_проверки_валидности">Свойства API проверки валидности</h4> - -<table> - <thead> - <tr> - <th scope="col">Свойство</th> - <th scope="col">Описание</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>validationMessage</code></td> - <td>Локализованное сообщение, описывающее ограничения валидности, которым элемент управления не соответствует (если есть), или пустая строка, если элемент управления не является кандидатом для проверки ограничений (<code>willValidate</code> is <code>false</code>), или значение элемента удовлетворяет его ограничениям.</td> - </tr> - <tr> - <td><code>validity</code></td> - <td>объект {{domxref("ValidityState")}} , описывающий состояние действительности элемента.</td> - </tr> - <tr> - <td><code>validity.customError</code></td> - <td>Возвращает <code>true</code> если элемент содержит пользовательскую ошибку; <code>false</code> в противном случае.</td> - </tr> - <tr> - <td><code>validity.patternMismatch</code></td> - <td>Возвращает <code>true</code> если значение элемента не соответствует предоставленному шаблону; <code>false</code> в противном случае.<br> - <br> - если возвращает <code>true</code>, элемент будет соответствовать CSS псевдо-классу {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>validity.rangeOverflow</code></td> - <td>Возвращает <code>true</code> если значение элемента выше заданного максимума; <code>false</code> в противном случае.<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдо-классу. {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.rangeUnderflow</code></td> - <td>Возвращает<code>true</code> если значение элемента меньше заданного минимума; <code>false</code> в противном случае.<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдо-классу {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.stepMismatch</code></td> - <td>Возвращает<code>true,</code> если значение элемента не соответствует правилам, предоставляемым атрибутом step; в противном случае <code>false</code> .<br> - <br> - <code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Если возвращает </span></font>true</code>, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдоклассу {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.tooLong</code></td> - <td>Возвращает <code>true</code> если значение элемента больше заданной максимальной длины; иначе будет false<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдоклассу {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.typeMismatch</code></td> - <td>Возвращает true если значение элемента не соответствует правильному синтаксису; в противном случае - false.<br> - Если возвращает <code>true</code>, элемент будет соответствовать CSS псевдоклассу {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>validity.valid</code></td> - <td>Возвращае <code>true</code> если значение элемента не имеет проблем с валидностью; в противном случае <code>false</code>.<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать CSS псевдоклассу {{cssxref(":valid")}} ; CSS псевдоклассу {{cssxref(":invalid")}} в противном случае.</td> - </tr> - <tr> - <td><code>validity.valueMissing</code></td> - <td>Возвращает true если элемент не имеет значения, но является обязательным полем; в противном случае false.<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать CSS псевдоклассу {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>willValidate</code></td> - <td>Возвращает <code>true</code> если элемент будет проверен при отправке формы; в противном случае <code>false</code>.</td> - </tr> - </tbody> -</table> - -<h4 id="Методы_API_проверки_ограничений">Методы API проверки ограничений</h4> - -<table> - <thead> - <tr> - <th scope="col">Метод</th> - <th scope="col">Описание</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>checkValidity()</code></td> - <td>Возвращает <code>true</code> если значение элемента не имеет проблем с валидностью; иначе <code>false</code>. Если элемент невалидный, этот метод также вызывает событие {{event("invalid")}} в элементе .</td> - </tr> - <tr> - <td><code>setCustomValidity(<em>message</em>)</code></td> - <td>Добавляет настраиваемое сообщение об ошибке в элемент; если вы установили собственное сообщение об ошибке, элемент считается невалидным, и отображается указанная ошибка. Это позволяет использовать код JavaScript для установления ошибки валидации, отличного от тех, которые предлагаются стандартным API ограничений валидности. Сообщение показывается пользователю при возникновении проблемы.<br> - <br> - Если аргументом является пустая строка, пользовательская ошибка очищается.</td> - </tr> - </tbody> -</table> - -<p>Для устаревших браузеров можно использовать полифилл как <a href="https://hyperform.js.org/" rel="external">Hyperform </a> чтобы компенсировать отсутствие поддержки API ограничений валидности. Поскольку вы уже используете JavaScript, использование полифилла не является дополнительным бременем для вашего веб-сайта или дизайна или реализации веб-приложения.</p> - -<h4 id="Пример_использования_API_проверки_ограничений">Пример использования API проверки ограничений</h4> - -<p>Давайте посмотрим, как использовать этот API для создания настраиваемых сообщений об ошибках. Сначала HTML:</p> - -<pre class="brush: html notranslate"><form novalidate> - <p> - <label for="mail"> - <span>Please enter an email address:</span> - <input type="email" id="mail" name="mail"> - <span class="error" aria-live="polite"></span> - </label> - </p> - <button>Submit</button> -</form></pre> - -<p>Эта простая форма использует атрибут {{htmlattrxref("novalidate","form")}} для отключения автоматической валидации браузера, что позволяет нашему скрипту контролировать валидацию. Однако это не отключает поддержку API ограничений валидации или применения псевдоклассов CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} и {{cssxref(":out-of-range")}}. Это означает, что, хотя браузер не проверяет правильность формы перед отправкой своих данных, вы все равно можете сделать это самостоятельно и соответствующим образом сформировать форму.</p> - -<p>Атрибут <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> гарантирует, что наше индивидуальное сообщение об ошибке будет доступно всем, включая тех, кто использует вспомогательные технологии, такие как скрин-ридеры.</p> - -<h5 id="CSS">CSS</h5> - -<p>Этот CSS задает стили нашей форме и выводу ошибки, чтобы сделать их визуально более привлекательными.</p> - -<pre class="brush: css notranslate">/* Это просто, чтобы сделать пример более приятным */ -body { - font: 1em sans-serif; - padding: 0; - margin : 0; -} - -form { - max-width: 200px; -} - -p * { - display: block; -} - -input[type=email]{ - -webkit-appearance: none; - - width: 100%; - border: 1px solid #333; - margin: 0; - - font-family: inherit; - font-size: 90%; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/* Наш стиль для невалидных полей */ -input:invalid{ - border-color: #900; - background-color: #FDD; -} - -input:focus:invalid { - outline: none; -} - -/* Это стиль для сообщений об ошибке */ -.error { - width : 100%; - padding: 0; - - font-size: 80%; - color: white; - background-color: #900; - border-radius: 0 0 5px 5px; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.error.active { - padding: 0.3em; -}</pre> - -<h5 id="JavaScript">JavaScript</h5> - -<p>Следующий код JavaScript обрабатывает выборочную проверку ошибок.</p> - -<pre class="brush: js notranslate">//Существует много способов выбрать DOM узел; здесь мы получаем форму и электронную почту -//поле ввода, а также элемент span, в который мы поместим сообщение об ошибке. -var form = document.getElementsByTagName('form')[0]; -var email = document.getElementById('mail'); -var error = document.querySelector('.error'); - -email.addEventListener("input", function (event) { - // Каждый раз, когда пользователь вводит что-либо, мы проверяем, - // является ли корректным поле электронной почты. - if (email.validity.valid) { - // В случае появления сообщения об ошибке, если поле - // является корректным, мы удаляем сообщение об ошибке. - error.innerHTML = ""; // Сбросить содержимое сообщения - error.className = "error"; // Сбросить визуальное состояние сообщения - } -}, false); -form.addEventListener("submit", function (event) { - // Каждый раз, когда пользователь пытается отправить данные, мы проверяем - // валидность поля электронной почты. - if (!email.validity.valid) { - - // Если поле невалидно, отображается пользовательское - // сообщение об ошибке. - error.innerHTML = "I expect an e-mail, darling!"; - error.className = "error active"; - // И мы предотвращаем отправку формы путем отмены события - event.preventDefault(); - } -}, false);</pre> - -<p>Вот живой результат:</p> - -<p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p> - -<p>API ограничений валидации дает вам мощный инструмент для проверки формы, позволяя вам получить контроль над пользовательским интерфейсом больше и лучше того, что вы можете делать только при помощи HTML и CSS.</p> - -<h3 id="Проверка_форм_без_встроенного_API">Проверка форм без встроенного API</h3> - -<p>Иногда, например, с устаревшими браузерами или <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">пользовательскими виджетами</a>, вы не сможете (или не захотите) использовать API проверки ограничений. В этом случае вы все еще можете использовать JavaScript для проверки вашей формы. Проверка формы - это скорее вопрос пользовательского интерфейса, чем проверка валидности данных.</p> - -<p>Чтобы проверить форму, вы должны задать себе несколько вопросов:</p> - -<dl> - <dt>Какую проверку я должен выполнить?</dt> - <dd>Вам нужно определить, как проверить ваши данные: операции со строками, преобразование типов, регулярные выражения и т. д. Это зависит от вас. Просто помните, что данные формы всегда являются текстовыми и всегда предоставляются вашему скрипту как строки.</dd> - <dt>Что делать, если форма не проверяется?</dt> - <dd>Это явно вопрос интерфейса. Вы должны решить, как будет выглядеть форма: формально ли отправляет данные? Должны ли вы выделять поля, которые содержат ошибки? Должны отображаться сообщения об ошибках?</dd> - <dt>Как я могу помочь пользователю исправить невалидные данные?</dt> - <dd>Чтобы уменьшить разочарование пользователя, очень важно предоставить как можно больше полезной информации, чтобы помочь им в исправлении их исходных данных. Вы должны предлагать предварительные предложения, чтобы они знали, что ожидается, а также ясные сообщения об ошибках. Если вы хотите вникнуть в требования к пользовательскому интерфейсу проверки формы, есть некоторые полезные статьи, которые вы должны прочитать: - <ul> - <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Подтверждение формы поля: подход, основанный на ошибках</a></li> - <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Проверка веб-формы: лучшие практики и учебные пособия</a></li> - <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Рекомендации по подсказкам и валидации в веб-формах</a></li> - <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Встроенная проверка в веб-формах</a></li> - </ul> - </dd> -</dl> - -<h4 id="Пример_который_не_использует_API_валидации_ограничений">Пример, который не использует API валидации ограничений</h4> - -<p>Чтобы проиллюстрировать это, давайте перестроим предыдущий пример, чтобы он работал с устаревшими браузерами:</p> - -<pre class="brush: html notranslate"><form> - <p> - <label for="mail"> - <span>Please enter an email address:</span> - <input type="text" class="mail" id="mail" name="mail"> - <span class="error" aria-live="polite"></span> - </label> - <p> - <!-- Some legacy browsers need to have the `type` attribute - explicitly set to `submit` on the `button`element --> - <button type="submit">Submit</button> -</form></pre> - -<p>Как вы можете видеть, HTML почти такой же; мы просто удалили функции проверки HTML. Обратите внимание, что <a href="/en-US/docs/Accessibility/ARIA">ARIA</a> является независимой спецификацией, которая специально не связана с HTML5.</p> - -<h5 id="CSS_2">CSS</h5> - -<p>Аналогично, CSS не нужно сильно менять; мы просто переводим CSS-псевдокласс {{cssxref(":invalid")}} в настоящий класс и избегаем использования селектора атрибутов, который не работает в Internet Explorer 6.</p> - -<pre class="brush: css notranslate">/* This is just to make the example nicer */ -body { - font: 1em sans-serif; - padding: 0; - margin : 0; -} - -form { - max-width: 200px; -} - -p * { - display: block; -} - -input.mail { - -webkit-appearance: none; - - width: 100%; - border: 1px solid #333; - margin: 0; - - font-family: inherit; - font-size: 90%; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/* This is our style for the invalid fields */ -input.invalid{ - border-color: #900; - background-color: #FDD; -} - -input:focus.invalid { - outline: none; -} - -/* This is the style of our error messages */ -.error { - width : 100%; - padding: 0; - - font-size: 80%; - color: white; - background-color: #900; - border-radius: 0 0 5px 5px; - - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.error.active { - padding: 0.3em; -}</pre> - -<h5 id="JavaScript_2">JavaScript</h5> - -<p>Большие изменения в коде JavaScript, которые должны сделать намного больше тяжелой работы.</p> - -<pre class="brush: js notranslate">// Существует меньше способов выбрать узел DOM с устаревшими браузерами -var form = document.getElementsByTagName('form')[0]; -var email = document.getElementById('mail'); - -// Ниже приведен трюк для достижения следующего узла Element Element в DOM -// Это опасно, потому что вы можете легко построить бесконечный цикл. -// В современных браузерах вам следует использовать элемент element.nextElementSibling -var error = email; -while ((error = error.nextSibling).nodeType != 1); - -// As per the HTML5 Specification -var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; - -// Многие устаревшие браузеры не поддерживают метод addEventListener. -// Вот простой способ справиться с этим; это далеко не единственный. -function addEvent(element, event, callback) { - var previousEventCallBack = element["on"+event]; - element["on"+event] = function (e) { - var output = callback(e); - - // Обратный вызов, который возвращает `false`, останавливает цепочку обратного вызова - // и прерывает выполнение обратного вызова события. - if (output === false) return false; - - if (typeof previousEventCallBack === 'function') { - output = previousEventCallBack(e); - if(output === false) return false; - } - } -}; - -// Теперь мы можем перестроить наше ограничение валидации -// Поскольку мы не полагаемся на псевдо-класс CSS, мы должны -// явно установить допустимый / недопустимый класс в поле электронной почты -addEvent(window, "load", function () { -// Здесь мы проверяем, пусто ли поле (помните, что поле не требуется) - // Если это не так, мы проверяем, является ли его контент корректным адресом электронной почты. - var test = email.value.length === 0 || emailRegExp.test(email.value); - - email.className = test ? "valid" : "invalid"; -}); - -// Это определяет, что происходит, когда пользователь вводит в поле -addEvent(email, "input", function () { - var test = email.value.length === 0 || emailRegExp.test(email.value); - if (test) { - email.className = "valid"; - error.innerHTML = ""; - error.className = "error"; - } else { - email.className = "invalid"; - } -}); - -// Это определяет, что происходит, когда пользователь пытается отправить данные -addEvent(form, "submit", function () { - var test = email.value.length === 0 || emailRegExp.test(email.value); - - if (!test) { - email.className = "invalid"; - error.innerHTML = "I expect an e-mail, darling!"; - error.className = "error active"; - - // Некоторые устаревшие браузеры не поддерживают метод event.preventDefault () - return false; - } else { - email.className = "valid"; - error.innerHTML = ""; - error.className = "error"; - } -});</pre> - -<p>Результат выглядит следующим образом:</p> - -<p>{{EmbedLiveSample("Example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}</p> - -<p>Как вы можете видеть, создать собственную систему проверки не сложно. Трудная часть состоит в том, чтобы сделать его достаточно общим, чтобы использовать его как в кросс-платформенной, так и в любой форме, которую вы могли бы создать. Существует множество библиотек для проверки формы; вы не должны колебаться, чтобы использовать их. Вот несколько примеров:</p> - -<ul> - <li>Автономная библиотека - <ul> - <li><a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></li> - </ul> - </li> - <li>jQuery plug-in: - <ul> - <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a></li> - </ul> - </li> -</ul> - -<h4 id="Удаленная_проверка">Удаленная проверка</h4> - -<p>В некоторых случаях может быть полезно выполнить некоторую удаленную проверку. Такая проверка необходима, когда данные, введенные пользователем, привязаны к дополнительным данным, хранящимся на стороне сервера вашего приложения. Одним из вариантов использования является регистрационные формы, в которых вы запрашиваете имя пользователя. Чтобы избежать дублирования, разумнее выполнить AJAX запрос для проверки доступности имени пользователя, а не попросить пользователя отправить данные, а затем отправить форму с ошибкой.</p> - -<p>Выполнение такой проверки требует принятия нескольких мер предосторожности:</p> - -<ul> - <li>Для этого требуется публиковать API и некоторые данные; убедитесь, что это не конфиденциальные данные.</li> - <li>Сетевое отставание требует выполнения асинхронной проверки. Это требует некоторой работы пользовательского интерфейса, чтобы быть уверенным, что пользователь не будет заблокирован, если проверка не будет выполнена должным образом.</li> -</ul> - -<h2 id="Заключение">Заключение</h2> - -<p>Проверка формы не требует сложного JavaScript, но она требует тщательного изучения пользователя. Всегда помните, чтобы помочь вашему пользователю исправить данные, которые они предоставляют. Для этого обязательно выполните следующие действия:</p> - -<ul> - <li>Отображать явные сообщения об ошибках.</li> - <li>Будьте правдоподобны в отношении формата ввода.</li> - <li>Укажите, где именно происходит ошибка (особенно на больших формах).</li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</p> - -<h2 id="В_этом_модуле">В этом модуле</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша первая HTML-форма</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать форму HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Нативная форма виджетов</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Проверка данных формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создать пользовательские виджеты формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Отправка форм через JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-формы в старых браузерах</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Стилизация HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Расширенный стиль для HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Таблица совместимости свойств виджета формы</a></li> -</ul> diff --git a/files/ru/learn/html/forms/ваша_первая_html_форма/index.html b/files/ru/learn/html/forms/ваша_первая_html_форма/index.html deleted file mode 100644 index b68d433739..0000000000 --- a/files/ru/learn/html/forms/ваша_первая_html_форма/index.html +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: Ваша первая HTML форма -slug: Learn/HTML/Forms/Ваша_первая_HTML_форма -tags: - - HTML-форма - - Веб-форма - - Форма -translation_of: Learn/Forms/Your_first_form ---- -<div>{{LearnSidebar}}{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}</div> - -<p class="summary">Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Необходимые знания:</th> - <td>Базовое представление о компьютерах и <a href="/ru/docs/Learn/HTML/Введение_в_HTML">базовое понимание HTML</a>.</td> - </tr> - <tr> - <th scope="row">Цель:</th> - <td>Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.</td> - </tr> - </tbody> -</table> - -<h2 id="Что_такое_Веб-форма">Что такое Веб-форма?</h2> - -<p><strong>Веб-формы</strong> являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).</p> - -<p><strong>Веб-формы</strong> — их также часто называют <strong>HTML-формы</strong> — состоят из одного или нескольких <strong>элементов управления форм</strong> (иногда их также называют <strong>виджетами</strong>) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радио-баттоны, большинство из которых создаются через html-элемент {{htmlelement("input")}}, однако есть и другие элементы, о которых тоже стоит узнать.</p> - -<p>В элементах управления форм можно задать правила, указывающие на определенный формат данных или значений, которые могут быть введены (<strong>валидация форм</strong>), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.</p> - -<h2 id="Проектирование_формы">Проектирование формы</h2> - -<p>Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.</p> - -<p>Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:</p> - -<ul> - <li>На Smashing Magazine есть <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">хорошие статьи на тему UX в HTML-формах</a>, включая старую, но всё ещё актуальную статью <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a>.</li> - <li>Также есть UXMatters — хороший ресурс с полезными советами от <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">базовых лучших практик</a> до сложных решений, таких как <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">мультистраничные формы</a>.</li> -</ul> - -<p>В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.</p> - -<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p> - -<p>Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.</p> - -<h2 id="Активное_обучение_Реализация_HTML-формы">Активное обучение: Реализация HTML-формы</h2> - -<p>Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} и {{HTMLelement("button")}}.</p> - -<p>Прежде, чем продолжить, скопируйте <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простой HTML-шаблон</a> — вы будете создавать свою форму внутри него.</p> - -<h3 id="Элемент_HTMLelementform">Элемент {{HTMLelement("form")}}</h3> - -<p>Создание форм начинается с элемента {{HTMLelement("form")}}:</p> - -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> - -</form></pre> - -<p>Этот элемент формально определяет форму. Он является элементом-контейнером, как HTML-элементы {{HTMLelement("div")}} или {{HTMLelement("p")}}, но при этом он поддерживает некоторые специфические атрибуты для настройки поведения формы. Все атрибуты являются опциональными, но в стандартной практике принято указывать атрибуты <code>action</code> и <code>method</code>:</p> - -<ul> - <li>Атрибут <code>action</code> определяет адрес, куда должны быть посланы данные после отправки формы.</li> - <li>Атрибут <code>method</code> указывает, какой HTTP-метод будет использован при передаче данных (это может быть "get" или "post").</li> -</ul> - -<div class="note"> -<p><strong>Примечание</strong>: Мы детальнее разберём работу этих атрибутов далее в статье <a href="/ru/docs/Learn/HTML/Forms/Отправка_и_Получение_данных_формы" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a>.</p> -</div> - -<p>Теперь добавьте указанный выше код с элементом {{htmlelement("form")}} внутрь тега {{htmlelement("body")}} в вашем HTML.</p> - -<h3 id="Элементы_HTMLelementlabel_HTMLelementinput_и_HTMLelementtextarea">Элементы {{HTMLelement("label")}}, {{HTMLelement("input")}} и {{HTMLelement("textarea")}}</h3> - -<p>Наша контактная форма несложная: часть, в которую будут вводиться данные, состоит из трёх текстовых полей, каждое их которых связано с HTML-элементом {{HTMLelement("label")}}:</p> - -<ul> - <li>Поле ввода для имени — {{HTMLelement("input/text", "single-line text field")}}</li> - <li>Поле ввода для e-mail — {{HTMLelement("input/email", "input of type email")}}: однострочное текстовое поле, которое принимает только e-mail адреса.</li> - <li>Поле ввода для сообщения — {{HTMLelement("textarea")}}, многострочное текстовое поле.</li> -</ul> - -<p>В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:</p> - -<pre class="brush:html; notranslate" dir="rtl"><form action="/my-handling-form-page" method="post"> - <ul> - <li> - <label for="name">Name:</label> - <input type="text" id="name" name="user_name"> - </li> - <li> - <label for="mail">E-mail:</label> - <input type="email" id="mail" name="user_mail"> - </li> - <li> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </li> - </ul> -</form></pre> - -<p>Добавьте в вашу форму код, чтобы она выглядела так же, как форма выше.</p> - -<p>Здесь элементы {{HTMLelement("li")}} используются для структурирования кода и облегчения стилизации (будет разобрано далее в статье). Для доступности и удобства использования мы указали определённый текст-подсказку для каждого элемента управления. Обратите внимание на использование атрибута <code>for</code> на каждом элементе {{HTMLelement("label")}}, который принимает в качестве значение <code>id</code> элемента управления формы, с которым он связан — этот подход позволяет привязать тексты-подсказки к форме.</p> - -<p>Такой подход полезен тем, что позволяет пользователям с мышью, трекпадом и сенсорным устройством кликнуть на текст-подсказку для активации связанного с ним виджета формы, а также обеспечивает читабельное имя для пользователей скрин-ридеров. Вы найдёте более детальный разбор текстов-подсказок в статье <a href="/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a>.</p> - -<p>В HTML-элементе {{HTMLelement("input")}} самым важным атрибутом является атрибут <code>type</code>. Этот атрибут чрезвычайно важен, потому что он определяет внешний вид и поведение элемента {{HTMLelement("input")}}. Вы найдёте больше информации об этом далее в статье <a href="/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">Стандартные виджеты форм</a>.</p> - -<ul> - <li>В нашем простом примере мы используем {{HTMLelement("input/text")}} для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.</li> - <li>Для второго поля ввода мы используем тип {{HTMLelement("input/email")}}, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введёные пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье <a href="/ru/docs/Learn/HTML/Forms/Валидация_формы" title="/en-US/docs/HTML/Forms/Data_form_validation">Валидация формы</a>.</li> -</ul> - -<p>Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <code><input></code> и <code><textarea></textarea></code>. Это одна из странностей HTML. Тег <code><input></code> — это пустой элемент, то есть он не нуждается в закрывающем теге. {{HTMLElement("textarea")}} — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента {{HTMLElement("input")}} вам необходимо использовать атрибут <code>value</code> следующим образом:</p> - -<pre class="brush:html; notranslate"><input type="text" value="по умолчанию в этом элементе находится этот текст" /></pre> - -<p>Если вы хотите определить значение по умолчанию для HTML-элемента {{HTMLElement("textarea")}}, вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:</p> - -<pre class="brush:html; notranslate"><textarea> -по умолчанию в этом элементе находится этот текст -</textarea></pre> - -<h3 id="Элемент_HTMLelementbutton">Элемент {{HTMLelement("button")}}</h3> - -<p>Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или "представлять" информацию после заполнения формы. Это делается с помощью HTML-элемента {{HTMLelement("button")}}. Необходимо добавить следующий код перед закрывающим тегом <code></form></code>:</p> - -<pre class="brush:html; notranslate"><li class="button"> - <button type="submit">Send your message</button> -</li></pre> - -<p>HTML-элемент {{HTMLelement("button")}} также принимает атрибут <code>type</code>, который может быть равен одному из трёх значений: <code>submit</code>, <code>reset</code> или <code>button</code>.</p> - -<ul> - <li>Клик по кнопке <code>submit</code> (значение по умолчанию) отправляет данные из формы на страницу, определённую в атрибуте <code>action</code> элемента {{HTMLelement("form")}}.</li> - <li>Клик по кнопке <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">reset</span></font> сбрасывает значения всех элементов управления формы к их начальному значению. С точки зрения UX, это считается плохой практикой.</li> - <li>Клик по кнопке <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">button</span></font> не делает ничего! Звучит странно, но на самом деле это очень удобно использовать для создания собственных кнопок — вы можете определить их поведение через JavaScript.</li> -</ul> - -<div class="note"> -<p><strong>Примечание</strong>: Вы также можете использовать HTML-элемент {{HTMLElement("input")}} с соответствующим атрибутом <code>type</code> , чтобы создать кнопку: <code><input type="submit"></code>. Главным преимуществом HTML-элемента {{HTMLelement("button")}} в сравнении с элементом {{HTMLelement("input")}} заключается в том, что {{HTMLelement("input")}} может принимать в себя только простой текст, в то время как {{HTMLelement("button")}} позволяет использовать весь HTML для создания более стилизованного текста внутри кнопки.</p> -</div> - -<h2 id="Базовая_стилизация_формы">Базовая стилизация формы</h2> - -<p>Теперь после того, как вы закончили писать HTML-код формы, сохраните его и откройте в браузере. Вы увидите, что на данный момент форма выглядит достаточно не красиво.</p> - -<p><img alt="" src="/files/4049/form-no-style.png" style="display: block; height: 170px; margin: 0px auto; width: 534px;"></p> - -<div class="note"> -<p><strong>Примечание</strong>: Если вам кажется, что ваш HTML-код работает не правильно, попробуйте сравнить его с нашим примером — посмотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">также можно посмотреть код вживую</a>).</p> -</div> - -<p>Красиво стилизовать формы достаточно сложно. Эта тема выходит за рамки этой статьи, поэтому на данный момент мы просто добавим некоторый CSS-код для приведения формы в нормальный вид.</p> - -<p>Сначала необходимо добавить HTML-элемент {{htmlelement("style")}} на вашу страницу внутрь тега <code>head</code> в HTML. Это должно выглядить следущим образом:</p> - -<pre class="brush: html notranslate"><style> - -</style></pre> - -<p>Внутри тега стилей добавьте следующий код:</p> - -<pre class="brush:css; notranslate">form { - /* Расположим форму по центру страницы */ - margin: 0 auto; - width: 400px; - /* Определим контур формы */ - padding: 1em; - border: 1px solid #CCC; - border-radius: 1em; -} - -ul { - list-style: none; - padding: 0; - margin: 0; -} - -form li + li { - margin-top: 1em; -} - -label { - /* Определим размер и выравнивание */ - display: inline-block; - width: 90px; - text-align: right; -} - -input, -textarea { - /* Убедимся, что все поля имеют одинаковые настройки шрифта - По умолчанию в textarea используется моноширинный шрифт */ - font: 1em sans-serif; - - /* Определим размер полей */ - width: 300px; - box-sizing: border-box; - - /* Стилизуем границы полей */ - border: 1px solid #999; -} - -input:focus, -textarea:focus { - /* Дополнительная подсветка для элементов в фокусе */ - border-color: #000; -} - -textarea { - /* Выровним многострочные текстовые поля с их текстами-подсказками */ - vertical-align: top; - - /* Предоставим пространство для ввода текста */ - height: 5em; -} - -.button { - /* Выровним кнопки с их текстами-подсказками */ - padding-left: 90px; /* same size as the label elements */ -} - -button { - /* Этот дополнительный внешний отступ примерно равен расстоянию - между текстами-подсказками и текстовыми полями */ - margin-left: .5em; -}</pre> - -<p>Теперь наша форма выглядит намного лучше.</p> - -<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p> - -<div class="note"> -<p><strong>Примечание</strong>: Вы можете найти код на GitHub в <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">также можно посмотреть код вживую</a>).</p> -</div> - -<h2 id="Отправка_данных_на_сервер">Отправка данных на сервер</h2> - -<p>Последняя и, наверно, самое сложное — это обработка данных формы на стороне сервера. HTML-элемент {{HTMLelement("form")}} определяет куда и каким способом отправить данные благодаря атрибутам <code>action</code> и <code>method</code>.</p> - -<p>Мы определяем имя <code>name</code> для каждого виджета формы. Указание имён важно как для браузера, так и для сервера: браузер узнаёт, какие имена дать каждой части данных, а сервер может получить эти данные, обратясь к ним по заданному имени. Данные форму отправляются на сервер в виде пары имя/значение.</p> - -<p>Чтобы проименовать данные, вам необходимо использовать атрибут <code>name</code> на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:</p> - -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> - <div> - <label for="name">Name:</label> - <input type="text" id="name" name="user_name" /> - </div> - <div> - <label for="mail">E-mail:</label> - <input type="email" id="mail" name="user_email" /> - </div> - <div> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </div> - - ... -</pre> - -<p>В нашем примере форма отправит три куска данных с именами "<code>user_name</code>", "<code>user_email</code>" и "<code>user_message</code>". Эти данные будут отправлены на URL "<code>/my-handling-form-page</code>" через метод <a href="/ru/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a>.</p> - -<p>На стороне сервера скрипт, расположенный на URL "<code>/my-handling-form-page</code>" получит данные в виде списка из 3 элементов вида ключ/значение, содержащихся в HTTP-запросе. То, как скрипт будет обрабатывать данные, зависит от вас. Каждый язык серверного программирования (PHP, Python, Ruby, Java, C# и т.д.) имеет свой механизм обработки данных из формы. Эта тема выходит за рамки данной статьи, если вы хотите углубиться в неё, мы привели несколько примеров далее в статье <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/Forms/Отправка_и_Получение_данных_формы" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a>.</p> - -<h2 id="Заключение">Заключение</h2> - -<p>Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так: </p> - -<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}</p> - -<p>Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.</p> - -<p>{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}</p> - -<h2 id="В_этом_разделе">В этом разделе</h2> - -<ul> - <li><a href="/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма">Ваша первая HTML форма</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-формы</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм">Стандартные виджеты форм</a></li> - <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> - <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/Styling_HTML_forms">Стили HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li> - <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/Валидация_формы">Проверка данных формы</a></li> - <li><a href="/ru/docs/Learn/HTML/Forms/Отправка_и_Получение_данных_формы">Отправка данных формы</a></li> -</ul> - -<h3 id="Дополнительные_темы">Дополнительные темы</h3> - -<ul> - <li><a href="/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать пользовательские виджеты форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> -</ul> diff --git a/files/ru/learn/html/forms/отправка_и_получение_данных_формы/index.html b/files/ru/learn/html/forms/отправка_и_получение_данных_формы/index.html deleted file mode 100644 index 9e7900f783..0000000000 --- a/files/ru/learn/html/forms/отправка_и_получение_данных_формы/index.html +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Отправка данных формы -slug: Learn/HTML/Forms/Отправка_и_Получение_данных_формы -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</div> - -<p class="summary">В этой статье рассматривается, что происходит, когда пользователь отправляет форму - куда передаются данные и как мы их обрабатываем, когда они туда попадают? Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Предварительные знания:</th> - <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">понимание HTML</a> и базовые знания по <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> и <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">программированию на стороне сервера</a>.</td> - </tr> - <tr> - <th scope="row">Задача:</th> - <td>Понять, что происходит при отправке данных формы, в том числе получить представление о том, как данные обрабатываются на стороне сервера.</td> - </tr> - </tbody> -</table> - -<h2 id="Куда_отправляются_данные">Куда отправляются данные?</h2> - -<p>Здесь мы обсудим, что происходит с данными при отправке формы.</p> - -<h3 id="О_клиенсткойсерверной_архитектуре">О клиенсткой/серверной архитектуре</h3> - -<p>WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как <a href="https://httpd.apache.org/" rel="external">Apache</a>, <a href="https://www.nginx.com/" rel="external">Nginx</a>, <a href="https://www.iis.net/" rel="external">IIS</a>, <a href="https://tomcat.apache.org/" rel="external">Tomcat</a>, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.<img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p> - -<p>На стороне клиента HTML-форма - это не более чем удобный способ настройки HTTP-запроса для отправки данных на сервер. Это позволяет пользователю предоставлять информацию для доставки в HTTP-запросе .</p> - -<div class="note"> -<p><strong>Заметка</strong>: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем <a href="/en-US/docs/Learn/Server-side/First_steps">«Первые шаги в программировании на стороне сервера»</a>.</p> -</div> - -<h3 id="На_стороне_клиента_определение_способа_отправки_данных">На стороне клиента: определение способа отправки данных</h3> - -<p>Элемент {{HTMLElement("form")}} определяет способ отправки данных. Все его атрибуты предназначены для того, чтобы вы могли настроить запрос на отправку, когда пользователь нажимает кнопку отправки. Двумя наиболее важными атрибутами являются {{htmlattrxref("action","form")}} и {{htmlattrxref("method","form")}}.</p> - -<h4 id="Атрибут_htmlattrxrefactionform">Атрибут {{htmlattrxref("action","form")}}</h4> - -<p>Этот атрибут определяет, куда отправляются данные. Его значение должно быть действительным URL. Если этот атрибут не указан, данные будут отправлены на URL-адрес страницы, содержащей форму.</p> - -<p>В этом примере данные отправляются на абсолютный URL — <code>http://foo.com</code>:</p> - -<pre class="brush: html notranslate"><form action="http://foo.com"></pre> - -<p>Здесь мы используем относительный URL - данные отправляются на другой URL на сервере:</p> - -<pre class="brush: html notranslate"><form action="/somewhere_else"></pre> - -<p>Если атрибуты не указаны, как показано ниже, данные из формы {{HTMLElement("form")}} отправляются на ту же страницу, на которой размещается данная форма:</p> - -<pre class="brush: html notranslate"><form></pre> - -<p>Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут {{htmlattrxref("action", "form")}} был обязательным. Это больше не нужно.</p> - -<pre class="brush: html notranslate"><form action="#"></pre> - -<div class="note"> -<p><strong>Заметка:</strong> Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищенной странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.</p> -</div> - -<h4 id="Атрибут_htmlattrxrefmethodform">Атрибут {{htmlattrxref("method","form")}}</h4> - -<p>Этот атрибут определяет способ отправки данных. <a href="/en-US/docs/HTTP">Протокол HTTP</a> предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространенными из которых являются метод <code>GET</code> и метод <code>POST</code>.</p> - -<p>Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.</p> - -<h3 id="Метод_GET">Метод GET</h3> - -<p>Метод <code>GET</code> - это метод, используемый браузером, который говорит серверу, что нужно отправить назад данный ресурс: «Эй, сервер, я хочу получить этот ресурс». В этом случае браузер отправляет пустое тело. Поскольку тело пустое, если форма отправляется с использованием данного метода, данные, отправляемые на сервер, добавляются к URL-адресу.</p> - -<p>Рассмотрим следующую форму:</p> - -<pre class="brush: html notranslate"><form action="http://foo.com" method="get"> - <div> - <label for="say">What greeting do you want to say?</label> - <input name="say" id="say" value="Hi"> - </div> - <div> - <label for="to">Who do you want to say it to?</label> - <input name="to" id="to" value="Mom"> - </div> - <div> - <button>Send my greetings</button> - </div> -</form></pre> - -<p>Поскольку используется метод <code>GET</code>, вы увидите URL <code>www.foo.com/?say=Hi&to=Mom</code>, который появится в адресной строке браузера при отправке формы.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (<code>?</code>), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (<code>&</code>). В этом случае мы передаем две части данных на сервер:</p> - -<ul> - <li><code>say</code>, со значением <code>Hi</code></li> - <li><code>to</code>, со значением <code>Mom</code></li> -</ul> - -<p>HTTP-запрос имеет следующий вид:</p> - -<pre class="notranslate">GET /?say=Hi&to=Mom HTTP/2.0 -Host: foo.com</pre> - -<div class="note"> -<p><strong>Заметка</strong>: Вы можете найти этот пример на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">see it live also</a>).</p> -</div> - -<h3 id="Метод_POST">Метод POST</h3> - -<p>Метод <code>POST</code> немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.</p> - -<p>Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе <code>GET</code> выше, но с атрибутом {{htmlattrxref("method","form")}}, установленным в <code>post</code>.</p> - -<pre class="brush: html notranslate"><form action="http://foo.com" method="post"> - <div> - <label for="say">What greeting do you want to say?</label> - <input name="say" id="say" value="Hi"> - </div> - <div> - <label for="to">Who do you want to say it to?</label> - <input name="to" id="to" value="Mom"> - </div> - <div> - <button>Send my greetings</button> - </div> -</form></pre> - -<p>Когда форма отправляется с использованием метода <code>POST</code>, данные добавляются не к URL-адресу, а включаются в тело запроса. HTTP-запрос имеет следующий вид:</p> - -<pre class="notranslate">POST / HTTP/2.0 -Host: foo.com -Content-Type: application/x-www-form-urlencoded -Content-Length: 13 - -say=Hi&to=Mom</pre> - -<p>Заголовок <code>Content-Length</code> указывает размер тела, а заголовок <code>Content-Type</code> указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.</p> - -<div class="note"> -<p><strong>Заметка</strong>: Вы можете найти этот пример на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html">post-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">see it live also</a>).</p> -</div> - -<h4 id="Просмотр_HTTP-запросов">Просмотр HTTP-запросов</h4> - -<p>HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, Вам нужно использовать такие инструменты, как <a href="/en-US/docs/Tools/Network_Monitor">Firefox Network Monitor</a> или <a href="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):</p> - -<ol> - <li>Нажмите F12</li> - <li>Выберите Network</li> - <li>Выберите "All"</li> - <li>Выберите "foo.com" во вкладке "Name"</li> - <li>Выберите "Headers"</li> -</ol> - -<p>Затем вы можете получить данные формы, как показано на рисунке ниже.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<p>Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом <code>GET</code> позволит пользователю увидеть информацию из запроса в URL, а запрос с методом <code>POST</code> не позволит. Две причины, почему это может быть важно:</p> - -<ol> - <li>Если необходимо отправить пароль (или любую другую важную информацию), никогда не используйте метод <code>GET</code>, иначе рискуете отобразить эту информацию в URL-строке, что небезопасно.</li> - <li>Если необходимо отправить большой объем информации, <code>POST</code>-метод является предпочтительным, так как некоторые браузеры ограничивают длину URL. К тому же, многие сервера так же ограничивают длину обрабатываемых URL.</li> -</ol> - -<h3 id="На_стороне_сервера_получение_данных">На стороне сервера: получение данных</h3> - -<p>Какой бы HTTP вы не выбрали, сервер возвращает строку, которая будет последовательно проанализирована для получения данных в формате листа с парами ключ/значение. Способ получения доступа к этому листу зависит от платформы разработки или особенностей фреймворка, который вы можете использовать. Технологии, которые вы используете, определяют, как обрабатываются скопированные ключи. Часто, приоритетным является последнее полученное значение для данного ключа.</p> - -<h4 id="Пример_Чистый_PHP">Пример: Чистый PHP</h4> - -<p><a href="https://php.net/">PHP</a> предлагает несколько глобальных объектов для доступа к данным. Например, вы используете <code>POST</code>-метод, в приведенном ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо еще.</p> - -<pre class="brush: php notranslate"><?php - // The global $_POST variable allows you to access the data sent with the POST method by name - // To access the data sent with the GET method, you can use $_GET - $say = htmlspecialchars($_POST['say']); - $to = htmlspecialchars($_POST['to']); - - echo $say, ' ', $to; -?></pre> - -<p>Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> — который содержит те же данные, которые вы видели раньше: <code>method</code> : <code>post</code> и <code>action</code> из <code>php-example.php</code>. Когда данные переданы на отправку (submit), они переданы в форму <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение: <code>Hi Mom</code>.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p> - -<div class="note"> -<p><strong>Примечание</strong>: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) и/или <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> -</div> - -<h4 id="Пример_Python">Пример: Python</h4> - -<p>Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется <a href="http://flask.pocoo.org/">Flask framework</a> для визуализации шаблонов, поддерживающих форму отправки данных (смотри <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> - -<pre class="brush: python notranslate">from flask import Flask, render_template, request - -app = Flask(__name__) - -@app.route('/', methods=['GET', 'POST']) -def form(): - return render_template('form.html') - -@app.route('/hello', methods=['GET', 'POST']) -def hello(): - return render_template('greeting.html', say=request.form['say'], to=request.form['to']) - -if __name__ == "__main__": - app.run()</pre> - -<p>Два шаблона из коде выше взаимодействуют так:</p> - -<ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: Та же форма, что и выше {{anch("The POST method")}} , только с использованием <code>action</code> к <code>\{{ url_for('hello') }}</code>. (Это <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> шаблон, который изначально HTMLно может содержать вызовы Python кода в фигурных скобках, которые запустятся веб-сервером. <code>url_for('hello')</code> буквально говорит: после отправки данных переадресуй их в <code>/hello</code>.)</li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a>: Этот шаблон просто содержит строку, которая отображает два бита данных, переданных ему при отображении. Это сделано с помощью функции <code>hello()</code>, указанной выше, которая выполняется, когда запрос направляется в <code>/hello</code> URL.</li> -</ul> - -<div class="note"> -<p><strong>Примечание</strong>: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">установить Python/PIP</a>, потом установить Flask используя команду: <code>pip3 install flask</code>. После этого, вы сможете запустить файл из примера, используя команду: <code>python3 python-example.py</code>, потом открыть <code>localhost:5000</code> в своем браузере.</p> -</div> - -<h4 id="Другие_языки_и_фреймворки">Другие языки и фреймворки</h4> - -<p>Существует множество других серверных технологий, которые вы можете использовать для работы с формами, включая языки Perl, Java, .Net, Ruby, и прочее. Выбирайте тот, который нравится больше. К тому же, использовать вышеупомянутые технологии непосредственно, без использования фреймворков, может быть сложно. Лучше использовать один из множества высококачественных фреймворков, таких как:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Server-side/Django" rel="external">Django</a> для Python (немного тяжеловеснее, чем <a href="http://flask.pocoo.org/">Flask</a>, но больше инструментов и опций)</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> для Node.js</li> - <li><a href="https://laravel.com/">Laravel</a> для PHP</li> - <li><a href="https://rubyonrails.org/" rel="external">Ruby On Rails</a> для Ruby</li> - <li><a href="https://phoenixframework.org/">Phoenix</a> для Elixir</li> -</ul> - -<p>Стоит отметить, что использование фреймворков и работа с формами - это не всегда легко. Но это намного легче, чем пытаться написать аналогичный функционал с нуля, и это определенно сэкономит время. </p> - -<div class="note"> -<p><strong>Примечание</strong>: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи. Если хотите узнать больше, ссылки ниже помогут в этом. </p> -</div> - -<h2 id="Особый_случай_отправка_файлов">Особый случай: отправка файлов</h2> - -<p>Отправка файлов с помощью форм HTML — это особый случай. Файлы — это бинарные данные или рассматриваются как таковые, в то время как все остальные — это текстовые данные. Поскольку HTTP — это текстовый протокол, есть особые требования для работы с бинарными данными.</p> - -<h3 id="Атрибут_htmlattrxrefenctypeform">Атрибут {{htmlattrxref("enctype","form")}} </h3> - -<p>Этот атрибут позволяет конкретизировать значение в <code>Content-Type</code> HTTP заголовок, включенный в запрос, при генерировании отпавки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: <code>application/x-www-form-urlencoded</code>. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."</p> - -<p>Если хотите отправить файл, нужно сделать следующие три шага:</p> - -<ul> - <li>Указать {{htmlattrxref("method","form")}} атрибут <code>POST</code>, поскольку содержимое файла, как и сам файл, не могут быть отображены в URL параметрах.</li> - <li>Установить в {{htmlattrxref("enctype","form")}} значение <code>multipart/form-data</code>, потому что данные будут разбиты на несколько частей: одна часть на файл (две части на два файла), и одна часть на текстовые данные (при условии, если форма содержит поле для получения тестовых данных).</li> - <li>Подключите один или более <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">File picker</a> виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.</li> -</ul> - -<p>Пример:</p> - -<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> - <div> - <label for="file">Choose a file</label> - <input type="file" id="file" name="myFile"> - </div> - <div> - <button>Send the file</button> - </div> -</form></pre> - -<div class="note"> -<p><strong>Примечание:</strong> Некоторые браузеры поддерживают {{htmlattrxref("multiple","input")}} атрибут элемента {{HTMLElement("input")}} , который позволяет выбрать больше одного файла для загрузки, при использовании одного элемента <code><input></code> . То, как сервер работает с этими файлами, напрямую зависит от технологий, используемых на сервере. Как упоминалось ранее, использование фреймворков сделает вашу жизнь намного легче. </p> -</div> - -<div class="warning"> -<p><strong>Предупреждение:</strong> Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.</p> -</div> - -<h2 id="Проблемы_безопасности">Проблемы безопасности</h2> - -<p>Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространенными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.</p> - -<p>В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:</p> - -<h3 id="XSS_Межсайтовый_скриптинг_и_CSRF_Подделка_межсайтовых_запросов">XSS "Межсайтовый скриптинг" и CSRF "Подделка межсайтовых запросов"</h3> - -<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Сross Site Request Forgery")</a> и <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> - это распространенные типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.</p> - -<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Сross Site Request Forgery")</a> позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">Подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же <a href="/ru/docs/Web/Security/Same-origin_policy">политика происхождения</a>. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.</p> - -<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF-атаки</a> аналогичны <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS-атакам</a> в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадежному пользователю). Атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS </a>используют доверие пользователя к веб-сайту, в то время как атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>используют доверие веб-сайта к пользователю.</p> - -<p>Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный "фильтр", который удаляет элементы HTML {{HTMLElement ("script")}}, {{HTMLElement ("iframe")}} и {{HTMLElement ("object")}} полученных от любого пользователя. Это помогает снизить риск, но не исключает его полностью.</p> - -<h3 id="SQL_-_вброс">SQL - вброс</h3> - -<p>SQL -вброс представляет собой тип атак, при которых осуществляется попытка выполнения действия с базой данных, используемой целевым веб-сайтом. В этих случаях обычно осуществляется отправка SQL-запроса в надежде, что сервер выполнит этот запрос (обычно при попытке сервера приложения сохранить данные, отправляемые пользователем). Данный вид атак является <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external">одним из самых направленных атак на веб-сайты</a>.</p> - -<p>Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счет повышения привилегий. Это очень серьезная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения санитизации данных (например, с помощью <code><a href="http://us1.php.net/manual/en/mysqli.real-escape-string.php">mysqli_real_escape_string()</a></code>.</p> - -<h3 id="Вброс_HTTP-заголовка_и_email">Вброс HTTP-заголовка и email</h3> - -<p>Эти виды атак могут проявляться, когда ваше приложение создает заголовки HTTP или электронные почтовые адреса на основании данных, введенных пользователем в форму. Такие атаки напрямую не повреждают сервер или пользовалей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.</p> - -<p>Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal">зомби</a>.</p> - -<h3 id="Будьте_параноиком_никогда_не_доверяйте_вашим_пользователям">Будьте параноиком: никогда не доверяйте вашим пользователям</h3> - -<p>Как вы боретесь с такими угрозами? Этот вопрос выходит далеко за рамки данной статьи, но есть несколько общих правил, которые следует всегда соблюдать. Самое важное из них - никогда не доверяйте вашим пользователям, в том числе себе; даже проверенный пользователь может быть атакован.</p> - -<p>Все данные, поступающие на ваш сервер, необходимо проверять и санитизировать. Все и всегда. Без исключений.</p> - -<ul> - <li>Избегайте потенциально опасных символов. Конкретные символы, с которыми следует соблюдать осторожность, зависят от контекста, в котором используются данные, а также от используемой платформы. Однако, все языки на стороне сервера имеют соответствующие функции для обеспечения такой защиты.</li> - <li>Ограничьте входящий объем данных для поступления только реально необходимых данных.</li> - <li>Помещайте загруженные файлы в песочницу (храните их на другом сервере и предоставляйте доступ к фалам только через отдельный поддомен или даже через совершенно другое доменное имя).</li> -</ul> - -<p>Соблюдая эти три правила, вы сможете избежать многих/большинства проблем. При этом следует помнить, что периодически необходимо проводить анализ защищенности, желательно квалифицированной сторонней организацией. Не считайте, что вы уже сталкивались со всеми возможными угрозами.</p> - -<div class="note"> -<p><strong>Примечание</strong>: В статье <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a> нашего раздела <a href="/en-US/docs/Learn/Server-side">серверного</a> обучения приведено подробное обсуждение упомянутых угроз и возможных способов их устранения.</p> -</div> - -<h2 id="Заключение">Заключение</h2> - -<p>Как мы увидели, отправлять формы просто, однако защитить приложение может быть довольно трудно. Просто помните, что фронтенд разработчики не должны задавать модель безопасности для приложения. Да, как мы увидим далее, <a href="/ru/docs/Learn/HTML/Forms/Валидация_формы">мы можем проверить данные на стороне клиента</a>, однако сервер не может доверять этой проверке, потому что он никогда не может по-настоящему узнать что происходит на стороне клиента.</p> - -<h2 id="См._также">См. также</h2> - -<p>Если вы хотите узнать больше об обеспечении безопасности веб-приложений, вы можете использовать следущие источники информации:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Server-side/First_steps">Первые шаги в программирование веб-сайтов на стороне сервера</a></li> - <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external">Открытый проект обеспечения веб-безопасности приложений (OWASP)</a></li> - <li><a href="https://infosec.mozilla.org/guidelines/web_security">Веб-безопасность от Mozilla</a></li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</p> - -<h2 id="В_этом_модуле">В этом модуле</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша первая HTML-форма</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Предопределенные виджеты</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Валидация данных формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать кастомные виджеты</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Отправка форм с помощью JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-формы в старых версиях браузеров</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Стилизация HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Продвинутая стилизация для HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Таблица совместимости свойств виджетов форм</a></li> -</ul> diff --git a/files/ru/learn/html/forms/стандартные_виджеты_форм/index.html b/files/ru/learn/html/forms/стандартные_виджеты_форм/index.html deleted file mode 100644 index eae3fbb32d..0000000000 --- a/files/ru/learn/html/forms/стандартные_виджеты_форм/index.html +++ /dev/null @@ -1,690 +0,0 @@ ---- -title: Стандартные виджеты форм -slug: Learn/HTML/Forms/Стандартные_виджеты_форм -translation_of: Learn/Forms/Basic_native_form_controls ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div> - -<p class="summary">Сейчас мы детально изучим возможности различных виджетов форм, посмотрим, какие функции доступны для получения информации в различных представлениях. Это исчерпывающая статья, описывающая все доступные стандартные виджеты форм.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Требования:</th> - <td>Базовая компьютерная грамотность, базовое <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">понимание HTML</a>.</td> - </tr> - <tr> - <th scope="row">Цель:</th> - <td>Понять, какие типы стандартных виджетов форм доступны в браузерах для сбора информации, как внедрять их, используя HTML.</td> - </tr> - </tbody> -</table> - -<p>Сейчас мы сосредоточимся на виджетах форм, встроенных в браузеры, но поскольку формы HTML остаюстся несколько ограниченными и особенности их реализации различаются для разных браузеров, веб-разработчики иногда создают собственные виджеты форм - прочтите статью <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Как создать собственную форму</a> позже в данном модуле для более подробного изучения.</p> - -<div class="note"> -<p><strong>Note</strong>: Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference, </a>и в частости к нашей обширной ссылке <a href="/en-US/docs/Web/HTML/Element/input"><input> types.</a></p> -</div> - -<h2 id="Стандартные_атрибуты">Стандартные атрибуты</h2> - -<p>Многие элементы, используемые для определения виджетов форм, имеют собственные атрибуты. Однако, существует набор атрибутов, общих для всех элементов формы, которые предоставляют вам контроль над их виджетами. Вот список этих общих атрибутов:</p> - -<table> - <thead> - <tr> - <th scope="col">Attribute name</th> - <th scope="col">Default value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>autofocus</code></td> - <td>(<em>false</em>)</td> - <td>Этот атрибут логического типа позволяет вам определить, должен ли элемент автоматически попадать в фокус при загрузке страницы, пока пользователь не изменит это, например, печатая в другом виджете. Этот атрибут может явно определяться только для одного элемента в документе, ассоциированного с формой.</td> - </tr> - <tr> - <td><code>disabled</code></td> - <td>(<em>false</em>)</td> - <td>Этот атрибут логического типа определяет, может ли пользователь взаимодействовать с элементом. Если этот атрибут не определён, то элемент наследует его значение от элемента-родителя. Если атрибут не определён, то по умолчанию пользователь может взаимодействовать с элементом.</td> - </tr> - <tr> - <td><code>form</code></td> - <td></td> - <td>Элемент формы, с которым ассоциирован виджет. Значением данного атрибута должен быть атрибут <code>id</code> элемента {{HTMLElement("form")}} в том же документе. Теоретически, это позволяет вам помещать определение виджета за рамками элемента {{HTMLElement("form")}}. На практике, однако, не существует браузеров, поддерживающих данную функцию.</td> - </tr> - <tr> - <td><code>name</code></td> - <td></td> - <td>Название элемента; передаётся вместе с данными формы.</td> - </tr> - <tr> - <td><code>value</code></td> - <td></td> - <td>Начальное значение элемента.</td> - </tr> - </tbody> -</table> - -<h2 id="Поля_ввода_текста">Поля ввода текста</h2> - -<p>Текстовые поля {{htmlelement("input")}} являются самыми базовыми виджетами форм. Эти поля наиболее удобны для пользовательского ввода различной информации. Однако, некоторые текстовые поля отличаются от данного и используются для специфических нужд. Мы уже видели нескольк простых примеров.</p> - -<div class="note"> -<p><strong>Note</strong>: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.</p> -</div> - -<p>Все текстовые поля имеют общие атрибуты:</p> - -<ul> - <li>Они могут быть помечены как {{htmlattrxref("readonly","input")}} (пользователь не может изменять начальное значение) или даже {{htmlattrxref("disabled","input")}} начальное значение никогда не посылается вместе с остальными данными формами).</li> - <li>Они могут иметь атрибут {{htmlattrxref("placeholder","input")}}; это текст, который появляется внутри теста поля формы и кратко описывает, для чего используется данная форма.</li> - <li>Существуют общие характеристики {{htmlattrxref("size","input")}} (физический размер поля) и <a href="/en-US/docs/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">длину</a> (максимальное количество символов, которые может ввести пользователь).</li> - <li>Они могут быть определены с помощью <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spell checking</a>, если браузер поддерживает данную функцию.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its <code>type</code> attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.</p> -</div> - -<h3 id="Однострочные_текстовые_поля">Однострочные текстовые поля</h3> - -<p>Однострочные текстовые поля создаются с использованием элемента {{HTMLElement("input")}} чей атрибут {{htmlattrxref("type","input")}} имеет значение <code>text</code> (если вы не поставите другое значение атрибута {{htmlattrxref("type","input")}}, <code>text</code> является значением по умолчанию). Значение <code>text</code> для этого атрибута является возвратным, если значение которое вы определили для {{htmlattrxref("type","input")}} неизвестно браузеру (например, если вы определили <code>type="date"</code> а браузер не поддерживает выбор даты).</p> - -<div class="note"> -<p><strong>Note</strong>: Вы можете найти примеры всех типов однострочных текстовых полей на GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">see it live also</a>).</p> -</div> - -<p>Пример базового одностраничного текстового поля:</p> - -<pre class="brush: html notranslate"><input type="text" id="comment" name="comment" value="I'm a text field"></pre> - -<p>Однострочное текстовое поле имеет только одно настоящее ограничение: если вы вводите текст с разрывами строки, браузер удаляет эти разрывы строк перед отправкой данных.</p> - -<p><img alt="Screenshots of single line text fields on several platforms." src="/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p> - -<p>HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.</p> - -<h4 id="E-mail_address_field">E-mail address field</h4> - -<p>Этот тип поля устонавливается со значеним <code>email</code> для атрибута {{htmlattrxref("type","input")}}:</p> - -<pre class="brush: html notranslate"><input type="email" id="email" name="email" multiple></pre> - -<p>Когда используется этот <code>type</code>, пользователь должен ввести в поле валидный адрес электронной почты; любое другое содержание будет отображено браузером при отправке формы как ошибка. Заметьте, что это проверка ошибок на стороне клиента, выполняемая браузером:</p> - -<p><img alt="An invalid email input showing the message Please enter an email address." src="https://mdn.mozillademos.org/files/14781/email-invalid.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<p>It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.</p> - -<p>On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.</p> - -<div class="note"> -<p><strong>Note</strong>: You can find out more about form validation in the article <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a>.</p> -</div> - -<h4 id="Password_field">Password field</h4> - -<p>This type of field is set using the value <code>password</code> for the {{htmlattrxref("type","input")}} attribute:</p> - -<pre class="brush: html notranslate"><input type="password" id="pwd" name="pwd"></pre> - -<p>It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.</p> - -<p>Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.</p> - -<p>Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>.</p> - -<h4 id="Search_field">Search field</h4> - -<p>This type of field is set by using the value <code>search</code> for the {{htmlattrxref("type","input")}} attribute:</p> - -<pre class="brush: html notranslate"><input type="search" id="search" name="search"></pre> - -<p>The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.</p> - -<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p> - -<h4 id="Phone_number_field">Phone number field</h4> - -<p>This type of field is set using <code>tel</code> as the value of the {{htmlattrxref("type","input")}} attribute:</p> - -<pre class="brush: html notranslate"><input type="tel" id="tel" name="tel"></pre> - -<p>Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.</p> - -<h4 id="URL_field">URL field</h4> - -<p>This type of field is set using the value <code>url</code> for the {{htmlattrxref("type","input")}} attribute:</p> - -<pre class="brush: html notranslate"><input type="url" id="url" name="url"></pre> - -<p>It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.</p> - -<div class="note"><strong>Note:</strong> Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.</div> - -<div class="note"> -<p><strong>Note</strong>: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a>.</p> -</div> - -<h3 id="Multi-line_text_fields">Multi-line text fields</h3> - -<p>A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.</p> - -<pre class="brush: html notranslate"><textarea cols="30" rows="10"></textarea></pre> - -<p>The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).</p> - -<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p> - -<div class="note"> -<p><strong>Note</strong>: You can find an example of a multi-line text field on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">see it live also</a>). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to <code>none</code> using <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> -</div> - -<p>{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):</p> - -<table> - <caption>Attributes for the {{HTMLElement("textarea")}} element</caption> - <thead> - <tr> - <th scope="col">Attribute name</th> - <th scope="col">Default value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("cols","textarea")}}</td> - <td><code>20</code></td> - <td>The visible width of the text control, in average character widths.</td> - </tr> - <tr> - <td>{{htmlattrxref("rows","textarea")}}</td> - <td></td> - <td>The number of visible text lines for the control.</td> - </tr> - <tr> - <td>{{htmlattrxref("wrap","textarea")}}</td> - <td><code>soft</code></td> - <td>Indicates how the control wraps text. Possible values are: <code>hard</code> or <code>soft</code></td> - </tr> - </tbody> -</table> - -<p>Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.</p> - -<p>There are two key related points to note here:</p> - -<ul> - <li>If you want to define a default value for an {{HTMLElement("input")}} element, you have to use the <code>value</code> attribute; for a {{HTMLElement("textarea")}} element on the other hand you put the default text between the starting tag and the closing tag of the {{HTMLElement("textarea")}}.</li> - <li>Because of its nature, the {{HTMLElement("textarea")}} element only accepts text content; this means that any HTML content put inside a {{HTMLElement("textarea")}} is rendered as if it was plain text content.</li> -</ul> - -<h2 id="Drop-down_content">Drop-down content</h2> - -<p>Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the <strong>select box</strong>, and <strong>autocomplete box</strong>. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.</p> - -<div class="note"> -<p>Note: You can find examples of all the drop-down box types on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/drop-down-content.html">drop-down-content.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html">see it live also</a>).</p> -</div> - -<h3 id="Select_box">Select box</h3> - -<p>A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.</p> - -<pre class="brush: html notranslate"><select id="simple" name="simple"> - <option>Banana</option> - <option>Cherry</option> - <option>Lemon</option> -</select></pre> - -<p>If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:</p> - -<pre class="brush: html notranslate"><select id="groups" name="groups"> - <optgroup label="fruits"> - <option>Banana</option> - <option selected>Cherry</option> - <option>Lemon</option> - </optgroup> - <optgroup label="vegetables"> - <option>Carrot</option> - <option>Eggplant</option> - <option>Potato</option> - </optgroup> -</select></pre> - -<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p> - -<p>If an {{HTMLElement("option")}} element is set with a <code>value</code> attribute, that attribute's value is sent when the form is submitted. If the <code>value</code> attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.</p> - -<p>On the {{HTMLElement("optgroup")}} element, the <code>label</code> attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.</p> - -<h3 id="Multiple_choice_select_box">Multiple choice select box</h3> - -<p>By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> and clicking multiple values).</p> - -<p>Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.</p> - -<pre class="brush: html notranslate"><select multiple id="multi" name="multi"> - <option>Banana</option> - <option>Cherry</option> - <option>Lemon</option> -</select></pre> - -<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p> - -<div class="note"><strong>Note:</strong> All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.</div> - -<h3 id="Autocomplete_box">Autocomplete box</h3> - -<p>You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.</p> - -<p>The data list is then bound to a text field (usually an <code><input></code> element) using the {{htmlattrxref("list","input")}} attribute.</p> - -<p>Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.</p> - -<pre class="brush: html notranslate"><label for="myFruit">What's your favorite fruit?</label> -<input type="text" name="myFruit" id="myFruit" list="mySuggestion"> -<datalist id="mySuggestion"> - <option>Apple</option> - <option>Banana</option> - <option>Blackberry</option> - <option>Blueberry</option> - <option>Lemon</option> - <option>Lychee</option> - <option>Peach</option> - <option>Pear</option> -</datalist></pre> - -<div class="note"><strong>Note:</strong> According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.</div> - -<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div> - -<div></div> - -<h4 id="Datalist_support_and_fallbacks">Datalist support and fallbacks</h4> - -<p>The {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.</p> - -<p>To handle this, here is a little trick to provide a nice fallback for those browsers:</p> - -<pre class="brush:html; notranslate"><label for="myFruit">What is your favorite fruit? (With fallback)</label> -<input type="text" id="myFruit" name="fruit" list="fruitList"> - -<datalist id="fruitList"> - <label for="suggestion">or pick a fruit</label> - <select id="suggestion" name="altFruit"> - <option>Apple</option> - <option>Banana</option> - <option>Blackberry</option> - <option>Blueberry</option> - <option>Lemon</option> - <option>Lychee</option> - <option>Peach</option> - <option>Pear</option> - </select> -</datalist> -</pre> - -<p>Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).</p> - -<table> - <tbody> - <tr> - <th scope="row">Safari 6</th> - <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td> - </tr> - <tr> - <th scope="row">Firefox 18</th> - <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td> - </tr> - </tbody> -</table> - -<h2 id="Checkable_items">Checkable items</h2> - -<p>Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.</p> - -<p>It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.</p> - -<div class="note"> -<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">see it live also</a>).</p> -</div> - -<p>For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list. Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples. </p> - -<p>You also need to provide values for these kinds of inputs inside the <code>value</code> attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of <code>on</code>.</p> - -<h3 id="Check_box">Check box</h3> - -<p>A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>checkbox</code>.</p> - -<pre class="brush: html notranslate"><input type="checkbox" checked id="carrots" name="carrots" value="carrots"> -</pre> - -<p>Including the <code>checked</code> attribute makes the checkbox checked automatically when the page loads.</p> - -<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p> - -<h3 id="Radio_button">Radio button</h3> - -<p>A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>radio</code>.</p> - -<pre class="brush: html notranslate"><input type="radio" checked id="soup" name="meal"></pre> - -<p>Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.</p> - -<pre class="brush: html notranslate"><fieldset> - <legend>What is your favorite meal?</legend> - <ul> - <li> - <label for="soup">Soup</label> - <input type="radio" checked id="soup" name="meal" value="soup"> - </li> - <li> - <label for="curry">Curry</label> - <input type="radio" id="curry" name="meal" value="curry"> - </li> - <li> - <label for="pizza">Pizza</label> - <input type="radio" id="pizza" name="meal" value="pizza"> - </li> - </ul> -</fieldset></pre> - -<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p> - -<h2 id="Buttons">Buttons</h2> - -<p>Within HTML forms, there are three kinds of button:</p> - -<dl> - <dt>Submit</dt> - <dd>Sends the form data to the server.</dd> - <dt>Reset</dt> - <dd>Resets all form widgets to their default values.</dd> - <dt>Anonymous</dt> - <dd>Buttons that have no automatic effect but can be customized using JavaScript code. If you omit the <code>type</code> attribute, this is the default value.</dd> -</dl> - -<div class="note"> -<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">see it live also</a>).</p> -</div> - -<p>A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:</p> - -<h3 id="submit">submit</h3> - -<pre class="brush: html notranslate"><button type="submit"> - This a <br><strong>submit button</strong> -</button> - -<input type="submit" value="This is a submit button"></pre> - -<h3 id="reset">reset</h3> - -<pre class="brush: html notranslate"><button type="reset"> - This a <br><strong>reset button</strong> -</button> - -<input type="reset" value="This is a reset button"></pre> - -<h3 id="anonymous">anonymous</h3> - -<pre class="brush: html notranslate"><button type="button"> - This an <br><strong>anonymous button</strong> -</button> - -<input type="button" value="This is an anonymous button"></pre> - -<p>Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:</p> - -<ul> - <li>As you can see from the examples, {{HTMLElement("button")}} elements let you use HTML content in their labels, which are inserted inside the opening and closing <code><button></code> tags. {{HTMLElement("input")}} elements on the other hand are empty elements; their labels are inserted inside <code>value</code> attributes, and therefore only accept plain text content.</li> - <li>With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (by setting it inside a <code>value</code> attribute). This isn't reliable in versions of Internet Explorer prior to IE 8.</li> -</ul> - -<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p> - -<p>Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.</p> - -<h2 id="Advanced_form_widgets">Advanced form widgets</h2> - -<p>In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.</p> - -<div class="note"> -<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/advanced-examples.html">advanced-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/advanced-examples.html">see it live also</a>).</p> -</div> - -<h3 id="Numbers">Numbers</h3> - -<p>Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value <code>number</code>. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.</p> - -<p>It's also possible to:</p> - -<ul> - <li>Constrain the value by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</li> - <li>Specify the amount by which the increase and decrease buttons change the widget's value by setting the {{htmlattrxref("step","input")}} attribute.</li> -</ul> - -<h4 id="Example">Example</h4> - -<pre class="brush: html notranslate"><input type="number" name="age" id="age" min="1" max="10" step="2"></pre> - -<p>This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.</p> - -<p><code>number</code> inputs are not supported in versions of Internet Explorer below 10.</p> - -<h3 id="Sliders">Sliders</h3> - -<p>Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.</p> - -<p>A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>range</code>. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.</p> - -<h4 id="Example_2">Example</h4> - -<pre class="brush: html notranslate"><input type="range" name="beans" id="beans" min="0" max="500" step="10"></pre> - -<p>This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.</p> - -<p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.</p> - -<pre class="brush: html notranslate"><label for="beans">How many beans can you eat?</label> -<input type="range" name="beans" id="beans" min="0" max="500" step="10"> -<span class="beancount"></span></pre> - -<p>This can be implemented using some simple JavaScript:</p> - -<pre class="brush: js notranslate">var beans = document.querySelector('#beans'); -var count = document.querySelector('.beancount'); - -count.textContent = beans.value; - -beans.oninput = function() { - count.textContent = beans.value; -}</pre> - -<p>Here we store references to the range input and the span in two variables, then we immediately set the span's <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to the current <code>value</code> of the input. Finally, we set up an <code>oninput</code> event handler so that every time the range slider is moved, the span <code>textContent</code> is updated to the new input value.</p> - -<p><code>range</code> inputs are not supported in versions of Internet Explorer below 10.</p> - -<h3 id="Date_and_time_picker">Date and time picker</h3> - -<p>Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.</p> - -<p>A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.</p> - -<h4 id="datetime-local"><code>datetime-local</code></h4> - -<p>This creates a widget to display and pick a date with time, but without any specific time zone information.</p> - -<pre class="brush: html notranslate"><input type="datetime-local" name="datetime" id="datetime"></pre> - -<h4 id="month"><code>month</code></h4> - -<p>This creates a widget to display and pick a month with a year.</p> - -<pre class="brush: html notranslate"><input type="month" name="month" id="month"></pre> - -<h4 id="time"><code>time</code></h4> - -<p>This creates a widget to display and pick a time value.</p> - -<pre class="brush: html notranslate"><input type="time" name="time" id="time"></pre> - -<h4 id="week"><code>week</code></h4> - -<p>This creates a widget to display and pick a week number and its year.</p> - -<pre class="brush: html notranslate"><input type="week" name="week" id="week"></pre> - -<p>All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</p> - -<pre class="brush: html notranslate"><label for="myDate">When are you available this summer?</label> -<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate"></pre> - -<p>Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.</p> - -<h3 id="Color_picker">Color picker</h3> - -<p>Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.</p> - -<p>A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>.</p> - -<pre class="brush: html notranslate"><input type="color" name="color" id="color"></pre> - -<p>Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.</p> - -<h2 id="Other_widgets">Other widgets</h2> - -<p>There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.</p> - -<div class="note"> -<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html">see it live also</a>).</p> -</div> - -<h3 id="File_picker">File picker</h3> - -<p>HTML forms are able to send files to a server; this specific action is detailed in the article <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>. The file picker widget is how the user can choose one or more files to send.</p> - -<p>To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to <code>file</code>. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.</p> - -<h4 id="Example_3">Example</h4> - -<p>In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.</p> - -<pre class="brush: html notranslate"><input type="file" name="file" id="file" accept="image/*" multiple></pre> - -<h3 id="Hidden_content">Hidden content</h3> - -<p>It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>hidden</code>.</p> - -<p>If you create such an element, it's required to set its <code>name</code> and <code>value</code> attributes:</p> - -<pre class="brush: html notranslate"><input type="hidden" id="timestamp" name="timestamp" value="1286705410"></pre> - -<h3 id="Image_button">Image button</h3> - -<p>The <strong>image button</strong> control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).</p> - -<p>An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>image</code>. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.</p> - -<pre class="brush: html notranslate"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> - -<p>If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:</p> - -<ul> - <li>The X value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.x</em>".</li> - <li>The Y value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.y</em>".</li> -</ul> - -<p>So for example when you click on the image of this widget, you are sent to a URL like the following:</p> - -<pre class="notranslate">http://foo.com?pos.x=123&pos.y=456</pre> - -<p>This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a> article.</p> - -<h3 id="Meters_and_progress_bars">Meters and progress bars</h3> - -<p>Meters and progress bars are visual representations of numeric values.</p> - -<h4 id="Progress">Progress</h4> - -<p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.</p> - -<pre class="brush: html notranslate"><progress max="100" value="75">75/100</progress></pre> - -<p>This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.</p> - -<p>The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p> - -<h4 id="Meter">Meter</h4> - -<p>A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:</p> - -<ul> - <li>The {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts: - <ul> - <li>The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values (including those values).</li> - <li>The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values (excluding those values).</li> - <li>The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values (including those values).</li> - </ul> - </li> - <li>The {{htmlattrxref("optimum","meter")}} value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered: - <ul> - <li>If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part.</li> - <li>If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part and the higher range is considered to be average as well.</li> - <li>If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.</li> - </ul> - </li> -</ul> - -<p>All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:</p> - -<ul> - <li>If the current value is in the prefered part of the range, the bar is green.</li> - <li>If the current value is in the average part of the range, the bar is yellow.</li> - <li>If the current value is in the worst part of the range, the bar is red.</li> -</ul> - -<p>Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.</p> - -<pre class="brush: html notranslate"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> - -<p>The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p> - -<p>Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.</p> - -<h2 id="See_also">See also</h2> - -<p>To dig into the different form widgets, there are some useful external resources you should check out:</p> - -<ul> - <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">The Current State of HTML5 Forms</a> by Wufoo</li> - <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> on Quirksmode (also <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">available for mobile</a> browsers)</li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> -</ul> diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..f34fe049f5 --- /dev/null +++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,204 @@ +--- +title: Tips for authoring fast-loading HTML pages +slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +<p>Эти советы основаны на общих знаниях и экспериментах.</p> + +<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объемом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p> + +<p>Оптимизация производительности загрузки страницы нужна не только для контента, который будет просматриваться узкополосным модемом или посетителями мобильных устройств. Это так же важно для широкополосного контента и может привести к значительным улучшениям даже для ваших посетителей с самыми быстрыми подключениями.</p> + +<h2 id="Tips" name="Tips">Советы</h2> + +<h3 id="Reduce_page_weight" name="Reduce_page_weight">Уменьшайте вес страницы</h3> + +<p>Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.</p> + +<p>Уменьшение веса страницы за счет устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p> + +<p>Такие инструменты, как <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии</p> + +<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">Минимизируйте количество файлов</h3> + +<p>Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.</p> + +<p>В зависимости от настроек кэша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменен с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p> + +<p>Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.</p> + +<h3 id="Используйте_сеть_доставки_(и_дистрибуции)_содержимого_(Content_Delivery_Network_(CDN))"><strong>Используйте сеть доставки (и дистрибуции) содержимого (</strong>Content Delivery Network (CDN)<strong>)</strong></h3> + +<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p> + +<p>CDN - это географически распределенная сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кэшированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p> + +<p>Дальнейшее чтение:</p> + +<ul> + <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li> +</ul> + +<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">Сократите поиск доменов</h3> + +<p>Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.</p> + +<p>Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.</p> + +<h3 id="Cache_reused_content" name="Cache_reused_content">Кэшируйте повторно использованный контент</h3> + +<p>Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.</p> + +<p>В частности, обратите внимание на заголовок <code>Last-Modified</code>. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок <code>Last-Modified</code> к статическим страницам (напр. <code>.html</code>, <code>.css</code>), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. <code>.php</code>, <code>.aspx</code>), это, конечно, не может быть сделано, и заголовок не отправляется.</p> + +<p>Так, в частности, для страниц, которые генерируются динамически, небольшое исследование по этой теме полезно. Это может быть несколько сложным, но это сэкономит много запросов страниц на страницах, которые обычно не могут быть кэшированы.</p> + +<p>Больше информации:</p> + +<ol> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">On HTTP Last-Modified and ETag</a></li> +</ol> + +<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">Оптимально размещайте компоненты на странице</h3> + +<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает еще более быстрый отклик для пользователя.</p> + +<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведет к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p> + +<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Уменьшайте количество встроенных скриптов</h3> + +<p>Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования <code>document.write()</code> для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> для управления содержимым страницы, а не устаревшие подходы, которые основаны на <code>document.write()</code>.</p> + +<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">Используйте современный CSS и корректную разметку</h3> + +<p>Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.</p> + +<p>Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).</p> + +<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки</p> + +<h3 id="Chunk_your_content" name="Chunk_your_content">Разделяйте ваш контент</h3> + +<p>Использование таблиц для вёрстки макетов устаревший метод, который не должен больше использоваться. Вместо этого для создания макетов нужно использовать <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, или <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a>.</p> + +<p>Таблицы по-прежнему считаются допустимой разметкой, но их следует использовать для отображения табличных данных. Чтобы браузер быстрее отображал вашу страницу, вам следует избегать вложения таблиц.</p> + +<p>Вместо глубоко вложенных таблиц, как в:</p> + +<pre><TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> +</TABLE></pre> + +<p>используйте невложенные таблицы как показано (или div'ы)</p> + +<pre><TABLE>...</TABLE> +<TABLE>...</TABLE> +<TABLE>...</TABLE> +</pre> + +<p>Смотри также: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> и <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p> + +<h3 id="Сокращайте_и_сжимайте_активы_SVG">Сокращайте и сжимайте активы SVG</h3> + +<p>SVG, создаваемый большинством графических приложений, часто содержит ненужные метаданные, которые можно удалить. Настройте свои сервера, примените сжатие gzip для ресурсов SVG</p> + +<h3 id="Сокращайте_и_сжимайте_ваши_изображения">Сокращайте и сжимайте ваши изображения</h3> + +<p>Большие изображения приводят к тому, что загрузка страницы занимает больше времени. Рассмотрите возможность сжатия ваших изображений перед добавлением их на свою страницу. Есть онлайн-инструменты, такие как <a href="https://compressjpeg.com/">Compress Jpeg</a>, <a href="https://tinypng.com">Tiny PNG</a> и многие другие, доступны онлайн. Вы можете использовать офлайн-инструменты, такие как фотошоп и другие.</p> + +<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">Указывайте размеры для изображений и таблиц </h3> + +<p>Если браузер может немедленно определить высоту и/или ширину ваших изображений и таблиц, он сможет отображать веб-страницу без необходимости переформатировать содержимое. Это не только ускоряет отображение страницы, но и предотвращает раздражающие изменения в макете страницы после завершения загрузки страницы. По этой причине <code>height</code> и <code>width</code> должны быть указаны для изображений всегда, когда это возможно.</p> + +<p>Таблицы должны использовать CSS селектор: комбинация свойств</p> + +<pre> table-layout: fixed; +</pre> + +<p>и должны указывать ширину колонок используя HTML теги <code>COL</code> и <code>COLGROUP</code></p> + +<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">Мудро выбирайте требования к пользовательскому агенту</h3> + +<p>Чтобы добиться наибольших улучшений в дизайне страниц, убедитесь, что для проектов указаны разумные требования к пользовательским агентам. Не требуйте, чтобы ваш контент казался идеальным во всех браузерах, особенно в устаревших.</p> + +<p>В идеале ваши базовые минимальные требования должны основываться на рассмотрении современных браузеров, поддерживающих соответствующие стандарты.Это может включать: Firefox 3.6+ на любой платформе, Internet Explorer 8.0+ на Windows, Opera 10+ на Windows, и Safari 4 на Mac OS X.</p> + +<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p> + +<h3 id="Используйте_async_и_defer_если_это_возможно">Используйте async и defer, если это возможно</h3> + +<p>Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.</p> + +<p>При этом страница может перестать отображаться, пока JavaScript все еще загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p> + +<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p> + +<h2 id="Example_page_structure" name="Example_page_structure">Пример структуры страницы</h2> + +<p>· <code>HTML</code></p> + +<dl> + <dd>· <code>HEAD</code></dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>LINK </code>...<br> + CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.</dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>SCRIPT </code>...<br> + Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы</dd> + <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.</dd> + </dl> + </dd> +</dl> + +<dl> + <dd>· <code>BODY</code></dd> + <dd>· Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.</dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>SCRIPT </code>...<br> + Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.</dd> + <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания</dd> + <dd>Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.</dd> + </dl> + </dd> +</dl> + +<h2 id="Related_Links" name="Related_Links">Ссылки по теме</h2> + +<ul> + <li>Книга: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> + <li>Отличная и очень содеражательная статья <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> + <li>Инструменты для анализа и оптимизации производительности: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Bob Clary, Technology Evangelist, Netscape Communications</li> + <li>Last Updated Date: Published 04 Apr 2003</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> + +<p> </p> diff --git a/files/ru/learn/html/рецепты/index.html b/files/ru/learn/html/howto/index.html index 1a780e676b..1a780e676b 100644 --- a/files/ru/learn/html/рецепты/index.html +++ b/files/ru/learn/html/howto/index.html diff --git a/files/ru/learn/html/howto/use_data_attributes/index.html b/files/ru/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..cef001e25a --- /dev/null +++ b/files/ru/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,129 @@ +--- +title: Использование data-* атрибутов +slug: Web/Guide/HTML/Using_data_attributes +tags: + - Guide + - HTML +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +<p><a href="/ru/docs/Web/Guide/HTML/HTML5">HTML5</a> спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. <a href="/ru/docs/Web/HTML/Global_attributes#data-*"><code>data-*</code> атрибуты</a> позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.</p> + +<h2 id="Синтаксис_HTML">Синтаксис HTML</h2> + +<p>Синтаксис прост — любой атрибут, чьё имя начинается с <code>data-</code>, является <code>data-*</code> атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать <code>data</code>-атрибуты:</p> + +<pre class="brush: html"><article + id="electriccars" + data-columns="3" + data-index-number="12314" + data-parent="cars"> +... +</article></pre> + +<h2 id="Доступ_в_JavaScript">Доступ в JavaScript</h2> + +<p>Чтение <code>data-</code>атрибутов в <a href="/ru/docs/Web/JavaScript">JavaScript</a> осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.</p> + +<p>Чтобы получить <code>data</code>-атрибут можно взять свойство объекта <code>dataset</code> с именем, равным части имени атрибута после <code>data-</code> (обратите внимание, что дефисы в имени преобразуются в camelCase).</p> + +<pre><code>var article = document.getElementById('electriccars'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "cars"</code></pre> + +<p>Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода <code>article.dataset.columns = 5</code> приведёт к тому, что новое значение атрибута станет равным <code>"5"</code>.</p> + +<h2 id="Доступ_в_CSS">Доступ в CSS</h2> + +<p>Заметим, что <code>data</code>-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в <a href="/ru/docs/Web/CSS">CSS</a>. Например, чтобы показать родительские данные о статье можно использовать <a href="/ru/docs/Web/CSS/content">генерируемый контент</a> и CSS функцию {{cssxref("attr")}}:</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>Также можно использовать <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов </a>в CSS для изменения стилей в соответствии с данным:</p> + +<pre class="brush: css">article[data-columns='3']{ + width: 400px; +} +article[data-columns='4']{ + width: 600px; +}</pre> + +<p>Увидеть как это работает можно <a href="https://jsbin.com/ujiday/2/edit">в примере на JSBin</a>.</p> + +<p><code>Data</code>-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">скринкаст</a> чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. <a href="https://jsbin.com/atawaz/3/edit">Пример кода из скринкаста можно также посмотреть на JSBin</a>.</p> + +<h2 id="Проблемы">Проблемы</h2> + +<p>Не храните данные, которые должны быть видимы и доступны в <code>data</code>-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в <code>data</code>-атрибутах.</p> + +<p>Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии <a href="https://caniuse.com/#feat=dataset">не поддерживают <code>dataset</code></a>. Для поддержки IE 10 и более ранних версий получение доступа к <code>data</code>-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, <a href="https://jsperf.com/data-dataset">производительность чтения <code>data-</code>атрибутов</a> по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование <code>dataset</code> ещё медленнее, чем чтение данных с <code>getAttribute()</code>.</p> + +<p>Тем не менее, для пользовательских метаданных, связанных с элементами, <code>data-</code>атрибуты являются отличным решением.</p> + +<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2> + +<table class="standard-table"> + <caption>caniuse</caption> + <thead> + <tr> + <th scope="col"> + <h4 id="IE">IE</h4> + </th> + <th scope="col"> + <h4 id="Edge">Edge</h4> + </th> + <th scope="col"> + <h4 id="Firefox">Firefox</h4> + </th> + <th scope="col"> + <h4 id="Chrome">Chrome</h4> + </th> + <th scope="col"> + <h4 id="Safari">Safari</h4> + </th> + <th scope="col"> + <h4 id="Opera">Opera</h4> + </th> + <th scope="col"> + <h4 id="iOS_Safari">iOS Safari</h4> + </th> + <th scope="col"> + <h4 id="Opera_Mini*">Opera Mini<sup>*</sup></h4> + </th> + <th scope="col"> + <h4 id="Android_Browser">Android Browser</h4> + </th> + <th scope="col"> + <h4 id="Chrome_for_Android">Chrome for Android</h4> + </th> + </tr> + </thead> + <tbody> + <tr> + <td>11+</td> + <td>14+</td> + <td>52+</td> + <td>49+</td> + <td>10.1+</td> + <td>46+</td> + <td>9.3+</td> + <td>all</td> + <td>4.4+</td> + <td>59+</td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>Тем не менее, для содержимого, которое не надо показывать это является отличным решением.</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>This article is adapted from <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li> + <li><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li> +</ul> diff --git a/files/ru/learn/html/введение_в_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html index fdebae6e91..fdebae6e91 100644 --- a/files/ru/learn/html/введение_в_html/advanced_text_formatting/index.html +++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html diff --git a/files/ru/learn/html/введение_в_html/создание_гиперссылок/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html index fcee7272e4..fcee7272e4 100644 --- a/files/ru/learn/html/введение_в_html/создание_гиперссылок/index.html +++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html diff --git a/files/ru/learn/html/введение_в_html/debugging_html/index.html b/files/ru/learn/html/introduction_to_html/debugging_html/index.html index 1f3e03e508..1f3e03e508 100644 --- a/files/ru/learn/html/введение_в_html/debugging_html/index.html +++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.html diff --git a/files/ru/learn/html/введение_в_html/структура_документа_и_веб-сайта/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html index 13f4f458d1..13f4f458d1 100644 --- a/files/ru/learn/html/введение_в_html/структура_документа_и_веб-сайта/index.html +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html diff --git a/files/ru/learn/html/введение_в_html/начало_работы/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html index 48904b9e17..48904b9e17 100644 --- a/files/ru/learn/html/введение_в_html/начало_работы/index.html +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html diff --git a/files/ru/learn/html/введение_в_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html index 711c0bfdf3..711c0bfdf3 100644 --- a/files/ru/learn/html/введение_в_html/html_text_fundamentals/index.html +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html diff --git a/files/ru/learn/html/введение_в_html/index.html b/files/ru/learn/html/introduction_to_html/index.html index 1ecf1eb84a..1ecf1eb84a 100644 --- a/files/ru/learn/html/введение_в_html/index.html +++ b/files/ru/learn/html/introduction_to_html/index.html diff --git a/files/ru/learn/html/введение_в_html/marking_up_a_letter/index.html b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html index c9ede9d116..c9ede9d116 100644 --- a/files/ru/learn/html/введение_в_html/marking_up_a_letter/index.html +++ b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html diff --git a/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index b5bb7fa235..b5bb7fa235 100644 --- a/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html +++ b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html diff --git a/files/ru/learn/html/введение_в_html/the_head_metadata_in_html/index.html b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index dfb2840569..dfb2840569 100644 --- a/files/ru/learn/html/введение_в_html/the_head_metadata_in_html/index.html +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html diff --git a/files/ru/learn/html/multimedia_and_embedding/добавление_r_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index a3a445dfc7..a3a445dfc7 100644 --- a/files/ru/learn/html/multimedia_and_embedding/добавление_r_graphics_to_the_web/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html diff --git a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html index d96558e3da..d96558e3da 100644 --- a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html diff --git a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/проверьте_свои_знания_colon__изображения_в_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html index e00777dabe..e00777dabe 100644 --- a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/проверьте_свои_знания_colon__изображения_в_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html diff --git a/files/ru/learn/html/multimedia_and_embedding/заставка_mozilla/index.html b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html index 4171780730..4171780730 100644 --- a/files/ru/learn/html/multimedia_and_embedding/заставка_mozilla/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html |