[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
7 komentarze/y
Napisz komentarz
Komentarze są moderowane. Po akceptacji przez administratora zostaną wyświetlone na stronie.

23/03/2010 o 19:18
sprawdzam działanie formularza
04/08/2010 o 18:30
Witam, nie bardzo wiem, gdzie wstawić w html mój @ aby odsyłał wiadomosci na moja skrzynke.
07/08/2010 o 19:04
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.
02/11/2010 o 22:17
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…
04/01/2011 o 18:29
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
27/02/2012 o 18:52
Nie mógłbyś jeszcze dorobić skryptu wysyłającego emaile? Niektórzy nie umieją znaleźć ;d
27/02/2012 o 20:32
Być może będzie to temat jednego z następnych artykułów.