Latihan Dasar HTML Part 5
Akhirnya kita sudah sejauh ini mempelajari HTML , tapi ini belum seberapa , masih banyak yang harus kita pelajari tentang HTML , dan tentunya saya akan terus meng-up-to-date semua materi tentang HTML jika umurku panjang :v
Oke langsung saja kita mulai , kali ini temanya tentang "FORM PENDAFTARAN"
sebelum kita membuatnya , ada baiknya kita tau apa itu FORM .
FORM diambil dari bahasa inggris , yang berarti formulir pendaftaran. Biasanya ada ketika kita ingin mendaftar di berbagai akun di SosMed.
Kita juga harus mengetahui tentang tag tag yang ada dalam Form Pendaftaran di HTML nanti. Berikut adalah tag tag yang berada dalam form nanti :
FORM diambil dari bahasa inggris , yang berarti formulir pendaftaran. Biasanya ada ketika kita ingin mendaftar di berbagai akun di SosMed.
Kita juga harus mengetahui tentang tag tag yang ada dalam Form Pendaftaran di HTML nanti. Berikut adalah tag tag yang berada dalam form nanti :
<form>,</form> = pembuka dan penutup Form yang akan ditampilkan di web. Sebelum mengetik semua tag tag yang meyangkut tentang form , maka ketiklah tag ini terlebih dahulu.
<input type="text"> = untuk masukan form berupa teks / tulisan.
<input type="radio"> = untuk masukkan form berbentuk seperti kotak pilihan , yang pilihannya berbentuk bulat.
<input type="checkbox"> = untuk masukan form berbentuk seperti kotak pilihan , pilihannya berupa kotak ceklis , entah apapun itu :v
<input type="password"> = untuk masukan form berupa tampilan yang biasanya terdapat pada password di berbagai akun jejaring sosmed seperti titik,bintang,dll tergantung pada browser dan web yang anda kunjungi. Penjelasan :
1. Setelah tag <input type...> saya sarankan agar ditambah lagi dengan "name". Apa fungsinya ? Fungsinya agar memudahkan kita untuk mengelompokkan isi dari form tersebut , selain itu juga agar program yang kita jalankan berjalan dengan mulus gan :v. contoh : <input type="text" name="buatnama">.
2. Selain itu tag <input type...> juga ada tambahan lagi berupa "value" untuk menambahkan latar belakang tulisan di kotak form tersebut dan "maxlength" yang berfunsi untuk menentukan banyaknya huruf yang bisa ditulis di form tersebut. Contoh : <input type="text" name="buatnama" value="Masukan nama anda" maxlength="10">.
3. Saya juga menyarankan untuk memberikan tag tabel dibawah tag <form> agar form yang anda buat lebih rapih. Atau mungkin yang belum belajar tentang cara membuat tabel dengan HTML bisa baca di post saya yang terdahulu tepatnya di "Latihan dasar HTML Part 3(Baca juga : Cara membuat tabel dengan HTML).
Bagaimana apa sudah mengerti dengan penjelasan saya diatas ?
jika belum , pelajari lagi , jika sudah mari kita praktekan saja langsung..
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
<table border="0" width="500">
<td>NAMA LENGKAP</td>
<td>:</td>
<td><input type="text" name="nama_lengkap" value="Nama kamu"></td>
</tr>
<tr>
<td>Tempat Tanggal Lahir</td>
<td>:</td>
<td><input type="text" name="TTL" value="Kamu lahir dimana"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><br><input type="radio" name="JK">Pria<br><input type="radio" name="JK">Wanita<br><input type="radio" name="JK">Mungkin lainnya
</td></tr>
<tr>
<td>Passwordnya</td>
<td>:</td>
<td><input type="password" name="pw" value="MAsukkan Pwnya"></td>
</tr>
<tr>
<td>Pendidikan</td>
<td>:</td>
<td><br><input type="checkbox" name="pdd">SD<br><input type="checkbox" name="pdd">SLTP<br><input type="checkbox" name="pdd">SLTA<br><input type="checkbox" name="pdd">S1<br><input type="checkbox" name="pdd">SLB</td>
</tr></table>
</body>
</html>
<head>
<title>Form</title>
</head>
<body>
<form>
<table border="0" width="500">
<td>NAMA LENGKAP</td>
<td>:</td>
<td><input type="text" name="nama_lengkap" value="Nama kamu"></td>
</tr>
<tr>
<td>Tempat Tanggal Lahir</td>
<td>:</td>
<td><input type="text" name="TTL" value="Kamu lahir dimana"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><br><input type="radio" name="JK">Pria<br><input type="radio" name="JK">Wanita<br><input type="radio" name="JK">Mungkin lainnya
</td></tr>
<tr>
<td>Passwordnya</td>
<td>:</td>
<td><input type="password" name="pw" value="MAsukkan Pwnya"></td>
</tr>
<tr>
<td>Pendidikan</td>
<td>:</td>
<td><br><input type="checkbox" name="pdd">SD<br><input type="checkbox" name="pdd">SLTP<br><input type="checkbox" name="pdd">SLTA<br><input type="checkbox" name="pdd">S1<br><input type="checkbox" name="pdd">SLB</td>
</tr></table>
</body>
</html>
Tambahan : (mumpung lagi baik nih... :v)
Selain itu ada juga tag tag lainnya yang umum digunakan .. yaitu tag tag untuk membuat "TEXT AREA" atau biasa disebut "FORMKOMENTAR". Apa itu ? Yaitu tempat kita biasa berkomentar di web ataupun blog (kebanyakan sih di blog)
ada beberapa tag tag yang biasa digunakan dalam TEXT AREA. Berikut ini adalah tag tag tersebut :
<textarea>,</textarea> = tanda pembuka dan penutup sebuah perintah text area.
<select name>,</select> = untuk memberikan tema tentang pilihan , contoh : <select name="pekerjaan">.
<option>,</option> = Memberikan opsi tentang tema yang sudah kita tentukan pada tag <select name>.
<input type="file"> = untuk perintah masukan /upload berupa file.
<input type="submit"> = untuk perintah masukan enter / mengirimkan.
<input type="reset"> = untuk perintah masukan menghapus / mereset semua komentar , atau tulisan anda yang sudah anda ketik di kolom text area tersebut.
<a href>,</a> = tag berupa perintah untuk memasukkan link.
<select name>,</select> = untuk memberikan tema tentang pilihan , contoh : <select name="pekerjaan">.
<option>,</option> = Memberikan opsi tentang tema yang sudah kita tentukan pada tag <select name>.
<input type="file"> = untuk perintah masukan /upload berupa file.
<input type="submit"> = untuk perintah masukan enter / mengirimkan.
<input type="reset"> = untuk perintah masukan menghapus / mereset semua komentar , atau tulisan anda yang sudah anda ketik di kolom text area tersebut.
<a href>,</a> = tag berupa perintah untuk memasukkan link.
Penjelasan :
1. Seperti halnya tag <input type> , tag <select name> juga memiliki tambahan didalamnya... tambahannya hampir sama yaitu berupa "name" dan mungkin ada tambahan khusus yaitu "action" dan "image/*" di tag <input type="file">.
Sebagai contoh : <input type="file" name="gambar" action="image/*">.
Jika sudah mengerti maka kita akan langsung ke prakteknya nih gan.. BRACE YOUR SELF , Praktek lagi :v
<html>
<head>
<title>Ini contoh Text Area</title>
</head>
<body>
Komentar anda kaka :<br><textarea rows="7" cols="32"></textarea>
<select name="Pekerjaan Anda">
<option>Pegawai
</option><option>PNS
</option><option>Koruptor
</option><option>Begal</option></select>
<input type="file" name="gambar" action="image/*">
<input type="submit" name"ok"="" value="kirim dund">
<input type="reset" name"hapus"="" value="hapus">
<a herf= "http://www.google.com">klik disini dong<img src="1.jpg" width="500"></a>
</body>
</html>
<head>
<title>Ini contoh Text Area</title>
</head>
<body>
Komentar anda kaka :<br><textarea rows="7" cols="32"></textarea>
<select name="Pekerjaan Anda">
<option>Pegawai
</option><option>PNS
</option><option>Koruptor
</option><option>Begal</option></select>
<input type="file" name="gambar" action="image/*">
<input type="submit" name"ok"="" value="kirim dund">
<input type="reset" name"hapus"="" value="hapus">
<a herf= "http://www.google.com">klik disini dong<img src="1.jpg" width="500"></a>
</body>
</html>
Sekian mungkin itu saja yang dapat saya sampaikan di pertemuan (mungkin yang terakhir di pemrograman web ) , sampai berjumpa di pertemuan berikutnya ..
Jika ada pertanyaan bisa hubungi saya di Facebook (lihat di homepage ada nama fb dan link fb saya).
Salam 3 stripes and red stars...
wah saya gk ngerti dalam hal html saya masih nubie
BalasHapussama saya juga masih belajar.. hehe
Hapus