Belajar HTML (20): Membuat Formulir

Ditulis oleh Muhammad Erfan, dipublikasi sejak 11 Juni 2019 pukul 11:33, disimpan dalam kategori HTML, Tutorial, Web. Ingin mengomentari tulisan ini? Ada 31 komentar.

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 πŸ˜€

Tinggalkan Balasan ke MEIREZA SITI ASSYIFA Batalkan balasan31

Your email address will not be published. Required fields are marked *


MEIREZA SITI ASSYIFA

MEIREZA SITI ASSYIFA

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.

Ernita

Ernita

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

PEGI ANGGRAINI

PEGI ANGGRAINI

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

Erie Yunantari

Erie Yunantari

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

Rellyta agustine

Rellyta agustine

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/

Tindius

Tindius

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

Dhita Heru Pambudi

Dhita Heru Pambudi

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

famzi abel

famzi abel

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/

Dita rahmanda

Dita rahmanda

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

Muhammad Rafi

Muhammad Rafi

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

Amirah hazwani

Amirah hazwani

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

Elvin abel

Elvin abel

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

Andry saputra

Andry saputra

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

Vallerey Oscar

Vallerey Oscar

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

Inzaghisaputra

Inzaghisaputra

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

Marganda

Marganda

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

muhnugs

muhnugs

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

Sadam Husein

Sadam Husein

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

Nurfatonah

Nurfatonah

Hal ini sangat baik karena dapat menjadi pelajaran tambahan bagi para mahasiswa Indonesia seperti saya yang mengambil bidang studi sistem informasi untuk memperbaiki dan meningkatkan kualitas dalam materi perkuliahan design pemrograman web untuk membuat HTML
Nurfatonah-2022500133 kelompok SI2K

Muhammad Erfan

Muhammad Erfan

Terima kasih…

Naufal Fahmi

Naufal Fahmi

Thanks ya kak atas pembelajaran yang kakak post. Cukup mudah dipahami
Oh iya kapan-kapan mampir dikampus saya…
Nama : Naufal Fahmi
2022500011

Muhammad Erfan

Muhammad Erfan

Terima kasih atas kunjungannya…

Fauziah Syafarina

Fauziah Syafarina

Artikel ini sangat membantu saya dlm belajar memahami dan membuat sebuah formulir dgn html, terimakasih kak, untuk admin sukses terus dlm membuat artikel lainnya yg bermanfaat bagi pembaca lainnya,
Saya Fauziah Syafarina

Muhammad Erfan

Muhammad Erfan

Terima kasih sudah berkunjung…

Tasya marisca

Tasya marisca

hallo kak
terimakasih artikelnya sangat bermanfaat dan juga mengajarkan saya cara membuat form pada html, semangat terus kak untuk menulis artikel nya supaya bisa mempermudah kami dalam belajar apalagi untuk saya yang baru belajar, saya harap admin bisa menambah artikel yang lebih menarik lagi dari ini.
Perkenalkan nama saya (Tasya marisca 2022500137) dan jangan lupa kunjungi web kampus saya…

Muhammad Erfan

Muhammad Erfan

Terima kasih atas kunjungannya…

CindyCarolin

CindyCarolin

terimakasih kak artikel nya sangat bermanfaat bagi saya.dengan adanya artikel ini saya bisa mempelajari membuat form pada HTML.
semangat terus kak untuk membuat artikel-artikel yang bermanfaat.
perkenalkan saya Cindy Carolin, teimakasih

Muhammad Erfan

Muhammad Erfan

Terima kasih kembali..

Sutia Dinarti

Sutia Dinarti

Terimakasih kak berkat artikel kakak saya mulai mengerti sedikit banyak tentang membuat formulir pada html, artikel yang kakak buat cukup jelas dan mudah dimengerti untuk pemula seperti saya, Terimakasih atas kerjasamanya dalam hal berbagi ilmu yang bermanfaat ya kak.
Salam kenal saya Sutia Dinarti Nim: 2022500146
Jangan lupa kunjungi website kampus kami

Muhammad Erfan

Muhammad Erfan

Terima kasih ya…