Membuat Form
Form adalah tempat dimana user yang melihat web dapat memberikan input / masukkan data, hal ini yang membedakan komunikasi di dalam web dengan media lain seperti televisi / radio , dengan menggunakan form user dapat memberikan input berbagai macam jenis data, pada kesempatan ini akan diberikan dasar penulisan suatu form
HTML Form
Langkah Praktek siswa
- Jalankan program brackets
- Buka file contact.html
- hapus seluruh isi dari article
- kemudian ketik kode html berikut dengan menggunakan teknik emmet
<form class="contact" action="" method="post" name="contact"> <label for="id-nama">Name</label> <input type="text" name="Name" id="id-nama"><br> <label for="id-email">email</label> <input type="text" name="email" id="id-email"><br> <label for="id-message">Message</label> <textarea name="message" id="id-message" cols="30" rows="5"></textarea><br> <button type="submit" value="kirim"> Submit</button> </form>
- Penjelasan
- pada form diatas ada 2 tipe yaitu text dan submit
- type adalah tipe dari objek, bisa berupa kotak input atau tombol
- name adalah variabel yang berisi data untuk form tersebut
- action
- bila diarahkan ke file lain/url lain
- tipe form dibedakan menjadi 2 yaitu get dan post
- post berguna sebelum dikirim data terlebih dahulu diencrypt
- contoh penggunaan adalah mengirimkan form login yang berisi data password
- get berguna untuk mengirimkan data dan data yang terkirim akan tampak pada url
- contoh penggunaan adalah mencari suatu nama tertentu di dalam daftar
- perbedaan input text dan text area
- input text hanya bisa menampilkan 1 baris saja dan umumnya untuk memasukkan data yang singkat
- textarea bisa terdiri dari beberapa baris dan umumnya digunakan untuk memasukkan komentar yang umumnya panjang ketikannya
- proses teknik emmet yang membantu mempercepat pengetikan
- form:post
- membuat form tipe post
- User Name
- input:t
- input:p
- textarea
- input:s
- input:email
Mengetik CSS untuk form
- buka file style.css dan ketik kode css dibawah ini
- mohon tidak melakukan copy paste sehingga sambil mengetik anda dapat memperhatikan halaman preview di google chrome untuk melihat perubahannya
.contact { width: 100%; background-color: brown; } .contact label { width:7em; margin-top: 3px; margin-left: 5px; float:left; color: white; } .contact input { height: 20px; width: 15em; padding: 3px; margin-top: 5px; font-size: 1em; } .contact textarea { padding:8px; width: 15em; margin-top: 5px; font-size: 1em; } .contact button { margin: 1em 0 2em 8em; padding: 0.4em; font-size: 1em; }
- Penjelasan
- pada html kotak form diberi class contact untuk mengatur besar form dan warna background;
- agar dapat seolah-olah penulisan dibagi menjadi 2 kolom walaupun tidak menggunakan tabel, maka
- pada kolom kiri diberi kolom label
- lebar kolom label menentukkan lebar kolom sebelah kiri (dalam hal ini 7em)
- menggunakan teknik float: left sehingga kotak di sebelah kanan tetap berjarak 7em walaupun tulisannya tidak sampai 7em;
- pada kolom kanan tempat input type, textarea dan button