Kurs HTML

Interakcja z formularzem: Przyciski

Przyciski są kluczowymi elementami interaktywnymi formularzy, pozwalającymi użytkownikom na wykonywanie akcji, takich jak wysłanie danych, zresetowanie formularza czy uruchomienie niestandardowej funkcji JavaScript.

W HTML przyciski można tworzyć głównie za pomocą znacznika <button> lub znacznika <input> z odpowiednim atrybutem type.

Znacznik <button>

Jest to bardziej nowoczesny i elastyczny sposób tworzenia przycisków. Pozwala na umieszczenie wewnątrz przycisku nie tylko tekstu, ale również innych elementów HTML, takich jak obrazy (<img>) czy znaczniki formatujące (<strong>, <em>).

Kluczowym atrybutem znacznika <button> jest type, który określa jego zachowanie:

• type="submit" (domyślny): Przycisk wysyła dane formularza na serwer (na adres podany w action formularza).
• type="reset": Przycisk resetuje wszystkie elementy formularza do ich wartości początkowych (zdefiniowanych w HTML lub domyślnych przeglądarki).
• type="button": Przycisk nie ma domyślnego zachowania. Jest często używany w połączeniu z JavaScriptem do wywoływania niestandardowych akcji po kliknięciu.

Inne atrybuty <button>:

• name i value: Jeśli przycisk type="submit" ma te atrybuty, jego para name=value zostanie wysłana razem z danymi formularza tylko wtedy, gdy to właśnie ten przycisk został użyty do wysłania formularza. Jest to przydatne, gdy mamy kilka przycisków wysyłających w jednym formularzu i chcemy wiedzieć, który został kliknięty.
• disabled: Wyłącza przycisk, czyniąc go nieklikalnym.

Przykłady użycia <button>:

<form action="/submit" method="post">
  <!-- Pole formularza -->
  <label for="btn-text">Tekst:</label>
  <input type="text" id="btn-text" name="tekst">
  
  <!-- Przycisk wysyłający (domyślny typ to submit) -->
  <button>Wyślij (Submit)</button> 
  
  <!-- Jawnie zdefiniowany przycisk wysyłający -->
  <button type="submit" name="akcja" value="zapisz">Zapisz dane</button>
  
  <!-- Przycisk resetujący -->
  <button type="reset">Wyczyść formularz</button>
  
  <!-- Przycisk ogólnego przeznaczenia (dla JavaScript) -->
  <button type="button" onclick="alert(\'Kliknięto przycisk!\');">Kliknij mnie</button>
  
  <!-- Przycisk z ikoną (przykład z użyciem tekstu, można wstawić <img>) -->
  <button type="submit"> <strong>Zapisz</strong> 💾 <!-- Ikona dyskietki --> </button>
</form>

Znacznik <input> jako przycisk

Tradycyjnie przyciski tworzono również za pomocą znacznika <input> z odpowiednim typem. Jest to mniej elastyczne niż <button>, ponieważ tekst na przycisku definiuje się za pomocą atrybutu value i nie można w nim umieszczać innych elementów HTML.

• <input type="submit" value="Wyślij">: Tworzy przycisk wysyłający formularz. Tekst na przycisku pochodzi z atrybutu value.
• <input type="reset" value="Resetuj">: Tworzy przycisk resetujący formularz. Tekst na przycisku pochodzi z atrybutu value.
• <input type="button" value="Kliknij">: Tworzy przycisk ogólnego przeznaczenia, bez domyślnej akcji, do użytku z JavaScriptem. Tekst na przycisku pochodzi z atrybutu value.
• <input type="image" src="obrazek.png" alt="Wyślij">: Specjalny typ przycisku wysyłającego, który wyświetla obrazek zamiast standardowego przycisku. Po kliknięciu, oprócz danych formularza, wysyła również współrzędne (x, y) kliknięcia na obrazku.

Przykłady użycia <input> jako przycisków:

<form action="/submit" method="post">
  <input type="submit" value="Wyślij formularz">
  <input type="reset" value="Wyczyść">
  <input type="button" value="Akcja JS" onclick="alert(\'Akcja!\');">
  <input type="image" src="https://via.placeholder.com/80x30.png?text=Wyślij" alt="Wyślij formularz obrazkiem">
</form>

<button> vs <input> - Co wybrać?

W nowoczesnym tworzeniu stron preferowane jest używanie znacznika <button> ze względu na jego większą elastyczność:

• Możliwość umieszczania złożonej zawartości HTML wewnątrz przycisku (tekst, ikony, formatowanie).
• Lepsze możliwości stylizacji za pomocą CSS.
• Bardziej spójne zachowanie w różnych przeglądarkach (choć różnice dla <input> są obecnie minimalne).

Znacznik <input type="..."> jest nadal w pełni poprawny i funkcjonalny, ale <button> oferuje więcej możliwości.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: W formularzu kontaktowym, który tworzyliśmy, zastąp istniejący przycisk <button type="submit"> dwoma przyciskami:

1. Przycisk <button type="submit"> z tekstem "Wyślij wiadomość".
2. Przycisk <button type="reset"> z tekstem "Wyczyść formularz".

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formularz Kontaktowy - Przyciski</title>
    <style>
        /* Style z poprzednich lekcji */
        label { display: block; margin-top: 10px; }
        input[type="text"], input[type="password"], textarea, select { width: 90%; max-width: 300px; padding: 8px; margin-top: 5px; border: 1px solid #ccc; }
        button, input[type="submit"], input[type="reset"], input[type="button"] { margin-top: 15px; padding: 10px 15px; margin-right: 10px; cursor: pointer; }
        fieldset { border: 1px dashed #aaa; padding: 15px; margin-bottom: 20px; }
        legend { font-weight: bold; color: navy; padding: 0 5px; }
        fieldset div { margin-bottom: 8px; }
        input[type="radio"], input[type="checkbox"] { margin-right: 5px; }
        fieldset > div > label { display: block; margin-top: 10px; } 
        fieldset > div > input + label { display: inline-block; margin-top: 0; } 
    </style>
</head>
<body>
    <h1>Kontakt</h1>
    
    <form action="/wyslij-wiadomosc" method="POST">
        <fieldset>
            <legend>Dane wiadomości</legend>
            <div>
                <label for="contact-imie">Imię:</label>
                <input type="text" id="contact-imie" name="imie_uzytkownika" required>
            </div>
            <div>
                <label for="contact-dzial">Dział:</label>
                <select id="contact-dzial" name="dzial" required>
                    <option value="">-- Wybierz dział --</option>
                    <option value="sprzedaz">Sprzedaż</option>
                    <option value="pomoc">Pomoc techniczna</option>
                    <option value="reklamacje">Reklamacje</option>
                    <option value="inne">Inne</option>
                </select>
            </div>
            <div>
                <label for="contact-wiadomosc">Wiadomość:</label>
                <textarea id="contact-wiadomosc" name="tresc_wiadomosci" rows="4" required></textarea>
            </div>
        </fieldset>

        <!-- Dodane/zmienione przyciski -->
        <button type="submit">Wyślij wiadomość</button>
        <button type="reset">Wyczyść formularz</button>
        
    </form>

</body>
</html>