MENYAJIKAN CSS UNTUK MEMFORMAT TAMPILAN FORM

Agustus 28, 2019

MENYAJIKAN CSS UNTUK MEMFORMAT TAMPILAN FORM

PRAKTIKUM 11

Nama : M.Fadlul Hafiizh

Kelas : XI-RPL 2

Okey gimana kabar kalian? sebelumnya terimakasih kalian telah membuka artikel ini dan dalam artkel yang saya tulis kaliini kita masuk ke proses penyajian css untuk memformat tampilan form. sebelumnya kalian sudah tau kan apa itu css atau yang bisa disebut juga dengan Cascading Style Sheet? buat kalian yang belum tau, kalian bisa mengunjungi postingan saya sebelumnya :

https://tutorgesit.blogspot.com/2019/08/memahami-css-cascading-style-sheet.html

Jadi saya sarankan buat kalian yang apabila belum mengetahui maksud dari css dan tujuan pengunaan css ini serta belum mengeahui seperti apa css itu, lebih baik kalian cari tau lebih dahulu melalui link diatas agar kalian tidak bingung dengan postingan yang kaliini saya buat.

Maksud menyajikan css dalam form ini adalah untuk membuat form lebih menarik dan begus untuk dilihat. Kita bisa memberikan banyak hiasan pada form tersebut seperti :

jenis border
warna border
lebar form
batas form dari sisi layout
warna background dari form

Cukup untuk penjelasan secara garis besarnya seperti itu. kita langsung masuk ke metode praktek agar kita lebih paham akan materi yang tertulis kaliiini.

CSS On Form 1

CSS-Nya :

form{
 border: 2px outset blue;
 border-width: 5px;
 width: 70%;
 margin-left: 0; /*jarak fieldset dari batas kiri layout*/
 background-color: lightblue;
 color: red;
 font-family: Arial Narrow;
}
body{
 background-color: salmon;
}

Hasilnya :

CSS On Form 2

CSS-Nya :

textarea{
 color: yellow; /*font color*/
 background-color: blue;
 font-family: arial;
}
body{
 background-color: pink;
 color: red;
 font-family: Impact;
}

Hasilnya :

CSS On Form 3

<!DOCTYPE html>
<html>
<head>
 <title>Pengaturan Pada Form M.Fadlul Hafiizh XI-RPL2</title>
 <link rel="stylesheet" type="text/css" href="CssOnForm3.css">
</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>

CSS-Nya :

input{
 color: red;
 background: yellow;
 border-top: 0px solid;
 border-bottom: 2px dotted blue;
 border-left: 0px solid;
 border-right: 0px solid;
 font-family: consolas;
 font-size: 11px; 
}

Hasilnya :

CSS On Button

<!DOCTYPE html>
<html>
<head>
 <title>Pengaturan Pada Form Tombol M.Fadlul Hafiizh XI-RPL2</title>
 <link rel="stylesheet" type="text/css" href="CSSonButton.css">
</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>

CSS-Nya :

input.button{
 color: salmon;
 background: lightblue;
 border-top: 1px dotted white;
 border-bottom: 1px dotted white;
 border-left: 1px dotted black;
 border-right: 1px dotted black;
 font-family: verdana;
 font-size: 12px 
}
body{
 background: lightcoral;
}

Hasilnya :

CSS On Button Hover

<!DOCTYPE html>
<html>
<head>
 <title>Pengaturan Pada Form Tombol Hover M.Fadlul Hafiizh XI-RPL  2</title>
 <link rel="stylesheet" type="text/css" href="CSSonButtonHover.css">
</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"><br><br> 
     <a href="ExtCSSonButton..html" class="linknya">Kembali</a>
    </td>
   </tr>
</table>
</form>
</body>
</html>

CSS-Nya :

input{
 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;
}
body{
 background-color: pink;
}
a.linknya{
 background-image: url(gambar/untad.gif);
 background-size: cover;
 text-decoration: none;
 font-family: Impact;
}
a.linknya:hover{
 background-image: url(gambar/26/08/19.jpg);
 background-size: cover;
 color: coral;
 text-decoration: none;
 font-family: arial black;
}

Hasilnya :

CSS Radio Button

<!DOCTYPE html>
<html>
<head>
 <title>Pengaturan Pada Radio Button M.Fadlul Hafiizh XI-RPL2</title>
 <link rel="stylesheet" type="text/css" href="CssOnRadioButton.css">
</head>
<body>
 <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>

CSS-Nya :

input.rb1{
 color: black;
 background: dodgerblue;
 border-color: lime;
 font-family: verdana;
 font-size: 12px
}
input.rb2{
 color: red;
 background: coral;
 border-color: yellow;
 font-family: verdana;
 font-size: 12px;
}
td{
 color: midnightblue;
 background: bisque;
 border-color: yellow;
 font-family: verdana;
 font-size: 12px;
}
form.f1{
 background: sienna;
 width: 200px;
}

Hasilnya :

Quiz 11

Ini adalah hasil pengerjaan saya dari apa yang diperintahkan didalam modul, yang diperintahkan ialah membuat css pada form yang sudah diberikan contohnya. jadi inilah hasilnya :

<!DOCTYPE html>
<html>
<head>
 <title>Quiz Praktikum 11 M..Fadlul Hafiizh XI-RPL2</title>
 <link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
 <form name="form1" method="post" action="0">
  <fieldset>
<legend>Formulir Pendaftaran Calon Peserta</legend>
   <table border="0" cellpadding="5" cellspacing="2" align="center">
<tr>
     <td width="230">Nama</td>
     <td><input class="isi" type="text" name="nama"></td>
    </tr>
<tr>
     <td width="230">No.Induk Penduduk</td>
     <td><input class="isi" type="text" name="NoInduk"></td>
    </tr>
<tr>
     <td width="230">Kelamin</td>
     <td>
      <input type="radio" name="Kelamin">Pria</input>
      <input type="radio" name="Kelamin">Wanita</input>
     </td>
    </tr>
<tr>
     <td width="230">TTD</td>
     <td><input class="isi" type="text" name="TTD"></td>
    </tr>
<tr>
     <td width="230">Agama</td>
     <td>
      <select>
       <option value="">Islam</option>
       <option value="">Kristen</option>
      </select>
     </td>
    </tr>
<tr>
     <td>Status</td>
     <td>
      <select>
       <option value="">Kawin</option>
       <option value="">Jomblo</option>
      </select>
     </td>
    </tr>
<tr>
     <td>
      <input class="button" type="submit" name="submit" value="Browse">
      <input class="button" type="submit" name="submit" value="Simpan">
     </td>
    </tr>
</table>
</fieldset>
</form>
</body>
</html>

CSS-Nya :

fieldset{
 background: grey;
 border-left: dotted red;
 border-right: dotted red;
 border-top: dashed lightgreen;
 border-bottom: dashed lightgreen;
 width: 50%;
}
legend{
 background: magenta;
 margin-bottom: 13px;
 padding: 0.5em 1em;
}
table,td{
 padding: 10px;
 color: white;
}
input.button{
 background: orange;
 color: white;
 width: auto;
}
input.button:hover{
 border: red;
}
.isi{
 color: white;
 border: solid green;
 background-color: lightgreen;
 border-style: inset;
}

Hasilnya :

Jadi itulah beberapa contoh mengenai pembelajaran kaliini, semoga bermanfaatt........

Cari Blog Ini

Tutor Gesit

MENYAJIKAN CSS UNTUK MEMFORMAT TAMPILAN FORM

Komentar

Posting Komentar

Postingan Populer

CRUD(Create, read, update, delete) data dalam relasi 2 tabel

If, If/Else, Else, Switch/Case On java script