Rozdział 2 · Zadanie 10

Formularze

input, textarea, button — trzy elementy, z których składa się każdy formularz.

Zadanie

Dodaj do style.css:

style.css

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

A w styles-demo.html

Dodaj:

styles-demo.html

<h2>Napisz do mnie</h2>
<input type="text" class="field" placeholder="Twoje imię">
<textarea class="field" placeholder="Twoja wiadomość" rows="4"></textarea>
<button class="btn">Wyślij</button>

Jak to czytać

<input type="text"> — pole na jednowierszowy tekst. type można zmieniać: email, password (ukrywa znaki).

placeholder="..." — szary podpowiadający tekst, znika przy pisaniu.

<textarea rows="4"> — pole wielowierszowe, rows — ile wierszy widać naraz.

display: block; w .field — każde pole zaczyna się od nowej linii.

Warto wiedzieć

Ten przycisk na razie nigdzie nic nie wysyła — żeby formularz naprawdę działał, potrzebny jest serwer, który to obsłuży. To już osobny temat na przyszłość.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska