[CSS] Prosty i elegancki formularz

This version: blog.piotrnalepa.pl/2009/09/21/css-prosty-i-elegancki-formularz
Published: September 21, 2009
Author: Piotr Nalepa, Staff Software Engineer
Category: CSS
Feedback: Write to me · Post on X

This post is 17 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.

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:

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

Example 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

Share: LinkedIn X Bluesky
Feedback: Write to me Post on X

About the author

Piotr Nalepa

Staff Software Engineer

I've been writing this blog since 2009 and building for the web professionally for 14 years. Today I lead the frontend of the Cosmos platform at Bishop Fox, where I've been since day one of the project. Before that I worked at OLX, KUDO, Auto1 and eZ Systems. Here I write about what I've learned in practice: JavaScript, TypeScript, React, CSS and frontend architecture. I've also spoken at conferences across Poland and Europe. Got a question or an idea for a post? Let me know!

About the author

Related posts