HTML формы

Формы исплользуются для сбора информации у пользователей. Форма может быть совсем маленькой, как например поисковое поле или формы могут быть большими и собирать кучу информации.

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

HTML

Прежде всего, для создания формы необходим элемент form

<form action="#">
</form>

Этот элемент должен обворачивать собой все остальные элементы форм. Кроме того, нельзя наследовать одну форму в другую — это не имеет смысла и не будет работать

Мы поговорим об аттрибуте action немного позже — этот аттрибут определяет адрес сервера который умеет понимать данные формы.

Inputs

Существует несколько разных элементов определяющих поля форм — мы начнем с текстового поля. Элемент input со значением аттрибута type="text" или вообще без этого аттрибута.

<input type="text">
<!-- same as -->
<input>

Если мы хотим задать значение по-умолчанию для текстового поля, нам будет необходимо использовать аттрибут value

<input value="default text value">

Кроме того, для корректной работы формы, обязательно каждому элементу input задавать аттрибут name. Его значение должно описывать что это за текстовое поле, маленькими латинскими буквами без пробелов, для разделения слов используйте знаки «минус».

<form action="#">
  <input name="username">
</form>

Аттрибут placeholder позволяет добавить «подсказку» для пользователя.

<form action="#">
  <input name="username" placeholder="Your username">
</form>

Текстовые поля могут иметь и другие типы.

type="password" –
type="number" –
type="date" –
type="time" –
type="email"

Для большего количества текста, например для ввода комментариев, можно использовать элемент textarea. Так же как и остальным полям форм этому элементу необходим аттрибут name описывающий что за информацию вводит пользователь.

<textarea name="comment-message"></textarea>

Labels

Элемент label позволяет создать интерактивный элемент интерфейса описывающий какое-то поле

<form action="#">
  <label for="username">Username</label> <input id="username" name="username">
</form>

Username

Для достижения эффекта, когда при нажатии на label нужное поле формы будет выбрано [сфокусировано], необходимо использовать аттрибут for для элемента label, а значение этого аттрибута должно указывать на значение аттрибута id поля формы

Форма контактов

Давайте вернемся к сайту desktimeapp и сделаем форму контактов.

<section id="request-a-demo" class="marketing-signup">
  <div class="marketing-signup-content">
    <h1>Let’s get started.</h1>
    <p>We’ll help you setup your space and walk you through the entire Desktime experience. By the end of the session you’ll be ready to use Desktime full-time.</p>
  </div>
  <form class="marketing-signup-form">
    <ul>
      <li>
        <label for="demo-name">Your Name</label>
        <input id="demo-name" placeholder="Your full name">
      </li>
      <li>
        <label for="demo-email">Your Email</label>
        <input id="demo-email" placeholder="you@yourmail.com" type="email">
      </li>
      <li>
        <label for="demo-space">Your Space</label>
        <input id="demo-space" placeholder="Name of your space">
      </li>
    </ul>
  </form>
</section><!-- /.marketing-signup -->

Результат (HTML)

Промежуточный результат (some CSS)

Мы использовали новое свойство box-shadow и «псевдо-элемент» :after

Вы можете прочитать больше о пседвоэлементах на CSS-Tricks

Результат (готовая форма)

Использовали псевдокласс :focus, анимации, inline-block

Конечный результат

Более сложные формы

Другие типы полей форм.

Существуют «группированные» типы полей — такие как чекбоксы и радио-кнопки. Они определяют возможность выбора нескольких или *из* нескольких возможных ответов и группированы вместе при помощи аттрибута name

<!-- checkboxes -->
<label>HTML <input type="checkbox" name="technology" value="html" checked></label>
<label>CSS <input type="checkbox" name="technology" value="css" checked></label>
<label>JavaScript <input type="checkbox" name="technology" value="js"></label>

<!-- radios -->
<label>Happy <input type="radio" name="mood" value="happy"></label>
<label>Indifferent <input type="radio" name="mood" value="indiff"></label>
<label>Sad <input type="radio" name="mood" value="sad"></label>

Элемент <input type="checkbox"> определяет возможность нескольких значений одновременно

Элемент <input type="radio"> определяет возможность выбрать одно из нескольких значений

Но форма бесполезна если данные никаким образом не обрабатываются. Для того, чтобы указать на сервер—обработчик данных нужно использовать аттрибут action.

Этот аттрибут указывает браузеру по какому адресу нужно отправить данные, когда будет нажата кнопка «отправки» (или нажата кнопка enter)

Обычно, программист серверной части будет писать специальный код на языке PHP, Ruby, Python или любом другом, который будет обрабатывать данные. Я хочу показать один из бесплатных сервисов, который устроен так — вы регистрируетесь на нем, этот сервис предоствляет адрес, который вы потом вставляете как значение аттрибута action для своей формы. После этого, при отпраке формы с вашего сайта, этот сервис будет отправлять письмо на указанный вами email.

Такие сервисы называются form to email и часто являются частью пакета услуг веб-хостинга

Сервис о котором говорю я называется AllForms

Основы HTML и СSS

Часть 4

HTML формы

HTML

Inputs

Labels

Форма контактов

Более сложные формы

Video & Audio elements

CSS transforms

Ссылки для занятий дома