Belajar HTML Bag. 9 ( Input )
Saturday, August 28, 2010
Labels:
Windows dan Linux
Arti input disini adalah media yang digunakan sebagai perantara antara user dengan webpage ataupun server web, untuk dapat bekerja sesuai fungsinya, komponen-komponen ini memerlukan bahasa pemrograman / scripting untuk dapat bekerja, seperti php, javascript, vbscript, asp ataupun bahasa scripting lainnya. Olehkarena pada tutorial HTML ini saya beranggapan bahwa tutorial ini digunakan untuk pemula yang baru mempelajari dunia web programming maka saya belum akan menggunakan bahasa scripting untuk berinteraksi dengan komponen-komponen input HTML. Disini saya hanya akan membahas bagaimana cara untuk membuat komponen-komponen input tersebut. Untuk bahasa scripting sendiri saya akan membahasnya pada seri tutorial yang lain.
Ok, selanjutnya kita mulai saja :
Ok, selanjutnya kita mulai saja :
Table Tag-tag Input :
Tag | Fungsi | Atribut |
| <form> | Mendeklerasikan sebuah form sebagai tempat dimana komponen-komponen input lainnya diletakan | -action : digunakan untuk memberikan url dimana isi dari input-input dalam form ini dikirim. -target : digunakan untuk menentukan bagaimana url dibuka (_blank, _self, _parent, _top) |
| <input> | Medeklerasikan sebuah komponen input | -checked : memberikan nilai kepada sebuah komponen apakah dalam kondisi terpilih atau tidak -type : menentukan tipe dari input yang kita buat. -value : memberikan nilai kepada input yang kita buat |
| <textarea> | Mendeklerasikan sebuah text area | -cols : menentukan jumlah kolom -rows : menentukan jumlah baris |
| <button> | Mendeklerasikan sebuah tombol / button | -disabled : menentukan tombol tersebut active atau tidak -name : menentukan nama dari tombol -type : menentukan jenis tombol (button,reset,submit) -value : memberikan nilai kepada tombol tersebut |
| <select> | Mendeklerasikan sebuah selection | -disable : menentukan selection tersebut active atau tidak -multiple : menentukan seleksi dapat dipilih lebih dari satu atau tidak -name : memberikan nama pada selection |
| <option> | Merupakan komponen pelengkap tag <select>, bertindak sebagai item-item dalam sebuah selection. | -disable : menentukan selection tersebut active atau tidak -value : memberikan nilai kepada tombol tersebut -selected : memberikan nilai kepada sebuah komponen apakah dalam kondisi terpilih atau tidak -label : memberikan sebuah label /caption kepada option |
| <label> | Mendeklerasikan sebuah label | -for : menunjukan label tersebut digunakan untuk id input yang ditunjuk |
Cukup jelas bukan tag-tag input diatas? Berikut kita akan mempraktikannya sekaligus kedalam sebuah file HTML agar anda dapat lebih memahami kegunaan komponen-komponen input tersebut.
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<form>
<h6>Penggunaan Input Type Text</h6>
<label>Nama</label>
<br/><input type="text" name="txtNama"/>
<h6>Penggunaan Input Type Password</h6>
<label>Password</label>
<br/><input type="password" name="pass"/>
<h6>Penggunaan Input Type TextBox</h6>
<label>Alamat</label>
<br/><textarea cols="40" rows="2" name="txtAlamat"></textarea>
<h6>Penggunaan Input Type Select</h6>
<label>Jenis Kelamin</label>
<select>
<option value="pria">Pria</option>
<option value="wanita">Wanita</option>
</select>
<h6>Penggunaan Input Type RadioButton</h6>
<label>Anda setuju dengan peraturan kami? </label>
<br/><input type="radio" name="radSetuju" value="Setuju">Ya</input>
<br/><input type="radio" name="radSetuju" value="Tidak">Tidak</input>
<h6>Penggunaan Input Type CheckBox</h6>
<input type="checkbox" name="chkKirim" value="kirim">Kirim ke email saya</input>
<h6>Penggunaan Input Type Button</h6>
<button type="submit">Submit</button><button type="reset">Reset</button>
</form>
</body>
</html>
Hasil :
Penjelasan :
Seperti kita lihat, disana kita coba semua komponen input dan masing-masing kita beri label sesuai dengan nama dan tujuan penggunaan komponen input tersebut. Mudah bukan? Silahkan mencoba-coba sesuai kreativitas anda.
Selamat Belajar...dan tetap Semangat...
Terima Kasih Sudah Mampir, Salam Persahabatan...
1 comments:
Suangaaaat membantu dalam membangun blog...he..., mohon ijin untuk copas kang....!
Post a Comment