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