Podstawowe pola: <input>, <textarea>, <button>

Podstawowe pola: <input>, <textarea>, <button>

Formularze HTML pozwalają użytkownikowi wprowadzać dane, które następnie można przesłać na serwer lub wykorzystać w aplikacji internetowej.
Najprostszym formularzem jest zbiór pól, w których użytkownik wpisuje tekst lub wybiera opcje, a następnie zatwierdza dane przyciskiem.

1. Podstawowa struktura formularza

Każdy formularz zaczyna się od znacznika <form>, wewnątrz którego umieszczamy różne elementy, takie jak pola tekstowe czy przyciski.

<form>
  
</form>

2. Pole tekstowe – <input type=”text”>

To najprostszy typ pola w formularzu. Umożliwia wprowadzenie pojedynczej linii tekstu (np. imienia, nazwiska, e-maila).

Podstawowa składnia:

<input type="text" name="imie" placeholder="Wpisz swoje imię">

Opis atrybutów:

• type="text" – określa typ pola (tekstowe).
• name="imie" – nazwa pola, potrzebna np. przy przesyłaniu danych na serwer.
• placeholder – podpowiedź widoczna w polu przed wpisaniem tekstu.

Efekt działania:

3. Pole wielowierszowe – <textarea>

<textarea> to pole, w którym użytkownik może wprowadzać tekst na wielu liniach – świetne np. do wiadomości w formularzu kontaktowym.

Podstawowa składnia:

<textarea name="wiadomosc" rows="4" cols="50">Wpisz swoją wiadomość...</textarea>

Opis atrybutów:

• name – nazwa pola.
• rows – liczba widocznych wierszy.
• cols – liczba widocznych znaków w jednym wierszu (szerokość).

Efekt działania:

4. Przyciski – <button> i <input type=”submit”>

Do wysyłania formularza (lub wykonywania innych akcji) używa się przycisków.
Możesz użyć zarówno znacznika <button>, jak i <input type="submit">.

1. Przyciski typu input:

<input type="submit" value="Wyślij">
<input type="reset" value="Wyczyść formularz">

Efekt działania:

2. Znacznik <button>:

<button type="submit">Wyślij</button>
<button type="reset">Wyczyść</button>

Efekt działania:

Opis atrybutów:

• type="submit" – wysyła formularz.
• type="reset" – resetuje (czyści) pola formularza.

5. Kompletny przykład formularza z podstawowymi polami

<form>
  <label for="imie">Imię:</label><br>
  <input type="text" id="imie" name="imie" placeholder="Wpisz imię"><br><br>
  
  <label for="wiadomosc">Wiadomość:</label><br>
  <textarea id="wiadomosc" name="wiadomosc" rows="4" cols="50"></textarea><br><br>
  
  <button type="submit">Wyślij</button>
</form>

Efekt działania:

✅ Podsumowanie

• <input> – najczęściej używany do pól tekstowych i przycisków.
• <textarea> – służy do wpisywania dłuższych wiadomości.
• <button> – uniwersalny przycisk, który może wysyłać formularz lub wykonywać inną akcję.

🎯 Ćwiczenie w JSFiddle

Przetestuj swój formularz w JSFiddle.

Wklej poniższy kod w sekcji HTML i kliknij Run:

<form>
  <label for="email">E-mail:</label><br>
  <input type="email" id="email" name="email" placeholder="Wpisz swój e-mail"><br><br>

  <label for="wiadomosc">Wiadomość:</label><br>
  <textarea id="wiadomosc" name="wiadomosc" rows="5"></textarea><br><br>

  <button type="submit">Wyślij wiadomość</button>
</form>