Menyajikan Cascading Style Sheet Untuk Memformat Tampilan Form

Assalamualaikum wr.wb

Pada kesempatan kali ini kita akan membahas tentang Menyajikan Cascading Style Sheet Untuk Memformat Tampilan Form.
Silahkan teman - teman simak pembahasan dibawah ini!

Tujuan


  • Memahami style CSS untuk memformat tampilan form pada website.
  • Dapat memahami beberapa style CSS untuk memformat tampilan form

Landasan Teori

1. Cascading Style Sheet pada Element Form
Agar form terlihat lebih indah dan menarik serta mudah dalam pengontrolan desain salah satunya dapat memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen - elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sis layout serta warna background dari form.

2. Cascading Style Sheet pada Input Teks 
Textarea dapat mendefinisikan kontrol input berupa area teks pada form. Elemen form textarea dapat kita atur stylenya dengan menggunakan selector textarea {...}.

3. Cascading Style Sheet pada Text Field
Pada bagian ini dapat mendefinisikan kontrol input tesk pada form. Berikut ini adalah contoh - contoh format CSS pada input yang membuat efek dari input teks tersebut menjadi separtisi formulir cetakan. CSS pada teks field ini menggunakan selector input. Style yang diberikan pada input textfild ini bisa berupa warna, background, border, jenis serta ukuran huruf dan masih banyak atribut lainnya yang bisa digunakan untuk style  textfield.

4. Cascading Style Sheet pada Button
Button merupan tombol yang dapat di klik. Pada tombol, baik submit, reset maupun button. pada button juga padat disisipkan link untuk menjalankan printah - perintahnya.

5. Cascading Style Sheet pada Radio Button
Radio button merupan sebuah elemen dari elemen input form. Saat ingin memberikan style pada radio button kita padat menggunakan selector input.selector

6.Cascading Style Sheet pada Checkbox
Checkbox merupakan bagian dari elemen input form. Saat kita ingin memberikan style pada Checkbox dapat menggunakan selector input. Selector.

Langkah Kerja

  1. Silahkan buat folder pada drive D:, dengan nama folder nama anda. Misalnya prakweb_nama
  2. Silahkan buat subfolder praktikum 5 didalam folder yang telah kalian buat sebelumnya.
  3. Buka text editor kalian seperti (notepad++, sublime text) sebagai text editor.
  4. Silahkan simpan elemen - elemen struktur dokument HTML tersebut dalam format .html dan file CSS ekternal dengan ekstensi .css
  5. Taphap terakhir silahkan jalankan masing-masing contoh elemen struktur HTML tersebut dengan menggunakan web browser.

Percobaan

Silahkan buat halaman website berikut ini!
<!DOCTYPE html>
<html>
<head>
<title>Style pada form</title>
<style type="text/css">
form{
border: solid 1px green;
width: 600px;
margin-left: 0;
background-color: khaki;
}
</style>
</head>
<body>
<form method="POST">
<table>
<tr>
<td>Nama :</td>
<td><input type="text" name="nama" size="48"></td>
</tr>
<tr>
<td>Pesan :</td>
<td><textarea name="pesan" cols="50" rows="14"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
Silahkan simpan file tersebut dengan nama form1.html
Hasilnya:
 Buatlah halaman web sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Style Pada Form</title>
<style type="text/css">
textarea{
color: white;
background-color: midnightblue;
border:2px solid white;
}
</style>
</head>
<body>
<form method="POST">
<table border="3px" style="border-collapse: collapse;">
<tr>
<td>Nama :</td>
<td><textarea name="nama" cols="50"></textarea></td>
</tr>
<tr>
<td>Pesan :</td>
<td><textarea name="pesan" cols="50" rows="14"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
Silahkan simpan script diatas dengan nama formtextarea.html
Hasilnya:
 Buatlah halaman web sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>CSS Textfield</title>
<style type="text/css">
input{
color: rebeccapurple;
border: 0px solid black;
border-bottom: 2px dotted;
font-family: ComicSansMS;
font-size: 12pt;
}
</style>
</head>
<body>
<div>
Usename: <input type="text" name="nama">
</div>
<div>
Password: <input type="password" name="password">
</div>
</body>
</html>
 Simpan nama file tersebut dengan nama textfield.html
Hasilnya:
Buatlah halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Button Style</title>
<style type="text/css">
input.button{
background: lightblue;
border: 1px dotted white;
border-bottom-color: black;
font-family: vendana;
font-size: 12pt;
}
</style>
</head>
<body>
<form method="POST" action="#">
<div>
Usename: <input type="text" name="username">
</div>
<div>
Password: <input type="password" name="password">
</div>
<div>
<input class="button" type="submit" name="submit" value="submit"> &nbsp; &nbsp;
<input class="button" type="reset" name="reset" value"Reset">
</div>
</form>
</body>
</html>
Silahkan simpan file tersebut dengan nama flatbutton.html
Bila kalian ingin menambahkan efek pada cursor si arahkan atau pada saat button tersebut di click maka tambahkan kode sebagai berikut:
input.button:hover{
border:2px solid blue;
cursor:pointer;
}
input.button:active{
background: blue;
Hover adalah efek ketika cursor di arahkan pada button tersebut sedangkan active adalah ketika button tersebut di click.
Hasilnya
 Silahkan buat website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input[type=radio]{
display: none;
}
input[type=radio] + label:before{
content:"";
margin: 5px;
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
margin-right: 8px;
background-color: darkslategray;
box-shadow: inset 0px 2px 2px rgba(0,0,0, .3);
border-radius: 15px;
}
input[type=radio]:checked + label:before{
content: "\2022"; /* Bullet */
color: white;
background-color: blue;
font-size: 3em;
text-align: center;
line-height: 30px;
text-shadow: 0px 0px 3px red;
}
</style>
</head>
<body>
<form method="POST" action="#">
<input type="radio" id="rb1" name="rb" value="Laki-laki"><label for="rb1">Laki-laki/Male</label><br>
<input type="radio" id="rb2" name="rb" value="Wanita"><label for="rb2">Wanita/Female</label>
</form>
</body>
</html>
 
Silahkan simpan file tersebut dengan nama stradio.html
Hasilnya:
Buatlah halaman web sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Style Checkbox</title>
<style type="text/css">
input[type=checkbox]{
display: none;
}
input[type=checkbox] + label:before{
content: "";
margin: 5px;
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
margin-right: 8px;
background-color: royalblue;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
border-radius:4px;
}
input[type=checkbox]:checked + label:before{
content: "\2714"; /* Tick */
color: mediumspringgreen;
background-color: navy;
text-align: center;
line-height: 30px;
text-shadow: 0px 0px 3px red;
}
</style>
</head>
<body>
<form method="POST" action="#">
<input type="checkbox" id="cb1" name="cb" value="Indonesia"><label for="cb1">Indonesia</label><br>
<input type="checkbox" id="cb2" name="cb" value="Inggris"><label for="cb2">Inggris</label><br>
<input type="checkbox" id="cb3" name="cb" value="Jepang"><label for="cb3">Jepang</label>
</form>
</body>
</html>
Silahkan simpan dengan nama stcheck.html
Hasilnya:

 Penggunaan Fieldset dan contoh yang lain

Penulisan CSS bisa berupa CSS embedded maupun eksternal. Contoh dengan menggunakan CSS eksternal

File HTML
<!DOCTYPE html>
<html>
<head>
<title>Stylish Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<fieldset>
<legend>Form Komentar</legend>
<form method="POST" action="#">
<div>
<input type="text" name="nama" placeholder="Nama">
</div>
<div>
<div type="text" name="kelas" placeholder="kelas"></div>
</div>
<div>
<input type="text" name="sekolah" placeholder="Sekolah">
</div>
<div>
<textarea name="komentar" placeholder="Komentar" maxlength="160" cols="50" rows="5"></textarea>
</div>

</form>
</fieldset>
</body>
</html>
Simpan dengan nama sylishform.html

File CSS
                fieldset{
width: 620px;
background-color: cyan;
}
legend{
background-color: gainsboro;
font-family: Comic Sans MS;
font-size: 14pt;
}
form{
border: solid 5px darkslategray;
width: 600px;
margin-left: 0;
background-color: gainsboro;
padding:10px;
}
input, textarea{
border: solid 2px #e6e6e6;
border-radius: 5px;
}
input{
height: 30px;
}
input:focus, textarea:focus{
border:solid 3px royalblue;
}
input.button{
background:lightblue;
border: 1px dashed white;
border-color: black;
font-family: vendana;
font-size: 12pt;
margin:5px;
}
input.button:hover{
border:2px dashed blue;
cursor: pointer;
}
input.button:active{
background: blue;
Simpan dengan nama style.css
Hasilnya
 Selamat anda telah mempelajari cara Menyajikan Cascading Style Sheet Untuk Memformat Tampilan Form
Semoga bermanfaat :)

0 Response to "Menyajikan Cascading Style Sheet Untuk Memformat Tampilan Form"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel