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

19 Responses

  1. MEIREZA SITI ASSYIFA berkata:

    waaahhh artikelnya sangat bagus dan bermanfaat… terimakasih yaa sudah membuat artikel ini. karena artikel ini saya sudah tau cara membuat form pada html.. semoga kedepannya dapat membuat artikel lainnya yang berhubungan dengan html, pastinya sangat berguna bagi saya dan temen temen yang sedang mempelajari pemrograman web .Perkenalkan nama saya MEIREZA SITI ASSYIFA.

  2. Ernita berkata:

    Terimakasih artikel yang menarik kak, dari beberapa artikel yang sempat saya kunjungi dan saya baca masih banyak penulisan, bahasa, dan penyajian dalam menjelaskan suatu materi yang rumit untuk saya pahami.
    Perkenalkan nama saya,ernita resva julina

  3. PEGI ANGGRAINI berkata:

    wauuuu min makasih artikelnya yang sangat bermanfaat buat saya dan temen-temen lainnya karena artikelnya sangat bagus bagi saya yang baru belajar from html.semogakedepannya admin semakin sukses dan semakin membagikan ilmunya kepada saya dan teman-teman lainnya.perkenalkan nama saya adalah PEGI ANGGRAINI dari kampus STMIK ATMA LUHUR

  4. Erie Yunantari berkata:

    Terima kasih untuk informasi yang telah diberikan melalui artikel ini, ini sangat berguna bagi saya yang baru belajar untuk membuat form pada html
    semoga artikel ini bermanfaat untuk yang lain
    perkenalkan nama saya Erie Yunantari dai STMIK Atma Luhur jangan lupa kunjungi website kampus kami

  5. Rellyta agustine berkata:

    uhhhh makasih banget kak artikel nya bagus seklai saya yang baru belajar jadi mudah mengeri karna ada penjelasan dan juga contoh nya Into Saya Rellyta agustine jangan lupa mampr ke website kampus saya ya kakhttps://www.atmaluhur.ac.id/

  6. Tindius berkata:

    Terimah kasih atas artikel diatas sedikit tolong perjelasan diperbanyak lagi agar lebih muda dimengerti perkenalkan nama saya claudio khelvin

  7. Dhita Heru Pambudi berkata:

    Terima kasih banghaji,atas artikelnya.membantu banget dalam pengerjaan coding pemrograman web html pada form/formulir saya,sebelum nya saya sangat bingung gmna mengerjakaan nya,ternyata gmpng banget ya hehe:).Semoga artikelnya dapat membatu dan bermanfaat bagi orang lain banghaji,dan hajinya nambah lagi Aamiin
    Perkenalkan Nama Saya Dhita Heru Pambudi.
    makasih yaa

  8. famzi abel berkata:

    makasih atas artikel nya mudah di pahami sayah udah cobah dan berhasil makasih buat atminya berkarya trus min #nama famzi abel p #nim1922500207 #si2k #matkul DPW #https://www.atmaluhur.ac.id/

  9. Dita rahmanda berkata:

    Selamat pagi kak,terimakasih atas ilmu nya sangat mudah di pahami,semoga bisa memberi info” lain nya ,sukses selalu.perkenalkan nama saya dita rahmanda,nim 1922500076 dari kelompok si2j

  10. Muhammad Rafi berkata:

    Selamat malam.kak,artikel ny sangat membantu kita,di tunggu artikel selanjutnya nya kak,semoga berkarya terus kak dalam membuat artikel nya , perkenalkan nama saya Muhamad Rafi-1922500144

  11. Amirah hazwani berkata:

    Thanks ya kak atas pembelajaran yang kakak post. Sangat berguna untuk mempermudah dan membantu tugas kuliah saya. Jangan berhenti memposting hal yang bermanfaat kak. Semangat. Perkenalkan nim saya 1922500072, nama amirah hazwani, kelompok si2j

  12. Elvin abel berkata:

    Terima kasih kak artikel nya bagus sekali dan sangat berguna bagi saya yang baru belajar, semoga kedepan nya dapat membuat artikel positif lain nya kak, terima kasih.
    Perkenalkan saya Elvin Abel, nim 1922500134, SI2K

  13. Andry saputra berkata:

    Makasih kak, pengerjaan coding pemrograman web html pada form/formulir sebelum nya saya sangat bingung gmna mengerjakaan nya,ternyata gmpng banget ya hehe:).Semoga artikelnya dapat membatu dan bermanfaat bagi orang lain, semoga juga lebih maju lagi kak, perkenalkan nama saya Andry Saputra Nim 1922500168 kelompok SI2k

  14. Vallerey Oscar berkata:

    Terima kasih kak atas artikelnya, sangat membantu tugas saya dalam memahami pembuatan html formulir, trus upload artikel yg lebih beragam kedepanya agar semakin lengkap, sekian mohon maaf jika ad komenyar saya yg tidak berkenan di hati kakak. πŸ™‚
    Nama :Vallerey Oscar
    Nim. :1922500128
    Kelompok :SI2K

  15. Inzaghisaputra berkata:

    Terima kasih kak,atas artikelnya mudah dipahami dan dimengerti untuk kita pelajari
    Nama:inzaghi saputra
    Nim:1922500112
    Kelompok:si2k

  16. Marganda berkata:

    Terima kasih atas artikel nya mudah dimengerti, terus berkarya ya kak #nama Marganda Sinabutar#nim1922500147#si2k #matkul DPW

  17. muhnugs berkata:

    terimakasih kak bermanfaat sekali semoga bermanfaat bagi saya dan yang lain lain jg ya dan jangan pernah menyera menebarkan kebaikan sagat berguna sekali saya tunggu ya tutorial atau artikel selanjut nya NIM:1922500200 NAMA:Muhammad Nugis Cesarianto KELOMPOK:SI 2 K
    jangan lupa kunjingi jg website kami salam budi luhur

  18. Sadam Husein berkata:

    Malam kak, terima kasih atas artikel yang udah kakak share ini sangat berguna sekali untuk saya dan semuanya kak, semoga kakak selalu share yang begini ya. perkenalkan nama saya SADAM HUSEIN, nim 1922500158, kelompok si2k

Tinggalkan Balasan

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