Css Untuk Memformat Tampilan Form
Wednesday, March 25, 2020
Edit
Form dalam HTML ialah suatu bab yang berfungsi sebagai input atau masukan dari pengguna yang lalu akan diproses atau diolah untuk sanggup dipakai sesuai dengan kebutuhan. Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di dalamnya. Style CSS sanggup dipakai di banyak sekali komponen input di dalam form. Dengan memakai style CSS akan mengurangi beban halaman dan konsumsi bandwidth.
1. CSS pada Elemen Form
Agar form terlihat lebih indah menarik serta gampang dalam pengontrolan desain salah satunya memperlihatkan style CSS. Dibawah ini ialah style yang sanggup 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 sanggup diberikan ke form.
form { border:1px solid #666666; width : 480; margin-left:0; background-color:#ffff66;}
Bila style form diatas di embedkan ke dalam file html akan listing kodenya menyerupai berikut ini :
Hasilnya ialah sebagai berikut
<html>
<head>
<title>Pengaturan Pada Form Text Area</title>
<style ="text/css">
form{ border:1px solid #666666;width : 70%;margin-left:0; 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></td>
</table>
</form>
</body>
</html>
2. CSS pada Input Text
Textarea mendefinisikan kontrol input berupa area teks pada form .Elemen form textarea sanggup diatur stylenya dengan memakai selector textarea {…}. Berikut pola penerapan CSS untuk elemen textarea.
Tampilanya ialah sebagai berikut :
<html>
<head>
<title>Pengaturan Pada Form Text Area</title>
<style ="text/css">
textarea {color: white ;background-color : #03a9f4 ; }
</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>
Tampilanya ialah sebagai berikut :
3. CSS pada Text Field
Textfield mendefinisikan kontrol input text pada form. Berikut ini ialah pola format CSS pada input yang menciptakan dampak dari input textfield menjadi menyerupai sisi formulir cetakan. CSS untuk textfield memakai selector input. Style yang diberikan pada input textfield diantaranya warna, background, border, jenis serta ukuran font dan masih banyak atribut lainya yang sanggup dipakai 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>
Tampilanya ialah sebagai berikut :
4. CSS pada Button
Button merupakan tombol yang sanggup diklik. Pada tombol, baik submit, reset maupun button, style CSS sanggup dipakai untuk menjadikan dampak pipih (flat) pada tombol. Berikut ini ialah pola 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>
Tampilanya ialah sebagai berikut :
Catatan : Perintah submit aku ganti dengan reset,
Efek style juga sanggup diberikan ketika button dilewati mouse. Untuk memperlihatkan dampak berbeda ketika button dilewati mouse sanggup memakai selector CSS input.button:hover . Kode yang perlu ditambahkan pada bab style ialah :
input.button:hover { color: #fff; background: #0c62a4; border: 2px outset #ffa20f; font-family: "calibri", Times, serif; font-size: 14px; font-weight: bold;}
5. CSS pada Radio Button
Radio button merupakan bab dari elemen input form. Saat ingin memperlihatkan style pada radio button sanggup memakai selector input.selector. Contoh berikut ialah 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="70" >Kelamin</td><td width="230" >:<input type="radio" name="radiobutton" class="rb1">Pria /Male</td></tr>
<tr><td width="70"></td><td width="230" ><input type="radio" name="radiobutton" class="rb2">Wanita/Famale </td></tr>
</table>
</form>
</body>
</html>
Tampilanya ialah sebagai berikut.
6. CSS pada Chexbox
Checkbox merupakan bab dari elemen input form. Saat ingin memperlihatkan style pada Checkbox sanggup memakai selector input.selector. Contoh berikut ialah 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 ;bordercolor: 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></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>
Tampilanya ialah sebagai berikut :
Dengan memakai style CSS akan mengurangi beban halaman dan konsumsi bandwidth. Style yang sanggup diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background dari elemen-elemen form.