Encyklopedia: Jak zmienić wygląd formularza - Kurs HTML i CSS
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ź
- Jak zmienić wygląd input type=text
- Jak zamienić input type=submit na obrazek
- Jak ułożyć elementy formularza w tabeli
Praktyczne przykłady
Zobacz, jak praktycznie wykorzystać formularze: