Cara Membuat Form dalam HTML

Hallo teman - teman ajschool, kali ini saya akan membagikan bagaimana cara pembuatan form dalam HTML, sebelumnya saya ucapkan terimakasih kepada teman - teman yang sudah mau berkunjung ke blog saya ini, baiklah sebelumnya teman - teman mungkin sudah menetahui materi dasar dari HTML karena pada dasarnya sebelum pembuatan form dalam HTML alangkah lebih baiknya kita tau fundamentalnya terlebih dahulu.

Jika kita perhatikan halaman populer seperti google, facebook dan youtube itu semua memiliki bagian penting untuk menerima data yang datanya di masukan oleh pengguna web tersebut di HTML untuk melakukan hal tersebut, menerima atau memasukan data kita bisa menggunakan HTML form, ada banyak sekali bagian dari input data yang bisa kita gunakan untuk membuat form tersebut seperti teks, chekbox, selection, e-mail, password dan lain sebagainya.

Contoh Form Di Web Google

  

Gambar di atas adalah contoh dari HTML form itu sendiri dan mungkin teman - teman sudah tau kegunaan dari form di atas untuk apa.

Form Tag

Form tag adalah tag dengan kata kunci form yang di gunakan sebagai bagian dari input informasi yang di berikan oleh pengguna, bisa di bilang jika kita ingin membuat input maka sebelum membuatnya kita harus membuat tag form setelah itu baru kita bisa membuat inputan didalam tag form tersebut, contoh kodenya :

<form>

//---isi form---//

</form>

Form sendiri memiliki beberapa atribute beberapa atribute yang biasa di gunakan adalah

1. name, berisi informasi nama form, nama form harus unik dalam satu file html tidak boleh ada yang sama.

2. action, berisi URL (bisa absolute atau relative) tergantung mau kemana informasi ini di kirim.

3. enctype, berisi tipe data form, defaultnya "aplication/x-www-form-urlencoded" atau "multipart/form-data".

4. method, berisi aksi HTTP method yang di gunakan, jika "get" maka informasi akan di kirim sebagai query parameter pada URL, jika "post" maka informasi akan di kirim di request body HTTP.

5. target, berisikan informasi dimana hasil informasi ini akan di tampilkan defaultnya adalah "_self" (di halaman yang sama) atau "_blank" (di halaman yang berbeda).

 contoh form atribute :

<form name = "contoh" action = 'form-submit.html" enctype = "aplication/x-www-form-urlencoded" method ="post " target = "_blank">

//--isi form--//

</form>

Input Tag

Form tag hanya deklarsi bahwa kita akan membuat form berisi input data, sedangkan untuk detail input data apa yang di perlukan ? tentu kita memerlukan input tag, input tag sendiri menggunakan kata kunci "input".

Selain itu input tag juga memiliki beberapa atribute

• HTML Form mendukung banyak sekali jenis input, dan untuk mengatur jenis input, kita harus mengubahnya menggunakan attribute. Ada beberapa attribute yang perlu kita ketahui di input

• name, digunakan untuk memberi nama input, nama input harus unik dalam form yang sama, tidak boleh ada yang sama

• type, digunakan untuk memilih jenis input, kita akan bahas lebih detail untuk jenis-jenis tipe input yang tersedia di HTML

• value, digunakan untuk mengubah nilai default dari input

• disabled, digunakan untuk menjadikan input tidak aktif

• readonly, digunakan untuk menjadikan input tidak bisa diubah

• required, digunakan untuk menandai bahwa input wajib diisi

contoh kode input :

  Input Text

Dalam pengembangan web, elemen <input> dalam HTML memiliki peran krusial, terutama ketika kita ingin mengizinkan pengguna untuk memasukkan teks ke dalam formulir. Elemen ini menawarkan kemudahan dan fleksibilitas dalam interaksi pengguna. Berikut ini adalah penjelasan mendalam mengenai penggunaan elemen <input> dengan tipe "text".

Penggunaan Dasar

Elemen <input> dengan tipe "text" digunakan untuk membuat area input teks sederhana. Berikut contoh penggunaannya:

<input type="text" name="username" placeholder="Masukkan username Anda">

• type="text" menentukan jenis input sebagai teks.
• name="username" memberikan identifikasi pada input untuk diproses oleh server.
• placeholder="Masukkan username Anda" menampilkan petunjuk teks di dalam input.

Pemrosesan Data

Elemen ini sering digunakan dalam formulir untuk mengumpulkan informasi dari pengguna. Contoh formulir sederhana:

<form action="/proses-data" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" placeholder="Masukkan username Anda"> <button type="submit">Kirim</button> </form>

Pada formulir di atas, ketika pengguna mengklik tombol "Kirim," nilai yang dimasukkan ke dalam input teks akan dikirimkan ke server untuk diproses.

Atribut Tambahan

Atribut dapat diterapkan pada elemen <input> untuk memberikan fungsionalitas tambahan. Sebagai contoh, atribut maxlength membatasi jumlah karakter yang dapat dimasukkan pengguna.

<input type="text" name="pesan" maxlength="100" placeholder="Tulis pesan (maksimal 100 karakter)">

Elemen <input> dengan tipe "text" menyediakan cara yang efisien untuk mengumpulkan informasi teks dari pengguna. Dengan memahami atribut-atributnya, kita dapat meningkatkan pengalaman pengguna dan memproses data dengan lebih efektif dalam pengembangan web. Teruslah eksplorasi untuk memanfaatkan fitur-fitur HTML dengan lebih baik!.

Label Tag

Dalam HTML, elemen <label> digunakan untuk memberikan label atau keterangan terhadap elemen formulir lainnya, seperti elemen <input>, <select>, <textarea>, dan lainnya. Tujuan utamanya adalah meningkatkan aksesibilitas dan membantu pengguna memahami maksud dari elemen formulir tersebut.

Saat kita membuat caption untuk input, direkomendasikan menggunakan Label, dibanding menggunakan teks polos atau tag seperti span / p / div. Label Tag bisa dikaitkan dengan input, sehingga ketika kita mengklik tulisan pada Label, secara otomatis fokus akan berpindah ke InputSelain itu, saat mengaktifkan Screen Reader, ketika kita mengklik Input, secara otomatis Label yang terasosiasi dengan Input tersebut akan dibaca oleh Screen ReaderLabel memiliki attribute “for” yang digunakan untuk menentukan Input Id yang dipilih untuk diasosiasikan.

Contoh kode label tag :

Input Submit

Dalam HTML, elemen <input> dengan atribut type="submit" digunakan untuk membuat tombol pengiriman (submit) dalam formulir. Tombol ini memungkinkan pengguna untuk mengirimkan data formulir ke server untuk diproses. Berikut adalah contoh penggunaan elemen <input> dengan tipe "submit":

<form action="/proses-data" method="post"> <!-- Beberapa elemen formulir di sini --> <input type="submit" value="Kirim"> </form>

Dalam contoh di atas:

• type="submit" menunjukkan bahwa ini adalah elemen input khusus untuk mengirimkan formulir.
• value="Kirim" adalah teks yang akan ditampilkan pada tombol. Teks ini dapat disesuaikan sesuai kebutuhan.

Penting untuk mencatat bahwa elemen <input> dengan tipe "submit" biasanya ditempatkan di dalam elemen <form>. Atribut action pada elemen <form> menentukan URL atau skrip yang akan memproses data formulir setelah tombol "submit" ditekan. Atribut method menentukan metode HTTP yang akan digunakan, seperti "GET" atau "POST".

Contoh formulir lengkap dengan tombol submit:

<form action="/proses-data" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <input type="submit" value="Kirim"> </form>

Dalam contoh ini, ketika pengguna mengklik tombol "Kirim", data dari elemen formulir (username dan password) akan dikirimkan ke server untuk diproses sesuai dengan nilai yang dimasukkan oleh pengguna.

Mungkin hanya sebagian kecil saja yang dapat saya share dalam artikel ini kepada teman - teman, karna ada begitu banyak sekali materi mengenai HTML form ini yang mungkin akan memakan banyak sekali waktu untuk menuliskan nya, jika teman teman ingin mengetahui atau ingin explore lebih jauh lagi teman teman bisa untuk mengunjungi web berikut yang memiliki dokumentasi lebih lengkap https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form, saya ucapkan terimaksih atas kunjungan teman teman ke blog saya jangan lupa untuk share agar ilmu yang di dapat bermanfaat dan saya lebih semangat untuk berbagi ilmu dengan teman - teman.😇😇

Lokasi:

Berbagi :