Share via

  • Artykuł

          

Encyklopedia: HTML i CSS - Jak ułożyć elementy formularza w tabeli - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-04

Często spotykanym problemem, podczas projektowania formularza, jest odpowiednie ułożenie jego elementów. Powinny być ułożone w sposób przejrzysty, tak, aby użytkownik nie miał problemów z jego wypełnieniem. Dodatkowym atutem są walory estetyczne formularza.

Jednym ze sposobów ułożenia elementów w formularzu jest tabela. W jednej kolumnie umieszcza się opisy pól, natomiast w drugiej pola formularza. Dzięki temu pola formularza są w jednej linii, jedno pod drugim, co zapewnia przejrzystość. Należy pamiętać o wykorzystaniu znacznika label do oznaczenia etykiety pola.

<table>
    <tr>
        <td><label for="inputID">Opis:</label></td>
        <td><input type="text" name="inputID" id="inputID" /></td>
    </tr>
…
</table>

Dodatkowo, warto zwiększyć dopełnienie (margines wewnętrzny), dzięki czemu pola formularza będą od siebie bardziej oddzielone.

td { padding: 10px; }

Zmiana koloru tła tabeli może uatrakcyjnić wygląd formularza.

table{ background-color: silver; }

Przykład

Przykład zastosowania tabeli w układaniu elementów formularza:

<html>
    <head>
    <META http-equiv="Content-Type" CONTENT="text/html; charset=UTF-8" />
    <title>Formularz HTML w tabeli</title>
    <style type="text/css">
        table{ background-color: silver;     }
        td { padding: 5px; }
    </style>
    </head>
    <body>
    <form action="" method="post">
    <fieldset>
    <legend>Logowanie</legend>
        <table>
        <tr>
            <td><label for="login">Login:</label></td>
            <td><input type="text" name="login" id="login" /></td>
        </tr>
        <tr>
            <td><label for="haslo">Hasło:</label></td>
            <td><input type="password" name="haslo" id="haslo" /></td>
        </tr>
        <tr>
            <td><input type="submit" value="Zaloguj" /></td>
        </tr>
        </table>

    </fieldset>
    </form>
    </body>
</html>

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

Rys.1 Formularz ułożony za pomocą tabeli

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać formularze w samouczku: