Belajar HTML Part 20 Cara Membuat Form di HTML Part 1
Hampir semua website pasti memiliki form yang digunakan melakukan interaksi dengan pengguna website tersebut, seperti form login, form registrasi, form transaksi dan masih banyak lagi form lain.
Dalam tutorial ini kita akan membahas mengenai bagaimana cara membuat form dengan menggunakan HTML, walaupun nantinya untuk pembuatan form tidak akan berfungsi maksimal jika hanya menggunakan HTML saja, anda perlu bahasa lain seperti PHP untuk memproses data yang akan dikirimkan ke database, ataupun anda menggunakan javascript untuk memberikan effect pada tampilan form yang anda buat, tetapi dalam tutorial ini kita akan bahas lebih detail di bagian form dengan menggunakan HTML saja.
Video Tutorial Belajar HTML – Membuat Form di HTML
Fungsi Tag form
ini adalah tag yang digunakan untuk mengawali dan mengakhiri form yang anda buat, untuk awal form anda harus memberikan tag <form> dan tag </form>.
didalam tag form ini terdapat beberapa attribute yang harus anda sertakan yaitu :
- Attribute action : attribute ini digunakan untuk mengatur file apa yang akan dipanggil untuk memproses data dari form. value yang tertulis di attribute action ini biasanya adalah file PHP yang nantinya akan memproses inputan form.
- Attribute method : attribute ini digunakan untuk mengatur metode apa yang digunakan untuk mengirimkan data form, value yang bisa anda berikan pada attribute ini adalah 2 yaitu get dan post. perbedaan dari 2 value ini jika anda menggunakan value get maka data yang dikirimkan browser akan terlihat pada url browser, metode ini biasanya digunakan untuk form yang datanya tidak terlalu rahasia seperti form pencarian, berbeda dengan get untuk value post, data yang dikirimkan tidak akan terlihat pada url di browser, metode ini digunakan untuk form yang datanya rahasia, seperti form untuk login, ataupun form transaksi.
baik untuk contohnya adalah seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="post"> <p>Username<input type="text" name="username"><p> <p><input type="submit" name="login" value="login"></p> </form> </body> </html> |
lalu dibuka di browser :
terlihat ada form login sederhana, form diatas saya menggunakan method post, maka jika form tersebut di isi usernamenya lalu di klik tombol loginnya, hasilnya adalah seperti gambar dibawah ini :
nah terlihat browser akan memanggil file dengan nama proses.php hal tersebut dikarenakan kita memberikan value proses.php pada bagian attribute action, dan coba anda perhatikan pada url web browser tidak terdapat data yang dikirimkan, hal tersebut karena kita menggunakan method post sehingga datanya tidak terlihat di url browser.
lalu coba kita ganti untuk skripnya menjadi menggunakan method=’get’
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Username<input type="text" name="username"><p> <p><input type="submit" name="login" value="login"></p> </form> </body> </html> |
lalu coba isikan username semisal dengan nama ‘aris’ dan klik login, maka hasilnya adalah seperti berikut ini :
nah terlihat untuk bagian url pada browser terdapat inputan form yang dikirim setelah nama file yang ada pada attribute action, nah itu karena kita menggunakan method get pada bagian formnya, jadi bagaimana sudah paham kan apa perbedaan dari value get dan post didalam attribute method.
Membuat Inputan Text dan password
Inputan jenis ini yang paling banyak digunakan pada form, jenis inputan ini biasanya digunakan untuk mengisikan inputan seperti nama, ataupun nilai yang lain, yang menjadi pembeda adalah hanya tipenya saja,
jika nilai tipe adalah text maka nilai yang diinputkan oleh user akan terlihat, tetapi untuk inputan dengan tipe password nilai yang diinputakan user tidak akan terlihat.
penulisan dari inputan jenis ini adalah :
|
1 2 |
<input type="name" /> <input type="password" /> |
Attribute name pada tag input
attribute name adalah salah satu attribute yang sangat penting pada setiap inputan form, karena dengan attribute name setiap inputan akan diberikan nama untuk pemrosesan data.
contohnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Username<input type="text" name="username"><p> <p>Password<input type="password" name="pass_user"><p> <p><input type="submit" name="login" value="login"></p> </form> </body> </html> |
- tipe text dengan nama username
- tipe password dengan nama pass_user
jika kita buka di browser hasilnya adalah seperti ini :
lalu coba kita isikan username dan passwordnya, lalu kita klik tombol login, maka hasilnya adalah sebagai berikut :
coba perhatikan pada url browser, karena kita menggunakan method get, maka ada 2 nilai yang dikirim yaitu username=aris dan pass_user=’1234′ , nah untuk username dan pass_user ini adalah value name pada masing – masing input.
Attribute value
Attribute value digunakan untuk memberikan nilai default yang ada di tag input dengan type=’text’, attribute value ini bersifat optional jadi bisa anda tambahkan ataupun tidak.
contoh penggunaan attribute value adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Username<input type="text" name="username" value='warungbelajar'><p> <p>Password<input type="password" name="pass_user"><p> <p><input type="submit" name="login" value="login"></p> </form> </body> </html> |
maka ketika di buka di browser hasilnya sebagai berikut :
Coba anda perhatikan dibagian inputan username, saya memberikan value=’warungbelajar’ hal tersebut akan menyebabkan terdapat nilai otomatis pada bagian inputan text pada bagian username yaitu warungbelajar.
ketika anda langsung klik tombol login, maka form akan membaca bahwa nilai dari username adalah warungbelajar, karena kita memberikan nilai default value adalah ‘warungbelajar’.
Attribute size
Attribute ini digunakan untuk mengatur berapa ukuran panjang kotak inputan, satuan dari attribute size ini adalah pixel, baik langsung saja kita buat contoh skripnya :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Ukuran 5 Pixel <input type='text' name='username1' size='5' /></p> <p>Ukuran 20 Pixel <input type='text' name='username1' size='20' /></p> </form> </body> </html> |
maka jika kita akan akses di browser hasilnya adalah seperti ini :
terlihat ada 2 inputan text dengan ukuran lebar yang berbeda hal tersebut dikarenakan perbedaan pada bagian size di setiap inputan.
Attribute maxlength
Attribute ini digunakan untuk membatasi panjang karakter yang bisa inputkan pada kotak inputan, contoh penggunaan skripnya adalah seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Maksimal Karekter 5 <input type='text' name='username1' maxlength='5' /></p> <p>Maksimal Karekter 7 <input type='text' name='username2' maxlength='7' /></p> </form> </body> </html> |
kotak input pertama hanya bisa diisi oleh nilai 1 – 5, dan kotak kedua hanya dapat diisi oleh angka 1 – 7 hal tersebut dikarenakan nilai dari attribute maxlength yang telah kita set.
Attribute disabled dan readonly
kedua attribute tersebut memiliki fungsi untuk mengatur apakah inputan form dapat diisi ataupun tidak, penjelasan lebih spesifiknya adalah seperti ini :
- readonly : attribute ini digunakan untuk mengatur user hanya boleh melihat form inputan, tanpa bisa mengedit atau menghapus isi didalam form inputan tersebut.
- disabled : attribute ini digunakan untuk mengatur dan menonaktifkan fitur inputan form, fungsinya hampir sama dengan attribute readonly, yang berbeda jika anda menggunakan attribute ini maka warna form itu akan berwarna abu abu, dan tidak bisa di klik apapun pada kotak inputannya.
untuk contoh penggunaan skripnya adalah seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Username 1<input type='text' name='username1' value='warungbelajar' readonly /></p> <p>Username 2<input type='text' name='username2' value='warungbelajar' disabled/></p> </form> </body> </html> |
nah coba anda perhatikan ada 2 inputan :
- username 1 saya gunakan attribute readonly, sehingga kita tidak bisa mengedit inputannya, user masih bisa mengcopy tulisan yang ada di kotak inputannya.
- username 2 saya menggunakan attribute disabled, sehingga kita tidak bisa mengedit inputannya, dan inputannya berwarna abu abu seperti gambar diatas, user tidak bisa mengcopy tulisan yang ada di kotak inputannya
Attribute id dan class
selain attribute type,value,size,maxlength,readonly dan disabled anda bisa menambahkan attribute id dan class pada kotak inputan, attribute ini dapat anda gunakan untuk mengatur style css dan javascript di masing – masing kotak inputan form.
|
1 |
<p>Username 1<input type='text' name='username1' value='warungbelajar' id='abc' class='def'/></p> |
Nah Bagaimana Mudahkan untuk membuat bagian form, dalam tutorial selanjutnya kita akan membahas mengenai bagaimana cara untuk membuat checkbox pada bagian form HTML.
[stextbox id=”info”] Anda serius ingin menguasai HTML ?Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]
Terima kasih banyak, artikelnya bermanfaat sekali.
Sama sama mas,, semoga bisa membantu
Thank you kak atas artikel yang membahas cara membuat form diHTML, penjelasannya sangat mudah dimengerti dan sangat bermanfaat bagi saya yang baru belajar. Semangat kak membuat artikel lainnya supaya bisa membantu orang lain. Perkenalkan nama saya Tamara Oktavia website kampus saya https://www.atmaluhur.ac.id/