Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak zamienić pole input type submit na obrazek - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-24

Często spotykanym problemem przy opracowywaniu wyglądu formularza jest nieatrakcyjność wizualna przycisków. Istnieje możliwość zmiany standardowego wyglądu pola input type=submit – przycisku wysyłającego formularz. Za pomocą stylów CSS, zamiast zwykłego przycisku, można umieścić własny obrazek, który przejmie jego rolę.

W tym celu należy nadać polu input type=submit identyfikator, a następnie w deklaracji stylów ustawić dla tego identyfikatora background-image (obrazek jako tło) na url(adres_obrazka.jpg). Aby wielkość przycisku odpowiadała wielkości obrazka, należy zdefiniować wysokość (height) oraz szerokość (width) na dokładnie takie wymiary, jakie ma obrazek. Dodatkowo, aby zlikwidować obramowanie, należy ustawić parametr border na 0. Atrybut value znacznika input, oznaczający etykietę przycisku, powinien pozostać pusty.

Przykład

Aby sprawdzić działanie przykładu, pobierz obrazek znajdujący się na Rys. 1. i zapisz go pod nazwą submit.jpg w katalogu, w którym umieścisz poniższy kod HTML. Sprawdź, czy ma on szerokość 80px, a wysokość 35px. Jeśli nie, to popraw wymiary.

Rys. 1. Obrazek submit.jpg do zamiany pola wyślij.

Przykład obrazujący zmianę tradycyjnego przycisku na obrazek:

<html>
    <head>
    <title>Obrazek jako input type=submit</title>
    <style type="text/css">
        #submit{
        background-image: url(submit.jpg);
        width: 80px;
        height: 35px;
        border: 0;
        }
    </style>
    </head>
    <body>
    <form action="" method="post">
        <fieldset>
        <legend>Logowanie</legend>
        <label for="login">Login: </label><input type="text" name="login"        id="login" /><br />
        <label for="haslo">Hasło: </label><input type="password" name="haslo"        id="haslo" /><br />
        <input type="submit" value="" id="submit" />
        </fieldset>
    </form>
    </body>
</html>

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

Rys. 2. Przycisk wyślij w postaci obrazka.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać formularze w samouczku: