Файл: Инициализация формы.docx

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 09.11.2023

Просмотров: 14

Скачиваний: 1

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

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

Мы должны знать как создавать формы чтобы получить входные данные от пользователя. В этом уроке мы обсудим, как использовать HTML для разметки формы, какие элементы использовать для захвата разных типов данных и как стилизовать формы с помощью CSS. Мы не станем слишком углубляться в то, как информация из формы обрабатывается на стороне сервера. Обработка форм представляет собой глубокую тему, вне области этой книги; здесь мы будем придерживаться создания и стилизации форм.

Инициализация формы

Чтобы добавить форму на страницу мы будем использовать элемент 
. Данный элемент определяет, где на странице появятся элементы управления. Кроме того, элемент 
 обёртывает все элементы включенные в форму, подобно элементу 
.



...



К элементу 
 может применяться горстка различных атрибутов, наиболее распространёнными из которых являются action и method. Атрибут action содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method является методом HTTP, который должны использовать браузеры для отправки данных формы. Оба эти атрибута 
 имеют отношение к отправке и обработке данных.

Текстовые поля и текстовые области

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

Текстовые поля

Одним из основных элементов, используемых для получения текста от пользователей, является элемент . Данный элемент включает атрибут type для определения, какой тип информации будет получен в элементе управления. Наиболее популярное значение атрибута type — это text, который обозначает ввод одной строки текста.

Наряду с установкой атрибута type, хорошей практикой будет также дать элементу  атрибут name. Значение атрибута name применяется в качестве имени элемента управления и отправляется вместе с входными данными на сервер.



Элемент  является самостоятельным, то есть он задействует только один тег и не оборачивает какой-либо контент. Значение элемента обеспечивается его атрибутами и их соответствующими значениями.

Первоначально было только два текстовых значения атрибута type — text и password (для ввода паролей), однако HTML5 привёз с собой несколько новых значений атрибута type.

Эти значения были добавлены, чтобы обеспечить чёткое смысловое значение для полей ввода, а также предоставить лучшее управление пользователям. Если браузер не понимает одно из этих HTML5-значений атрибута type, он автоматически вернётся к значению text. Ниже приведён список новых типов HTML5.

  • color

  • date

  • datetime

  • email

  • month

  • number

  • range

  • search

  • tel

  • time

  • url

  • week

Следующие элементы  показывают некоторые из этих значений атрибута type из HTML5 в использовании, а на рисунках показано, как эти уникальные значения могут выглядеть в iOS. Обратите внимание, что различные значения обеспечивают разные элементы управления, все они делают сбор информации от пользователей проще.















Рис. 10.01. Элемент со значением date у атрибута type для iOS7



Рис. 10.02. Элемент со значением time у атрибута type для iOS7



Рис. 10.03. Элемент со значением email у атрибута type для iOS7



Рис. 10.04. Элемент со значением url у атрибута type для iOS7



Рис. 10.05. Элемент со значением number у атрибута type для iOS7



Рис. 10.06. Элемент со значением tel у атрибута type для iOS7



Ещё одним элементом, используемым для сбора текстовых данных, является элемент 

Поля множественного выбора и меню

Помимо текстовых полей, HTML также позволяет пользователям выбирать данные, используя множественный выбор и раскрывающиеся списки. Есть несколько разных вариантов и полей для этих элементов формы, каждый из которых имеет свои отличительные преимущества.

Переключатели

Переключатели — это простой способ, позволяющий пользователям сделать быстрый выбор из небольшого списка вариантов. Переключатели дают пользователю выбрать только один вариант в отличие от нескольких.

Чтобы создать переключатель, используется элемент  со значением radio у атрибута type. Каждый переключатель должен иметь одинаковое значение атрибута name, чтобы все они в группе были связаны друг с другом.

С текстовыми полями их значение определяется тем, что пользователь в них набирает; с переключателями пользователь делает множественный выбор. Таким образом, мы должны определить входное значение. Используя атрибут value мы можем установить конкретное значение для каждого элемента .

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

Пятница

Суббота

Воскресенье

Флажки

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

Пятница

Суббота

Воскресенье

Выпадающие списки

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

Для создания выпадающего списка мы будем применять элементы  оборачивает все пункты меню, а каждый пункт меню размечен с помощью элемента 

Множественный выбор

Логический атрибут multiple при добавлении к элементу  можно управлять с помощью CSS и он должен быть скорректирован соответствующим образом для множественного выбора. Возможно, есть смысл информировать пользователей, что для выбора нескольких вариантов они должны удерживать клавишу Shift во время щелчка, чтобы сделать выбор.











Кнопки в форме

После того, как пользователь вводит запрашиваемую информацию, кнопки позволяют пользователю пустить эту информацию в дело. Чаще всего для обработки данных используются поле или кнопка для отправки.

Поле для отправки

Когда пользователь щёлкает по кнопке, данные формы обрабатываются после её заполнения. Кнопка для отправки создаётся с помощью элемента  со значением submit у атрибута type. Атрибут value применяется для указания текста, который отображается внутри кнопки.



Кнопка для отправки

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

Отправьте нам сообщение



Другие поля

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

Скрытое поле

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

Чтобы создать скрытое поле используйте значение hidden атрибута type. Дополнительно включает в себя соответствующие значения атрибутов name и value.



Поле для файла

Чтобы позволить пользователям добавить файл в форму, вроде прикрепления файла к письму, используйте значение file атрибута type.



Демонстрация поля для файла

К сожалению, стилизация с помощью CSS элемента , у которого значение атрибута type задано как file, является трудной задачей. Каждый браузер содержит свой собственный стиль поля по умолчанию и ни один не даёт много свободы, чтобы переопределить этот стиль. JavaScript и другие решения могут быть использованы для этого, но они несколько сложны для построения.

Организация элементов формы

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

С помощью 




Пароль







Демонстрация legend

Атрибуты формы и полей

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

disabled

Логический атрибут disabled выключает элемент управления таким образом, что он не доступен для взаимодействия или ввода. Заблокированные элементы не будут отправлять никакого значения на сервер для обработки формы.

Применение атрибута disabled к элементу 
 отключит все элементы управления формы внутри группы.



Имя пользователя





placeholder

Атрибут placeholder в HTML5 предлагает подсказку или совет внутри элемента  или 








Запомнить







CSS

*,

*:before,

*:after {

box-sizing: border-box;

}

form {

border: 1px solid #c6c7cc;

border-radius: 5px;

font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;

overflow: hidden;

width: 240px;

}

fieldset {

border: 0;

margin: 0;

padding: 0;

}

input {

border-radius: 5px;

font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;

margin: 0;

}

.account-info {

padding: 20px 20px 0 20px;

}

.account-info label {

color: #395870;

display: block;

font-weight: bold;

margin-bottom: 20px;

}

.account-info input {

background: #fff;

border: 1px solid #c6c7cc;

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);

color: #636466;

padding: 6px;

margin-top: 6px;

width: 100%;

}

.account-action {

background: #f0f0f2;

border-top: 1px solid #c6c7cc;

padding: 20px;

}

.account-action .btn {

background: linear-gradient(#49708f, #293f50);

border: 0;

color: #fff;

cursor: pointer;

font-weight: bold;

float: left;

padding: 8px 16px;

}

.account-action label {

color: #7c7c80;

font-size: 12px;

float: left;

margin: 10px 0 0 20px;

}

Демонстрация формы для входа

На практике

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

Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента 
 с классом row чуть ниже вступления и вложенный элемент 
 с классом grid непосредственно внутри элемента 
.

Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:





...





В качестве напоминания — класс row добавляет белый фон и обеспечивает некоторый вертикальный padding, в то время как класс grid выравнивает по центру наш контент в середине страницы и обеспечивает некоторый горизонтальный padding.

Внутри элемента 
 с классом grid мы собираемся создать две колонки, одна 2/3, а другая 1/3 от ширины страницы. Колонка 2/3 будет элементом 
 с левой стороны, которая говорит пользователям, почему они должны зарегистрироваться на нашей конференции. Колонка 1/3 будет элементом 
 справа и предоставляет пользователям возможность регистрироваться на нашей конференции.

Мы добавим эти два элемента и соответствующие им классы col-2-3 и col-1-3 непосредственно внутрь элемента 
 с классом grid. Так как эти элементы будут строчно-блочными, мы должны открыть комментарий сразу после закрывающего тега колонки 2/3, а затем закрыть этот комментарий непосредственно перед открывающим тегом колонки 1/3.

В целом, наш код должен выглядеть следующим образом:






...


-->

...




Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.

В нашем элементе 
 с классом col-2-3 код должен выглядеть следующим образом:


Закажи билет на конференцию



$99 за билет


Приобретите билет на Styles Conference, используя форму справа.

Можно приобрести сразу несколько билетов, так что не стесняйтесь взять

с собой друга или двух. После того, как ваш заказ будет готов, мы

свяжемся с вами и предоставим квитанцию за покупку. Скоро увидимся!




Зачем участвовать?







  • Более двадцати спикеров мирового класса


  • Один полный день мастер-классов и два полных дня презентаций


  • Состоится в Театре Чикаго, исторической достопримечательности


  • Август в Чикаго просто поражает





    • В данный момент наш маркированный список не содержит маркеры списка. Все стили браузера по умолчанию были выключены сбросом CSS, мы добавили всё обратно в уроке 1. Давайте создадим несколько пользовательских стилей специально для этого списка.

    Чтобы сделать это, добавим класс why-attend к маркированному списку.



      ...



      С этим добавленным классом создадим новый раздел для стилей страницы Регистрация в нижней части нашего файла main.css. В этом разделе мы будем использовать класс, чтобы выбрать маркированный список и добавить list-style как square, а также некоторые margin.

      Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:

      /*

      ========================================

      Регистрация

      ========================================

      */
      .why-attend {

      list-style: square;

      margin: 0 0 22px 30px;

      }

      Раздел нашей страницы Регистрация завершён, так что теперь пришло время обратиться к регистрационной форме. Начнём с добавления атрибутов action и method к элементу 
      . Так как мы не создали обработчик нашей формы, эти атрибуты будут просто служить заполнителем и должны быть пересмотрены.

      Код для нашего элемента 
       должен выглядеть следующим образом:



      ...



      Далее, внутри элемента 
       мы добавим элемент 
      . Внутри него вставим набор элементов 


      Email






      Число билетов


















      Комментарии














      Здесь мы видим, что каждое поле формы вложено в элемент 

      Смотрите также файлы