diff options
Diffstat (limited to 'files/ru/learn/forms/index.html')
| -rw-r--r-- | files/ru/learn/forms/index.html | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/files/ru/learn/forms/index.html b/files/ru/learn/forms/index.html new file mode 100644 index 0000000000..02e36df560 --- /dev/null +++ b/files/ru/learn/forms/index.html @@ -0,0 +1,78 @@ +--- +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> |