Berbagi itu indah

» » Membuat Form Vertikal Tanpa Tabel Menggunakan Komponen HTML dan CSS

Membuat Form Vertikal Tanpa Tabel Menggunakan Komponen HTML dan CSS

kali ini saya akan bagikan tutorial pembuatan form, Untuk membuat sebuah form yang rapi terkadang dibutuhkan komponen HTML lainnya untuk membantu supaya form yang ditampilkan menjadi lebih rapi dan cantik. Berikut beberapa langkah yang bisa dilakukan untuk membuat form yang akan dibuat menjadi lebih rapi dan cantik dengan penggunaan HTML dan CSS. Selamat mencoba:
Form1

Langkah 1

Buat sebuah komponen HTML dari form yang akan ditampilkan. Form vertikal ini tanpa menggunakan tabel ya :)
<body>
<div id="pembungkus_form">
<form method="post" action="">
 <fieldset>
 <legend>Form Pendaftaran</legend>
   <div>
     <label>Nama Lengkap</label>
     <input type="text" name="nama_lengkap" />
   </div>
   <div>
     <label>Email</label>
     <input type="text" name="email" />
   </div>
   <div>
     <label>Nomor Telephone</label>
     <input type="text" name="email" />
   </div>
   <div>
     <label>Alamat</label>
     <textarea name="Alamat" cols="30" rows="5"></textarea>
   </div>
   <div>
     <input type="submit" name="tombol" value="kirim" />
   </div>
 </fieldset>
</form>
</div>
</body>
Langkah 2Kemudian simpan komponen HTML pada langkah 1 dalam sebuah folder tersendiri misalnya disimpan dengan nama latihan1.html

Langkah 3

Siapkan sebuah gambar pola yang bisa diulang untuk dijadikan sebuah background untuk tampilan form yang akan dibuat dan letakkan pada folder yang sama dengan tempat penyimpanan HTML.
Form2

Langkah 4

Berikutnya mari kita buat  komponen CSS untuk mengatur komponen HTML yang telah disimpan. Untuk komponen CSS dapat klik disini.
* {margin:0 auto;padding:0;

}

body   {

background:#999999 url(images.jpg) repeat-x;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

line-height:200%;

}

#pembungkus_form {

width:530px;

margin-top:184px;

background:#FFFFFF;

padding:10px;

}

fieldset    {

border:1px #333333 solid;

padding:10px;

}

legend {

padding:5px;

font-weight:bold;

text-transform:uppercase;

}

div.kolom   {

margin-bottom:10px;

overflow:hiden;

}

label  {

display:block;

margin-bottom:5px;

float:left;

width:200px;

}

input[type=text] {

width:200px;

background:#CCCCCC;

height:20px;

border:1px #333333 solid;

border-radius:5px;

}

input[type=submit]    {

width:100px;

height:25px;

background:#333333;

border:2px #CCCCCC solid;

border-radius:5px;

color:#FFFFFF;

margin-left:200px;

}

textarea    {

border:1px #333333 solid;

border-radius:5px;

background:#ccc;

}

Langkah 5

Simpan komponen CSS yang sudah dibuat pada dengan nama misalnya css_06122012.css

Langkah 6

Hubungkan halaman HTML dengan halaman CSS yang sudah dibuat pada langkah 1 dan langkah 5.
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Form</title>

<link rel="stylesheet" type="text/css" href="css_06122012.css" />

</head>

Catatan :

  • Gunakan gambar yang kecil dan berbentuk pola pattern saja untuk background , searching di google dengan keybord “pattern”.
  • Border-radius : digunakan untuk menampilkan supaya border yang akan ditampilkan menjadi lebih tumpul dengan catatan menggunakan browser terbaru ya :).
  • Flot : digunakan untuk menempatkan posisi dari komponen yang digunakan.
  • Background pada bagian body menggunakan background warna dan background gambar yang diulang kebagian samping.
  • Sebaiknya mencoba setiap komponen css –nya satu-satu sehingga dapat melihat setiap perubahan pada form yang kalian buat jadi dapat terlihat perbedaanya bukan? :).
Labels: Design Web

Thanks for reading Membuat Form Vertikal Tanpa Tabel Menggunakan Komponen HTML dan CSS. Please share...!

0 Comment for "Membuat Form Vertikal Tanpa Tabel Menggunakan Komponen HTML dan CSS"

Back To Top