Cara Membuat Form di HTML
Form digunakan untuk melakukan interaksi dengan pengguna website, 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. Form tidak akan berfungsi maksimal jika hanya menggunakan HTML saja, anda perlu bahasa lain seperti PHP untuk memproses data yang dikirim ke database, ataupun anda menggunakan javascript untuk memberi spesial efek pada tampilan form.
Pada tahap ini kita akan membahas form dengan menggunakan HTML saja.
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>.
Atribut pada tag form:
- 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 browser, metode ini digunakan untuk form yang datanya rahasia, seperti form untuk login, ataupun form transaksi.
Kopas kode berikut ke Notepad++, lalu simpan dengan nama form1.html pada folder belajarHTML.
Method post
<!DOCTYPE html> <html> <head> <title> Belajar 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>
Buka folder belajarHTML > klik ganda pada file form1 untuk membuka halaman web.
Jika pada kotak masukan username di isi > lalu di klik tombol login, hasilnya adalah seperti gambar dibawah ini :
Browser memanggil file dengan nama proses.php hal tersebut dikarenakan pada bagian attribute action Anda memberi value proses.php . Perhatikan pada url web browser tidak terdapat data yang dikirim, hal tersebut karena kita menggunakan method post sehingga datanya tidak terlihat di url browser.
Selanjutnya Anda akan berlatih Method get
Kopas kode berikut ke Notepad++, lalu simpan dengan nama form2.html pada folder belajarHTML.
<!DOCTYPE html> <html> <head> <title>Belajar 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>
Buka folder belajarHTML > klik ganda pada file form2 untuk membuka halaman web.
Form diatas menggunakan method get, jika pada kotak masukan username diisi > lalu di klik tombol login, hasilnya adalah seperti gambar dibawah ini :
Membuat kotak masukan Text dan Password
Kotak masukan (Text Input) jenis ini yang paling banyak digunakan pada form. 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.
Contoh kode :
<input type="name" />
<input type="password" />
Untuk tag input tidak memiliki tag penutup.
Attribute Name pada Tag Input
Attribute name sangat penting pada setiap inputan form, karena setiap inputan akan diberikan nama untuk pemrosesan data.
Kopas kode berikut ke Notepad++, lalu simpan dengan nama form3.html pada folder belajarHTML.
<!DOCTYPE html> <html> <head> <title>Belajar 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>
Perhatikan terdapat 2 kotak masukan:
· tipe text dengan nama username
· tipe password dengan nama pass_user
Buka folder belajarHTML > klik ganda pada file form3 untuk membuka halaman web.
- Pada kotak masukkan Username ketik admin.
- Pada kotak masukkan password ketik 1234.
- Klik tombol login.
Hasilnya:
Perhatikan pada url browser, karena kita menggunakan method get, maka ada 2 nilai yang dikirim yaitu username=admin 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.
Kopas kode berikut ke Notepad++, lalu simpan dengan nama form4.html pada folder belajarHTML.
<!DOCTYPE html> <html> <head> <title>Belajar Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Username<input type="text" name="username" value=kupastuntas'><p> <p>Password<input type="password" name="1234"><p> <p><input type="submit" name="login" value="login"></p> </form> </body> </html>
Buka folder belajarHTML > klik ganda pada file form4 untuk membuka halaman web.
Hasilnya, pada kotak masukan Usernama telah terisi kupastuntas.
Attribute Size
Attribute ini digunakan untuk mengatur ukuran panjang kotak inputan, satuan dari attribute size ini adalah pixel.
Kopas kode berikut ke Notepad++, lalu simpan dengan nama form5.html pada folder belajarHTML.
<!DOCTYPE html> <html> <head> <title>Belajar Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Ukuran 10 Pixel <input type='text' name='username1' size='5' /></p> <p>Ukuran 25 Pixel <input type='text' name='username1' size='20' /></p> </form> </body> </html>
Buka folder belajarHTML > klik ganda pada file form5 untuk membuka halaman web.
Attribute Maxlength
Attribute ini digunakan untuk membatasi panjang karakter yang bisa di input pada kotak masukan.
Kopas kode berikut ke Notepad++, lalu simpan dengan nama form6.html pada folder belajarHTML.
<!DOCTYPE html> <html> <head> <title>Belajar Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Maksimal Karakter 3 <input type='text' name='username1' maxlength='3' /></p> <p>Maksimal Karekter 6 <input type='text' name='username2' maxlength='6' /></p> </form> </body> </html>
Buka folder belajarHTML > klik ganda pada file form6 untuk membuka halaman web.
Kotak masukan pertama hanya bisa diisi maksimum 3 karakter, dan kotak kedua hanya dapat diisi maksimum 6 karakter.
ATTRIBUTE DISABLED DAN READONLY
Attribute ini berfungsi untuk mengatur apakah kotak masukan dapat diisi atau tidak, penjelasan lebih spesifiknya adalah seperti ini :
- readonly : atribute ini digunakan untuk mengatur user hanya boleh melihat form inputan, tanpa bisa mengedit atau menghapus isi didalam form inputan tersebut.
- disabled : atribute 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.
Kopas kode berikut ke Notepad++, lalu simpan dengan nama form7.html pada folder belajarHTML.
<!DOCTYPE html> <html> <head> <title>Belajar Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Username 1<input type='text' name='username1' value='kupastuntas' readonly /></p> <p>Username 2<input type='text' name='username2' value='kupastuntas' disabled/></p> </form> </body> </html>
Buka folder belajarHTML > klik ganda pada file form7 untuk membuka halaman web.
Penjelasan:
- username 1 menggunakan attribute readonly, teks yang ditampilkan tidak bisa di edit, tapi masih bisa di copy .
- username 2 menggunakan attribute disabled, teks yang ditampilkan tidak bisa di edit, berwarna abu abu, dan tidak bisa di copy.
Selamat mencoba, semoga sukses!!!
0 Komentar