Основы HTML и СSS

Часть 4

HTML формы

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










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

HTML

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

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

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

Inputs

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

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

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

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

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

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

Labels

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Video & Audio elements

Давайте вставим видео в наш проект desktime

Ссылки на видео — формат mp4 и webm

Результат нашего упражнения с видео в качестве фона

CSS transforms

В CSS существует возможность задавать транформации элементам, такие как scale, rotate, translate, skew.

http://docs.webplatform.org/wiki/tutorials/css_transforms

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

General learning
http://learn.shayhowe.com
http://docs.webplatform.org/wiki/Main_Page
CSS Layouts
http://learnlayout.com/
Floats
http://softwaremaniacs.org/blog/2005/12/01/css-layout-float
http://css.maxdesign.com.au/floatutorial/
http://alistapart.com/article/css-floats-101
Positioning (relative, absolute, fixed)
http://alistapart.com/article/css-positioning-101
CSS Transitions
http://alistapart.com/article/understanding-css3-transitions
Скелет/шаблон файловой структуры нового сайта
http://html5boilerplate.com/
Общие
24ways
A List Apart
CSS Tricks
Smashing Magazine