Cara Membuat Form Menggunakan HTML atau PHP

Dalam sebuah website biasanya terdapat satu atau lebih form, seperti form pencarian, registrasi dan lain sebagainya. Form ini biasa digunakan untuk mengumpulkan data dari pengunjung website. Sebuah form, boleh jadi memiliki beragam kontrol, mulai dari text input, Combo box, Button dan lain sebagainya. Kita akan mempelajari sebagian kontrol yang disebutkan diatas karena kontrol di atas adalah yang paling sering digunakan dalam halaman web. Form di HTML dan Control-Control Form Lengkap input box, Radio Button, Check Box, Text Area, List, Password, File dan Button

A. Pengertian HTML
HTML atau yang merupakan singkatan dari Hypertext Mark Up Language adalah bahasa standar pemrograman untuk membuat suatu website yang bisa diakses dengan internet. Dengan kata lain halaman website yang kita lihat dan kita baca disusun dengan menggunakan bahasa ini dan kemudian diterjemahkan oleh komputer agar dapat dipahami oleh penggunanya. Html merupakan standar pembuatan website secara luas agar laman website dapat ditampilkan pada layar komputer.

Baca Juga : Cara Membuat Tabel Yang Benar Menggunakan HTML atau PHP

Html disusun dengan kode dan simbol tertentu yang dimasukkan ke dalam sebuah file atau dokumen. Jadi setiap Anda membuka website apapun dengan menggunakan browser maka web tersebut dibuat dengan menggunakan html.

B. Fungsi HTML
Html yang dikenal sebagai bahasa pemrograman dalam ilmu komputer memiliki beberapa fungsi, diantaranya adalah sebagai berikut:

1. Fungsi utama html yang diketahui adalah untuk membuat suatu halaman website yang bisa dibaca dan dipahami oleh pengguna dengan lebih mudah. Seluruh laman website yang ada dalam internet dibuat dengan html dan tidak ada pengecualian.
2. Menandai teks pada suatu laman, html ditulis pada suatu halaman dokumen dengan tag atau simbol tertentu dimana simbol dan tag tersebut akan menandai teks menjadi tebal, miring, bergaris tebal dan lain sebagainya. Misal jika kita membuat suatu teks menjadi teks miring atau italic, dalam laman html dituliskan kode <i>, <b> untuk teks tebal dan <u> untuk teks bergaris bawah.
3. Sebagai dasar website, website yang dibuat tentunya memiliki beberapa fitur yang dibuat dengan menggunakan java script (untuk mengatur perilaku web), implemetasi bahasa pemrograman server PHP, dan mendesain web menggunakan CSS. Semua bahasa tersebut dapat diaplikasikan jika web memiliki bahasa html sebagai dasarnya.
4. Menampilkan tabel, gambar, video, dan lainnya. Biasanya dalam website atau blog kita tidak bisa langsung meletakkan tabel, gambar maupun video oleh sebab itu komponen tersebut diletakkan pada web dengan menggunakan bahasa html.
5. Menandai elemen dan membuat online form, html juga berfungsi untuk menandai bagian-bagian dalam website diantaranya header, main, footer, navigation dan lain sebagainya. Selain itu html juga biasanya digunakan sebagai bahasa dalam membuat suatu online form atau formulir digital.

C. Cara Membuat Form Menggunakan HTML atau PHP
Pertama-tama, pembuatan sebuah form diawali dengan tag <form>, dan setiap kontrol-kontrol yang dibutuhkan ditempatkan di dalam tag ini. Tag <FORM> memiliki dua atribut yang penting, yaitu atribut METHOD untuk menentukan bagaimana form diberlakukan, dan atribut ACTION yang sering diisikan URL tepat pemrosesan form selanjutnya. Struktur dasar form dapat dituliskan sebagai berikut:

Baca Juga : Cara Validasi Markup HTML

Input Box

Input box adalah inputan pada form yang memungkinkan user memasukkan string dalam satu baris. Untuk membuat input box, HTML menyediakn tag <INPUT> dan memanfaatkan atribut TYPE=”Text”. Atribut pada tag <INPUT> lainnya adalah NAME untuk menyatakan nama dari input tersebut, VALUE untuk menyatakan nilai dari suatu input, dan SIZE untuk menyatakan panjang sebuah input. Contoh berikut simpan dengan nama input_box.html.

Method merupakan komponen untuk melakukan aksi dari file yang dituju, dimisalkan method post berarti form akan mengirimkan sebuah data input. Sedangkan action merupakan aksi dari data input yang dikirimkan. Dengan kata lain file ini (input_box.html) akan diteruskan ke file simpan.php untuk diproses.

Hasil dari kode diatas adalah:

Radio Button

Bila atribut TYPE pada tag <INPUT> Anda ganti dengan “Radio” maka Anda sudah mendefenisikan sebuah radio button. Buat kode berikut, simpan dengan nama radio.html.

Perhatikan contoh HTML di atas. Anda akan menemukan bahwa pada input type radio button terdapat atribut CHECKED. Atribut ini menandakan bahwa radio button tersebut diaktifkan. Pada radio button Anda hanya bisa mengaktifkan satu pada satu saat.

Hasil kode diatas adalah:

Check Box

Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan, pada input type checked box Anda dapat memilih satu atau beberapa pilihan, atau tidak memilih sama sekali. Pilihan ini biasanya dipakai untuk memasukkan data yang sifatnya opsional. Anda dapat menggunakan “Checkbox” pada atribut <INPUT>. Untuk lebih jelasnya tuliskan kode berikut dan simpan dengan nama check.html.

Hasil kode diatas adalah:

Textarea

Text area biasanya digunakan untuk menginputkan karakter yang sangat panjang dan dapat mengikuti seperti halnya multiline, sebagai contoh digunakan untuk memasukkan alamat, keterangan, atau berita. Contoh berikut, simpan dengan nama textarea.html.

Hasil kode diatas adalah:

List

List atau terkadang disebut juga combo box digunakan untuk memilih pilihan yang telah disediakan, pilihan dapat dipilih hanya satu dari beberapa yang disediakan, penggunaan list biasanya digunakan untuk memilih tanggal lahir, agama, pekerjaan dan lain-lain. Contoh berikut sebagai pemahaman dan simpan dengan nama list.html.

hasil kode diatas adalah:

Password

Sebenarnya password berasal dari input box, akan tetapi pada TYPE text diganti dengan “password” untuk mendeklarasikan sebuah kode tersembunyi yang berupa * dan sebagainya. Perhatikan contoh berikut, tulis dan simpan dengan nama password.html.

Hasil kode diatas sperti berikut:

File

Yang dimaksud dengan File adalah sebuah Inputan yang manghasilkan tampilan input box disertai tombol BROWSE. Pada dasarnya File sama saja dengan password yakni berasal dari input box, jika pada password Type diganti dengan “Password” sedangkan pada Type pada File diganti dengan “File”. Buatlah contoh berikut simpan dengan nama file.html.

Hasil dari kode diatas seperti berikut:

Button

Hal terpenting dari form adalah Button, button merupakan fasilitas proses sistem data yang akan dijalankan, tanpa adanya button proses data tidak akan dapat dilakukan. Untuk lebih jelasnya, ketikkan kode berikut kemuadian simpan dengan nama button.html.

Hasil dari kode diatas seprti berikut:

Dalam tutorial ini, saya tidak akan membahas bagaimana cara memroses data yang dikumpulkan dari form tersebut, karena dalam HTML kita tidak bisa melakukan proses pengolahan data. Ingat bahwa HTML hanya digunakan untuk memformat dokumen, bukan untuk memroses data.

Untuk memroses data, kita bisa menggunakan bahasa pemrograman web, seperti Javascript atau PHP atau bahasa pemrograman web lainnya. Dengan bahasa pemrograman seperti Javascript atau PHP anda dapat mengolah data-data yang dikumpulkan dari Form HTML untuk diproses dan dikeluarkan kembali menjadi suatu informasi baru.

Nah Bagaimana…? apakah sekarang kamu sudah mengerti apa itu Form dan control-control form di html? Mungkin itu saja tulisan yang membahas tentang Form dan control-control form di html, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.

Share :