Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak zmienić wygląd formularza - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-25

Często spotykanym problemem przy projektowaniu formularzy jest ich niezbyt atrakcyjny wygląd. (Rys. 1.).

Rys. 1. Wygląd formularza bez formatowania.

Za pomocą CSS można w łatwy sposób uatrakcyjnić formularz. Stosowanie w formularzu pól fieldset, legend i label zwiększa możliwości dostosowania wyglądu do własnych potrzeb. Umieszczając formularz w tabeli i modyfikując kolory tła znacznika legend, kolory krojów pisma znaczników legend oraz label, ustawiając obramowanie dla tych znaczników oraz dodatkowo regulując marginesy, możliwa jest zdecydowana zmiana nie tylko wyglądu elementów, ale również ich ułożenia. CSS to najlepszy sposób dostosowywania formularza.

Przykład

Przykład formularza ze zmodyfikowanym wyglądem:

<html>
    <head>
    <title>Formularz HTML w tabeli</title>
    <style type="text/css">
        label {
            color: #9090B0;
            font-size: 14px;
            font-weight: bold;
            width: 75px;
            margin-left: 10px; }
        fieldset {
            border: 2px solid #DFDFDF;
            padding: 3px;
            width: 250px; }
        legend {
            color: #9090B0;
            background-color: #EFEFEF;
            border: 5px solid #DFDFDF;
            padding: 3px;
            font-weight: bold;
            margin-left:-8px; }
    </style>
    </head>
    <body>
        <form action="" method="">
        <fieldset>
        <legend>LOGOWANIE</legend>
        <table>
            <tr><td><label for="login">LOGIN:</label></td><td><input type="text" name="login" id="login" size="15" /></td></tr>
            <tr><td><label for="haslo">HASŁO: </label></td><td><input            type="password" name="haslo" id="haslo" size="16" /></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. 2.

Rys. 2. Wygląd formularza po zastosowaniu stylów.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać formularze: