Menyajikan Komponen Entri Teks (Form) - Praktikum 8

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 Tag - tag di HTML. Kali ini mengenai tentang Bagaimana cara Menyajikan Entri Teks atau yang biasa dikenal yaitu form/formulir di sebuah Web menggunakan HTML. Untuk lebih jelasnya langsung saja ke tutorialnya.

Text Area
Text Area digunakkan untuk sebuah tulisan dengan area yang khusus dan text area ini ada beberapa tipe. Contoh Codingan dan Hasilnya :

Nah, untuk membuat text area kita gunakan <textarea></textarea> kita juga mengatur colspan dan rowspan nya untuk mengatur lebar dari text area tersebut. Contoh berikutnya :

Seperti yang saya sebutkan sebelumnya, untuk codingan diatas itu untuk membuktikan/membedakan beberapa textarea menggunakan colspan. Codingan berikutnya :

Nah diatas salah satu tipe dari text area yaitu read only(hanya bisa dibaca) artinya tulisan tidak dapat diubah namun dapat disalin dan bisa juga kita kasih nama dengan name="". Codingan berikutnya :

Nah diatas juga salah satu tipe dari text area yaitu disabled artinya tulisan tidak dapat diubah dan tidak dapat disalin jadi hanya bisa dilihat saja.Input Codingan berikutnya :

Nah diatas merupakan textarea untuk password, jadi saat kita mengisi di area tersebut maka masukan kita otomatis disembunyikan. Dan kita juga bisa mengatur batas huruf dari masukan user yaitu dengan cara menambahkan attribute maxlength="". Codingan berikutnya :

Nah diatas juga masih dengan textarea yaitu tag <input> dan tag ini juga da beberapa tipe ada hidden untuk menyembunyikan teaxtarea tersebut, submit digunakan untuk tombol dimana kita akan mengirimkan data yang sudah diisi sebelumnya dan ada attribute value="" yang fungsinya untuk mengatur tulisan pada tombol tersebut. Codingan berikutnya :

Nah kalo yang ini merupakan codingan sebelumnya. Dan tipe hiiden diganti dengan textarea yang juga menggunakan attribute value="". Codingan berikutnya :

Nah codingan diatas contoh penggunaan tipe input lainnya yaitu tipe file, fungsinya untuk mengupload file ke sebuah web dan ada attribute accept="" yang fungsinya yaitu untuk merincikan bahwa yang bisa di upload yaitu jenis file tertentu. Codingan berikutnya :

Nah, codingan diatas contoh penggunaan tipe input lainnya yaitu tipe radio, Biasanya digunakan untuk memilih satu pilihan pada beberapa pilihan lainnya. Codingan berikutnya :

Nah codingan diatas contoh penggunaan tipe input lainnya yaitu tipe checkbox, jika yang sebelumnya hanya bisa memilih satu pilihan. Untuk yang sekarang user bisa memilih beberapa pilihan dan yang sudah dipilih biasanya ditandai dengan tanda centang.Select and Datalist Codingan berikutnya :

Nah diatas merupakan contoh penggunaan dari select dan datalist, keduanya mempunyai fungsi yang sama yaitu untuk memilih tulisan yang sebelumnya sudah disediakan. Perbedaanya yaitu jika select awal tampilannya yaitu pilihan pertama. Sedangkan datalist tampilan pertamanya yaitu kosong. Didalam kedua tag tersebut terdapat tag lain untuk pilihannya yaitu tag <option>. Contoh tampilan formulir sederhana :

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Form</title>
</head>
<body bgcolor="#17d7cc">
  <form>
   <table>
<tr><th colspan="2"><p>
<center>
<b>PENDAFTARAN</b></center>
</p>
</th></tr>
<tr>
     <p>
<td>Nama Pengguna</td>
     <td> : <input type="text" name="name"></td></p>
</tr>
<tr>
     <p>
<td>Sandi</td>
      <td> : <input type="text" name="password"></td></p>
</tr>
<tr>
     <p>
<td>Jenis Kelamin</td>
     <td> : <input type="Radio" name="Pria">Pria
     <input type="Radio" name="Wanita">Wanita</td></p>
</tr>
<tr>
     <p>
<td>Tanggal Lahir</td>
      <td> : 
      <select name="TanggalLahir">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
      </select>
      <select name="BulanLahir">
       <option value="bulan1">Januari</option>
       <option value="bulan2">Februari</option>
       <option value="bulan3">Maret</option>
      </select>
      <select name="TahunLahir">
       <option value="2000">2000</option>
       <option value="2001">2001</option>
       <option value="2002">2002</option>
      </select>
      </td></p>
</tr>
<tr>
     <td></td>
     <td><input type="submit" value="Simpan">
         <input type="submit" value="Batal">
     </td>
    </tr>
</table>
</form>
</body>
</html>

Saya menggunakan tag table untuk mengatur agar lebih rapih tampilannya. Oh ya, ada beberapa source code diatas yang mungkin kurang lengkap terutama pada bagian textarea.

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.