search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Prosty i elegancki formularz

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:

<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:

		* {
			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

  • Mariusz

    sprawdzam działanie formularza

  • aneta

    Witam, nie bardzo wiem, gdzie wstawić w html mój @ aby odsyłał wiadomosci na moja skrzynke.

  • To jest przykład w CSS opisujący sposób budowy wyglądu formularza. By zbudować formularz wysyłający pocztę to musisz go rozbudować o skrypt PHP.
    Bez tego nie da rady wysyłać maili.

  • Comandeer

    No, trza przyznać, że prezentuję się nieźle, ale ten div.box mi się trochę nie podoba – powinien być to fieldset. Jeśli wszystkie inputy mają ten sam wygląd, to klasa wpis jest zbędna IMO. W CSS masz małe przeoczenie: zerujesz marginesy globalnie, a później zerujesz je ponownie dla form i input. Ja osobiście formularz traktuję jako zbiór pól, dlatego wsadzam poszczególne pola w elementy listy. Dziwię się, że nie umieszczam inputów w label, ale to pewnie przyzwyczajenie z IE 6 ;D
    Odnośnie wysyłanie e-maili: ponoć w Netscape było w JS coś takiego jak window.senMail, więc z tym PHP to może nie być taka znowu prawda…

  • Rob

    Przestudiowalem, mimo ze moja wiedza powoli sie rozszerza moge potwierdzic ze sie przydalo.
    Braklo mi tylko opisu zbudowania skryptu wysylajacego.
    Ale poszukam po sieci pewnie gdzie cos znajde 🙂
    Pozdrawiam

  • Błażej

    Nie mógłbyś jeszcze dorobić skryptu wysyłającego emaile? Niektórzy nie umieją znaleźć ;d

  • Piotr Nalepa

    Być może będzie to temat jednego z następnych artykułów.

  • rob

    prosto i ladnie, super

  • Pingback: [jQuery] Walidacja wpisywanych informacji w panelu logowania/rejestracji | Piotr Nalepa - Blog webmasterski | Tutoriale JavaScript, CSS i nie tylko()