Pada HTML, form dibuat dengan tag <form></form>. Tag ini biasanya digunakan untuk membuat tampilan form, chombobox mau pun tampilan pilihan lainnya pada sebuah web. Atribut yang dimiliki tag ini adalah name yang digunakan untuk nama form, action digunakan untuk menunjukkan file tujuan dimana form akan dikirim yang digunakan pada server side, dan atribut method digunakan untuk menentukan method pengiriman yang dipakai (method POST/method GET) yang digunakan pada server side. Selain atribut, adapun elemen-elemen yang ada pada form, yaitu <input></input>. Tag <input></input> ini terletak di dalam blok tag <form></form>. Tag <input></input> memiliki beberapa atribut, yaitu sebagai berikut :
1. type (jenis inputan), pada form memiliki berbagai jenis inputan, yaitu text, password, checkbox, radio, hidden, button, submit, reset, file, image.
2.Name, merupakan nama elemen atau nama variabel yang nantinya digunakan sebagai pengenal saat form dikirim.
3. value, merupakan nilai isian (value) pada elemen/variabel (atribut name) saat form dikirim.
4. size, merupakan atribut untuk menentukan lebar dari form inputan, biasanya digunakan untuk jenis inputan text dan password.
5. maxlength, merupakan atribut untuk menentukan maksimal inputan yang akan diinputkan pada form.
Agar lebih paham silakan lihat contoh di bawah ini :
1. Penggunaan jenis inputan text dan password
<html> <head> <title>Form</title> </head> <body> <form> Nama : <input type="text" name="nama" size="20" maxlength="5"><br> Pass : <input type="password" name="pass" size="15" maxlength="20"> </form> </body> </html>yang akan menampilkan hasil seperti di bawah ini :
4. Penggunaan jenis inputan hidden
<html> <head> <title>Form</title> </head> <body> <form> Hidden value <input type="hidden" name="nilai" value="100"> </form> </body> </html>yang akan menampilkan hasil seperti di bawah ini :
5. Penggunaan jenis inputan submit dan reset
<html> <head> <title>Form</title> </head> <body> <form> Nama : <input type="text" name="nama"><br> Pass : <input type="password" name="pass"><br> <input type="submit" value="submit"> <input type="reset"> </form> </body> </html>yang akan menampilkan hasil seperti di bawah ini :
6. Penggunaan jenis inputan button
<html> <head> <title>Form</title> </head> <body> <form> <input type="button"value="klik"> </form> </body> </html>yang akan menampilkan hasil seperti di bawah ini :
Selain tag <input></input>, ada pun elemen-elemen lain pada form, yaitu <textarea></textarea> dan <select></select>. Untuk lebih jelasnya silakan lihat contoh di bawah ini :
1. Penggunaan textarea
<html> <head> <title>Form</title> </head> <body> Keterangan : <form> <textarea name="keterangan" rows="5" cols="20">Ini adalah textarea</textarea> </form> </body> </html>yang akan menampilkan hasil seperti di bawah ini :
Keterangan :
2. Penggunaan select
<html> <head> <title>Form</title> </head> <body> Pilih Jurusanmu : <form> <select name="jurusan"> <option value="informatika">informatika</option> <option value="matematika">matematika</option> <option value="kimia">kimia</option> <option value="biologi">biologi</option> <option value="fisika">fisika</option> </select> </form> </body> </html>yang akan menampilkan hasil seperti di bawah ini :
Pilih Jurusanmu :
Silakan dicoba dan dimodifikasi source codenya agar lebih paham. Selamat belajar.. :)
Tidak ada komentar:
Posting Komentar