Hampir dalam setiap project website yang kita develop, kita juga membuat form. Apa yang kita lakukan untuk menata layout elemen-elemen dalam form yang kita buat sehingga dapat tertata rapi? Hmm.. dulu mungkin saya menggunakan table. Sekarang, saya lebih prefer (dan menyarankan Anda) untuk menggunakan CSS? hehe.. :mrgreen: Kenapa? karena lebih fleksibel untuk dimodifikasi dan lebih membebaskan kita untuk membuat desain form yang lebih menarik. Dengan CSS kita bisa merubah style elemen-elemen dalam form sesuai keinginan kita dan ketika suatu saat ingin merubah style itu, kita bisa memodifikasinya hanya dengan mengedit file CSSnya saja. Hmm.. ya..ya.. seperti keunggulan CSS secara umum memang.

Berikut ini saya ingin membagi sedikit contoh dalam mendesain form yang simpel dengan CSS. (Kalo ada yg salah, tolong diingetin ya..hehe )

Langkah pertama
Biasanya saya mendesain dulu di Photoshop tampilan form yang saya inginkan. Misalnya begini:

Dari desain yang diinginkan di atas, dapat kita lihat bahwa kita memerlukan potongan gambar yang akan kita gunakan untuk mengcustomize button pada form kita. Maka, kita perlu untuk memotong gambar button yang kita desain tersebut dan menyimapannya dalam format jpeg atau png. Jika kita ingin agar ketika button di-hover(mouse berada di atas button), gambar buttonnya berubah, maka buat juga gambar button satu lagi dengan ukuran sama persis dengan gambar button sebelumnya. Kemudian satukan kedua gambar tersebut sehingga seperti ini:

Langkah kedua
Menterjemahkan desain yang kita inginkan ke dalam CSS. Hmm..kalo pelukis melukis lukisan pake kuas, nah..kalo web designer melukis webnya pake CSS. haha…maksa banget analoginya. Soalnya, bikin CSS tu butuh intuisi juga si. Biar ngga’ binggung ketika menentukan elemen-elemen HTML apa saja yang perlu kita definisikan style-nya, kita buat coret-coretannya dulu deh.

Jadi, kalo dilihat dari coret-coretan di atas, kita perlu mendefinisikan style untuk h1, p, label, span, input, textarea, dan button. Cuma itu? ngga’2, masih perlu yang lain juga. Kita perlu membuat id dan class untuk menjadikan form itu seperti itu. hmm..bingung ngga’? Aduuuh…gimana ya.?? Kok saya jadi bingung sendiri jelasinnya. Emm..mendingan kita liat CSSnya langsung aja deh. Saya yakin Anda yang baca tu orang cerdas, jadi bisa langung belajar dengan melihat CSSnya aja. hehehe…:maap2:

body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{
border:0;
margin:0;
padding:0;
}

.form1{
margin:0 auto;
width:400px;
padding:14px;
}

#desain1{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}

#desain1 h1 {
font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}

#desain1 p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}

#desain1 label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}

#desain1 .keterangan{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}

#desain1 input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
background:#f4fdfd;
width:200px;
margin:2px 0 20px 10px;
}

#desain1 textarea{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
background:#f4fdfd;
margin:2px 0 20px 10px;
}

#desain1 textarea:focus, #desain1 input:focus{
background:#ffffff;
}

#desain1 button{
clear:both;
margin-left:150px;
width:100px;
height:22px;
background:url(images/button.png) no-repeat top;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

#desain1 button:hover{
background:url(images/button.png) no-repeat bottom;
}

Langkah ketiga:
Membuat form di file html. Sebenernya, langkah ketiga dan langkah kedua bisa dibolak-balik pengerjaannya. Hal ini karena keduanya saling berkaitan. Jadi, terserah Anda mau membuat CSS dulu baru setelah itu membuat HTML, atau sebaliknya. Kamulah yg paling tau apa yang terbaik untukmu(halah2.. ). Langsung aja deh gini html-nya:

<div id="desain1" class="form1">
<form id="form" name="form" method="post" action="index.html">
<h1>Contact Me</h1>
<p>Silakan isi form ini untuk menghubungi saya</p>
<label>Nama
<span class="keterangan">isi nama lengkap ya</span>
</label>
<input type="text" name="nama" id="nama" />
<label>Email
<span class="keterangan">harus valid</span>
</label>
<input type="text" name="email" id="email" />
<label>Website
<span class="keterangan">kalo punya aja</span>
</label>
<input type="text" name="website" id="website" />
<label>Pesan
<span class="keterangan">tulis pesan kamu di sini ya</span>
</label>
<textarea name="pesan" id="pesan" cols="25" rows="5" ></textarea>
<button type="submit">Send</button>
</form>
</div>

Langkah keempat
Udah slese kok.

Coba liat hasilnya di sini.
Kalo mau download source lengkapnya ada di sini.

P.S: Maaf ya..para pembaca kalo penjelasanku malah ngga’ jelas. Janji deh, saya mau blajar lagi biar tutorial yg saya berikan dapat dimengerti orang. hehe… :maap2: