diff options
Diffstat (limited to 'files/ru/learn/forms/your_first_form/index.html')
| -rw-r--r-- | files/ru/learn/forms/your_first_form/index.html | 306 |
1 files changed, 306 insertions, 0 deletions
diff --git a/files/ru/learn/forms/your_first_form/index.html b/files/ru/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..4cb3f856d0 --- /dev/null +++ b/files/ru/learn/forms/your_first_form/index.html @@ -0,0 +1,306 @@ +--- +title: Ваша первая HTML форма +slug: Learn/Forms/Your_first_form +tags: + - HTML-форма + - Веб-форма + - Форма +translation_of: Learn/Forms/Your_first_form +original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма +--- +<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> |