Mengenal dan Berlatih Membuat Form Input di HTML

FORM DALAM HTML

Form dalam HTML adalah elemen yang sangat penting untuk membuat halaman web menjadi interaktif. Dengan form, pengguna dapat memasukkan data seperti nama, email, pesam, dan lain sebagainya. Data yang dimasukkan kemudian dapat dikirimkan ke server untuk diproses lebih lanjut.

Struktur Dasar Form

Sebuah form dalam HTML diawali dengan tag <form> dan diakhiri dengan tag </form>. Di antara kedua tag ini, kita dapat menempatkan berbagai jenis elemen input seperti teks, password, checkbox, radio button, dan lain-lain. Tag form memiliki dua atribut utama, yaitu:
  • action : Atribut action menentukan kemana data form akan dikirim setelah tombol submit ditekan.
  • method : Atribut method menentukan metode pengiriman data. Dan ada dua metode utama, antara lain:
    • get : Data akan ditambahkan ke URL setelah tanda tanya (?) dan akan terlihat di address bar browser. Tidak disarankan untuk mengirim data sensitif menggunakan metode ini karena data dapat dilihat oleh siapa saja.
    • post : Data akan dikirimkan dalam body request HTTP dan tidak akan terlihat di address bar. Metode ini lebih aman untuk mengirim data sensitif.
Dan untuk membuat form, kita membutuhkan elemen input. Elemen input dalam HTML adalah elemen yang sangat penting untuk membuat formulir interaktif. Elemen-elemen ini memungkinkan pengguna untuk memasukkan data yang kemudian akan dikumpulkan dan di proses oleh aplikasi web.

Jenis-jenis Elemen Input

Berikut adalah beberapa jenis elemen input yang paling umum digunakan:
  • text : digunakan untuk input teks sederhana seperti alamat, alamat, atau judul.
  • password : digunakan untuk input password dan teks yang dimasukkan akan disembunyikan.
  • email : digunakan khusus untuk input alamat email dan browser akan secara otomatis memvalidasi format email yang dimasukkan.
  • number : digunakan untuk input nama.
  • date : digunakan untuk memilih tanggal.
  • submit : berupa tombol untuk mengirim data formulir.
  • dan masih banyak lagi elemen input yang bisa digunakan sesuai kebutuhan.
Elemen input juga memiliki atribut penting, seperti:
  • name : memberikan nama unik untuk setiap elemen input dan digunakan untuk mengidentifikasi data yang dikirimkan dari formulir.
  • value : menentukan nilai awal dari elemen input.
  • placeholder : menampilkan teks petunjuk di dalam elemen input sebelum pengguna mengetikkan apapun.
  • dan lain-lain.

Contoh Penggunaan Elemen Form dan Input di HTML

Berikut beberapa contoh penggunaan elemen form dan elemen input di HTML:

1. Membuat form input color (warna). Di form ini nantinya pengguna dapat meng-input-kan warna yang dipilih sesuai keinginan.

    Catatan : Untuk mengisi value warna, kamu bisa menggunjungi website color-hex 

    Dan inilah hasilnya :

2. Membuat form input date-time. Di form ini nanti pengguna bisa meng-input-kan tanggal dan jam secara bersamaan.

        Dan inilah hasilnya :

3. Membuat form input time. Di form ini nantinya pengguna akan meng-input-kan jam keluar dan masuk.

    Dan inilah hasilnya :

4. Membuat form input file. Di form ini nantinya pengguna dapat meng-input-kan file yang hendak dikirim atau disimpan.

    Dan inilah hasilnya :

5. Membuat form input hidden. Di form ini nantinya pengguna tidak sadar jika dia meng-input-kan nama lain yang sudah dibuat oleh developer sebelumnya.

    Dan inilah hasilnya :

6. Membuat form input Number. Di form ini pengguna dapat meng-input-kan angka. Dan di contoh ini, saya membatasi kisaran angka hanya di angka 0 sampai 100 saja.

    Dan inilah hasilnya :

7. Membuat form input password. Di form ini nantinya pengguna dapat meng-input-kan password tanpa perlu khawatir password akan terlihat, karena nanti yang nampak hanya berupa titik-titik hitam.
    
    Dan inilah hasilnya :

Kurang lebih seperti itulah pembahasan singkat mengenai form dan input pada HTML, juga bagaimana cara membuat contoh sederhana-nya. Semoga dapat membantu teman-teman semua! Untuk kode lebih lengkapnya bisa di lihat di sini => elvanazlita



Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar CSS Dasar

Gambar
APA ITU CSS? Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari sebuah halaman web. Jika kita membandingkan pembuatan sebuah website dengan membangun rumah, maka HTML adalah kerangka dan struktur dasar rumah tersebut. Sedangkan CSS adalah cat, perabotan, dan dekorasi yang membuat rumah tersebut menjadi lebih tertata rapih dan indah. Fungsi CSS Berikut beberapa fungsi CSS: CSS memungkinkan kita untuk memisahkan konten (HTML) dari tampilan (CSS). Hal ini dapat membuat kode lebih teroganisir, mudah dipelihara, dan dapat digunakan kembali. CSS dapat membuat tampilan lebih konsisten dengan menerapkan gaya yang sama ke seluruh elemen pada halaman web. CSS dapat membuat halaman website lebih responsiif dimana dapat menyesuaikan tampilannya secara otomatis berdasarkan ukuran layar perangkat. CSS yang ditulis dengan baik dan benar dapat meningkatkan kecepatan dalam loading halaman website. Struktur CSS  Selektor: Menentukan elemen HTML mana yang ...
Baca selengkapnya

Konfigurasi 3 MikroTik di Virtual Box

Gambar
Konfigurasi 3 MikroTik di Virtual Box Berikut contoh langkah sederhana membuat konfigurasi 3 MikroTik di Virtual Box: 1. Buat 3 MikroTik di Virtual Box 2. Pilih MIKROTIK_R1 lalu setting Adapter 1 menjadi Bridged Adapter 3. Setting Adapter 2 di MIKROTIK_R1 menjadi Internal Network  dan beri nama Lan1 4. Setting Adapter 3 di MIKROTIK_R1 menjadi Internal Network dan beri nama Lan2 5. Pilih MIKROTIK_R2 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan1 6. Pilih MIKROTIK_R3 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan2 7. Jalankan  MIKROTIK_R1  kemudian masuk ke system identity dan setting nama menjadi router_1 8. Masuk ke interface lalu setting ether1 menjadi eth1_ISP 9. Setting ether2 menjadi eth2_R2 10. Setting ether3  menjadi eth3_R3 11. Masuk ke ip address dan tambahkan ip address ke eth1_ISP 12. Ping gateway 13. Masuk ke ip route lalu tambahkan dst-address 14. Ping 8.8.8.8 15. Ping detik.com      Belum tersa...
Baca selengkapnya

Belajar Link, Relative dan Absolute URL, Bookmark di HTML

Gambar
Pernakah anda memperhatikan bagaimana ketika anda mengklik sebuah kata atau gambar, anda langsung berpindah ke halaman lain? Di balik itu semua, ada yang namanya link. Artikel ini akan membahas tentang apa itu link dan juga jenis-jenis link dalam HTML; Relative URL, Absolute URL, dan Bookmark. APA ITU LINK DALAM HTML? Link atau hyperlink adalah elemen dasar dalam HTML yang berfungsi untuk menghubungkan satu halaman web ke halaman web yang lain, gambar, dokumen, atau bahkan ke bagian tertentu halaman yang sama. Ketika pengguna mengklik sebuah link, browser akan secara otomatis mengarahkan pengguna ke halaman tujuan yang telah di tentukan. ELEMEN LINK DALAM HTML Elemen link dalam HTML didefinisikan menggunakan tag <a> . Atribut utama dalam tag <a>  adalah: href : Menentukan alamat URL (Uniform Resource Locator) dari halaman tujuan. target : Menentukan dimana halaman tujuan akan dibuka (di tab baru atau frame). RELATIVE DAN ABSOLUTE URL DALAM HTML URL (Uniform Resource Loc...
Baca selengkapnya