[CSS] Prosty i elegancki formularz

Ta wersja: blog.piotrnalepa.pl/2009/09/21/css-prosty-i-elegancki-formularz
Opublikowano: 21 września 2009
Autor: Piotr Nalepa, Staff Software Engineer
Kategoria: CSS
Uwagi: Napisz do mnie · Napisz na X

Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.

Dzisiaj zaprezentuję sposób na stworzenie prostego, zarazem przyciągającego wzrok formularza z użyciem CSS.

Zaczynamy od kodu HTML, który wstawi potrzebne nam elementy formularza:

Przykład 1HTML

<form>          
<div class="box">             
<h1>Formularz kontaktowy :</h1>             
<label>
<span>Nazwa użytkownika</span>                
<input type="text" class="wpis" name="nazwa" id="nazwa"/>             
</label>              
<label>                
<span>E-mail :</span>
<input type="text" class="wpis" name="email" id="email"/>             
</label>              
<label>                 
<span>Temat :</span>                 
<input type="text" class="wpis" name="temat" id="temat"/>             
</label>             
<label>                 
<span>Wiadomość :</span>                 
<textarea class="wiadomosc" name="wiadomosc" id="tresc"></textarea>                 
<input type="button" class="button" value="Wyślj" />             
</label>                                  
</div>     
</form>

Teraz pora na trochę kodu CSS:

Przykład 2CSS

		* { 
			margin: 0; 
			padding: 0;
		}
		body { 
			font: 100% normal Arial, Helvetica, sans-serif; 
			background: #161712;
		}
		form, input, select, textarea {
			margin:0; 
			padding:0; 
			color:#ffffff;
		}
 
		div.box {
			margin:0 auto;
			width:500px;
			background:#222222;
			position:relative;
			top:50px;
			border:1px solid #262626;
		}
 
		div.box h1 { 
			color:#ffffff;
			font-size:18px;
			text-transform:uppercase;
			padding:5px 0 5px 5px;
			border-bottom:1px solid #161712;
			border-top:1px solid #161712; 
		}
 
		div.box label {
			width:100%;
			display: block;
			background:#1C1C1C;
			border-top:1px solid #262626;
			border-bottom:1px solid #161712;
			padding:10px 0 10px 0;
		}
 
		div.box label span {
			display: block;
			color:#bbbbbb;
			font-size:12px;
			float:left;
			width:100px;
			text-align:right;
			padding:5px 20px 0 0;
		}
 
		div.box .wpis {
			padding:10px 10px;
			width:200px;
			background:#262626;
			border-bottom: 1px double #171717;
			border-top: 1px double #171717;
			border-left:1px double #333333;
			border-right:1px double #333333;
		}
 
		div.box .wiadomosc {
			padding:7px 7px;
			width:350px;
			background:#262626;
			border-bottom: 1px double #171717;
			border-top: 1px double #171717;
			border-left:1px double #333333;
			border-right:1px double #333333;
			overflow:hidden;
			height:150px;
		}
 
		div.box .button	{
			margin:0 0 10px 0;
			padding:4px 7px;
			background:#CC0000;
			border:0px;
			position: relative;
			top:10px;
			left:382px;
			width:100px;
			border-bottom: 1px double #660000;
			border-top: 1px double #660000;
			border-left:1px double #FF0033;
			border-right:1px double #FF0033;
		}

I to by było na wszystko w dzisiejszym, bardzo krótkim tutorialu.
Demo z tego można zobaczyć tutaj: elegancki formularz - demo

Udostępnij: LinkedIn X Bluesky
Uwagi: Napisz do mnie Napisz na X

O autorze

Piotr Nalepa

Staff Software Engineer

Piszę na tym blogu od 2009 roku, a strony i aplikacje webowe tworzę zawodowo od 14 lat. Obecnie w Bishop Fox prowadzę frontend platformy Cosmos, od samego początku projektu. Wcześniej pracowałem m.in. w OLX, KUDO, Auto1 i eZ Systems. Piszę tu o tym, czego nauczyłem się w praktyce: o JavaScripcie, TypeScripcie, Reakcie, CSS-ie i architekturze frontendu. Występowałem też jako prelegent na konferencjach w Polsce i Europie. Masz pytanie albo pomysł na wpis? Daj znać!

O autorze

Powiązane wpisy