HTML Lanjut
Latihan Membuat Web Untuk Pemula
Latihan Membuat Web Untuk Pemula
► List
Untuk membangun sebuah form pada halaman web, guna mendapatkan masukan dari pengunjung web. Form dibentuk dengan menggunakan pasangan tag <form>. Atribut yang umum digunakan pada tag <form> adalah :
- ACTION : Menentukan lokasi dari script yang akan memproses data dari form.
- METHOD : Menentukan bagaimana data akan dikirim ke server, yaitu dengan dua cara sebagai berikut :
- GET : membuat informasi dikirim menjadi satu dengan URL.
- POST : membuat informasi dikirim secara terpisah dengan URL.
Saat kita membangun sebuah form kita dapat menggunakan berbagai jenis bentuk masukan atau inputan. Adapun macam macam komponen inputan yang dapat digunakan adalah :
- Text
Untuk membuat masukan berupa single line text.
Tabel atribut text
| Atribut | Keterangan | Tampilan |
| Name | Mendefinisikan nama object dari text | : |
| Size | Jumlah karakter yang bisa ditampilkan | |
| Type | <input type="text"> | |
| Value | Untuk memberikan value ke input | |
| MaxLength | Maksimum karakter yang bisa dimasukkan |
- Textarea
Untuk membuat masukan berupa Multi line text. Tag yang digunakan <textarea> </textarea>.
Tabel atribut textarea
| Atribut | Keterangan | Tampilan |
| Name | Mendefinisikan object dari textarea | |
| Rows | Jumlah baris dari textarea | |
| Cols | Lebar dari Textarea |
- Checkbox
Sebuah bentuk inputan dimana tiap checkbox memiliki nama yang berbeda karena seorang pengunjung dapat memilih 1 atau lebih option atau pilihan.
Tabel atribut checkbox
| Atribut | Keterangan | Tampilan |
| Checked | Untuk memberi default check | Bus Mobil Sepeda motor Sepeda |
| Name | Mendefinisikan nama object dari check box | |
| Type | <input type="checkbox"> | |
| Value | Untuk memberikan vaule ke input |
- Radio
Sebuah bentuk inputan dimana tiap radio memiliki nama yang sama karena seorang pengunjung hanya dapat memilih 1 option atau pilihan.
Tabel atribut Radio
| Atribut | Keterangan | Tampilan |
| Checked | Untuk memberi default check | Bus Mobil Sepeda motor Sepeda |
| Name | Mendefinisikan nama object dari radio | |
| Type | <input type="radio"> | |
| Value | Untuk memberikan vaule ke input |
- ComboBox / ListBox (selection)
Taq <select> </select> digunakan untuk membuat komponen ComboBox, sementara untuk pilihan dalam ComboBox menggunakan tag <option> </option>
Tabel atribut ComboBox
| Atribut | Keterangan | Tampilan |
| Nama | Mendefinisikan nama dari object select | |
| Size | Menentukan jumlah baris yang akan ditampilkan |
- Button
Untuk membuat sejumlah tombol yang akan menjalankan atau membatalkan sebuah form
Tabel atribut button
| Atribut | Keterangan | Tampilan |
| Name | Mendefinisikan nama object dari button | |
| Type | <input type="button"> | |
| Value | Untuk memberikan value ke input |
Untuk latihan ketikkan script berikut dan simpan dengan nama "pendaftaran.html"
<html>
<head>
<title>Pendaftaran</title>
</head>
<body>
<p align="center">
Form Pendaftaran
<form action="daftar.php" method="post">
<table align="center">
<tr>
<td>Nama </td>
<td> : </td>
<td> <input type="text"
name="nama" /></td>
</tr>
<tr>
<td>Alamat </td>
<td> : </td>
<td>
<textarea name="alamat"></textarea>
</td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td> : </td>
<td>
<input type="radio" name="kelamin"
value="1">Laki-Laki
<input type="radio" name="kelamin"
value="2">Perempuan
</td>
</tr>
<tr>
<td>Pekerjaan </td>
<td> : </td>
<td>
<select name="pekerjaan">
<option>Pelajar</option>
<option>Pegawai Negeri</option>
<option>Wiraswasta</option>
</select>
</td>
</tr>
<tr>
<td>Hobi </td>
<td> : </td>
<td>
<input type="checkbox" name="hobi"
value="1" />Sepakbola
<input type="checkbox" name="hobi"
value="2" />Basket
<input type="checkbox" name="hobi"
value="3" />Renang
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit" name="kirim"
value="Kirim" />
<input type="reset" name="reset"
value="Batal" />
</td>
</tr>
</table>
</p>
</body>
</html>
<head>
<title>Pendaftaran</title>
</head>
<body>
<p align="center">
Form Pendaftaran
<form action="daftar.php" method="post">
<table align="center">
<tr>
<td>Nama </td>
<td> : </td>
<td> <input type="text"
name="nama" /></td>
</tr>
<tr>
<td>Alamat </td>
<td> : </td>
<td>
<textarea name="alamat"></textarea>
</td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td> : </td>
<td>
<input type="radio" name="kelamin"
value="1">Laki-Laki
<input type="radio" name="kelamin"
value="2">Perempuan
</td>
</tr>
<tr>
<td>Pekerjaan </td>
<td> : </td>
<td>
<select name="pekerjaan">
<option>Pelajar</option>
<option>Pegawai Negeri</option>
<option>Wiraswasta</option>
</select>
</td>
</tr>
<tr>
<td>Hobi </td>
<td> : </td>
<td>
<input type="checkbox" name="hobi"
value="1" />Sepakbola
<input type="checkbox" name="hobi"
value="2" />Basket
<input type="checkbox" name="hobi"
value="3" />Renang
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit" name="kirim"
value="Kirim" />
<input type="reset" name="reset"
value="Batal" />
</td>
</tr>
</table>
</p>
</body>
</html>
Hasil dari script di atas :
*.:｡✿ Don't forget to come back again ✿.｡.:*
0 komentar:
Posting Komentar