возможно ли применять таблицу стилей css к формам
Полное руководство по стилям форм
Начинаем со сброса HTML5
Общие стили CSS формы
Но заставить их работать – это лишь полдела. Чтобы задать стили так, чтобы все выглядело красиво, может потребоваться много времени и труда. Хорошая новость заключается в том, что мы сделали большую часть тяжелой работы за вас. Взгляните на приведенные ниже стили для CSS input type text :
Сокращение
Но если мы не включаем типы элементов ввода в стили, то теряем часть контроля, который нам позже понадобится. Очевидно, что это займет меньше времени, если мы опустим несколько глобальных стилей для полей ввода, но потом мы пожалеем об этом решении.
Такой подход к упрощению даст нам в результате кучу различных элементов ввода, которые будут выглядеть странно. Но этого мы хотим избежать. Приложив больше усилий для добавления стилей элементов ввода, мы получим контроль над всем.
Мы управляем CSS, а CSS управляет нами
Стили фокуса ввода и состояния hover делают дизайн более приятным. Сколько раз вы слышали, что все зависит от деталей? Разница от добавления этих стилей ( в том числе и для CSS input file ) будет невелика, но это значительно улучшит общий опыт взаимодействия.
Углубляемся все дальше: добавляем стили для диапазона, чекбокса, списка и радиокнопки
Мы уже охватили большинство часто используемых типов полей ввода, но есть еще одна группа элементов, с которой нам предстоит поработать.
Назначение стилей для диапазона ввода — это совсем не весело. Ползунок — наименее стандартизированный тип элементов ввода. Это потому, что он содержит довольно много движущихся частей, а браузеры любят добавлять для них собственные вендорные префиксы.
В любом случае, это « Полное руководство », и оно не могло бы считаться таковым, если бы мы упустили этот аспект:
Задача этого свойства — сделать так, чтобы элемент выглядел и вел себя определенным образом ( используя стили браузеров, используемые по умолчанию ). Но мы использовали его, чтобы сделать прямо противоположное.
Стили поля со списком
И это все. Мы снова используем свойство appearance. Различные браузеры по- разному определяют оформление input CSS кнопки переключателя. Чтобы решить данную проблему, можно добавить аккуратное фоновое изображение, которое будет работать в качестве переключателя.
Пользовательские стили CSS для чекбокса и радиокнопки
Мы снова используем SVG-изображения для отображения чекбоксов и радиокнопок, а также их различных состояний. Изменив отступы, поля и непрозрачность в первых строках приведенного выше кода, мы избавляемся от стилей браузера по умолчанию. В следующих строках мы используем трюк, размещая изображения там, где они нам нужны.
Плагины WordPress для добавления стилей форм
Только не это!
Вам придется внести сразу несколько изменений. Особенно это касается поля со списком, чекбокса и радиокнопки, чтобы все выглядело нормально. Вот, что сделал я для оформления input CSS :
Пользовательские стили CSS для Gravity Forms
Стили HTML форм
В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!
Почему так сложно стилизовать виджеты форм с помощью CSS?
На заре Интернета, примерно в 1995 году, в HTML 2 были добавлены элементы управления формой. Из-за сложности виджетов форм разработчики решили полагаться на базовую операционную систему для управления ими и их рендеринга.
Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.
Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все ещё чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.
Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации HTML форм.
Не все виджеты созданы равными, когда задействован CSS
В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:
Хорошая
Некоторые элементы могут быть стилизованы с небольшим количеством проблем на разных платформах. К ним относятся следующие структурные элементы:
Стилизуем формы при помощи CSS: руководство для начинающих
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «How to style forms with CSS: A beginner’s guide».
Приложения получают данные от пользователей, в основном, через формы. Возьмем для примера обычную форму регистрации. Там всегда будет несколько полей, куда пользователь может ввести нужную информацию (свое имя, email и т. д.).
Раньше на сайтах были простые, скучные HTML-формы без всякой стилизации. Но с появлением CSS все изменилось. Благодаря новейшим свойствам CSS мы сейчас можем создавать куда более интересные и красивые формы.
И это не мое личное мнение. На иллюстрации ниже вы видите, как выглядит обычная HTML-форма без CSS.
А вот та же форма, в оформлении которой использовали каскадные таблицы стилей.
В этом руководстве мы покажем вам, как воспроизвести такую форму, а также расскажем о нескольких модификациях, благодаря которым вы сможете создавать впечатляющие и дружественные к пользователю формы.
Наше руководство по стилизации форм при помощи CSS будет состоять из шести пунктов.
Прежде чем мы углубимся в нашу тему, важно понять, что нет никаких особенных стилей для форм. Ваши возможности в этом плане ограничены только вашим воображением. Это руководство лишь поможет вам начать создавать собственные уникальные варианты дизайна при помощи CSS.
1. Устанавливаем box-sizing
Я обычно устанавливаю *
Ниже приведена улучшенная версия нашего первоначального кода. В нее также добавлены псевдоэлементы :before и :after.
Совет: универсальный селектор * выбирает все элементы в документе.
2. Селекторы CSS для элементов ввода
Самый простой способ выбрать элементы ввода — использовать селекторы атрибутов.
Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:
3. Базовые методы стилизации для однострочных текстовых полей ввода
Чаще всего поля ввода в формах бывают однострочными. Обычно такое поле представляет собой простой блок с границей (его вид зависит от браузера).
Вот HTML-разметка для однострочного текстового поля с плейсхолдером.
Выглядеть это будет так:
Чтобы сделать это текстовое поле более привлекательным, можно использовать следующие свойства CSS:
Давайте пройдемся по каждому из этих свойств.
Padding
Добавление некоторого внутреннего пространства может повысить четкость. Чтобы это сделать, применяем свойство padding.
Margin
Если рядом с вашим полем ввода есть другие элементы, вы можете захотеть добавить внешний отступ, чтобы избежать слипания элементов.
Border
В большинстве браузеров текстовые поля ввода имеют границы, которые вы можете кастомизировать.
Совет: если убираете границу, обязательно добавьте цвет фона или тень. В противном случае пользователь просто не увидит ваше поле.
Некоторые веб-дизайнеры предпочитают оставлять только нижнюю границу. При таком варианте пользователь как бы будет писать на строчке, как в блокноте.
Box shadow
Свойство CSS box-shadow позволяет добавить тень элемента. Меняя 5 значений этого свойства, вы сможете добиться самых разнообразных эффектов.
Border radius
Свойство border-radius может очень сильно изменить вид ваших форм. Поля для ввода текста, имеющие скругление углов, выглядят совсем иначе.
Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.
Width
Используйте свойство width, чтобы установить ширину поля ввода.
Большинство браузеров используют разные семейства шрифтов и размер шрифта для элементов форм. Если необходимо, можно установить наследование шрифта от документа.
4. Стилизация прочих типов полей ввода
Вы также можете прописывать стили и для других полей — области текста, радиокнопок, чек-боксов и пр.
Давайте рассмотрим подробнее каждое из них.
Текстовые области (text areas)
Текстовые области напоминают однострочные текстовые поля ввода, с той лишь разницей, что здесь пользователь может ввести не одну строку текста. Обычно они используются, если нужно принимать более «многословные» данные: комментарии, сообщения и т. п. Для стилизации этих областей вы можете использовать все свойства, о которых мы говорили ранее.
Также для текстовых областей применимо и очень полезно свойство resize. В большинстве браузеров текстовые области по умолчанию могут растягиваться как по оси x, так и по оси y (значение: both). Но вы можете установить для этого свойства также значение horizontal или vertical.
Посмотрите на пример:
Здесь я использовал resize:vertical, чтобы разрешить изменение размера исключительно по вертикали. Такая практика применяется в большинстве форм, поскольку позволяет избежать появления горизонтальной полосы прокрутки.
Примечание: если вам нужно создать текстовую область с автоматическим изменением размера, следует использовать JavaScript. Но в нашей статье мы не будем углубляться в эту тему.
Чекбоксы и радиокнопки
Дефолтные чекбоксы и радиокнопки очень сложно стилизовать, для этого требуется более сложный CSS-код (и HTML — тоже).
Для стилизации чекбокса используйте следующий HTML-код.
Несколько вещей, на которые нужно обратить внимание:
Вот пользовательский чекбокс (комментарии в CSS-коде поясняют происходящее более подробно):
See the Pen yLNKQBo by Supun Kavinda (@SupunKavinda) on CodePen.
Вот пользовательская радиокнопка:
See the Pen eYNMQNM by Supun Kavinda (@SupunKavinda) on CodePen.
В обоих примерах мы использовали одну и ту же концепцию (input:checked).
В браузерах чекбоксы отображаются квадратиками, а радиокнопки — кружочками. Это лучше не менять, чтобы не путать пользователя.
Раскрывающийся список
Раскрывающийся список позволяет пользователю выбрать элемент из нескольких предложенных вариантов.
Но вы не можете стилизовать выпадающие элементы, потому что их стили зависят от операционной системы. Единственный способ изменить их вид — использовать JavaScript.
Кнопки
Как и у большинства элементов, у кнопок есть стили, установленные по умолчанию.
Давайте немного украсим нашу кнопку.
5. Псевдоклассы UI
Ниже приведен список псевдоклассов, которые широко используются с элементами форм.
Эти псевдоклассы могут использоваться для показа уведомлений в зависимости от атрибутов элемента:
Эти могут использоваться для создания эффектов для каждого состояния:
Сообщения, генерируемые при помощи :required
Показываем сообщение о том, что заполнение поля является обязательным:
Если вы удалите атрибут required при помощи JavaScript, сообщение «Required» исчезнет автоматически.
Мы можем сделать то же самое с псевдоклассами :valid и :invalid.
:hover и :focus
:hover выбирает элемент, когда на него наводится курсор мыши. :focus выбирает элемент, когда тот в фокусе.
Эти псевдоклассы часто используются для создания переходов и легких визуальных изменений. Например, можно менять ширину, цвет фона, цвет границы, густоту тени и т. п. Если вместе с этими свойствами использовать свойство transition, изменения будут более плавными.
Вот несколько эффектов наведения для элементов формы (попробуйте навести курсор на разные поля):
See the Pen yLNKZqg by Supun Kavinda (@SupunKavinda) on CodePen.
Когда пользователь видит небольшие изменения в элементе, происходящие при наведении мыши, он понимает, что с элементом можно что-то делать. Это важно для дизайна элементов форм.
Вы замечали, что в некоторых браузерах вокруг элемента, находящегося в фокусе, появляется синяя внешняя граница? Вы можете использовать псевдокласс :focus, чтобы удалить ее и добавить другие эффекты для элемента в фокусе.
Следующий код удаляет внешнюю границу для всех элементов:
Добавляем внешнюю границу для элементов в фокусе:
6. Элементы ввода, недоступные для кастомизации
Стилизация элементов форм всегда была сложной задачей. Есть некоторые элементы, с которыми не многое можно сделать в плане изменения стиля. Например:
Эти элементы предоставляются браузером и стилизуются в зависимости от вашей ОС. Единственный способ изменить их стиль — использовать кастомные контролы (Custom Controls), созданные при помощи div, span и прочих HTML-элементов, поддающихся стилизации.
Кастомные контролы для элементов форм уже разработаны для основных JavaScript-библиотек. Найти их можно на GitHub.
Заключение
К этому моменту у вас уже должно появиться понимание того, как стилизуются простые элементы форм и как использовать кастомные контролы для стилизации остальных элементов. Конечно, это лишь основные строительные блоки, при помощи которых вы можете создавать стили, рисуемые вашим воображением.
В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.
Построение форм
Формы являются неотъемлемой частью Интернета, так как они предлагают сайтам метод сбора информации от пользователей и обработки запросов, а также элементы управления практически для любого мыслимого применения. С помощью элементов управления или полей, формы могут запросить небольшой объём информации — часто это поисковый запрос, имя пользователя или пароль. Или большой объём информации — возможно, данные о посылке, платёжная информация или предложение работы.
Мы должны знать как создавать формы чтобы получить входные данные от пользователя. В этом уроке мы обсудим, как использовать HTML для разметки формы, какие элементы использовать для захвата разных типов данных и как стилизовать формы с помощью CSS. Мы не станем слишком углубляться в то, как информация из формы обрабатывается на стороне сервера. Обработка форм представляет собой глубокую тему, вне области этой книги; здесь мы будем придерживаться создания и стилизации форм.
Инициализация формы
Чтобы добавить форму на страницу мы будем использовать элемент
Демонстрация формы для входа
На практике
С пониманием того как строить формы, давайте создадим страницу регистрации для нашего сайта Styles Conference, чтобы мы могли начать собирать интерес и продавать билеты на мероприятие.
Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента с классом row чуть ниже вступления и вложенный элемент
Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:
Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.
В нашем элементе с классом col-2-3 код должен выглядеть следующим образом:
В данный момент наш маркированный список не содержит маркеры списка. Все стили браузера по умолчанию были выключены сбросом CSS, мы добавили всё обратно в уроке 1. Давайте создадим несколько пользовательских стилей специально для этого списка.
Чтобы сделать это, добавим класс why-attend к маркированному списку.
Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:
Раздел нашей страницы Регистрация завершён, так что теперь пришло время обратиться к регистрационной форме. Начнём с добавления атрибутов action и method к элементу
Далее, внутри элемента
Для поля комментариев используется элемент
В разделе Регистрация нашего файла main.css мы хотим добавить следующие стили:
Вы заметите, что большинство из этих свойств и значений вращаются вокруг блочной модели, которую мы рассмотрели в уроке 4. Мы, прежде всего, настроили размеры разных полей формы, гарантируя, что они располагаются должным образом. Помимо добавления некоторых стилей блочной модели, мы настроили color и font-weight у нескольких элементов.
Теперь наша кнопка для отправки делит некоторые общие стили с кнопкой на главной странице. Мы воспользуемся классом btn-default чтобы применить некоторые новые стили конкретно к нашей кнопке.
Возвращаясь назад к разделу с кнопками в нашем файле main.css, добавим следующее:
Эти новые стили определяют размер и фон нашей кнопки, затем комбинируются с существующими стилями класса btn и создают финальную презентацию нашей кнопки.
Наша страница Регистрация закончена и посетители теперь могут начать бронировать билеты.
Рис. 10.07. Наша страница регистрации с формой
Демонстрация и исходный код
Ниже вы можете скачать исходный код сайта на данный момент.
Резюме
Формы играют большую роль в том, как пользователи взаимодействуют с сайтами, предоставляют им информацию и работают с ними. Мы предприняли все правильные шаги, чтобы не только узнать как создавать формы, но и как их стилизовать.
Напомним быстро, что мы обсудили в этом уроке:
Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.
Современные формы на HTML5 и CSS3
Дата публикации: 2013-02-08
От автора: давайте рассмотрим создание функциональной формы html5, производящей валидацию пользовательских данных на стороне клиента. Сделав это, мы улучшим ее с помощью CSS, в том числе CSS3!
Шаг 1: Формирование представления о функциональности
Сначала нам нужно составить концепцию того, как будет выглядеть наша форма на HTML5, и как она будет функционировать. Для примера давайте создадим простую контактную форму, запрашивающую у пользователя следующую информацию:
Адрес электронной почты
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Нам нужно убедиться, что пользователь вводит информацию правильно. Чтобы этого добиться, применим новые техники валидации на стороне клиента HTML5. А как насчет пользователей, у которых нет возможности использовать формы HTML5? Можно просто применить валидацию со стороны сервера, но наша статья не об этом.
Шаг 2: Разработка формы
Давайте постараемся определить то, как следует выглядеть нашей форме, создав грубую модель.
Видите, нашу форму составляют следующие элементы:
Заголовок
Обозначение обязательных для заполнения полей
Названия полей ввода
Поля ввода данных
Текст-заполнитель
Кнопка «Отправить» (Submit)
Теперь, когда вы определили, какие элементы составляют нашу форму, можно создавать разметку HTML.
Шаг 3: Первичный код HTML
Вплоть до этого момента HTML-файл в браузере пока пуст. Это – просто начальный код для страницы HTML5.
Шаг 4: Форма HTML
Давайте создадим форму HTML (оставим метод action пока пустым, так как проверка данных на стороне сервера в этом учебнике не раскрывается):
Шаг 5: Элементы формы HTML
Для получения организованного и структурированного контента своей формы, обернем ее элементы (label, input и т.д.) в список. Так что начнем мы с создания заголовка формы и первого элемента input:
Подсказки для полей формы
Как видно из макета, мы собираемся сделать форматированные подсказки для полей ввода электронного адреса “email” и вебсайта “website”. Поэтому добавим свои подсказки под поля ввода, где это нужно, и назначим им класс, чтобы можно было позже определить им стили.
Остальные элементы input
Двигаемся дальше и создаем остальные элементы формы, не забывая о том, что нужно обернуть каждый раздел в элемент списка.
Шаг 6: Добавляем атрибут placeholder
Одно из первых усовершенствований, которые предлагает HTML5 для веб-форм (с которым вы, возможно, уже знакомы) – это способность установить текст-подсказку. Он показывается, когда поле ввода либо пустое, либо находится не в фокусе.
Давайте добавим атрибут placeholder для всех текстовых тегов input. Это поможет пользователю понять, что нужно ввести в каждое поле.
Подсказка: Назначьте placeholder’у стили
Вот вам подсказка: если нужно определить стили тексту-подсказке, к вашим услугам имеются префиксы браузеров:
В современных браузерах поддержка атрибута placeholder налажена довольно хорошо (кроме IE9, к сожалению). Если вам реально требуется поддерживать его во всех браузерах, можно посмотреть решение проблемы в javascript.
Шаг 7: Основной CSS
Чтобы создать для формы некую структуру, давайте добавим немного основного CSS. Я прокомментирую вам правила:
Удалите стиль :focus
Webkit автоматически добавляет к input-ам стили, когда те находятся в фокусе. Так как мы будем добавлять собственные стили, то стили по умолчанию нужно отменить:
Типографские стили
Давайте определим элементам своей формы типографские стили:
Стили списка
Давайте назначим стили элементам списка, чтобы придать форме структуру:
Кроме того, добавим тонкую рамку к верхнему и нижнему разделам формы. Выполнить это можно, применив селекторы :first-child и :last-child. Они выбирают, как подразумевается в их названиях, первый и последний элементы списка ul.
Так создается визуальное разделение формы. Помните, что эти селекторы CSS не поддерживаются старыми браузерами. Так как для основной функциональности это не жизненно важно, то в выгодном положении окажутся те, кто пользуется современными браузерами.
Заголовок формы
Назначим стили разделу заголовка своей формы. Он включает тэг заголовка и уведомление, которое информирует пользователей о том, что звездочка (*) обозначает поля, обязательные для заполнения.
Элементы input
Давайте назначим стили основным элементам формы, тем, которые предназначены для сбора пользовательской информации.
Теперь добавим несколько дополнительных визуальных стилей CSS. Некоторые из них видны только пользователям современных браузеров.
Шаг 8: Добавляем интерактивность с помощью CSS3
Давайте добавим немного интерактивности. Мы заставим выбранное в данный момент поле увеличиваться путем добавления отступа.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Теперь с помощью CSS3 для поддерживающих браузеров сделаем увеличение поля гладким переходом.
Шаг 9: Атрибут required в HTML5
Теперь пора заняться долгожданным: инструментами управления формой HTML5.
Добавление атрибута required в любой элемент области ввода текста скажет браузеру, что перед отправкой формы требуется ввести значение. Таким образом, форму нельзя отправить, если нужное поле осталось незаполненным.
Итак, продолжим и добавим атрибут required во все элементы своей формы (потому что нам нужно, чтобы они все были заполнены).
Шаг 10: Стили обязательных для заполнения полей
Вы, возможно, заметите, что в визуальном плане от добавления атрибута required ничего не изменилось. Мы собираемся назначить стили обязательных для заполнения полей с помощью CSS. В этом примере каждое поле в качестве фонового изображения получит красную звездочку. Чтобы это сделать, нам нужно сначала добавить padding справа input-а, где будет находиться фоновое изображение (так будет предотвращено наложение текста, если запись окажется длинной строкой):
Теперь воспользуемся псевдоселектором CSS :required для того, чтобы выбрать все элементы формы с нужным атрибутом. Я сделал в photoshop’е простую иконку с красной звездочкой размером 16×16 px, которая послужит визуальным индикатором поля, обязательного к заполнению.
Что происходит при отправке формы?
Прямо сейчас при отправке формы с использованием элементов HTML5 различные браузеры действуют по-разному. Большая часть браузеров воспрепятствует отправке и покажет пользователю подсказку, отмечающую первое обязательное к заполнению поле, в которое не введено значение. Визуальные стили и поддержка таких полей довольно широки. К счастью, в будущем такое поведение будет стандартизировано.
В quirksmode можно посмотреть поддержку текущим браузером атрибута required.
Подсказка:
На самом деле в webkit назначить стили сообщению в поле-«пузыре» можно с помощью следующего:
Шаг 11: Понимание новых атрибутов type и валидации на стороне клиента в HTML5
Валидация HTML5 работает в соответствии с атрибутом type, установленном в полях формы. Годами HTML поддерживал лишь горстку атрибутов type, таких, как type=»text», но у HTML5 имеется более дюжины новых типов ввода данных, включая электронную почту и url, которые мы и собираемся использовать в своей форме.
Сочетая атрибуты ввода type с новым атрибутом required, теперь браузер способен делать валидацию данных пользователя на клиентской стороне. Если браузер пользователя не поддерживаем новые атрибуты type, такие как type=»email», он просто по умолчанию вернется к type=»text». Действительно, это довольно забавно. По сути, у вас есть обратная совместимость со всеми браузерами в мире, ура!
Так что происходит, если браузер на самом деле поддерживает новые атрибуты type? Для браузеров десктопов визуально нет никакой разницы (кроме определенной пользовательскими правилами CSS). Поле type=»text» выглядит точно так, как поле type=»email». Однако для браузеров мобильных устройств в отношении пользовательского интерфейса разница имеется.
Пример: iPhone
iPhone от Apple’а распознает типы формы и динамично изменяет экранную клавиатуру, предоставляя требуемые по контексту символы. Например, все электронные адреса требуют следующих символов: “@” и “.” И iPhone предоставляет эти символы, когда у input-a задан соответствующий тип.
Шаг 12: Изменение атрибутов type
Поля нашей формы уже установлены по умолчанию на type=»text». Но теперь требуется изменить атрибут типа в полях, предназначенных для электронной почты и вебсайта на соответствующий тип HTML5.