Розділ 2 · Завдання 10

Форми

input, textarea, button — три елементи, з яких складається будь-яка форма.

Завдання

Додайте в style.css:

style.css

.field {
  display: block;
  width: 280px;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

І в styles-demo.html

Додайте:

styles-demo.html

<h2>Зв'яжись зі мною</h2>
<input type="text" class="field" placeholder="Твоє ім'я">
<textarea class="field" placeholder="Твоє повідомлення" rows="4"></textarea>
<button class="btn">Надіслати</button>

Як це читати

<input type="text"> — поле для однорядкового тексту. type можна міняти: email, password (ховає символи).

placeholder="..." — сірий підказковий текст, зникає при друкуванні.

<textarea rows="4"> — багаторядкове поле, rows — скільки рядків видно одразу.

display: block; у .field — кожне поле починається з нового рядка.

Важливо знати

Ця кнопка поки нічого нікуди не надсилає — щоб форма реально працювала, потрібен сервер, який це обробляє. Це вже окрема тема на майбутнє.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща