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!
Hasilnya:
Buatlah halaman web sebagai berikut:
Hasilnya:
Buatlah halaman web sebagai berikut:
Hasilnya:
Bila kalian ingin menambahkan efek pada cursor si arahkan atau pada saat button tersebut di click maka tambahkan kode sebagai berikut:
Hasilnya
Silahkan buat website sebagai berikut:
Hasilnya:
Hasilnya:
File CSS
Hasilnya
Selamat anda telah mempelajari cara Menyajikan Cascading Style Sheet Untuk Memformat Tampilan Form
Semoga bermanfaat :)
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
- Silahkan buat folder pada drive D:, dengan nama folder nama anda. Misalnya prakweb_nama
- Silahkan buat subfolder praktikum 5 didalam folder yang telah kalian buat sebelumnya.
- Buka text editor kalian seperti (notepad++, sublime text) sebagai text editor.
- Silahkan simpan elemen - elemen struktur dokument HTML tersebut dalam format .html dan file CSS ekternal dengan ekstensi .css
- Taphap terakhir silahkan jalankan masing-masing contoh elemen struktur HTML tersebut dengan menggunakan web browser.
Percobaan
Silahkan buat halaman website berikut ini!
<!DOCTYPE html>Silahkan simpan file tersebut dengan nama form1.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>
Hasilnya:
<!DOCTYPE html>Silahkan simpan script diatas dengan nama formtextarea.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>
Hasilnya:
<!DOCTYPE html>Simpan nama file tersebut dengan nama textfield.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>
Hasilnya:
Buatlah halaman website sebagai berikut:
<!DOCTYPE html>Silahkan simpan file tersebut dengan nama flatbutton.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">
<input class="button" type="reset" name="reset" value"Reset">
</div>
</form>
</body>
</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{Hover adalah efek ketika cursor di arahkan pada button tersebut sedangkan active adalah ketika button tersebut di click.
border:2px solid blue;
cursor:pointer;
}
input.button:active{
background: blue;
}
Hasilnya
<!DOCTYPE html>Silahkan simpan file tersebut dengan nama stradio.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>
Hasilnya:
Buatlah halaman web sebagai berikut:
<!DOCTYPE html>Silahkan simpan dengan nama stcheck.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>
Hasilnya:
Penggunaan Fieldset dan contoh yang lain
Penulisan CSS bisa berupa CSS embedded maupun eksternal. Contoh dengan menggunakan CSS eksternal
File HTML
<!DOCTYPE html>Simpan dengan nama sylishform.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>
File CSS
fieldset{Simpan dengan nama style.css
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;
}
Hasilnya
Semoga bermanfaat :)
0 Response to "Menyajikan Cascading Style Sheet Untuk Memformat Tampilan Form"
Post a Comment