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