Ad Code

Menyajikan Cascading Style Sheet untuk Memformat Tampilan Form

Reizky Rismawan 5/11/2017 11:42:00 PM
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

 Form
 { border:1px solid #666666;
   width : 480; /*lebar form*/
   margin-left:0; /*jarak dari batas kiri layout*/
   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; /*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>

Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut
Gambar  7.1 form dengan css

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>

Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut.
Gambar  7.2  penerapan css pada textarea

3)  Cascading style sheet pada text field
extfield 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>
Ketika mouse diarahkan ke textfield
Bila listing kode dijalankan akan menampilkan tampilan berikut ini :









Gambar  7.3  penerapan css pada textfield

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>

Bila listing kode diatas dijalankan akan menampilkan style button dengan efek flat/pipih seperti berikut ini :
Gambar  7.4 style button flat

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

 input.button
     { color: #fff;
       background: #ffa20f;
       border: 2px outset #BBD16D;
       font-family: "calibri", Times, serif;
       font-size: 14px;
       font-weight: bold;
       width : auto;}

Sehingga muncul tampilan sebagai berikut :
Gambar  7.5  style form input.button

Saat mouse melewatinya, button yang semula berwarna orange berubah menjadi biru. Style untuk memberikan perubahan saat mouse melewati button adalah
 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;}
Sehingga menghasilkan efek sebagai berikut :
Gambar  7.6  style form input.button:hover

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">&nbsp;</TD>
<TD width="230" >&nbsp;
<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 :
Gambar  7.7  penerapan style pada radio button

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">&nbsp;</td>
<td width="230" ><input type="checkbox" name="tenismeja" 
class="checkbox2">
        tenis meja</td>
</tr>
<tr>
<td>&nbsp;</td>
<td ><input type="checkbox" name="sepakbola" 
class="checkbox3">
        sepakbola </td>
</tr>
    <tr>
<td>&nbsp;</td>
<td ><input type="checkbox" name="golf" 
class="checkbox3">
      golf   </td>
</tr>
</table>
</form>
</body>

</html>

Post a Comment

0 Comments

Close Menu