Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Penggunaan CSS dalam tag - tag HTML yang sudah kita gunakan sebelumnya. Nah, untuk sekarang saya akan sharing pemformatan tampilan Form dengan menggunakan CSS. Langsung saja berikut Codingan dan contohnya :
ExtCSSonForm1
<!DOCTYPE html>
<html>
<head>
<title>Aip Ariyadi - XI RPL 3 - Pengaturan Pada Form Text Area</title>
<link rel="stylesheet" href="cssOnForm1.css" type="text/css">
</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>
</tr>
</table>
</form>
</body>
</html>
Nah, jika pada saat Tutorial sebelumnya kita belajar Formating Multimedia, sekarang kita akan membahas tentang Form. Dan property - property CSS yang digunakanpun masih sama seperti sebelumya. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
ExtCSSonForm3
Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
ExtCSSonButton
Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
ExtCSSonButtonHover
Nah, ini juga tentang tag button, hanya saja ini akan menggunakan hover. Apa itu Hover? Secara sederhana hover akan berfungsi jika cursor mendekati button yang memakai hover, maka button itu akan berubah stylenya sesuai dengan yang sudah diatur. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
ExtcssonRadioButton
Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
Nah, ini contoh tampilan sebuah formulir pendaftaran. Tag Fieldset dan Legend digunakkan untuk membuat tulisan ditengah tengah border sebuah tabel. Dalam CSS anda juga bisa memanggil tag dengan cara input[type="submit"]. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
Tugas
Nah, ini merupakan contoh tampilan web yang hanya dibuat oleh HTML dan CSS. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Penggunaan CSS dalam tag - tag HTML yang sudah kita gunakan sebelumnya. Nah, untuk sekarang saya akan sharing pemformatan tampilan Form dengan menggunakan CSS. Langsung saja berikut Codingan dan contohnya :
ExtCSSonForm1
<!DOCTYPE html>
<html>
<head>
<title>Aip Ariyadi - XI RPL 3 - Pengaturan Pada Form Text Area</title>
<link rel="stylesheet" href="cssOnForm1.css" type="text/css">
</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>
</tr>
</table>
</form>
</body>
</html>
Nah, jika pada saat Tutorial sebelumnya kita belajar Formating Multimedia, sekarang kita akan membahas tentang Form. Dan property - property CSS yang digunakanpun masih sama seperti sebelumya. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
ExtCSSonForm2
<!DOCTYPE html>
<html>
<head>
<title>Aip Ariyadi - XI RPL 3 - Pengaturan Pada Form Text Area</title>
<link rel="stylesheet" href="cssOnForm2.css" type="text/css">
</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>
Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
ExtCSSonForm3
Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
ExtCSSonButton
Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
ExtCSSonButtonHover
Nah, ini juga tentang tag button, hanya saja ini akan menggunakan hover. Apa itu Hover? Secara sederhana hover akan berfungsi jika cursor mendekati button yang memakai hover, maka button itu akan berubah stylenya sesuai dengan yang sudah diatur. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
ExtcssonRadioButton
Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
Quiz - Formulir Pendaftaran Calon Peserta
Nah, ini contoh tampilan sebuah formulir pendaftaran. Tag Fieldset dan Legend digunakkan untuk membuat tulisan ditengah tengah border sebuah tabel. Dalam CSS anda juga bisa memanggil tag dengan cara input[type="submit"]. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
Tugas
Nah, ini merupakan contoh tampilan web yang hanya dibuat oleh HTML dan CSS. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.
Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.
😃Selamat Bercoding
Formating Tampilan Form dengan HTML & CSS - Praktikum 11
4/
5
Oleh
Aip Ariyadi
