Belajar HTML (20): Membuat Formulir

Assalaamu’alaikum wrwb…

Selamat berjumpa lagi bersama BangHaji DotCom ๐Ÿ™‚ Sudah hampir 3 bulan ya saya tidak menulis, maklum, lagi sok sibuk ๐Ÿ˜Ž Oke, sebelumnya saya mau menyampaikan Selamat Idul Fitri, mohon maaf lahir dan batin.

Ya, kita langsung saja. Kali ini kita membahas tentang bagaimana membuat formulir pada halaman HTML. Tentunya kita sudah sangat sering menemukan bahkan berinteraksi dengan yang namanya formulir. Lihat ke bawah saja, maka Anda akan menemukan formulir. Iya, untuk menulis komentar ๐Ÿ™‚

Ada beberapa jenis isian yang ada di dalam formulir. Diantaranya inputan teks, pilihan yang bulat-bulat ๐Ÿ˜† (nanti kita bahas namanya), ada juga centangan (jangan salah baca, jadi cantengan ๐Ÿ˜€ ), ada lagi kolom isian yang panjang kali lebar, pilihan yang muncul ke bawah. Dan yang terpenting ada tombol.

Selingan, sebaiknya baca-baca kembali beberapa tulisan berikut agar nanti semakin mudah memahami kode-kode yang akan kita bahas:

Oke, lanjut.

Formulir dengan berbagai isiannya yang bermacam-macam harus diletakkan dalam tag khusus untuk formulir yaitu harus berada dalam <form> dan </form>. Kemudian pada tag tersebut ada beberapa atribut yang mendukung fungsi dari formulir. Diantaranya adalah method="?" yang diisi dengan get atau post, kemudian action="?" yang diisi dengan nama file tujuan pengiriman data-data isian. 2 atribut tadi paling banyak bahkan harus ada saat membuat formulir. Sebetulnya ada 1 lagi yang juga sering digunakan yaituย enctype="multipart/form-data" untuk menangani pengiriman berupa file.

input

Kita mulai dengan inputan ya. Ada banyak sekali jenisnya dan tidak semuanya kita bahas. Nanti dicoba-coba sendiri saja ya ๐Ÿ™‚ . Tag yang digunakan adalah <input type="?">. Coba kita lihat, apa saja jenis yang bisa digunakan untuk mengganti tanda tanya (?): text, password, radio, checkbox, hidden, color, file, range, number, email, url, date, time, search dan banyak lagi ๐Ÿ˜†

Oh iya lupa, ada tambahan atribut di dalam semua tag input agar berfungsi normal saat pengiriman data yaitu atribut name="?". Nah, name ini WAJIB ADAย danย WAJIB BERBEDAย di antara semua nama untuk elemen isian dalam formulir, kecuali untuk isian yang sejenis. Lalu ada lagi tambahan yang tidak wajib seperti placeholder="?" untuk menjelaskan isiannya apa dan value="?" jika ingin terisi duluan.

Kita coba ya, silakan dibuat sebuah file baru, beri nama 47-html-formulir-input.html. Ayo, masih ingat ga caranya? Silakan berkenalan lagi dengan HTML jika lupa ๐Ÿ˜‰ . Selanjutnya ketik kode berikut ini, kemudian simpan dan coba dijalankan.

<!DOCTYPE html>
<html>
<head>
   <title>Formulir Input</title>
</head>
<body>
   <h2>Contoh Formulir</h2>
   <p>Menggunakan tag input</p>
   <form>
      Nama (text):<br>
      <input type="text" name="nama" placeholder="Nama lengkap"><br><br>
      Jenis Kelamin (radio):<br>
      <input type="radio" name="jenis" value="L">Laki-laki<br>
      <input type="radio" name="jenis" value="P">Perempuan<br><br>
    Hobi (checkbox):<br>
      <input type="checkbox" name="hobi[]" value="Menyanyi">Menyanyi<br>
      <input type="checkbox" name="hobi[]" value="Main Catur">Main Catur<br>
      <input type="checkbox" name="hobi[]" value="Memancing">Memancing<br>
      <input type="checkbox" name="hobi[]" value="Main Game">Main Game<br><br>
      Sandi (password):<br>
      <input type="password" name="password" placeholder="Masukkan sandi"><br><br>
      Input tersembunyi (hidden):<br>
      <input type="hidden" name="tidak_ada" value="ini input hidden"><br><br>
      Upload (file):<br>
      <input type="file" name="dokumen"><br><br>
      Isian angka (number):<br>
      <input type="number" name="angka"><br><br>
      <input type="submit" name="kirim" value="Kirim">
      <input type="reset" name="reset" value="Bersihkan">
   </form>
</body>
</html>

Setelah dijalankan hasilnya kira-kira seperti ini ya.

Form Input

Silakan diisi dan dipilih-pilih, tekan tombolnya ๐Ÿ˜Ž

Ayo kita lanjutkan, lihat halaman sebelah ya ๐Ÿ˜€

Selanjutnya →

Halaman : 1 2 3 4

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *