Download Source Code Aplikasi

Cara Menciptakan Form Dengan Html (Tag Form)

Saturday, August 17th, 2019 - Html

Form berfungsi untuk mengumpulkan atau menampung data dari user atau orang yang berkunjung ke website kita. Beberapa tumpuan form yang paling umum dipakai antara lain form login, form pendaftaran (Sign Up), form kontak, dan lain-lain.

Form merupakan sebuah interface yang dibentuk untuk mengumpulkan data dari user yang nantinya form tersebut akan diproses dengan banyak sekali bahasa pemrograman web ibarat PHP atau JavaScript, kemudian data tersebut disimpan di dalam sebuah Database. Pada tutorial Membuat Form dengan HTML kali ini kita hanya membuat tampilan Form saja tanpa memakai PHP atau JavaScript dan form tersebut tidak akan diproses.

cara membuat form html - Cara Menciptakan Form Dengan Html (Tag Form)

Untuk membuat form di HTML ada beberapa tag dasar yang digunakan, yaitu : tag form, tag input, tag textarea, tag select dan tag option. Sebelum kita mempraktekkannya, sebaiknya kita pahami dulu fungsi dari beberapa tag dasar tersebut.

Tag-tag yang dipakai untuk membuat form :

1. Tag <form>

Tag form merupakan tag yang paling awal dipakai untuk membuat sebuah form. Penulisan tag form harus diawali dengan <form> dan diakhiri dengan </form>. Tag form juga membutuhkan beberapa atribut untuk sanggup berfungsi dengan seharusnya, ibarat atribut action dan method.

Atribut action
Atribut action berfungsi untuk memberitahu web browser kemana data form tersebut dikirimkan. Untuk nilai dari atribut ini biasanya sebuah alamat dari halaman PHP yang dipakai untuk memproses data form tersebut. Contoh sederhananya sebagai berikut :


Pada tumpuan di atas isi form akan diproses oleh halaman proses.php

Atribut method
Atribut method berfungsi untuk menjelaskan kepada web browser bagaimana data form akan dikirim, nilainya sanggup berupa get atau post.
Perbedaannya yakni jikalau kita memakai method get, maka isian fom akan terlihat pada url browser dan biasanya method get ini dipakai untuk query pencarian.
Sedangkan method post biasanya dipakai untuk data yang lebih sensitif ibarat pendaftaran user yang mana didalamnya terdapat usrname, password, dan lain-lain. Data hasil form ini tidak akan terlihat pada browser.
Contoh :

2. Tag <input>


Tag input merupakan tag yang paling banyak dipakai di dalam form dan bentuknya juga majemuk dengan fungsi yang berbeda pula. Tag input terdiri dari isian untuk teks biasa, teks password, checkbox, radio, dan tombol submit.

Tag input sanggup dibedakan bedasarkan atribut type, di antaranya yakni sebagai berikut :

a. <input type=”text” /> atau sanggup juga ditulis sebagai <input /> yakni sebuah textbox biasa yang sanggup menampung inputan berupa teks. Atribut ini biasanya dipakai untuk inputan nama, username dan inputan berupa teks pendek lainnya. Bentuknya kira-kira ibarat di bawah ini :

Nama :

b. <input type=”password” /> yakni inputan yang hampir sama dengan type text kalau dilihat dari tampilannya, namun teks yang diinput tidak akan terlihat tetapi akan berupa bulatan atau bintang. Biasanya type password dipakai untuk menginput password. Berikut tumpuan untuk type password :

Password :

c. <input type=”checkbox” /> merupakan inputan yang berupa checkbox yang sanggup dicentang, User sanggup mencentang checkbox ini lebih dari satu dan bahkan user boleh tidak mencentangnya. Biasanya checkbox dipakai untuk menentukan beberapa item yang tersedia, contohnya hobi. Berikut penampakan checkbox :

d. <input type=”radio” /> yakni inputan yang ibarat dengan checkbox, namun user hanya sanggup menentukan satu dari pilihan group radio. Radio berbentuk ibarat bulatan, tumpuan inputan type radio yakni jenis kelamin. Berikut penampakan radio :
e. <input type=”submit” /> merupakan inputan berupa tombol untuk memproses form, biasanya tombol diletakkan pada baris terakhir dari form. Berikut penampakannya :

3. Tag <textarea>


Textarea intinya hampir sama dengan input type text, perbedaannya kalau input type text ukurannya lebih kecil dan jumlah huruf yang diinput biasanya sedikit, sedangkan textarea berukuran lebih besar dan sanggup berisi banyak baris. Panjang dan baris untuk textarea sanggup diatur melalui atribut rows dan cols, atau sanggup juga melalui CSS.

Berikut tumpuan penggunaan textarea :


Berikut karenanya :

4. Tag <select>


Tag select berfungsi untuk inputan yang nilainya telah tersedia di dalam form atau lebih ibarat dengan box pilihan, dan user hanya sanggup menentukan dari nilai yang ada. Untuk membuat sebuah box pilihan, tag select harus dipakai bersama dengan tag option.

Berikut tumpuan penggunaan tag select :


Berikut karenanya :

Nilai yang akan dikirim oleh form berupa teks yang berada di antara tag option, kecuali kita menambahkan atribut value ke dalamnya. Jika atribut value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya nilai value ini tidak akan tampak di dalam tampilan form, form hanya menampilkan teks yang berada di antara tag option.

Selain tumpuan di atas, tag select mempunyai atribut selected yang sanggup ditambahkan biar tag select berisi nilai awal. Sebagai contohnya kita akan menampilkan bulan mei sebagai nilai awal :


Berikut karenanya :

Mengenal Atribut: Name


Setiap tag input di dalam form harus ditambahkan atribut name biar sanggup diproses oleh web server. Di dalam halaman proses (yang biasanya berupa bahasa PHP), nilai dari atribut name inilah yang akan menjadi variabel form.
Berikut tumpuan penggunaannya :

Cara Membuat Form dengan HTML

Setelah kita memahami wacana tag-tag yang dipakai untuk membuat form dan atribut yang terdapat di dalamnya, kini kita akan membuat sebuah form HTML. Silakan buka text editor, kemudian salin arahan di bawah ini dan simpan sebagai form.html

Contoh penggunaan tag form :


Berikut karenanya :

cara membuat form html a - Cara Menciptakan Form Dengan Html (Tag Form)

Sekarang kita telah berhasil membuat sebuah form secara utuh walaupun tampilannya kurang menarik alasannya yakni tidak ditambahkan CSS. Perlu diperhatikan bawha untuk atribut target aku mengisinya dengan: form.html dan atribut method dengan nilai get, sehingga pada ketika tombol proses di-klik perhatikan perubahan pada alamat address kafetaria browser ibarat berikut :

file:///D:/belajar%20html/form.html?nama=Nama+Kamu&password=&jenis_kelamin=pria&berenang=on&asal_kota=Kota+Semarang&komentar=…Komentar……%0D%0A

Sampai di sini kita sudah sanggup membuat form utuh di dalam html, untuk merubah tampilannya supaya lebih menarik kita sanggup menambahkan arahan CSS yang insya allah akan aku buatkan tutorialnya.

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
(Telah didownload 59 kali, 2x didownload hari ini)
Download Source Code Aplikasi
Cara Menciptakan Form Dengan Html (Tag Form) | Ahmad Code | 4.5

Hosting Unlimited Indonesia