Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak umieścić przyciski w formularzu - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-09-29

W formularzach istnieją trzy rodzaje przycisków. Są to: przycisk służący do wysłania wypełnionego formularza, przycisk resetujący formularz oraz przycisk ogólnego zastosowania.

Po naciśnięciu przycisku submit następuje wysłanie danych, umieszczonych w formularzu, a dokładniej, wykonuje się akcja, przypisana w atrybucie action. Formularz może być wysłany na określony adres e-mail, bądź na inną stronę, gdzie przekazane dane zostaną przetworzone.

Aby dodać przycisk submit, należy wykorzystać znacznik input, a jako typ ustawić submit. Wartość atrybutu value określa etykietę – napis, jaki pojawi się na przycisku.

<input type="submit" value="Dodaj" />

Istnieje możliwość zamiany standardowego przycisku submit na obrazek. Więcej na ten temat można przeczytać w części encyklopedii Jak zamienić input type=submit na obrazek.

Przycisk, resetujący formularz, czyści zawartość wszystkich wypełnionych pól. Aby go umieścić, należy wykorzystać znacznik input, a jako typ ustawić reset. Domyślną etykietą przycisku jest "Reset".

<input type="reset" />

Trzecim typem jest przycisk ogólnego zastosowania – typu button. Aby przypisać mu zdarzenie, które będzie miało miejsce po naciśnięciu przycisku, należy wykorzystać np. kod JavaScript. Zdarzenie umieszcza się za pomocą atrybutu onclick.

<input type="button" onclick="" />

Alternatywnym sposobem dodawania powyższych przycisków jest wykorzystanie znacznika button. Wartość wpisana pomiędzy znacznikami <button> oraz </button> stanowi jego etykietę. W tym przypadku etykieta nie musi być tekstem, ale może być również obrazkiem. Atrybut type znacznika button, określający typ przycisku, przyjmuje wartości: submit, reset i button.

Przykład

Przykład przedstawiający umieszczenie trzech typów przycisków za pomocą użycia znacznika input type (w pierwszym wierszu) oraz znacznika buttontype (w drugim wierszu):

<html>
    <head>
    <title>Pola w formularzu HTML</title>
    </head>
    <body>
        <form action="mailto:adres@email.pl" method="post">
        <input type="submit" value="Dodaj" />
        <input type="reset" />
        <input type="button" value="Przycisk" /><br />
        <button type="submit">Dodaj</button>
        <button type="reset">Reset</button>
        <button type="button">Przycisk</button>
</form>
</body>
</html>

Efekt działania przykładowego kodu przedstawiony został na Rys. 1.

Rys. 1. Przyciski dodane dwoma sposobami.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać formularze w samouczku: