Веб-формы — Работа с пользовательскими данными

Разработка вашей формы

Прежде чем приступить к кодированию, всегда лучше сделать шаг назад и подумать о своей форме. Разработка быстрого макета поможет вам определить правильный набор данных, которые вы хотите попросить пользователя ввести. С точки зрения пользовательского опыта (UX) важно помнить, что чем больше ваша форма, тем больше вы рискуете разочаровать людей и потерять пользователей. Сохраняйте простоту и не отвлекайтесь: запрашивайте только те данные, которые вам абсолютно необходимы.
Разработка форм — важный шаг при создании сайта или приложения. В рамках этой статьи не рассматривается пользовательский интерфейс форм, но если вы хотите углубиться в эту тему, вам следует прочитать следующие статьи:

• 
  В журнале Smashing Magazine есть несколько хороших статей о UX форм , в том числе старая, но все еще актуальная статья Extensive Guide To Usability Web Form .
  
• 
  UXMatters также является очень вдумчивым ресурсом с полезными советами от основных передовых практик до сложных проблем, таких как многостраничные формы .
  

В этой статье мы создадим простую контактную форму. Сделаем грубый набросок.

Наша форма будет содержать три текстовых поля и одну кнопку. Мы запрашиваем у пользователя его имя, адрес электронной почты и сообщение, которое он хочет отправить. Нажатие кнопки отправит их данные на веб-сервер.

Активное обучение: реализация нашей формы HTML

Хорошо, давайте создадим HTML для нашей формы. Мы будем использовать следующие элементы HTML:

, , , </u> и <u><button></u>. <br />Прежде чем идти дальше, сделайте локальную копию нашего простого HTML-шаблона — сюда вы введете HTML-код формы. <br /><span id='Элемент__'><h3>Элемент <form>_</span></h3> <br />Все <a href="/viskazivaniya-i-viskazivatelenie-formi-viskazivanie.html">формы начинаются с </a><u><form></u>элемента, например: <br /><form action="/my-handling-form-page" method="post">…</form> <br />Скопировать в буфер обмена <br />Этот элемент формально определяет форму. Это элемент-контейнер, <a href="/selektor-v-sss-effekti-transformacii-animaciya.html">подобный элементу </a><u><section></u> или <u><footer></u>, но специально предназначенный для содержания форм; он также поддерживает некоторые специальные атрибуты для настройки поведения формы. Все его атрибуты являются необязательными, но стандартной практикой является всегда устанавливать <a href="/vliyanie-okrujayushej-sredi-na-razvitie-rebenka.html">как минимум атрибуты </a><u>action</u>и <u>method</u>: <br /><ul> <li/> <br />Атрибут action определяет место (URL), куда должны отправляться собранные данные формы при ее отправке. <br /><li/> <br />Атрибут method определяет, каким методом HTTP отправлять данные (обычно get или post). <br /></ul> <br /></footer></section></form></form></button>