EasyCode365EasyCode365

Стилізація форм і кнопок

Форми дозволяють людям взаємодіяти із сайтом.

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

CSS допомагає зробити форми зрозумілішими, зручнішими для перегляду та комфортнішими у використанні.

Коротке нагадування: елементи форми

Перед стилізацією форм згадай поширені HTML-теги:

  • <form> обгортає всю форму.
  • <label> пояснює, для чого потрібне поле.
  • <input> створює поле для введення, вибору або позначення чогось.
  • <textarea> створює більше, багаторядкове текстове поле.
  • <button> створює клікабельну дію.

Labels особливо важливі. Атрибут for у <label> має збігатися з id input.

Лише читання
<label for="email">Електронна пошта</label> <input id="email" type="email" />

Цей зв'язок допомагає скринрідерам і дозволяє користувачу натиснути на label, щоб сфокусувати input.

Також можна зв'язати label, обгорнувши input всередині label. Далі ти побачиш цей підхід на прикладі checkbox.

Стилізація labels

Labels мають бути легкими для читання і розташовуватися поруч із полем, яке вони описують.

За замовчуванням labels є inline-елементами. Для простих форм часто чистіше розміщувати кожен label над його полем за допомогою display: block.

Можна редагувати
<label for="name">Ім'я</label>
<input id="name" type="text" placeholder="Введи своє ім'я" />

<style>
  label {
    display: block;
    margin-bottom: 6px;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }

  input {
    padding: 10px;
  }
</style>

Використовуй margin на label або input, щоб створити простір між рядками форми.

Стилізація текстових inputs

Текстовим inputs зазвичай потрібні стилі ширини, padding, border і шрифту.

Padding робить введений текст менш стиснутим. Borders показують форму поля. box-sizing: border-box залишає padding всередині ширини, яку ти задаєш.

Можна редагувати
<input class="text-field" type="text" placeholder="Назва курсу" />

<style>
  .text-field {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    padding: 10px 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
  }
</style>

За можливості використовуй rem для розміру тексту, щоб поле могло враховувати налаштування розміру шрифту в браузері відвідувача.

Стилізація placeholder text

Placeholder — це текст-підказка всередині порожнього поля.

Його можна стилізувати за допомогою псевдоелемента ::placeholder.

Лише читання

Не використовуй placeholders як єдиний label. Коли користувач починає вводити текст, placeholder зникає.

Стилізація станів фокусу

Поле має фокус, коли користувач натискає на нього або переходить до нього клавішею Tab.

Браузери показують стандартний контур фокусу, щоб користувач розумів, де він зараз. Його можна залишити або замінити власним зрозумілим стилем фокусу.

Псевдоклас :focus-visible часто корисний для кнопок, бо зазвичай з'являється під час фокусу з клавіатури, а не після кожного кліку мишею.

Можна редагувати
<input class="focus-field" type="email" placeholder="you@example.com" />

<style>
  .focus-field {
    padding: 10px 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
  }

  .focus-field:focus {
    border-color: #2563eb;
    outline: 3px solid #bfdbfe;
  }
</style>

Це правило змінює border і залишає видимий outline, коли поле активне.

Стилізація checkboxes

Checkboxes відрізняються від текстових inputs.

Браузери й операційні системи малюють їх по-своєму, тому повністю кастомні checkboxes — це вже складніша тема. Для початківців краще залишити нативний checkbox і покращити відступи.

Також можна використовувати accent-color, щоб задати колір позначеного стану в сучасних браузерах.

Можна редагувати
<label class="checkbox-row">
  <input type="checkbox" />
  Надсилати мені оновлення уроків
</label>

<style>
  .checkbox-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: Arial, sans-serif;
  }

  .checkbox-row input {
    accent-color: #2563eb;
  }
</style>

Так checkbox залишається знайомим і водночас краще пасує до твого дизайну.

Стилізація кнопок

Кнопки мають виглядати клікабельними.

Поширені стилі кнопок включають padding, background color, text color, border, border radius і cursor.

Можна редагувати
<button class="primary-button" type="button">Надіслати повідомлення</button>

<style>
  .primary-button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #2563eb;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    cursor: pointer;
  }

  .primary-button:hover {
    background-color: #1d4ed8;
  }
</style>

Використовуй :hover для взаємодії з мишею. У повних формах також додавай видимий стиль фокусу, щоб користувачі клавіатури бачили, яка кнопка активна.

Вимкнені кнопки

Вимкнену кнопку не можна натиснути.

В HTML додай атрибут disabled. У CSS стилізуй :disabled, щоб кнопка явно виглядала недоступною.

Можна редагувати
<button class="save-button" type="button">Зберегти</button>
<button class="save-button" type="button" disabled>Зберегти</button>

<style>
  .save-button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #16a34a;
    color: white;
    font-family: Arial, sans-serif;
    cursor: pointer;
  }

  .save-button:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
  }

  .save-button:focus-visible {
    outline: 3px solid #bbf7d0;
    outline-offset: 2px;
  }
</style>

Не покладайся лише на колір. Курсор not-allowed і приглушений текст також допомагають показати вимкнений стан.

Стандартні стилі форм у браузері

Браузери додають стандартні стилі до форм, щоб вони працювали навіть без CSS.

Ці стилі корисні, але можуть виглядати по-різному в Chrome, Safari, Firefox, macOS, Windows, Android та iOS. Власні відступи, borders, colors і fonts роблять форму більш послідовною.

Не видаляй усі стандартні стилі одразу. Починай із невеликих і зрозумілих змін.

Приклад для запуску: стилізована контактна форма

Цей приклад поєднує labels, текстові inputs, checkbox, стани фокусу та кнопки.

Спробуй натискати на поля або переходити між ними клавішею Tab, щоб побачити стиль фокусу.

Можна редагувати
<form class="contact-form">
  <label for="contact-name">Ім'я</label>
  <input id="contact-name" type="text" placeholder="Введи своє ім'я" />

  <label for="contact-email">Електронна пошта</label>
  <input id="contact-email" type="email" placeholder="you@example.com" />

  <label for="contact-message">Повідомлення</label>
  <textarea id="contact-message" rows="4" placeholder="Напиши своє повідомлення"></textarea>

  <label class="checkbox-row">
    <input type="checkbox" />
    Надіслати мені копію
  </label>

  <div class="button-row">
    <button type="button">Надіслати</button>
    <button type="button" disabled>Вимкнено</button>
  </div>
</form>

<style>
  .contact-form {
    max-width: 360px;
    padding: 20px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #f9fafb;
    font-family: Arial, sans-serif;
  }

  .contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: #111827;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font: inherit;
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: #2563eb;
    outline: 3px solid #bfdbfe;
  }

  .contact-form textarea {
    resize: vertical;
  }

  .contact-form .checkbox-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    font-weight: normal;
  }

  .contact-form .checkbox-row input {
    accent-color: #2563eb;
  }

  .button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .button-row button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #2563eb;
    color: white;
    font: inherit;
    cursor: pointer;
  }

  .button-row button:hover:not(:disabled) {
    background-color: #1d4ed8;
  }

  .button-row button:focus-visible {
    outline: 3px solid #bfdbfe;
    outline-offset: 2px;
  }

  .button-row button:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
  }
</style>

Форма використовує послідовні відступи, видимі стани фокусу та зрозумілі стани кнопок.

Поширені помилки початківців

  • Прибирати контури фокусу без заміни: користувачі клавіатури мають бачити, яке поле активне.
  • Забувати зв'язувати labels: використовуй відповідні значення for і id, або обгорни input всередині label.
  • Використовувати placeholders замість labels: placeholders зникають, коли користувач вводить текст.
  • Забувати box-sizing: border-box: inputs з width: 100% і padding можуть виходити за межі контейнера.
  • Занадто рано надмірно стилізувати checkboxes: почни з відступів і accent-color, перш ніж створювати кастомні controls.

Мініпрактика

Подивись на це CSS-правило:

Лише читання

Що box-sizing: border-box; допомагає запобігти в цьому input?

Перевір відповіді у quiz, коли будеш готовий.

Короткий quiz з відповідями

  1. Який атрибут label зв'язує label з відповідним input?
  2. Який псевдоклас стилізує поле, коли користувач натискає на нього або переходить до нього клавішею Tab?
  3. Чому не варто використовувати placeholder text як єдиний label?

Відповіді:

  1. Атрибут for.
  2. :focus.
  3. Тому що placeholder зникає, коли користувач починає вводити текст, і він не є хорошою заміною справжнього label.

Відповідь на мініпрактику: він залишає padding всередині ширини 100%, тому input з меншою ймовірністю вийде за межі контейнера.

Невеликий виклик

Стилізуй форму коментаря нижче.

Твої цілі:

  • Зроби <textarea> на всю ширину з padding 10px.
  • Додай видимий стан :focus, який змінює колір border у textarea.
  • Зроби кнопку блоком на всю ширину з чорним фоном і білим текстом.
  • Додай стан :hover, який змінює фон кнопки на темно-сірий.
  • Додай зрозумілий стиль :focus-visible для кнопки.
Можна редагувати
<form class="challenge-form">
  <label for="message">Твоє повідомлення</label>
  <textarea id="message" rows="4" placeholder="Напиши своє повідомлення"></textarea>

  <button class="action-button" type="button">Надіслати повідомлення</button>
</form>

<style>
  .challenge-form {
    max-width: 320px;
    font-family: Arial, sans-serif;
  }

  .challenge-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }

  #message {
    box-sizing: border-box;
    margin-bottom: 12px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    font: inherit;
    resize: vertical;
    /* Додай width і padding */
  }

  #message:focus {
    /* Додай колір border і outline */
  }

  .action-button {
    /* Додай layout і кольори кнопки */
  }

  .action-button:hover {
    /* Додай background color під час hover */
  }

  .action-button:focus-visible {
    /* Додай видимий outline для фокусу з клавіатури */
  }
</style>

Підсумок

  • Форми збирають введення користувача.
  • Labels пояснюють поля й мають бути зв'язані через for та id.
  • Текстовим inputs часто потрібні width, padding, border, border radius і стилі шрифту.
  • Placeholder — це підказка, а не заміна label.
  • Стани фокусу показують, яке поле активне.
  • Для початківців краще залишати нативні checkboxes простими.
  • Кнопки мають мати зрозумілі стани: normal, hover, focus і disabled.
  • Стандартні стилі браузера корисні, але власний CSS робить форми більш послідовними.