Pages

Minggu, 27 November 2011

Membuat form lewat HTML

Pernah denger bikin form lewat HTML ? sebenarnya cara membuatnya susah susah gampang , di posting ini ada caranya buat bikin form lewat HTML , ada yang tau fungsi form ? Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan. Misalnya untuk aplikasi buku tamu, login, registrasi, dan lain sebagainya. Dibanding skill pelajaran html lainnya seperti membuat paragraf atau memasukkan gambar, membuat form relatif lebih sulit.
Nah disini kalian bakal tau gimana sih bentuknya HTML , dan gimana cara bikinnya , hehe :p
Form Data Diri
Gambar 1.0 Formulir HTML


Dan berikut source codenya. Silahkan copy paste pada notepad atau tool lainnya dan save dengan type .html
<html>
<head>
<title>Formulir</title>
</head>
<body>
<center> <b>Form Data Diri</b> </center>
<hr>
<table>
<tr><td>Nama<td>  :   <input type=text name=”nama” size=”20″> <tr><td>Alamat<td>  :   <input type=text name=”alamat” size=”30″>
<tr><td>Kota<td>  :   <input type=text name=”kota” size=”22″>
<tr><td>Telp<td>  :   <input type=text name=”telp” size=”15″>
<tr><td>Jenis Kelamin<td>  :   <input type=”radio” name=”kelamin”>Pria<input type=”radio” name=”kelamin”>Wanita
<tr><td>Hoby<td>  :   <input type=”checkbox” name =”musik”>Musik<input type=”checkbox” name=”olahraga”>Olahraga<input type=”checkbox” name=”jalan”>Jalan
<tr><td>Agama<td>  :   <select size=”1″ name=”agama”>
<option>Islam</option>
<option>Kristen</option>
<option>Katolik</option>
<option>Hindu</option>
<option>Budha</option>
</select>
<tr><td>Asal Sekolah<td>  :   <input type=”text” name=”asalsma” size=”35″>
<tr><td>Jurusan<td> :   <input type=”text” name=”jurusan” size=”20″>
</table>
</form>
<hr>
<input type=”submit” value=Kirim><input type=”reset”>
</body>
</html>
Mungkin bagi kalian yang belum mengenal HTML bingung itu yang di atas apaan nggak jelas banget kan ? 
Nah disini bakal kita pelajarin satu persatu buat bikin formulir kayak gambar di atas :)
Diatas adalah contoh dari form sederhana yang akan kalian pelajari disini. Sekarang siapkan bahan-bahannya, yaitu <form>, <input>, <select>, dan <option>.
Sebelum mulai mempelajari tiap tag, ada baiknya kalian mengetahui bahwa untuk membuat sebuah form yang dapat dikirim dan diproses di server kalian harus mengetahui PHP dan SQL. Disini kalian hanya mempelajari dasarnya saja yaitu bagaimana cara menampilkan sebuah form yang baik.
Sekarang kalian lihat form diatas, dan perhatikan bahwa tiap baris mempunyai jenis input yang berbeda-beda. Apa itu input? Input adalah sesuatu yang dimasukkan oleh pembaca halaman web kalian misalnya teks. Dari atas ke bawah :
  • Text
  • Password
  • Checkbox
  • Radio
  • Select
  • Textarea
Input tipe Text digunakan untuk memasukkan karakter-karakter yang jumlahnya tidak terlalu banyak. Berbeda dengan Textarea yang dapat menampung karakter dalam jumlah besar. Contoh penggunaannya adalah sebagai berikut :
  1. Nama : <input type="text" size="25" />  
  2. Pesan Anda : <input type="textarea" cols="20" rows="20" />  
Sedangkan untuk input tipe Password hampir sama dengan Text hanya saja karakter yang diketik dalam kolom password otomatis akan terlihat ***** untuk menjaga kerahasiaan dari password tersebut.
Cara membuatnya cukup mudah :
  1. Password : <input type="password" size="25" />  
Silahkan script html tersebut kalian coba pada papan tulis di bawah.
Checkbox, Radio, dan Select merupakan elemen dari form yang digunakan untuk memilih dari beberapa pilihan yang disediakan.

Checkbox

Checkbox digunakan jika pilihan yang disediakan dapat dipilih lebih dari satu. Lihat penggunaannya berikut ini :
  1. Pelajaran yang kalian sukai :  
  2. <input type="checkbox"> Matematika  
  3. <input type="checkbox"> Fisika  
  4. <input type="checkbox"> Kimia  
  5. <input type="checkbox"> Sejarah  
Radio

Radio digunakan apabila pilihan yang disediakan hanya dapat dipilih satu saja. Contoh penggunaannya :
  1. Pelajaran yang kalian sukai :  
  2. <input name="favorit" value="matematika" type="radio"> Matematika  
  3. <input name="favorit" value="fisika" type="radio"> Fisika  
  4. <input name="favorit" value="kimia" type="radio"> Kimia  
  5. <input name="favorit" value="sejarah" type="radio"> Sejarah  
Select

Select digunakan apabila tampilan pilihan yang kita sediakan berbentuk dropdown. Sebenarnya aplikasinya mirip dengan Radio yaitu pilihan yang boleh dipilih hanya satu. Select digunakan selalu bersamaan dengan Option. Berikut ini adalah contoh penggunaannya :

  1. Pelajaran yang kalian sukai :  
  2. <select name="favorit">  
  3.         <option>Matematika  
  4.         </option><option>Kimia  
  5.         </option><option>Fisika  
  6.         </option><option>Bahasa  
  7. </option></select> 
Silahkan coba deh di notepad , kalo udah jadi , di save pake format .html terus di buka , kalo berhasil pasti jadi kayak formulir di atas , good luck :D  
send by at

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)