W czwartej lekcji poświęconej formularzom, zagłębimy się w proces tworzenia różnych pól wejściowych, które pozwalają użytkownikom interagować i przesyłać dane na stronę internetową. Będziemy korzystać z znacznika <input> w połączeniu z różnymi typami atrybutów, takimi jak „text”, „checkbox”, „radio” i „submit”, aby tworzyć pola tekstowe, pola wyboru oraz przyciski. Zobaczmy więc, jakie to obszary obejmuje:

Tworzenie pól tekstowych

Pola tekstowe stanowią fundamentalny element formularzy, umożliwiający użytkownikom wprowadzanie tekstu i danych. Wprowadźmy się w ich tworzenie:

Znaczenie pól tekstowych w formularzach

Pola tekstowe są kluczowe dla zbierania informacji od użytkowników, takich jak imię, nazwisko, adres e-mail czy wiadomość.

Wykorzystanie znacznika <input> z atrybutem type=”text”

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

W powyższym przykładzie używamy znacznika <input> z atrybutem „type” ustawionym na „text”, co tworzy pole tekstowe. Atrybut „name” identyfikuje to pole w formularzu, a „placeholder” wyświetla tekst wewnątrz pola jako wskazówkę dla użytkownika.

Do tworzenia pól tekstowych w formularzach HTML możesz użyć następujących znaczników i atrybutów:

1. Znacznik <input>:
   • Atrybut type="text": Ten atrybut definiuje pole tekstowe.
   • Atrybut name: Określa nazwę pola, która będzie używana jako identyfikator podczas przesyłania danych na serwer.
   • Atrybut id: Umożliwia powiązanie etykiety z polem tekstowym.
   • Atrybut value: Określa wartość początkową pola tekstowego.
   • Atrybut placeholder: Wyświetla krótką wskazówkę lub tekst zastępczy wewnątrz pola, pomagając użytkownikom zrozumieć, jakie dane należy wprowadzić.

Przykład użycia:

<input type="text" name="imie" id="imie" placeholder="Wprowadź imię">

2. Etykieta <label>: Etykieta powinna być powiązana z polem tekstowym za pomocą atrybutów for i id, aby poprawić dostępność i interakcję użytkownika.

Przykład:

<label for="imie">Imię:</label>
<input type="text" name="imie" id="imie" placeholder="Wprowadź imię">

3. Atrybuty dodatkowe: Możesz również używać innych atrybutów, takich jak maxlength (określa maksymalną długość tekstu), size (określa szerokość pola w ilości znaków) i wiele innych, aby dostosować wygląd i zachowanie pola tekstowego.

Przykład z atrybutem maxlength:

<label for="komentarz">Komentarz:</label>
<input type="text" name="komentarz" id="komentarz" maxlength="200">

2. Tworzenie pól wyboru

Pola wyboru umożliwiają użytkownikom dokonywanie wyborów z określonej listy opcji. Zapoznajmy się z nimi bliżej:

Wprowadzenie do pól wyboru

Pola wyboru są przydatne, gdy użytkownicy muszą wybrać jedną lub więcej opcji spośród dostępnych.

Wykorzystanie znacznika <input> z atrybutem type=”checkbox”

<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subskrybuj newsletter</label>

Przykład ten prezentuje pole wyboru typu „checkbox”. Używamy znacznika <input> z „type” ustawionym na „checkbox”, a etykietę tworzymy za pomocą znacznika <label>, który jest związany z polem za pomocą atrybutu „for” o tej samej wartości co „id” pola.

Wykorzystanie znacznika <input> z atrybutem type=”radio”

<input type="radio" name="opcje" id="opcja1" value="opcja1">
<label for="opcja1">Opcja 1</label>
<input type="radio" name="opcje" id="opcja2" value="opcja2">
<label for="opcja2">Opcja 2</label>

Powyższy kod tworzy pola wyboru typu „radio”. Grupa pól o tym samym atrybucie „name” umożliwia użytkownikowi wybór tylko jednej opcji. Etykiety związane z polami za pomocą atrybutu „for” ułatwiają interakcję.

Do tworzenia pól wyboru (checkbox i radio) w formularzach HTML można użyć następujących znaczników i atrybutów:

1. Znacznik <input>:
   • Atrybut type="checkbox": Ten atrybut definiuje pole wyboru typu checkbox.
   • Atrybut type="radio": Ten atrybut definiuje pole wyboru typu radio.
   • Atrybut name: Określa nazwę pola, która jest wspólna dla wszystkich opcji wyboru tego samego typu (checkbox lub radio).
   • Atrybut value: Określa wartość, która zostanie przesłana na serwer w przypadku zaznaczenia pola.
   • Atrybut checked: Określa, czy pole ma być początkowo zaznaczone.

Przykład użycia pól wyboru typu checkbox:

<input type="checkbox" name="hobby" value="sport"> Sport
<input type="checkbox" name="hobby" value="muzyka"> Muzyka
<input type="checkbox" name="hobby" value="film"> Film

Przykład użycia pól wyboru typu radio:

<input type="radio" name="płeć" value="mężczyzna"> Mężczyzna
<input type="radio" name="płeć" value="kobieta"> Kobieta

2. Etykieta <label>: Wskazane jest powiązanie etykiet z polami wyboru za pomocą atrybutów for i id, aby ułatwić użytkownikom interakcję i poprawić dostępność.

Przykład z polami wyboru typu radio:

<label for="mężczyzna">Mężczyzna</label>
<input type="radio" name="płeć" id="mężczyzna" value="mężczyzna">
<label for="kobieta">Kobieta</label>
<input type="radio" name="płeć" id="kobieta" value="kobieta">

3. Atrybuty dodatkowe: Możesz również używać innych atrybutów, takich jak disabled (wyłącza pole wyboru), aby dostosować zachowanie pól wyboru.

Przykład z wyłączonym polem wyboru:

<input type="checkbox" name="newsletter" value="tak" disabled> Subskrybuj newsletter

Pamiętaj, że używając pól wyboru, wartości opcji są przesyłane na serwer tylko wtedy, gdy pole jest zaznaczone.

Tworzenie przycisków

Przyciski są istotne w formularzach, pozwalając na wykonanie akcji, takiej jak wysłanie danych. Obejrzyjmy, jak je tworzyć:

Rola przycisków w formularzach

Przyciski pełnią funkcję akcji, takiej jak potwierdzenie formularza lub jego wysłanie.

Wykorzystanie znacznika <input> z atrybutem type=”submit”

<input type="submit" value="Wyślij">

W tym przypadku używamy znacznika <input> z „type” ustawionym na „submit”. Atrybut „value” definiuje tekst wyświetlany na przycisku.

Do tworzenia przycisków w formularzach HTML można użyć następujących znaczników i atrybutów:

1. Znacznik <input>:
   • Atrybut type="submit": Ten atrybut definiuje przycisk do wysyłania formularza.
   • Atrybut value: Określa tekst wyświetlany na przycisku.

Przykład użycia przycisku do wysyłania formularza:

<input type="submit" value="Wyślij">

2. Znacznik <button>:
   • Atrybut type="submit": Podobnie jak w przypadku znacznika <input>, definiuje przycisk do wysyłania formularza.
   • Atrybut type="button": Definiuje przycisk zwykły (bez działania domyślnego formularza).

Przykład użycia przycisku typu submit w znaczniku <button>:

<button type="submit">Wyślij</button>

Przykład użycia przycisku typu zwykłego w znaczniku <button>:

<button type="button">Anuluj</button>

3. Etykieta <label>: Możesz użyć etykiety, aby opisać przycisk i powiązać ją z przyciskiem za pomocą atrybutu for.

Przykład z etykietą dla przycisku:

<label for="submit-button">Kliknij mnie:</label>
<input type="submit" id="submit-button" value="Wyślij">

Pamiętaj, że przyciski mogą także zawierać dodatkowe atrybuty i stylowanie CSS, aby dostosować ich wygląd i zachowanie.

Czy mogę dodać tekst, który wyświetli się po użyciu przycisku formularza?

Tak, możesz dodać tekst lub komunikat, który wyświetli się po użyciu przycisku formularza. Możesz to zrobić za pomocą kilku różnych metod. Oto kilka przykładów:

1. Przekierowanie na inną stronę: Po wysłaniu formularza możesz przekierować użytkownika na inną stronę, na której wyświetli się odpowiedni komunikat.

<form action="dziekujemy.html" method="post">
  <!-- pola formularza -->
  <input type="submit" value="Wyślij">
</form>

W pliku „dziekujemy.html” możesz umieścić komunikat podziękowania.

2. Ukryty element HTML: Możesz również umieścić ukryty element HTML na stronie i pokazać go po wysłaniu formularza za pomocą np. JavaScript.

<div id="komunikat" style="display:none;">Dziękujemy za wysłanie formularza!</div>

<form onsubmit="pokazKomunikat(); return false;">
  <!-- pola formularza -->
  <input type="submit" value="Wyślij">
</form>

<script>
function pokazKomunikat() {
  document.getElementById("komunikat").style.display = "block";
}
</script>

3. Używanie CSS: Możesz wykorzystać CSS do ukrywania i pokazywania elementów w zależności od stanu formularza.

<style>
#komunikat {
  display: none;
}
.formularz-wyslany #komunikat {
  display: block;
}
</style>

<form class="formularz" onsubmit="this.classList.add('formularz-wyslany'); return false;">
  <!-- pola formularza -->
  <input type="submit" value="Wyślij">
</form>

<div id="komunikat">Dziękujemy za wysłanie formularza!</div>

W powyższych przykładach, po użyciu przycisku formularza, użytkownik zobaczy odpowiedni komunikat na stronie. Wybierz metodę, która najlepiej odpowiada Twoim potrzebom i umiejętnościom programistycznym.