Menyajikan
Cascading Style Sheet untuk
Memformat
Tampilan Form
1) Cascading style sheet 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.
<HTML>
<HEAD>
<TITLE>Pengaturan Pada Form Text
Area</TITLE>
<STYLE ="text/css">
form{ border:1px solid #666666;
width : 70%;
margin-left:0; /*jarak fieldset dari batas kiri
layout*/
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>
</TR></table>
</form>
</BODY>
</HTML>
2) Cascading style sheet 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 : #FF9933 ; }
</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>
3) Cascading style sheet 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
<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>
4) Cascading style sheet 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>
Efek style juga bisa
diberikan saat button dilewati mouse. Untuk memberikan efek berbeda saat button
dilewati mouse dapat menggunakan selector CSS input.button:hover . Untuk
listing kode lengkapnya adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE>Pengaturan Pada Form
Tombol</TITLE>
<STYLE ="text/css">
input.button
{ color: #fff;
background: #ffa20f;
border: 2px outset #BBD16D;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;
width : auto; }
input.button:hover
{ color: #fff;
background: #0c62a4; /*biru kayak judul header*/
border: 2px outset #ffa20f;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;}
</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>
Bila listing tersebut dijalankan akan muncul
tampilan form dengan keadaan yang berbeda saat mouse berada melewatinya dan
tidak melewatinya. Dibawah ini keadaan button ketika mouse tidak berada
diatasnya. Style button yang bekerja saat mouse tidak melewati button
5) Cascading style sheet padaradio 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="58" >Kelamin</TD>
<TD width="230" >:
<input type="radio"
name="radiobutton"
value="radiobutton"
class="rb1">
Pria /Male</TD>
</TR>
<TR>
<TD width="58"> </TD>
<TD width="230" >
<input type="radio"
name="radiobutton"
value="radiobutton"
class="rb2">
Wanita/Famale </TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
Untuk menerapkan style input.rd1 dan input.rd2 maka
pada tag <input type="radio" > perlu memanggil style tersebut
dengan cara class=”rd1” dan class=”rd2” . Sehingga ketika listing kode diatas
dijalankan akan muncul tampilan radio button seperti berikut ini :
6) Cascading style sheet 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
;border-color: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 width="58"> </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>
Kementerian Pendidikan & Kebudayaan
Direktorat Jenderal Peningkatan Mutu Pendidik & Tenaga Kependidikan, th. 2013: Jakarta
