Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Form HTML Menggunakan Tag Form

Form atau formulir merupakan bentuk tabulasi dari pertanyaan-pertanyaan yang biasa digunakan untuk proses pengumpulan data atau survei. Pada website, dapat juga dikembangkan suatu format berbentuk form yang dapat digunakan untuk mengisi pertanyaan-pertanyaan atau survei dengan menggunakan tag form menggunakan kode html.


3 Atribut Utama Penggunaan Tag Form pada HTML
Ilustrasi Tag Form HTML

Sebelum memahami lebih dalam materi tentang Membuat Form HTML Menggunakan Tag Form, terlebih dahulu pelajari materi tentang: Mengatur Gaya Huruf HTML Menggunakan Tag Font [klik], Menyematkan Aplikasi Eksternal pada HTML Menggunakan Tag Embed [klik], dan Membuat Daftar Deskripsi HTML Menggunakan Tag DT [klik].

Form atau formulir diperlukan penggunaannya pada dokumen HTML untuk mengambil input dari user yang mengunjungi suatu situs. Form pada dasarnya digunakan untuk proses pendaftaran, masuk ke profil akun tertentu, pengumpulan data, dan lain sebagainya. Informasi yang dikumpulkan tersebut dapat berupa nama, alamat, email, dan lain sebagainya. Tidak hanya itu, penggunaan form juga dapat dimodifikasi lebih dinamis bersama dengan penggunaan kode PHP dan server database. Dimana aplikasi backend yang dikembangkan dari PHP akan memproses data yang telah diterima tersebut dan kemudian dapat menyimpannya dalam database server. Ada berbagai elemen form yang dapat digunakan pada html seperti text-fieldtext-areadrop-down listselectcheckboxesradio, dan lain sebagainya.

Sintak:
<form> Form Konten... </form>

Baca Juga: 

Atribut: ada banyak atribut yang dapat digunakan pada tag form seperti diperlihatkan sebagai berikut:
  • Atribut Action: digunakan untuk mengirim data ke server setelah penyerahan formulir.
  • Atribut method: digunakan untuk mengunggah data dengan menggunakan dua jenis method yaitu method get dan method postMethod get memiliki panjang karakter url yang terbatas dan tidak boleh digunakan untuk mengirim data yang sifatnya sensitif, pengiriman data dengan method get sebaiknya hanya menyertakan data yang bersifat umum. Method post tidak memiliki batasan ukuran dalam penggunaannya dan pengajuan formulir dengan method post tidak dapat dilakukan bookmark.
  • Atribut enctype: digunakan unutk menentukan bagaimana browser mendekode data sebelum data tersebut dikirim ke server.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

form tag

</title>

</head>

 

<body>

<h1>

Tag Form

</h1>

 

<!--Tidak digunakan atribut 

action karena tidak dilakukan

pengiriman data apapun ke

server-->

<form>

 

<!-- digunakan label untuk

mendefinisikan nilai label

untuk input -->

<label 

for="fname">

Nama Pertama

</label>

 

<!-- Didefinisikan teks field

menggunakan tag input -->

<input 

type="text" 

name="fname" 

placeholder="enter your name" 

required>

 

<label 

for="lname">

Nama Terakhir

</label>

 

<input 

type="text" 

name="lname" 

placeholder="enter your name" 

required>

 

</form>

 

</body>

 

</html>

Output:

Tag Form

   

Artikel ini didedikasikan kepada: Wildan Pratama Bagaskara, Aditya Aji Pradana, Afifah Eva Nuriyah, Aldila Puspita Husna, dan Amalia Safitri.

26 komentar untuk "Membuat Form HTML Menggunakan Tag Form"

  1. Apa yang dimaksud dengan tag form pada HTML?

    BalasHapus
    Balasan
    1. Tag form pada HTML digunakan untuk membuat formulir input bagi user. Formulir yang telah dibuat dapat berisi bidang teks, kotak centang, tombol radio, dan lain sebagainya. Formulir yang telah dibuat tersebut digunakan untuk meneruskan data pengguna ke url tertentu.

      Hapus
  2. Apa yang dimaksud dengan method pengiriman pada atribut form yang digunakan dokumen html?

    BalasHapus
    Balasan
    1. Method html atribut form digunakan untuk menentukan method http yang digunakan untuk mengirim data saat pengiriman formulir dilakukan pada dokumen html. Ada dua macam method yang dapat digunakan, yaitu metode get dan post.

      Hapus
  3. Bagaimana form bekerja pada halaman web?

    BalasHapus
    Balasan
    1. Setelah pengunjung mengirimkan formulir, data formulir tersebut kemudian dikirim ke server web. Dalam formulir, author harus menyebutkan url action yang memberitahukan browser kemana harus mengirim data formulir tersebut.

      Hapus
  4. Apakah form yang digunakan pada materi ini sama dengan form yang digunakan pada google form?

    BalasHapus
    Balasan
    1. Sama, perbedaannya adalah form yang dibuat pada google form bentuk nya lebih dinamis karena sudah dikombinasikan dengan menggunakan bahasa pemrograman yang lainnya beserta algoritma kecerdasan buatan, sehingga proses pembuatan form sudah tidak dilakukan secara manual lagi tapi langsung dengan menggunakan GUI.

      Hapus
  5. Apa yang menyebabkan data yang dikirim melalui form gagal untuk terkirim?

    BalasHapus
    Balasan
    1. Ada banyak faktor yang bisa menyebabkan data yang dikirim lelaui form gagal untuk terkirim, salah satunya dalah sinyal internet, kompatibilitas data, pengaturan jaringan, dan lain sebagainya.

      Hapus
  6. Apakah form bisa digunakan untuk kegiatan survei?

    BalasHapus
    Balasan
    1. Form yang dibuat pada laman html bisa digunakan untuk membuat form untuk survei atau pertanyaan.

      Hapus
  7. Apa yang dimaksud dengan form pada laman html?

    BalasHapus
    Balasan
    1. Form atau formulir adalah bagian dari dokumen yang berisi konten normal, markup, atau elemen khusus yang disebut juga kontrol (biasanya terdiri dari checboxes, radio buttons, menu, dan lain sebagainya), dan label pada kontrol tersebut.

      Hapus
    2. Form atau formulir dapat digunakan untuk mengumpulkan hasil masukkan pengguna atau user. Dimana hasil input tersebut akan dikirim ke dalam server dan diproses hasilnya.

      Hapus
  8. Apa fungsi atribut ACTION pada form html?

    BalasHapus
    Balasan
    1. Atribut action digunakan untuk menentukan kemana form data pada server setelah proses penyerahan form dilakukan. Atribut tersebut bisa digunakan dalam tag FORM disertai dengan alamat URL tempat lokasi data form akan diserahkan.

      Hapus
  9. Apa yang dimaksud dengan radio button pada laman html?

    BalasHapus
    Balasan
    1. Fungsi input radio button adalah untuk mendefinisikan tombol radio. Penggunakan dapat memeliki kelompok radio sebanyak yang diinginkan, selama setiap kelompok tersebut memiliki label namanya masing-masing.

      Hapus
  10. Tombol radio atau radio button adalah tombol opsi yang merupakan elemen kontrol grafis yang memungkinkan pengguna untuk memilih salah satu dari beberapa pilihan opsi ekslusif yang telah ditentukan sebelumnya. Saat tombol ini digunakan pada HTML, jika salah satu tombol tidak ada yang dicentang, maka form tidak akan mengirimkan data apapun ketika formulir dikirim ke server.

    BalasHapus
  11. Apa yang dimaksud dengan checkbox pada laman html?

    BalasHapus
    Balasan
    1. Checkbox adalah kotak yang mendefinisikan tanda centang pada form html. Kotak centang ditampilkan sebagai sebuah kotak berbentuk persegi yang dapat dicentang ketika diaktifkan. Kotak centang tersebut memungkinkan pengguna untuk memilih lebih dari satu pilihan untuk dikirim ke dalam server melalui sebuah form.

      Hapus
  12. Apa yang dimaksud dengan textarea pada laman html?

    BalasHapus
    Balasan
    1. Tag TEXTAREA adalah tag pada html yang mendefinisikan kontrol input teks multi baris yang dapat digunakan pada form. TEXTAREA sering digunakan pada form untuk mengumpulkan input use seperti ulasan komentar ataupun pendapat. Ukuran dari TEXTAREA ditentukan oleh atribut COLS dan ROWS atau juga bisa menggunakan CSS.

      Hapus
  13. Apakah google form yang digunakan untuk mengumpulkan tugas juga menggunakan form jenis yang sama?

    BalasHapus
    Balasan
    1. Sama, tapi sudah dibuat lebih dinamis melalui integrasi dengan bahasa pemrograman yang lain, serta dilengkapi dengan algoritma yang lebih baik untuk menanggapi respon para user.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -