Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web. Pada tutorial belajar HTML: cara membuat form di HTML ini kita akan membahas cara penggunakan tag form di dalam HTML.
Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel MySQL. Untuk pembahasan lebih lanjut, saya akan menjelaskannya pada tutorial tentang PHP dan JavaScript.
Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option.
Pengertian tag <form>
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.
Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get (dimana ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.
Struktur dasar form akan terlihat sebagai berikut:
<form action="prosesdata.php" method="post"> ...isi form... </form>
Mengenal tag <input>
Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, semuanya dalam bentuk tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
- <input type="text" /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text
- <input type="password" /> dalam tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif seperti password.
- <input type="checkbox" /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
- <input type="radio" /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
- <input type="submit" /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.
Mengenal tag <textarea>
Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui atribut rows dan cols, atau melalui CSS.
Contoh penggunaan textarea adalah sebagai berikut:
<textarea rows="5" cols="20"> Text yang diisi dapat mencapai banyak baris </textarea>
Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.
Mengenal tag <select>
Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan.
Contoh penggunaan tag select adalah sebagai berikut:
<select> <option>Pilihan 1</option> Â Â Â <option>Pilihan 2</option> Â Â Â <option value="pilihan ketiga">Pilihan 3</option> </select>
Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam tampilan form.
Tag select memiliki atribut selected yang dapat ditambahkan agar tag select berisi nilai awal. Contoh penggunaanya adalah sebagai berikut:
<select> Â Â Â <option>Pilihan 1</option> Â Â Â <option>Pilihan 2</option> Â Â Â <option value="pilihan ketiga" selected>Pilihan 3</option> </select>
Mengenal Atribut: Name
Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses oleh web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau ASP), nilai dari atribut name inilah yang akan menjadi variabel form. Contoh pemakaiannya adalah sebagai berikut:
<input type="text" name="username"> <input type="text" name="email">
Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-masing akan dibedakan menurut atribut name.
Akhirnya, Sebuah Form Utuh
Merangkum seluruh tag form HTML yang telah kita bahas diatas, maka saatnya untuk membuat sebuah form HTML. Silahkan buka text editor, dan tuliskan kode HTML berikut, lalu save sebagai formulir.html
Contoh penggunaan tag form:
<!DOCTYPE html> <html> <head> <title>Belajar Membuat Form </title> </head> <body> <form action=" formulir.html" method="get"> Nama: <input type="text" name="nama" value="Nama Kamu" /> <br /> Password: <input type="password" name="password" /> <br /> Jenis Kelamin : <input type="radio" name="jenis_kelamin" value="laki-laki" checked /> Laki - Laki <input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan <br /> Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku       <input type="checkbox" name="hobi_nulis" checked /> Menulis       <input type="checkbox" name="hobi_mancing" /> Memancing <br /> Asal Kota:  <select name="asal_kota" >      <option value="Kota Jakarta"> Jakarta</option>     <option value="Kota Bandung">Bandung</option>    <option value="Kota Semarang" selected>Semarang</option>  </select> <br /> Komentar Anda: <textarea name="komentar" rows="5" cols="20"> Silahkan katakan isi hati anda </textarea> <br /> <input type="submit" value="Mulai Proses!" > </form> </body> </html>
Terlepas dari tampilan yang kurang rapi, kita telah membuat sebuah form utuh (tampilan form dapat diubah dengan mudah menggunakan CSS). Perhatikan bahwa untuk atribut target saya mengisinya dengan: formulir.html dan atribut method dengan nilai get, sehingga pada saat anda klik kombol mulai proses, perhatikan perubahan pada alamat address bar browser, akan tampil tambahan seperti berikut:
file:///D:/BelajarHTML/formulir.html?nama=Andi&password=rahasia &jenis_kelamin=laki-laki&hobi_nulis=on&asal_kota=Bandung &komentar=Sudah+mahir+html
Jika diperhatikan dengan lebih lanjut, semua isian form tampak terlihat dari baris ini (karena method form kita set menjadi get) setiap nilai dibatasi dengan karakter dan (&) sedangkan spasi di ubah menjadi karakter tambah (+)
Pembuatan form tampak sedikit rumit, namun ini sepadan dengan kemampuannya untuk menampung data yang berharga dari user kita. Dalam tutorial lainnya kita akan membahas tentang cara memproses inputan form ini dengan bahasa pemograman PHP.
Sampai dengan tutorial belajar HTML dasar yang ke-14 ini, kita telah membahas hampir seluruh tag-tag umum yang digunakan untuk membuat halaman web. Sebagai tutorial terakhir untuk merangkum apa yang telah kita bahas hingga tutorial ini, silahkan lanjut ke Tutorial HTML Dasar (Finish).
gan itu klo di klik Proses, jadinya gmn ???
Maksudnya kalau di klik tombol proses y gan? karena halaman ini hanya terdiri dari HTML, maka tombol prosesnya tidak berfungsi apa-apa. Untuk prosesnya, harus menggunakan bahasa pemograman web seperti PHP. Mudah2an g lama lagi saya akan buat artikel PHPnya…
Ada ketentuan tidak dalam memasukan "name" ?
Tidak ada ketentuan khusus untuk nilai dari "name", selama nilai tersebut tidak mengandung spasi dan beberapa karakter khusus seperti tanda seru, tanda tanya, dll.
itu kalo udah buat PHP nya, apakah yang "textarea" bisa muncul di PHP nya ?
caranya gimana ya ? saya pake textarea ga bisa muncul
Text area seharusnya bisa muncul di PHP. PHP biasanya digunakan untuk memproses isian text area, bukan untuk menampilkannya. Untuk menampilkan tag "text area" akan lebih baik tetap menggunakan kode HTML.
contohnya:
<?php
//kode PHP disini
?>
<textarea name="komentar" rows="5" cols="20">
<?php
//kode PHP disini
?>
</textarea>
mudah2an nanti saya akan bahas di bagian tuturial PHP agar lebih "pas" penjelasannya…
terimakasih gan, sangat membantu dalam pengerjaan tugas…….
Sama-sama faizal.. senang bisa membantu..
kalau mau buat "show password" bagaimana caranya?
Biasanya jika ingin membuat tombol untuk "show password" harus menggunakan javascript, yaitu dengan menukar type tag input. mudah-mudahan nanti saya akan buatkan tutorialnya,,,
mas tanya, itu biar tiap response dari hasil isi form masuk email gimana yak?
pelisssssss penjelasannya mas >.<
Untuk dapat mengirimkan ke alamat email, pemrosesan di sisi web servernya harus menggunakan PHP dan kemungkinan juga membutuhkan email-server. Saya sendiri belum sempat mencobanya, mungkin pembaca lain bisa membantu.. ^_^
Bagaimana cara agar input form berupa tanggal yang kompatibel dengan semua web browser? type=date hanya kompatibel dengan chrome.
Objek form dengan type=date merupakan salah satu dari objek form dalam HTML5, dan karena HTML5 masih tergolong baru, belum semua web browser mendukungnya. Saat ini memang baru google chrome yang bisa menampilkan objek form HTML5 ini.
Sebagai alternatif, bisa menggunakan javascript, terutama dengan jquery UI, untuk cara penggunaannya bisa mengunjungi Jquery UI date
mas suhu bisa tolong bantuin dong, saya coba2 bikin online shop, template gratisan dri maskolis dan domain jg gratisan dari hostinger, itung2 sekalian belajar,,, otak atik sending email malah jadi lari ke url sendiri, sy ganti action ke prosesdata.php jawabannya method not alowed, smpe mumet mentok disini mas,,hadehh tolong dikasih pencerahan&penerangan mas, udah seminggu muter2 disini :( arnowoaji@yahoo.co.id
Maaf y mas arno, comment-nya saya edit, karena kode program yang terlampir terlalu panjang :)
Kode yang di kirim adalah kode JavaScript yang cukup njelimet, hehe..
untuk merubah/mengedit suatu theme/template memang bukan hal yang mudah, bahkan mungkin lebih susah daripada membuat template dari asal, karena kita harus mempelajari alur dari template yang dibuat oleh programmernya.
Setiap theme/template juga sangat berbeda tergantung jenis CMS yang digunakan, apakah itu wordpress atau blogspot. Kalau untuk wordpresss, banyak plugin yang bisa digunakan untuk membuat online shop seperti Woocommerce atau WP e-commerce, namun saya sendiri belum mempelajari cara kerja dari theme tersebut.
Mungkin mas arno lebih baik kontak pembuat themenya, atau mungkin ada pembaca lain yang bisa bantu :)
saya disuruh membuat form pendaftaran, tapi saya tidak tahu cara membuat php agar saat tombol submit di click bisa keluar hasilnya.
jadi bagaimana cara menghubungkan HTML dan PHP nya.,?
kalo bisa tolon kasih contoh sederhana.,!
Kebetulan, duniailkom telah melengkapi tutorial PHP untuk menampilkan hasil form HTML. Untuk lebih jelasnya mas willy bisa mengunjungi halaman Tutorial PHP Cara Memproses Form HTML
Mudah2an bisa bermanfaat.. :)
Makasih Banyak Sangat Terbantu Buat Pekerjaan Sekolah :D
Terimakasih juga atas kunjungannya, semoga bisa bermanfaat…
Ka yg asal kota itu kan kondisinya ada tiga: jakarta,bandung,semarang. Kalau misalnya lebih dari 3 kota, rumusnya gimana yaa? mohon pencerahannya,,,makasih…
Pilihan kota dalam form diatas dibuat menggunakan tag <option> yang berada di dalam tag <select>, jadi jika jumlah kotanya lebih dari 3, makki tinggal menambahkan beberapa tag <option> seperti contoh diatas.
Untuk pembahasan lebih lanjut tentang tag select, bisa di baca pada Tutorial Form HTML: Fungsi dan Cara Penggunaan Tag Select. Semoga bisa membantu..
mas maaf klo pertanyaanny gk mutu ni, he …pemahaman saya agak kurang soal atribut "checked" di contoh form di atas, klo "selected" kn agar yg d beri atribut itu d tampilkan awal, klo "checked" untuk apa, d kode html saya, d tulis atau d hilangkan gk ada perubahannya..
dan yg bagian ini kenapa penulisan option jakarta bandung semarang berbeda-beda, agak bingung saya mas..hehe
Asal Kota:
Jakarta
Bandung
Semarang
Mohon maaf uwii, memang ada kesalahan di dalam kode form diatas, atribut checked seharusnya hanya berfungsi untuk checkbox dan radio button, fungsinya untuk menandai checkbox atau radio button pada saat form ditampilkan (misalnya, checkbox sudah otomatis terpilih), namun untuk tag <select>, fungsinya digantikan atribut selected (saya juga sudah koreksinya kode form diatas).
Perbedaan penulisan dalam tag option diatas adalah adanya tambahan atribut value. Atribut value ini memang tidak akan tampak pengaruhnya di halaman HTML, namun nilai atribut value inilah yang menjadi nilai untuk diproses ketika form dikirim ke server (misalnya menggunakan PHP), untuk tutorialnya telah saya buat di Tutorial Form PHP: Cara Membuat dan Memproses Form HTML dengan PHP.
Terimakasih atas pertanyaan dan koreksinya uwii.. :)
wah gk keluar… agan.. penggunaan "siku br slash siku" agar tidak terlalu 'mepet' apakah penulisannya ditulis lebih dari satu y gan ? atau ada cara lain?
Untuk 'mengakali' tampilan agar tidak terlalu mempet dan berjarak dari tag sebelumnya, dira bisa menggunakan tag <br> beberapa kali. Akan tetapi sebenarnya efek tampilan ini akan lebih cocok jika menggunakan CSS. Property CSS yang bisa digunakan untuk keperluan ini adalah: padding dan margin.
maaf gan, saya mau tanya. bagaimana ya cara agar password yang di tampilkan saat buat form login ketika di pilih checklist nya bisa berubah ke karakter, tidak bintang lagi.
terimakaish ya gan .
Untuk hal ini kita tinggal menukar atribut tag <input> dimana type="password" diubah menjadi type="text". Tetapi untuk merubahnya pada saat halaman HTML telah dijalankan harus menggunakan JavaScript.
Sebagai cara alternatif, bisa mengunjungi http://www.hongkiat.com/blog/reveal-hidden-passwords-in-browsers/ untuk melihat langkah mengubahnya menggunakan aplikasi web developer tool pada web browser.
oke gan, artikel yang sangat bagus dan bermanfaat,
mohon maaf kak, tapi setelah aku coba script penggunaan tag form yang kakak lampirkan di atas…. pass aku buka dan aku coba klik Submitnya(Mulai Proses) tidak bisa di jalankan yah kak?? jadi maksudku pass di klik submitnya(Mulai Proses) itu langsung keluar halaman baru… itu gmna yah kak?? Mohon bantuannya…. Terima kasih
Memang begitu Rangga. Seperti yang telah dijelaskan di bagian akhir tutorial ini, HTML digunakan hanya untuk merancang form. Untuk memprosesnya (dan juga agar tampil di halaman lain) kita harus menggunakan PHP.
Duniailkom telah membuat tutorial lengkap tentang cara penanganan form HTML dengan PHP. Silahkan dipelajari :)
maaf pak,
kalau mau bikin user dan password nya karakter nya lebih dari 10 angka n huruf gmn pak listing html nya
Kalau di sisi HTMLnya, tidak ada yang berubah kok. Kode HTML (text box) yang ada pada contoh di tutorial ini mendukung sampai 524288 karakter.
Tetapi kalau yang diinginkan adalah "memaksa" user menggunakan 10 karakter untuk password (dan menampilkan pesan error ketika password kurang dari 10 karakter), maka kita harus menggunakan JavaScript.
bang cara buat forgot password secara default gimana ya ?
forgot password ini maksudnya apa y gan? Apakah password sewaktu kita masuk ke akun sebuah website? Biasanya hal ini disetting di web browser, bukan di situsnya. Jika ingin menghapus password yang tersimpan, tinggal cara menu clear password / clear history / clear cookie di dalam web browser.
Bang,makasih banyak ilmunya…ini sangat membantu buat pemula seperti aku ^^
oya didalam kotaknya itu kn ada text nya ya…biar kalau di klik otomatis hilang gmn y? biar pada saat mau nulis gk usah hapus dulu…
Terimakasih juga atas komentarnya harlin. :)
Agar teksnya otomatis hilang ketika akan ditulis, biasanya harus menggunakan JavaScript. Tetapi HTML5 memiliki atribut baru untuk form: "placeholder". Cara penggunaannya adalah sebagai berikut:
Silahkan dicoba :)
Terima kasih bang, dah dicoba dan berhasil.
terus biar data yang diisikan terkirim ke email kita gmn?
Saya buat form pendaftaran, tapi tampilannya tidak rapi.
komponen formnya nempel di nama field yang akan diisi, memang dipisahkan pake : tapi kode tersebut tidak rata, mengikuti panjangnya nama field.
Bagaimana suhu supaya tempilannya rapi, : nya sejajar ke bawah
trims atas jawabannya.
Kalau mengenai tampilan, harus pakai CSS gan, tidak bisa pakai HTML saja. Kalau belum 'ngeh' dengan CSS, bisa pakai bantuan tabel. Tinggal masukkan form HTMLnya di dalam sel-sel tabel. Tapi cara ini memang tidak disarankan :) sebaiknya tetap menggunakan CSS.
apabila saya klik pada laki-laki dan perempuan tidahk boleh ubah maknanya jadi stuck
Untuk memproses form memang tidak bisa menggunakan HTML saja, tetapi harus menggunakan PHP atau Javascript. Jika di klik submit/kirim data, form diatas tidak akan memberikan nilai apa-apa.
Halo mas andre. Utk setiap tag diatas apakah harus selalu ditulis valuenya? Soalnya setelah saya coba, baik valuenya ditulis atau tidak maka tampilan di browsernya sama saja. Atau ada pengaruhnya mas?
Merujuk ke penjelasan di atas: "Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam tampilan form."
Iya, penulisan atribut value tidak akan ada efek apa2 di tampilan web browser. Nilai ini hanya berguna pada saat form di proses, misalnya dengan menggunakan PHP.
Jika nilai value tidak diisi, sebagian besar web browser akan mengirimkan teks yang ada diantara tag <option>pilihan</option>. Nilai value diisi jika kita ingin mengirim nilai yang berbeda. Misalkan di pilihan kita membuat "Sumatera Utara", namun agar lebih singkat ketika diproses kita bisa menambahkan atribut value='sumut'. Ini tidak diharuskan, tergantung kebutuhan programmer.
Fungsi atribut value ini akan lebih jelas jika sudah mempelajari PHP. Duniailkom sudah membahasnya di Cara Menampilkan hasil Form HTML dengan PHP.
Semoga bisa membantu :)
Mas saya agak bingung untuk atribut value ini, kan penjelasan Mas Andre atribut value ini agar lebih singkat ketika diproses (jika text nya disingkat juga), tapi pada coding di form atas, mas andre lebih detail nulis "kota jakarta" pada atribut value tsb, dibanding antara tag option yaitu jakarta. Untuk maksud lebih singkat ketika diproses itu gmn ya mas? Terima kasih :)
Ini yang lagi ane cari gan….
kebetulan semester ini ane belajar html.. Sangat membantu
Selamat belajar gan, mudaha2an bermanfaat.. :)
Gan cara untuk memberi link di
caranya kan gini bukan, Gan
Gan cara untuk memberi link di bagian "Mulai Proses" gimana?
Tombol "mulai proses" itu tidak bisa dikasih link gan, karena sudah ter-link secara otomatis ke atribut action dari tag <form>.
Jika ingin mengubah alamat pengiriman form, tinggal ubah atribut action pada tag <form>. Misalnya kita ingin mengirim form ke alamat register.php, maka tag form ditulis sebagai <form action="register.php">, dengan demikian, jika tombol "mulai proses" ditekan, jendela akan pindah ke halaman register.php.
oh kaya gitu ya Gan…
tapi saya buat pakai link di bagian submitnya bisa. tetapi sebagian ada yang bisa ada juga gak bisa, itu kenapa Gan?
apa karena atribut action pada tag nya?
Mungkin saja gan… tapi tujuan tombol submit hanya untuk memproses form. Apabila ingin menambahkan fungsi lain, sebaiknya menggunakan tag lain, seperti <button>, atau <a>
Thanks sebelumnya gan,
Kalo mau nambahin misalnya tombol simpan atau batal terus kalo misalnya salah satu tombol itu diklik ada konfirmasinya gimana gan?
kk tolong jelaskan lebih detail lagi tentang method GET dan POST
saya belum tau perbedaanya serta fungsinya
mohon penjelasannya kk
Klu mau buat form di blog bisa pake cara yg diatas gak?,terus gimana caranya agar hasilnt otomatis ngirim ke email ketika klik submit?mohon penjelasannya
Blognya seperti blogspot atau wordpress y? kalau menggunakan CMS seperti ini, agak susah untuk menginput kode HTMLnya. Sebaiknya menggunakan plugin/widget/script tambahan.
Agar hasilnya bisa dikirim ke email, hanya bisa jika menggunakan aplikasi tambahan atau hosting sendiri (blog berbayar). Karena kita perlu kode pemrograman PHP untuk membuat fitur ini.
siang min, widdy lagi belajar buat website, kesulitan pas bagian contact form, bagaimana caranya bisa data yang sudah di isi tersebut pas di klik kirim langsung terkirim ke email kita ? mohon pencerahanya
Websitenya buat sendiri atau sejenis blog seperti blogger atau wordpress y? Kalau buat sendiri, mungkin lebih gampang menggunakan aplikasi pihak ketiga seperti Google Form, kalau situsnya berupa blog, bisa menggunakan berbagai plugin yang tersedia. (Jika yang diinginkan adalah isian form akan langsung terkirim ke email)
type="radio" name="jenis_kelamin" value="perempuan" ,gan yg bgian name nya g ush di isi lagi ya,pas baca tadi agk bingung klau di tulis lgi nampil lgi dong jenis kelamin nya 2 x,pas di coba eh ya,atau ada yg slh coding gan???
yah komen ja slh ktik -_-,sory typo gan,mau nnya yg jenis kelamin nya ko muncul 2 kali ya??
eh gak jdi gan sya yg coding nya asl coba trnyta ketulis lagi jenis kelamin sebelum input pas di koreksi ,mksh gan postingan nya…sngt membantu !
Hehe… senang bisa membantu gan :)
Admin : tolong buatin saya form kaya gini
Judul Posr : …………
Deskripsi post : …………………. < isinya bisa upload foto maximal 5 bisa memperbesar text, pokoknnya semuanya deh kaya buat postingan/artikel di blogspot ntar saya bayar , kalo udah jadi kirim kodenya ke :
rifqy788@gmail.com , ntar saya bayar 25.000 kalo mau
Thank
Kalau 0-nya ditambah 1 lagi, baru saya mau gan…hehe
Untuk membuat fitur seperti ini lumayan rumit, soalnya kalau mau upload, harus membuat mekanisme PHP-nya juga. Belum lagi interface untuk menampilkan gambar tersebut. Tapi jika ada rekan2 yang berminat, silahkan hubungi agan rifqy :)
emang sangat membantu…….uda saya ikuti dari pertama sampai 15 wawasan saya jadi bertambah walau masih dasar…….thank bro…saya akan pelajari artikel di blok ini sampai habis…..
Silahkan gan.. saya ikut senang apabila tutorialnya bisa bermanfaat :)
gan dalam tag bedanya antara diberi value dan tidak itu apa ya? Konsekuensinya nanti gmn antara yg diberi value dan yang tidak? Mksh
Mohon maaf gan komennya terfilter, mungkin bisa diulang lagi pertanyaannya…
soalnya disini memang g bisa nulis tag HTML langsung pakai kurung siku, jadi bisa dikasih spasi seperti < submit >
Gan supaya passwordnya ada chatbox centang supaya tulisan terlihat dan tidak terlihat gmna ?
dan supaya jadi bitang" gmna ?
Walaupun terkesan sederhana, untuk membuat efek seperti ini harus menggunakan JavaScript gan, tidak bisa dengan HTML saja. Kalau untuk membuat jadi bintang malah lebih rumit lagi, soalnya textboxnya harus diganti dengan objek lain, lalu di style dengan CSS dan JavaScript :)
Gan, ada Cara lain Ԍå‎​к̲̮̲̅͡ untuk praktek html selain di pc, cos saya Ԍå‎​к̲̮̲̅͡ punya pc.di warnet nooteped Ԍå‎​к̲̮̲̅͡ bisa dibuka. Atas jawbannya saya ucapkan terimakasih
Agak susah sepertinya gan, tapi di android tersedia aplikasi seperti ini, misalnya WebMaster's HTML Editor Lite (bisa di search di Google play). Tapi saya sendiri belum mencobanya…
keren post nya ..
terus untuk tutorial" selanjutnya gan
Kalau buatcek box yang ijo di postingan kaya punya agan gimana ya ? sudah muter2 belum nemu htmlnya juga..
Oh, itu harus menggunakan CSS gan, dan (walaupun sepertinya sederhana) ini cukup kompleks. Check box itu menggunakan gambar icon yang sudah saya siapkan, lalu ditempatkan di sebelah list menggunakan kode CSS.
Saat ini memang belum ada tutorialnya di duniailkom. Mudah2an nanti saya sempat buat tutorialnya.
Oke gan, ane tunggu tutorialnya…
wah top banget tutor2 disini . . rows itu apa ya?
Makasih gan… rows itu dalam bahasa indonesia artinya baris :)
gan kalo nilai value nya gak diisi perasaan gak ngaruh yah, ane baru pemula nih. mohon pencerahannya
Untuk tampilan memang tidak pengaruh gan, butuhnya nanti jika form akan diproses dengan bahasa pemrograman server seperti PHP.
Mengapa dianjurkan untuk menggunakan tag pada pembuatan formulir ?
Artikelnya sangat membantu….
thank's ya..
bagaimana cara upload website ke internet secara gratis gan…?
Bisa coba ke idhostinger.com gan, mudah2an nanti saya sempat buat tutorial lengkapnya :)
bagaimana syntax untuk mengubah value sebuah checkbox, dari keadaan tidak tercentang, menjadi tercentang?
Bisa menambahkan atribut checked, seperti berikut ini:
<input type="checkbox" name="target1" value="Belajar_HTML" checked>
Semoga bisa membantu :)
Mas Andre mau tanya,
Bagaimana cara membuat form search box, yang kalau diproses akan menampilkan hasil pencarian + dynamic linknya ya?
Seperti website DuniaIlkom ini, jika kita search "sesuatu" maka hasilnya akan muncul beserta linknya.
Karena pada umumnya hanya menampilkan kata yg dicari pada database dan kata tersebut tidak "ter-link"
Thanks Mas Andre atas penjelasannya
Sebenarnya yang tampil di hasil pencarian web ini adalah link ke artikel yang mengantung kata yang dicari mas.
Secara sederhana, yang disimpan di database sudah termasuk link ke artikel tersebut. Jadi ketika kita mencari kata 'sesuatu', kode program (dibuat dengan PHP-MySQL) akan mencari artikel mana saja yang mengandung kata ini. Setelah ditemukan, lalu ambil link ke artikel tersebut dan ditampilkan.
Kode programnya sendiri akan cukup rumit, terlebih lagi jika dimasukkan faktor prioritas, seperti artikel mana yang ditempatkan di nomor 1, 2, dst :)
mau nanya nih cara agar pada form misalkan kita kasih password trus passwordnya hanya satu yg bisa dimasukkan bukan password lain???
Mohon maaf, saya agak bingung dengan pertanyaannya…
Apakah maksudnya ingin buat form yang isian passwordnya cuma 1 kata/kalimat saja? dan jika diisi dengan kalimat lain akan error? Jika iya, untuk pembuatan seperti ini kita harus menggunakan PHP, tidak hanya HTML :)
Saat ada orang yg mengisi from itu kemudian dia mengeklik tombol submit. kemudian bagaimana caranya agar saya bisa tau hasil submitan orang itu tadi ???
mohon infonya gan please !!!!
Harus pakai PHP gan, penjelasannya bisa kesini: Cara Menampilkan hasil form dengan PHP.
Bagaimana caranya agar teks pada komponen teks bisa dibaca tetapi tidak bisa diedit?
Mohon pencerahannya min…
Tks
Bisa ditambahkan atribut disabled gan, penjelasannya bisa lanjut ke Tutorial HTML Lanjutan Form Duniailkom.
terimakasih tutorialnya… sangat bermanfaat
makasi ini sangat berman faat bagi saya seorang pemula
gan bagaimana kalau setelah kita membuat form dan memasukkan pass&id lalu kita proses harus masuk ke web buatan kita,,,itu gimana ya caranya ? mohon bantuannya
tapi saya sangat terbantu dengan artikel sebelumnya ^-^
Untuk pemrosesan form harus menggunakan bahasa pemrograman server gan, seperti PHP. Jadi singkatnya, agan bisa lanjut belajar PHP :)
Mas Andre mau tanya..
untuk bagian "website" pada form komentar, paling cocok menggunakan input type apa ya?
apakah type="teks" atau ada yang lain?
Lalu bagaimana dengan validasinya? mohon bantuannya..
thanks.. :)
Lebih cocok <textarea> mas, soalnya komentar bisa terdiri dari beberapa baris.
Mengenai validasi, udah bagian PHP nih, dan cukup panjang untuk dibahas, hehe…
Misalnya kita harus periksa dulu apakah komentar ini berisi atau tidak dengan fungsi isset(), lalu apakah tag HTML dibolehkan atau tidak. Jika tidak boleh (untuk keamanan) bisa menggunakan fungsi strip_tags() atau htmlentities().
Beberapa sudah saya bahas di tutorial PHP bagian pemrosesan form. Untuk lebih detail, akan saya bahas di eBook PHP, yang mungkin dalam 2-3 minggu lagi sudah bisa selesai :)
Wah, makasih Mas Andre respondnya cepat :)
tapi maksud saya adalah bagian "Website" pada form bukan bagian "komentar" mas..
seperti komentar di DuniaIlkom ini terdiri nama, email, "Website" (maksud saya website ini), pesan.
lebih cocok menggunakan input apa ya?
Untuk eBooknya sdah saya tungguin sejak lama hehe, mungkin bisa di email ke saya apabila eBook PHPnya sudah selesai :)
thanks.
Hehe, iya mas kebetulan tadi lagi istirahat habis nulis materi eBook PHPnya.
Oh, untuk bagian itu, iya mas pakai <input type="text">. Sebenarnya di HTML5 ada yang lebih cocok, yakni <input type="url">, tapi kalau tidak ditulis bagian "http://"-nya, akan keluar pesan error. Jadi sedikit merepotkan.
Mengenai tampilan formnya, nanti bisa di-style dengan CSS :)
mandek di sini saya…ada cara yang mudah gak ya???
Hehe, ini termasuk yang mudah kok gan..
Khusus untuk tutorial form ini, juga tersedia tutorial lanjutannya. Atau versi yang lebih lengkap saya sajikan di eBook HTML Uncover Duniailkom :)
hehe, udah bisa kok…
terimakasih sudah berbagi ilmunya..
sekarang lagi belajar html lanjutan…
thx
Mau tanya min …
itu gimana min untuk merapikan form htmlnya, soalnya nggak sejajar dan berantakan ?
Untuk merapikannya bisa menggunakan kode CSS gan. Atau bisa juga dimasukkan ke dalam tabel (tidak disarankan).
Misi Gan… kalo form input itu ketika pengunjung masukin nama dan alamat tapi bisa langsung tampil di sebelahnya, jadi seperti ini….
nama:……………
Alamat:……………
(pengunjung bisa langsung input di titik titik tersebut atau form disebelahnya dan save otomatis dan hasilnya tersimpan di tititik titik tersebut dan ketika ada pengunjung lain singgah dan merubah isian tersebut dan begitu seterusnya…… Mohon bantuannya..terima kasih
Kalau langsung bisa diedit seperti itu harus pakai JavaScript gan, dan kodenya lumayan rumit tuh.
Atau bisa juga dengan PHP, tapi halamannya akan reload setiap ada perubahan. Untuk membuatnya harus paham cara penggunakan HTML dan PHP (terutama pemrosesan form).
Oh ya, kalau ingin pakai PHP, di blogspot g bisa, harus di website yang hosting sendiri.
Makasih banyak bro semua tutorialnya, semoga berkah selalu
Thank you very much, this is will be help me for working my homework.
selamat siang gan
saya mau bertanya biasanya di dalam form suka ada pengecekan jika email yang di masukan salah atau tidak tersedia …untuk membuat seperti itu bagaimana ya gan? jika ada yang tau mohon kebaikan hatinya mengirimkan progres berbentuk notepad juga tida apa apa ke email bobitetsuya@gmail.com
Itu namanya pembuatan validasi gan. Butuh bahasa pemrograman JavaScript atau PHP, dan lumayan kompleks tuh. Di eBook PHP Uncover saja saya butuh 50 halaman lebih untuk membahas tentang validasi form ini. Contoh sederhananya bisa cek kesini: https://www.duniailkom.com/tutorial-form-php-cara-membuat-validasi-form-php-fungsi-isset-dan-empty/
klo membuat tombol submitnya otomatis hilang setelah diklik bagaimana?
misalnya ada sebuah form untuk menyetujui suatu request dan setelah diklik tombol setujui otomatis tombolnya berubah jadi text (misalnya "anda telah menyetujui") dan akan tetap jadi teks terus seperti itu walaupun ditampilkan beberapa kali setelah di klik setujui.
mohon bantuannya
Thanks )
Itu harus pakai JavaScript gan, g bisa dengan HTML saja. Dan kode programnya juga akan rumit tuh.
Contoh pembuatannya bisa lanjut ke tutorial berikut (ini hanya contoh cara menampilkan dan menyembunyikan sebuah element HTML menggunakan jQuery): https://www.duniailkom.com/tutorial-belajar-jquery-cara-membuat-efek-show-dan-hide-jquery/
ok gan
thanks bantuannya
:)
Gan bisa ga kalo di form di pencet enter pada input textnya terus pindah ke input text selanjutnya ?
Bisa gan, tp udah butuh kode JavaScript tuh, soalnya secara default ketika tombol enter di tekan, form akan tersubmit (di kirim ke server), bukan pindah ke baris inputan dibawahnya. Untuk pindah baris ini biasanya kita menggunakan tombol "tab", bukan "enter".
Bagaimana caranya membuat tulisannya berubah warna biru ketika menulis di tabel alamat email ?
Itu mesti pakai CSS gan, contohnya bisa seperti ini:
<input type="text" name="email" style="color: blue">
Terima Kasih infonya gan ????????????
saya mau tanya gan, semisal saya punya website dan websitennya saya beri tombol " Send Message ". Yang saya bingung kan untuk memasuk kan code di dalam " Send Message " untuk mengirim ke email saya itu gimana gan..
mohon infonya… Terima Kasih
Cukup rumit tuh gan, kode programnya mesti pakai PHP, g cukup dengan HTML saja. Dan ini juga hanya bisa dilakukan dari web yang sudah online (sudah sewa web hosting), tidak bisa dibuat di komputer sendiri secara offline.
saya mau tanya gan, dalam contoh di atas kan pada "Jenis Kelamin" menggunakan *tag <input type="radio" dan pada contoh di atas menggunakan atribut value. Begitu juga untuk "Asal Kota" yang menggunakan *tag <select> juga menggunakan atribut value.
Menurut salah satu penjelasan di atas atribut value bila digunakan pada *tag <input type="text" bisa diisi nilai tampilan awal dari text, tapi apakah untuk *tag <select> dan <input type="radio" harus menggunakan value? Soalnya kedua tag ini kan bukan berupa nilai yang bisa kita isi sendiri, sebagai tampilan awalnya kita menggunakan atribut "checked" dan "selected." Mohon pencerahannya gan.. terimakasih
Fungsi utama dari atribut value ini adalah saat pemrosesan form menggunakan PHP nanti. Ketika nilai form diproses, PHP akan mengambil nilai dari atribut value.
Sebagai contoh, jika saya memiliki sebuah tag <checkbox>:
<input type="checkbox" value="jambu"> Jeruk
Yang akan di terima PHP nanti adalah nilai "jambu", bukan Jeruk. Padahal di tampilan form, nilai "jambu" ini tidak akan tampil, yang tampil adalah "Jeruk". Ini akan dipahami jika sudah belajar pemrosesan form menggunakan PHP.
Sebagai tambahan, fungsi atribut di tag HTML bisa berbeda2 jika digunakan di tag yang berbeda. Contohnya seperti atribut value ini, untuk tag <input type="text">, hasilnya langsung terlihat, sedangkan untuk <input type="text">, nilai atribut ini tidak terlihat. Untuk <textarea> malah tidak punya atribut value.
Ohh gitu mas.. Oke deh saya lanjut dulu belajar HTMLnya. Semoga bisa kbeli jg ebooknya bsok klo ada rjeki. Mksh mas
mas, gmn cara menuliskan value dalam <option> dengan maksud untuk memilih semua <option>
contoh kasus : ingin menampilkan data kelas I, II dan III.
————
Tampilkan kelas
<select name="kelas_siswa">
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="??????????????">Tampilkan semua kelas</option>
</select>
Untuk membuat fitur interaksi seperti itu harus menggunakan JavaScript mas, g bisa dari HTML saja.
TERMIKASIH
atas infonya mas. ini sangat berguna bagi pemula.
Mau tanya lagi mas gan, setelah dicoba2 lagi malah makin banyak pertanyaan hehe..
1. Apakah semua atribut name harus menggunakan tanda "_" contoh pada "jenis_kelamin" ?
2. Apakah tidak semua tag harus diisi atribut value, seperti pada tag option ada atau tidak adanya atribut value berarti tidak masalah, di contoh juga pada asal kota "Bandung" langsung ditulis tanpa menggunakan atribut value ?
3. Kenapa pada contoh "hobi" tidak diberi atribut value seperti pada contoh "jenis kelamin" dan "asal kota" bukannya atribu value nanti yg akan dioalh oleh PHP ?
4. Kenapa pada "jenis kelamin" (Laki – Laki) dan "hobi"(Memancing) ditulis diluar tag input, sedang pada "asal kota" kota (Jakarta dll) ada dalam tag option ?
Maaf banyak tanya mas gan..
1. Tanda "_" digunakan sebagai pengganti spasi, karena akan menjadi masalah nanti di PHP jika atribut tersebut ditulis "jenis kelamin" (g boleh ada spasi). Alternatif lain, buat atribut yang tanpa spasi, seperti "jeniskelamin", atau "jenkel".
2. Setiap tag HTML punya ciri masing2, kebanyakan objek form memang memiliki atribut "value", tapi g selalu, contohnya tag <textarea> dan <select>. Jadi beda2 tergantung jenis tag-nya.
3. Yup betul, di PHP nanti nilai dari atribut value-lah yang akan diproses. Karena tutorial ini hanya seputar HTML, saya g menyingung sampai kesana, ini akan menjadi jatah tutorial pemrosesan form dengan PHP.
4. Sama seperti jawaban yang kedua, setiap tag punya aturan penulisan masing, jadi g harus seragam.
Demikian gan.. :)
oke terimakasih mas banyak mas gan.. :)
gan kalo membuat form secara berdampingan, misal :
Nama : Agus Umur : 25 Tahun
Tgl Lahir : 17 Agustus 1991 Tempat Lahir : Bandung
dan begitu seterusnya kebawah menjadi dua kolom, gmn ya gan?
makasih…jazakumulloh…
Paling gampang bisa pakai tabel, misalnya seperti:
<table>
<tr>
<td>Nama: Agus</td>
<td> Umur: 25 Tahun</td>
</tr>
<tr>
<td>Tgl Lahir: 17 Agustus 1991</td>
<td>Tempat Lahir: Bandung</td>
</tr>
</table>
Tp ini tidak disarankan. Untuk jangka panjang (dan sesuai standar terbaru), sebaiknya menggunakan CSS untuk mengatur tampilan web.