July 13, 2024

Membuat Form Vertikal Tanpa Tabel Menggunakan Komponen HTML dan CSS

2 min read

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 🙂

[sourcecode languege=”php”]
<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>
[/sourcecode]

Langkah 2
Kemudian 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.

[sourcecode languege=”php”]
* {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;

}
[/sourcecode]

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.

[sourcecode languege=”php”]
<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>
[/sourcecode]

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? :).

 Selamat mencoba semoga bermanfaat buat semuanya 🙂

0 thoughts on “Membuat Form Vertikal Tanpa Tabel Menggunakan Komponen HTML dan CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.