Home » » CSS untuk Memformat Tampilan Form

CSS untuk Memformat Tampilan Form

Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan.  Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di dalamnya. Style CSS dapat digunakan di berbagai komponen input di dalam form. Dengan menggunakan style CSS akan mengurangi beban halaman dan konsumsi bandwidth.

1. CSS pada Elemen Form
Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background dari form. Sebenarnya masih banyak style lain yang bisa diberikan ke form.
form { border:1px solid #666666; width : 480;  margin-left:0; background-color:#ffff66;}
Bila style form diatas di embedkan ke dalam file html akan listing kodenya seperti berikut ini :
<html>
<head>
<title>Pengaturan Pada Form Text Area</title>
<style ="text/css">
form{ border:1px solid #666666;width : 70%;margin-left:0; background-color:#ffff66;}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table><tr><td width="50" >Nama </td><td width="175" ><textarea name="textarea"cols=50></textarea></td></tr>
<tr><td width="50" >Pesan </td><td width="175" ><textarea name="textarea"cols=50 rows=14></textarea></td></td>
</table>
</form>
</body>
</html>
CSS Form
Hasilnya adalah sebagai berikut
Nama
Pesan

2. CSS pada Input Text
Textarea mendefinisikan kontrol input berupa area teks pada form .Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}. Berikut contoh penerapan CSS untuk elemen textarea.
<html>
<head>
<title>Pengaturan Pada Form Text Area</title>
<style ="text/css">
textarea {color: white ;background-color : #03a9f4 ; }
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table bordercolor="1">
<tr><td width="50" >Nama </td><td width="175" ><textarea name="textarea" cols=50></textarea></td></tr>
<tr><td width="50" >Pesan </td><td width="175" ><textarea name="textarea"cols=50 rows=14 ></textarea></td></tr>
</table>
</form>
</body>
</html>

Tampilanya adalah sebagai berikut :
Nama
Pesan

3. CSS pada Text Field
Textfield mendefinisikan kontrol input text pada form. Berikut ini adalah contoh format CSS pada input yang membuat efek dari input textfield menjadi seperti sisi formulir cetakan. CSS untuk textfield menggunakan selector input. Style yang diberikan pada input textfield diantaranya warna, background, border, jenis serta ukuran font dan masih banyak atribut lainya yang bisa digunakan untuk style textfield.
<html>
<head>
<title>Pengaturan pada Form</title>
<style ="text/css">
input {color:#000000;background:white;border-color:white;border-bottom-color:black;border-top:0px solid;border-bottom:2px dotted;border-left: 0px solid;
border-right:0px solid;font-family:tahoma, Arial;font-size:11px;}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr><td width="58" >Nama </td><td width="230" >:<input type="text" name="nama"></td></tr>
<tr><td width="58">Alamat</td><td width="230" >:<input type="text" name="alamat"></td></tr>
</table>
</form>
</body>
</html>

Tampilanya adalah sebagai berikut :
Nama :
Alamat:

4. CSS pada Button
Button merupakan tombol yang dapat diklik. Pada tombol, baik submit, reset maupun button, style CSS dapat digunakan untuk menimbulkan efek pipih (flat) pada tombol. Berikut ini adalah contoh penggunaan CSS pada tombol flat :
<html>
<head>
<title>pengaturan pada form tombol</title>
<style ="text/css">
input.button {color:#000000; background: lightblue ; border-color:white; border-bottom-color:black; border-top:1px dotted; border-bottom:1px dotted; border-left: 1px dotted; border-right:1px dotted; font-family:verdana; font-size:12px; }
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table >
<tr><td width="58" >nama </td><td width="230" >:<input type="text" name="nama"></td></tr>
<tr><td width="58">alamat</td><td width="230" >:<input type="text" name="alamat"></td></tr>
<tr><td></td><td ><input class="button" type="submit" name="submit"value="simpan"><input class="button" type="submit" name="submit2"value="submit"></td></tr>
</table>
</form>
</body>
</html>

Tampilanya adalah sebagai berikut :
nama :
alamat:
Catatan : Perintah submit saya ganti dengan reset,

Efek style juga bisa diberikan saat button dilewati mouse. Untuk memberikan efek berbeda saat button dilewati mouse dapat menggunakan selector CSS input.button:hover . Kode yang perlu ditambahkan pada bagian style adalah : 
input.button:hover { color: #fff; background: #0c62a4; border: 2px outset #ffa20f; font-family: "calibri", Times, serif; font-size: 14px; font-weight: bold;}

5. CSS pada Radio Button
Radio button merupakan bagian dari elemen input form. Saat ingin memberikan style pada radio button dapat menggunakan selector input.selector. Contoh berikut adalah style CSS pada input yang bertipe pilihan radiobutton :
<html>
<head>
<title>Pengaturan pada Form</title>
<style ="text/css">
input.rb1{background: blue ;border-color:white;font-family:verdana;font-size:12px; }
input.rb2{background: green ; border-color:white;font-family:verdana;font-size:12px;}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table bordercolor="1">
<tr><td width="70" >Kelamin</td><td width="230" >:<input type="radio" name="radiobutton"  class="rb1">Pria /Male</td></tr>
<tr><td width="70"></td><td width="230" ><input type="radio" name="radiobutton" class="rb2">Wanita/Famale </td></tr>
</table>
</form>
</body>
</html>

Tampilanya adalah sebagai berikut.
Kelamin :Pria /Male
Wanita/Famale

6. CSS pada Chexbox
Checkbox merupakan bagian dari elemen input form. Saat ingin memberikan style pada Checkbox dapat menggunakan selector input.selector. Contoh berikut adalah style CSS pada input yang bertipe pilihan Checkbox.
<html>
<head>
<title>Pengaturan pada form checkbox</title>
<style ="text/css">
input.checkbox1{ background: blue ;border-color: green; border-style : outset double; }
input.checkbox2{ background: yellow ;border-color: red; border-style :double; }
input.checkbox3{ background: green ;bordercolor: black; border-style :dotted; }
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table bordercolor="1">
<tr><td width="58" >Hoby : </td><td width="230" ><input type="checkbox" name="badminton" class="checkbox1">Badminton</td></tr>
<tr><td></td><td width="230" ><input type="checkbox" name="tenismeja" class="checkbox2">Tenis Meja</td></tr>
<tr><td></td><td><input type="checkbox" name="sepakbola" class="checkbox3">Sepakbola </td></tr>
<tr><td></td><td ><input type="checkbox" name="golf" class="checkbox3">Golf </td></tr>
</table>
</form>
</body>
</html>

Tampilanya adalah sebagai berikut :
Hoby : Badminton
Tenis Meja
Sepakbola
Golf

Dengan menggunakan style CSS akan mengurangi beban halaman dan konsumsi bandwidth. Style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background dari elemen-elemen form.
Posted by Nanang_Ajim
Mikirbae.com Updated at: 1:40 PM

0 komentar:

Post a Comment

Mohon tidak memasukan link aktif.