Cara Membuat Form Pada HTML Untuk Pemula Beserta Penjelasannya

5 min read

cara membuat form pada html untuk pemula

Website yang baik itu website yang bisa membuat penggunanya menjadi lebih interaktif. Tidak hanya untuk membaca informasi saja, website dapat disebut interaktif apabila memungkinkan penggunanya dapat melakukan sesuatu di dalamnya. Interaksi yang biasanya dilakukan pada website selain mengklik ialah mengetik.

Banyak aktivitas yang bisa dilakukan oleh pengguna dalam sebuah website dengan mengetik, mulai dari login ke sebuah akun, memposting sesuatu, berkomunikasi dengan teman, dan sebagainya. Dari berbagai aktivitas mengetik tersebut, user berinteraksi dengan komponen form.

Membuat Form Pada HTML

Dalam sebuah website, dikenal yang namanya form. Sesuai uraian saya diatas, form ini berguna untuk mendapatkan informasi dari pengguna. Contoh, pada saat ingin login ke facebook, Anda mengisikan alamat email dan password pada kotak putih yang kemudian mengklik sebuah tombol berwarna biru. Ketiga elemen tersebut dikelompokkan dan dinamai “form login”.

Untuk membuat form pada sebuah halaman web, ketikkan script ini di file html Anda :

[sourcecode language=”plain”]

   
        Belajar Membuat Form Pada HTML – Makinrajin
   
   





[/sourcecode]

Dalam tag

sendiri, terdapat 2 atribut pokok yang sering digunakan, yaitu action dan method.

Atribut action berfungsi untuk mengirimkan data yang ada pada inputan ke sebuah script (biasanya PHP) yang kemudian akan diproses lebih lanjut. Berikut ini adalah contoh penulisan atribut action pada tag .

[sourcecode language=”plain”]


   

[/sourcecode]

Sedangkan method ialah metode atau cara yang digunakan dalam mengirimkan data ke action yang dituju. Atribut method hanya memiliki 2 value saja, yakni GET dan POST. Method GET, data yang dikirimkan akan nampak pada URL / Address bar. Sedangkan POST datanya tersembunyi. Berikut adalah cara menulis method pada

.

[sourcecode languauge=”plain”]


   

[/sourcecode]

Pada form yang ada pada sebuah halaman web, terdapat berbagai elemen / objek yang memungkinkan pengguna dapat berinteraksi, diantaranya adalah :

  1. Input Text

Elemen input text ini berfungsi untuk memungkinkan pengguna mengetikkan sesuatu yang panjangnya relatif pendek, misalnya nama, email, dan kata sandi. Untuk membuat input text, ketikkan script ini pada HTML Anda

[sourcecode language=”plain”]

[/sourcecode]

Penjelasan :

  • type : tipe dari elemen input. Karena di bagian ini kita bahas input text, maka value-nya adalah “text”
  • name : menamai inputan, nanti ada kaitannya dengan pemrosesannya
  • placeholder : memunculkan text dalam input yang akan hilang ketika input sudah ada isi / value-nya
  1. Input Radio

Input radio fungsinya untuk menyuruh pengguna memilih salah satu dari beberapa opsi yang ada. Yang paling umum kita jumpai radio ini untuk memilih jenis kelamin dan memilih jawaban dari sebuah pertanyaan.

[sourcecode language=”plain”]
Pria
Wanita
[/sourcecode]

Penjelasan :

  • Value : memberikan isi dari sebuah input secara default. Karena input radio hanya dapat di-klik, maka kita harus memberikan value-nya secara default. Atribut ini juga dapat diterapkan pada elemen input yang lain
  1. Input Checkbox

Fungsinya hampir sama seperti radio, yakni memilih opsi. Bedanya jika di radio user hanya bisa memilih satu opsi saja, kalau checkbox bisa lebih dari satu opsi. Biasanya, kita jumpai pada rules agreement

[sourcecode language=”plain”]
I agree with Rules Agreement
[/sourcecode]

  1. Input Date

Bentuknya hampir mirip dengan input text, namun data yang dapat dimasukkan melalui inputan ini hanya berupa format tanggal saja. Ketika input ini di-klik, maka muncul sebuah box semacam kalender yang disebut datepicker, fungsinya buat memudahkan user dalam memilih tanggal.

[sourcecode language=”plain”]

[/sourcecode]

  1. Input Email

Sekilas tidak ada yang berbeda dengan input text, baik dari bentuknya maupun format inputannya. Meskipun formatnya sama, input ini mampu memfilter yang diketikkan pengguna itu adalah alamat email. Kalau bukan alamat email, maka form tidak mau action.

[sourcecode language=”plain”]

[/sourcecode]

  1. Input Password

Masih berkutat di input yang jelas dari segi wujud tidaklah berbeda. Pada input password, bedanya dengan text hanya dari inputan yang tampil itu berupa bintang-bintang atau bulat-bulat. Ya karena biar kata sandi yang dimasukkan itu gak dilihat orang lain disekitarnya.

[sourcecode language=”plain”]

[/sourcecode]

  1. Input Number

Masih di input lagi. Yang membedakan input number ialah format masukannya yang hanya mengijinkan angka saja, selain itu tidak dibolehkan.

[sourcecode language=”plain”]

[/sourcecode]

  1. Textarea

Mirip seperti input box, tetapi textarea ini dipakai untuk menuliskan teks yang notabene value-nya lebih banyak dari input text. Biasanya, textarea dipakai buat menuliskan catatan yang bernilai banyak.

[sourcecode language=”plain”]

[/sourcecode]

Penjelasan :

  • cols : menentukan panjang kesamping (lebar) dari textarea
  • rows : menentukan panjwang kebawah (tinggi) dari textarea
  1. Select

Elemen select fungsinya sama dengan input radio, namun bentuknya yang berbeda. Jika di radio munculnya terlihat sedikit berantakan, maka di elemen select ini terlihat lebih simpel, karena opsi-opsinya disembunyikan pada sebuah box dropdown.

[sourcecode language=”plain”]

[/sourcecode]

Penjelasan :

  • Tag option merupakan opsi-opsi yang akan ditampilkan pada dropdown select
  1. Button

Dalam sebuah form, harus ada sebuah tombol yang ketiika diklik akan mengeksekusi inputan ke action yang dituju.

[sourcecode language=”plain”]

[/sourcecode]

Jika elemen button ini ada di dalam

, maka dia akan mengeksekusi form sesuai dengan action-nya. Tapi kalau tidak mau seperti ini, bisa ditambah atribut type=”button” di dalam tag button.

[sourcecode language=”plain”]

[/sourcecode]

type=”button” ini fungsinya untuk menandakan bahwa tombol ini bukanlah tombol submit, melainkan hanya sebuah tombol biasa.

Selain itu, Anda juga bisa membuat button dengan menggunakan tag seperti di bawah ini :

[sourcecode language=”plain”]

[/sourcecode]

Untuk value nya itu adalah tulisan di dalam tombol yang Anda buat. Jika Anda mengisi value dengan tulisan “Daftar” maka tulisan di dalam button / tombol itu adalah “Daftar”.

  1. Input Submit

Penulisan tag input submit ini adalah sebagai berikut :

[sourcecode language=”plain”]

[/sourcecode]

Memang secara sekilas output yang dihasilkan sama dengan tag input type button maupun tag button. Yang membedakan adalah proses di dalamnya. Tag input submit ini digunakan untuk mengirim inputan dari user. Lebih jelasnya Anda membaca artikel tentang perbedaan method POST dan GET pada PHP.

Latihan Membuat Form di HTML

Di atas kita sudah belajar mengenai form yang ada di HTML. Hanya omong kosong belaka jika belajarnya hanya sekedar membaca tanpa mencobanya. Maka dari itu, sekarang kita praktekkan bagaimana cara membuat formulir pendaftaran menggunakan HTML.

Pertama, buatlah sebuah script HTML dan ketikkan ini di text editor favorit Anda :

[sourcecode language=”plain”]


Formulir Pendaftaran – Makinrajin


Nama :

Email :

Password :

Telepon :

Jenis kelamin :


Alamat :




[/sourcecode]

Kemudian simpan di desktop aja, supaya mudah kita mencarinya. Simpan dengan ekstensi *.html. Kemudian, buka file-nya menggunakan web browser dan akan terlihat seperti gambar ini

membuat form pada html

Oh iya, di situ ada tag
. Jika Anda belum tahu, Anda bisa membaca artikel tentang penjelasan tag
dan tag

Hasil form di atas masih sangat sederhana dan belum bisa melakukan proses pendaftaran. Anda bisa merapikannya dengan menggunakan tabel HTML. Sedangkan agar form tersebut bisa melakukan proses pendaftaran, Anda perlu belajar PHP.

Nah, tutorial cara membuat form pada HTML sudah selesai. Anda bisa memodifikasi form yang telah Anda buat dan apabila ada kesulitan bisa ditanyakan di kolom komentar.