Cascading Style Sheet untuk Memformat Tampilan Form
1) Cascading style sheet pada elemen form
Form { border:1px solid #666666; width : 480; /*lebar form*/ margin-left:0; /*jarak dari batas kiri layout*/ background-color:#ffff66;}
<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
<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" >
Pemrograman Web
Page | 107
<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>
3) Cascading style sheet pada text field
<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
<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;
Ketika mouse diarahkan ke textfield
Pemrograman Web
Page | 110
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>
<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>
Pemrograman Web
Page | 112
<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>
5) Cascading style sheet padaradio button
<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
6) Cascading style sheet pada chexbox
<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>
