Format Form Dalam CSS (Pertemuan 11)

Format Form Dalam CSS (Pertemuan 11)

pada tanggal September 10, 2018

Assalamu'alaikum Wr. Wb.

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan terbaru ini. Sekarang kita masih membahas seputar CSS, tentu saja menggunakan tag-tag yang telah dipelajari dalam materi-materi sebelumnya hanya saja menggunakan CSS untuk memperbagus tampilannya. Langsung saja kita mulai pembahasan kita kali ini.

1. CSS on Form
Dalam CSS, kita dapat menggunakan beberapa jenis pengaturan pada form, ada beberapa jenis pengaturan yang dapat kita gunakan pada form dengan menggunakan CSS. Kali ini saya menggunakan External CSS.

Mengubah Background Form

Kita dapat mewarnai background dari form yang kita buat tersebut. Contohnya adalah seperti ini :

<html>
 <head>
   <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Pengaturan Pada Form Text Area</title>
  <link href = "CSS/CSSonForm.css" rel = "stylesheet" type = "text/css" > </link>
 </head>
  <body id = "Background">
   <form name = "form1" method = "post" action = " ">
    <table>
<tr>
      <td width = "50"> Nama </td>
      <td width = "175"> <textareaa name = "textarea" cols = "50"> </textareaa> </td>
     </tr>
<tr>
      <td width = "50" > Pesan </td>
      <td width = "175">
       <textareaa name = "textarea" cols = "50" rows = "14"> </textareaa>
      </td>
     </tr>
<table>
   </form>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Chocolate;
}
form {
 border    : 2px solid yellow;
 width    : 70%;
 margin-left   : 0; /* Jarak Fieldset dari batas kiri  layout */
 background-color : Aquamarine;
 font-family   : Comic Sans MS;
}

Hasilnya akan menjadi seperti ini :

Mengubah Background Field

Kita dapat mewarnai background dari field yang kita buat tersebut. Contohnya adalah seperti ini :

<html>
 <head>
   <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Pengaturan Pada Form Text Area</title>
  <link href = "CSS/CSSonForm2.css" rel = "stylesheet" type = "text/css" > </link>
 </head>
  <body id = "Background">
   <center>
<form name = "form1" method = "post" action = " ">
    <table bordercolor = "1">
<tr>
      <td width = "50" > Nama </td>
      <td width = "175"> 
       <textareaa name = "textarea" cols ="50" > </textareaa> </td>
     </tr>
<tr>
      <td width = "50" > Pesan </td>
      <td width = "175"> 
       <textareaa name = "textarea" cols = "50" rows = "14"></textareaa>
      </td>
     </tr>
</table>
</form>
</center>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Chocolate;
}
textarea {
 color    : yellow; /* font color */
 background-color : Aquamarine;
}

Hasilnya akan menjadi seperti ini :

Menambahkan Border dalam Form

Tentu saja kita dapat menambahkan border untuk memperbagus tampilan dari sebuah form yang kita buat. Contohnya adalah seperti ini :

<html>
 <head>
   <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Pengaturan Pada Form</title>
  <link href = "CSS/CSSonForm3.css" rel = "stylesheet" type = "text/css" > </link>
 </head>
  <body id = "Background">
   <center>
<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>
</center>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Chocolate;
}
input {
 color    : red;
 background   : yellow;
 border-color  : green;
 border-bottom-color : black;
 border-top   : 0px solid;
 border-bottom  : 2px dotted;
 border-left   : 0px solid;
 border-right  : 0px solid;
 font-family   : Comic Sans MS;
 font-size   : 11px
}

Hasilnya akan menjadi seperti ini :

2. CSS on Button
Kita juga dapat mengubah tampilan dari tombol (button) yang kita buat untuk melakukan Submit setelah kita mengisi sebuah form. Contohnya adalah seperti ini :

<html>
 <head>
   <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Pengaturan Pada Form Tombol</title>
  <link href = "CSS/CSSonButton.css" rel = "stylesheet" type = "text/css" > </link>
 </head>
  <body id = "Background">
   <center>
<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>
</center>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Chocolate;
}
input.button {
 color    : salmon;
 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;
}

Hasilnya akan menjadi seperti ini :

Hover

Apabila pada contoh yang pertama, ketika cursor kita mengarah pada tombol tidak akan terjadi apa-apa, namun apabila kita menambahkan attribute :hover pada css buttonnya maka tampilan dari button itu akan berubah. Contohnya adalah seperti ini:

<html>
 <head>
   <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Pengaturan Pada Tombol Hover</title>
  <link href = "CSS/CSSonButtonHover.css" rel = "stylesheet" type = "text/css" > </link>
 </head>
  <body id = "Background">
   <center>
<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" >
       <br> <br> <a href = "CSSonButton.html" class = "linknya" > Kembali </a>
      </td>
     </tr>
</table>
</form>
</center>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Chocolate;
}
input.button {
 color   : coral;
 background  : indianred;
 border   : 2px outset khaki;
 font-family  : calibri, times, serif;
 font-size  : 14px;
 font-weight  : bold;
 width   : auto;
}
input.button:hover {
 color   : coral;
 background  : lightsteelblue;
 border   : 3px outset yellow;
 font-family  : cambria, times, serif;
 font-size  : 14px;
 font-weight  : bold;
}
a.linknya {
 background-image : url (1.png);
 text-decoration  : none;
 font-family   : Impact;
}
a.linknya:hover{
 background-image : url (1.png);
 color    : coral;
 text-decoration  : none;
 font-family   : arial black;
}

Hasilnya akan menjadi seperti ini :

Radio Button

Kita juga dapat menggunakan CSS pada Radio Button, penggunaannya tidak jauh berbeda dengan mengatur pada bagian isi, hanya saja penempatan CSS nya hanya fokus didalam Radio Button. Contohnya adalah seperti ini :

<html>
 <head>
   <title>Salman Fauzan Fahri Aulia - XI-RPL 3 - Pengaturan Pada Radio Button</title>
  <link href = "CSS/CSSonRadioButton.css" rel = "stylesheet" type = "text/css" > </link>
 </head>
  <body id = "Background">
   <form name = "form1" method = "post" action = " " class = "f1" >
    <table bordercolor = 1>
<tr width = "120" >
      <td width = "58" > Kelamin </td>
      <td width = "150" > : 
       <input type = "radio" name = "radiobutton" value = "radiobutton" class = "rb1" /> Pria/Male 
      </td>
     </tr>
<tr>
      <td width = "58" >   </td>
      <td width = "150" class = "k1"> : 
       <input type = "radio" name = "radiobutton" value = "radiobutton" class = "rb2" /> Wanita/Female 
      </td>
     </tr>
<table>
   </form>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-size  : 10pt;
 color   : Chocolate;
}
input.rb1 {
 color   : black;
 background  : dodgerblue;
 border-color : lime;
 font-family  : Comic Sans MS;
 font-size  : 12px;
}
input.rb2 {
 color   : red;
 background  : coral;
 border-color : yellow;
 font-family  : Comic Sans MS;
 font-size  : 12px;
}
td {
 color   : midnightblue;
 background  : bisque;
 border-color : yellow;
 font-family  : Comic Sans MS;
 font-size  : 12px;
}
form.f1 {
 background  : sienna;
}

Hasilnya akan menjadi seperti ini :

Sekarang saya akan membuat sebuah web yang berisi tentang Form Pendaftaran dengan menggunakan gabungan dari codingan yang telah digunakan dimateri diatas. Contohnya adalah seperti ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Formulir Pendaftaran Peserta</title>
   <link href="CSS/Quiz.css" rel="stylesheet" type="text/css">
 </head>
  <body id = "Background">
    <form action="" method="post" name="form1">
     <fieldset id="Kolom">
      <legend id="Label"> Formulir Pendaftaran Calon Peserta</legend>
   <table>
<tr>
     <td>Nama</td>
     <td> : <input type="text" name="nama"></td>
    </tr>
<tr>
     <td>No. Induk Penduduk</td>
     <td> : <input type="text" name="nip"></td>
    </tr>
<tr>
     <td>Kelamin</td>
     <td id="JenKel"> : <input type="radio" name="radiobutton" value="radiobutton" class="rb1">Pria</td>
     <td id="JenKel2"><input type="radio" name="radiobutton" value="radiobutton" class="rb2">Wanita</td>
    </tr>
<tr>
     <td>TTL</td>
     <td> : <input type="text" name="TTL"></td>
    </tr>
<tr>
     <td>Agama</td>
     <td> : <select id="Religion"> <option value="Islam">Islam</option>
           <option value="Kristen Protestan">Kristen Protestan</option>
           <option value="Kristen Katolik">Kristen Katolik</option>
           <option value="Hindu">Hindu</option>
           <option value="Budha">Budha</option>
     </select></td>
    </tr>
<tr>
     <td>Status</td>
     <td> : <select id="status"><option value="Kawin">Kawin</option>
           <option value="Belum Kawin">Belum Kawin</option>
           <option value="Single">Single</option>
           <option value="Jomblo">Jomblo</option>
     </select></td>
    </tr>
<tr>
     <td><input type="submit" class="button" name="submit" value="Browse">
      <input type="submit" class="button" name="submit2" value="Simpan">
     </td>
    </tr>
</table>
</fieldset>
</form>
</body>
</html>

#Background{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 10pt;
 color   : Lawngreen;
}
table{
 width    : 100%;
 color   : Blue;
 padding-left : 3cm;
 padding-right : 3cm;
 padding-top : 1cm;
 padding-bottom : 1cm;
}
td{
 padding-bottom : 1cm;
 font   : 14px cambria, Times, serif;

}
#JenKel{
 color: black;
}
#JenKel2{
 color: black;
}
#Kolom{
 border-top  : 3px dashed #61c2ff;
 border-bottom : 3px dotted #61c2ff;
 border-left : 3px dashed #61c2ff;
 border-right : 3px dotted #61c2ff;
}
#label{
 text-align   : Left;
 width    : 250px;
 background-color : #0000ff;
}
input.button {
 color   : coral;
 background  : indianred;
 border   : 2px outset khaki;
 font-family  : calibri, times, serif;
 font-size  : 14px;
 font-weight  : bold;
 width   : auto;
}
input.button:hover{
 color   : coral;
 background  : lightsteelblue;
 border   : 3px outset purple;
 font-family : cambria, Times, serif;
 font-size  : 14px;
 font-weight : bold;
}

Hasilnya akan menjadi seperti ini :

Hover juga dapat digunakan untuk membuat Navigasi Bar / Tampilan Menu pada sebuah web, tentu kita juga harus membuatnya ter-link /tersambung dengan beberapa codingan untuk tampilan pada setiap menunya. Contohnya adalah seperti ini :

Menu Pertama / Info

<html>
 <head>
  <title>Info League</title>
   <link href="CSS/Nugas.css" rel="stylesheet" type = "text/css" >
 </head>
  <body>
   <div id="First">
    <div class="Header">
     <div class="Pos1">
      <a href = "https://intermation-cafe.blogspot.com" > <h1>
Salman Fazz</h1>
</a>
     </div>
<div class="Pos2">
      <ul>
<li><a href = ""> HOME </a></li>
<li><a href = "Info.html"> INFO </a></li>
<li><a href = "Register.html"> REGISTER </a></li>
<li><a href = ""> CONTACT</a></li>
</ul>
</div>
</div>
<div class="d">
     <div class="Align">
      <img src="d.png" alt="gambar" width="100%" height="100%">
      <img src="o.png" alt="gambar" width="100%" height="100%">
     </div>
</div>
</div>
</body>
 </head>
</html>

Hasilnya akan menjadi seperti ini :

Nah, tampilan sebuah web tidak harus selalu menggunakan tulisan / text, penggunaan gambar juga dapat memudahkan dalam proses pembuatan sebuah websitenya, tetapi kalian harus membuat gambar nya terlebih dahulu menggunakan photoshop, gambar diatas saya mengambil dari sebuah website tentang sebuah League / Tournament se SMK/SMA yang akan diadakan dalam beberapa bulan mendatang.

Menu Kedua / Registrasi

<html>
 <head>
  <title>Info League</title>
   <link href="CSS/Nugas.css" rel="stylesheet" type = "text/css" >
 </head>
  <body>
   <div id="First">
    <div class="Header">
     <div class="Pos1">
      <a href = "https://intermation-cafe.blogspot.com"> <h1>
Salman Fazz</h1>
</a>
     </div>
<div class="Pos2">
      <ul>
<li><a href = ""> HOME </a></li>
<li><a href = "Info.html"> INFO </a></li>
<li><a href = "Register.html"> REGISTER </a></li>
<li><a href = ""> CONTACT</a></li>
</ul>
</div>
</div>
<form>
       <table>
<tr>
         <th colspan = "2" > <p>
<center>
 <b> Form Pendaftaran League </b> </center>
</p>
</th> 
        </tr>
<tr>
          <td> Nama Team </td>
          <td> : <input type = "text" name = "input"> </td>
        </tr>
<tr>
          <td> ID Line Captain </td>
          <td> : <input type = "text" name = "input"> </td>
        </tr>
<tr>
          <td> Nickname Captain </td>
          <td> : <input type = "text" name = "input"> </td>
        </tr>
<tr>
          <td> Nickname Member </td>
          <td> : <input type = "text" name = "input"> </td>
          <td> <input type = "text" name = "input"> </td>
          <td> <input type = "text" name = "input"> </td>
          <td> <input type = "text" name = "input"> </td>
        </tr>
<tr>
          <td> Bukti Pembayaran </td>
          <td> : <input type = "file" name = "picture" accept = "image/* ">
        </tr>
<tr>
         <td><input class = "button" type = "submit" value = "Simpan">
          <input class = "button" type = "submit" value = "Batal">
         </td>
        </tr>
</table>
</form>
</div>
</body>
 </head>
</html>

Hasilnya akan menjadi seperti ini :

Ketika kita akan membuat beberapa tampilan menu, kita juga harus turut menyertakan codingan yang membuat Navigasi Bar / Menu tersebut dalam setiap codingan menu yang akan kita buat, nah untuk Menu Kedua saya membuat Form Registrasi untuk pendaftaran League / Tournament tersebut.

Jangan lupa codingan CSSnya gan :

* {
 margin: 0;
 padding: 0;
}
form, table {
 color : White;
}
body {
 font-family: Comic Sans MS;
 background-color: Grey;
}
#First .Header {
    position: fixed;
    background-color: Grey;
    width: 100%;
}
#First .Header .Pos1 {
    float: left;
    width: 40%;
}
#First .Header .Pos1 h1 {
    padding: 16px 64px;
    color: White;
}
#First .Header .Pos2 {
    float: left;
    width: 60%;
}
#First .Header .Pos2 ul li {
    list-style-type: none;
    float: left;
    padding: 16px 32px;
}
#First .Header .Pos2 ul li a {
    text-decoration: none;
    color: White;;
}
#First .Header .Pos2 ul li:hover {
    background-color: cyan;
}
#First .d ,img {
    width: 100%;
    height: 585px;
    float: center;
    background-color: grey; 
    padding-top: 100px;
}
form {
    width: 100%;
    padding-top: 100px;
    padding-left: 250px;
    padding-right: 250px;
}
#First .d .Align{
    width: 95%;
    height: 100%;
    margin: auto;
}
input.button:hover {
 color   : coral;
 background  : lightsteelblue;
 border   : 3px outset yellow;
 font-family  : cambria, times, serif;
 font-size  : 14px;
 font-weight  : bold;
}
input.button {
 color    : salmon;
 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   : Comic Sans MS;
 font-size   : 12px;
}

Sampai disini dulu ya Guys pembahasan kita kali ini. Mohon maaf bila ada kesalahan pada penyampaian maupun pengetikan. See you Next!

Wassalamu'alaikum Wr. Wb.

Komentar