Формы и цитаты - Основы веб-разработки - ADivC

Зачем нужны формы

Посмотрите на дизайн сайта ADC. Видите внизу страницы форму обратной связи? Три поля для ввода: Имя, Фамилия, Номер телефона. Под ними чёрная кнопка «Отправить». Формы это основной способ общения между пользователем и сайтом. Через них регистрируются, оставляют контакты, отправляют сообщения, оформляют заказы.

Создание формы

Давайте добавим форму к нам в код. Форма в HTML создаётся через тег <form>:

HTML

<h2>Записаться на мероприятие</h2>

<form>
  <input type="text" placeholder="Имя">
  <input type="text" placeholder="Фамилия">
  <input type="tel" placeholder="Номер телефона">
  <button type="submit">Отправить</button>
</form>

Тег <form> — это контейнер для всех полей. Внутри живут элементы ввода. Тег <input> — это поле для ввода текста. Атрибут type определяет тип данных: text для текста, tel для телефона, email для почты. Атрибут placeholder показывает подсказку внутри поля, пока оно пустое.

Тег <button> с атрибутом type="submit" — это кнопка отправки. Когда пользователь нажимает её, форма отправляется. Пока никуда не отправляется, потому что не указали адрес обработчика, но структура готова.

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

Обязательные поля

Атрибут required делает поле обязательным. Добавьте его к каждому полю:

HTML

<form>
  <input type="text" placeholder="Имя" required>
  <input type="text" placeholder="Фамилия" required>
  <input type="tel" placeholder="Номер телефона" required>
  <button type="submit">Отправить</button>
</form>

Теперь если пользователь не заполнит поле, браузер не даст отправить форму и покажет подсказку.

Цитаты

Если вы выполняли все домашние задания, то у вас должна была быть почти готова страница статьи. Но на ней не хватает одного важного элемента — цитаты. Давайте её добавим. В HTML используем тег <blockquote> для цитаты и <cite> для подписи:

HTML

<blockquote>
  <p>
    «Проектный подход для нас — это не просто методология, а философия
    образования»
  </p>
  <cite>Арсений Мещеряков</cite>
</blockquote>

<p>
  Первым крупным публичным событием ADC стала конференция «ADC Community Meetup:
  человекоцентричный дизайн в цифровой среде» 18 июля. Мероприятие прошло
  в пространстве Creative Hub на Пантелеевской, 53, и было организовано командой
  мультидисциплинарных дизайнеров, разработчиков, маркетологов и менеджеров ADC.
  На встрече выступили ведущие эксперты индустрии, включая специалистов
  из SberDevices, основателей дизайн-лабораторий и экспертов в области
  сервис-дизайна.
</p>

Тег <blockquote> говорит браузеру: «Это цитата, блочная, отдельная от основного текста». Тег <cite> указывает автора или источник. Браузер по умолчанию добавит отступы слева к <blockquote>, но внешний вид настроите позже через CSS.

Горизонтальные линии

Осталось добавить к нашему сайту одну изюминку, подчёркивания. Видите, например, на главной странице под большой фотографией? Такие линии делают через тег <hr> или через CSS с помощью свойства border-bottom.

HTML

<img src="main.png" alt="Митап в Школе дизайна" />

<hr />

<p>
  Добро пожаловать в ADC — уникальное пространство Школы дизайна НИУ ВШЭ,
  расположенное в историческом здании на Пантелеевской, 53. Это место,
  где встречаются разработчики с бизнесом, авторы со зрителями, профессионалы
  креативной экономики с широкой аудиторией.
</p>

Тег <hr> создаёт горизонтальную линию. Браузер по умолчанию нарисует её серой, во всю ширину. Позже через CSS мы изменим цвет, толщину, ширину.

Также добавим такие линии и в блок «Что изучают студенты ADC»:

HTML

<h2>Что изучают студенты ADC</h2>

<h3>Веб-вёрстка и веб-программирование</h3>
<p>HTML, CSS, JavaScript, создание многостраничных сайтов</p>
<hr />

<h3>UX/UI дизайн и прототипирование</h3>
<p>Figma, FigJam, интерактивные прототипы</p>
<hr />

<h3>Креативное программирование, генеративная графика</h3>
<p>Статичные и динамические веб-плакаты</p>
<hr />

<h3>Системный дизайн и дизайн-системы</h3>
<p>Системный подход, методологии, паттерны дизайн-проектирования</p>
<hr />