FORM
Form biasanya digunakan untuk mengumpulkan informasi dari user, sehingga memungkinkan suatu web server untuk menerima informasi dari pemakai melalui sejumlah elemen yang disebut kontrol. Kontrol ini bisa berupa suatu textbox, checkbox, radio button, push button, list menu dan lainnya. Standart penulisan form :
<form action="url" method="post" enctype="multipart/form-data">
...
</form>
Atribut yang ada dalam form:
| Attribute | Fungsi |
|---|
| action | Menunjukkan lokasi URL kemana form tersebut di kirim |
|---|
| method | Metode HTTP yang digunakan ketika mengirimkan data form (default:GET) |
|---|
| name | Nama spesifik yang digunakan sebagai identitas dari form (biasanya digunakan pada DOM html) |
|---|
| enctype | Penulisan kode dari data yang dikirim |
|---|
| novalidate | Untuk memerintahkan browser agar tidak melakukan validasi terhadap isi form |
|---|
| target | Menunjukkan lokasi dimana action akan di muat. Defautnya(_self) |
|---|
| autocomplete | Browser melakukan autocomplete dalam pengisian form |
|---|
Tipe-tipe inputan yang ada didalam form antara lain:
| Tag | Keterangan |
|---|
<input> | Digunakan untuk menetapkan sebuah input kontrol |
|---|
<textarea> | Digunakan untuk menetapkan multiple input control (textarea) |
|---|
<label> | Digunakan untuk memberi label untuk sebuah elemen input |
|---|
<fieldset> | Grup dari elemen-elemen yang berelasi dalam sebuah form |
|---|
<legend> | Digunakan untuk memberikan judul |
|---|
<select> | Digunakan untuk membuat dropdown list |
|---|
<optgroup> | Digunakan untuk membuat opsi yang berelasi dalam sebuah dropdown list |
|---|
<option> | Digunakan untuk membuat opsi pada dropdown list |
|---|
<button> | Digunakan untuk membuat button/ tombol yang dapat diklik |
|---|
<datalist> | Digunakan untuk menentukan daftar opsi yang telah ditentukan oleh control input |
|---|
<keygen> | Digunakan untuk membangkitkan kunci (pada form) |
|---|
<output> | Digunakan untuk hasil dari kalkulasi |
|---|
Contoh Penggunaan
- Input
Input digunakan untuk menetapkan sebuah input control. Jenis-jenis input yang dapat digunakan dalam input ini antara lain:- Input type text
<input type="text" name="first-name" value="" placeholder="first name">
- Input type password
<input type="password" name="passwd" value="" placeholder="password">
- Input type submit
<input type="submit" name="submit" value="submit">
- Input type reset
<input type="reset" name="reset" value="reset">
- Input type radio
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female
- Input type checkbox
<input type="checkbox" name="makanan" value="ayam"> Ayam
<input type="checkbox" name="makanan" value="lele" checked> Lele
<input type="checkbox" name="makanan" value="kakap"> Kakap
- Input type button
<input type="button" name="klik" value="ClickMe!">
- Dalam HTML5 ada beberapa penambahan jenis input type yang baru:
- Color
- Date
- Datetime-local
- Week
- Month
- Number
- Time
- Tel
- Email
- Range
- Search
- Url
- Select
Select digunakan untuk membuat dropdown list. Contoh penggunaanya:
<select name="minuman" multiple>
<option value="teh">teh</option>
<option value="jeruk">jeruk</option>}
<option value="kopi">kopi</option>}
</select>
- Textarea
Textarea digunakan untuk menuliskan multiple input text.
<textarea name="komen" rows="5" cols="50"></textarea>
- Button
<button name="button-OK" value="ok">OK</button>
- Fieldset, Legend dan Label
<fieldset>
<legend>Personal</legend>
Username : <input type="text" name="" value="" placeholder="Ketik Username"></input> <br>
Password : <input type="password" name="" value=""></input> <br>
<input type="submit" value="submit"></input>
</fieldset>
LIST
List merupakan perintah HTML yang digunakan untuk membuat List atau group dari kata. Ada dua macam list:
- Ordered List
Ordered list digunakan untuk menampilkan list dengan secara sequensial (terurut).
Contoh penggunaan ordered list:
<ol type="1">
<li>Teh</li>
<li>Jeruk</li>
<li>Kopi</li>
</ol>
Type merupakan tipe sequensial yang akan digunakan dalam menampilkan isi list. Beberapa tipe yang digunakan dalam ordered list antara lain :
| Type | Keterangan |
|---|
type="1" | Digunakan untuk penomoran menggunakan angka |
|---|
type="A" | Digunakan untuk penomoran menggunakan huruf kapital |
|---|
type="a" | Digunakan untuk penomoran menggunakan huruf kecil |
|---|
type="I" | Digunakan untuk penomoran menggunakan huruf romawi kapital |
|---|
type="i" | Digunakan untuk penomoran menggunakan romawi huruf kecil |
|---|
- Unordered List
Unordered list digunakan untuk menampilkan list tanpa adanya pengurutan numeric maupun alfabetik. List ditandai dengan bullets. Contoh penggunaan unordered list: <ul style="list-style-type:disc">
<li>Teh</li>
<li>Jeruk</li>
<li>Kopi</li>
</ul>
style merupakan tipe tanda yang akan digunakan dalam menampilkan isi list. Beberapa tipe style yang digunakan dalam ordered list antara lain:
| Value | Keterangan |
|---|
disc | Isi list ditampilkan dengan tanda bullet (default) |
|---|
circle | Isi list ditampilkan dengan tanda lingkaran |
|---|
square | Isi list ditampilkan dengan tanda kotak |
|---|
none | Isi list ditampilkan tanpa diberi tanda |
|---|
Character
Beberapa karakter memiliki arti khusus di dalam HTML, misalnya karakter kurang dari (<) memiliki makna pembuka tag, dan karakter lebih dari (>) memiliki makna sebagai penutup tag. Jika kita ingin menampilkan karakter pada browser maka kita harus memasukkan entitas karakter ke dalam kode html.
Entitas karakter terdiri atas 3 bagian, yakni ampersand(&), nama entitas atau # , dan nomor entitas yang terakhir adalah semicolon (;). Misalnya untuk menampilkan tanda kurang dari maka dapat dituliskan sebagai berikut:
< atau <
Keuntungan dari penggunaan entitas nama dibandingkan dengan entitas angka adalah kemudahan dalam mengingatnya. Akan tetapi tidak semua browser support dengan entitas nama. Hampir seluruh browser support dengan entitas angka.
IFRAME
Sebuah iframe digunakan untuk menampilkan sebuah halaman web di dalam halaman web.
Contoh penggunaan:
<iframe src="URL"></iframe>
Atribut yang dapat digunakan dalam iframe :
| Attribute | Fungsi | Value |
|---|
| width | Menentukan lebar iframe | Angka (% | px) |
|---|
| height | Menentukan tinggi iframe | Angka (% | px) |
|---|
| src | Menentukan alamat dokumen yang akan dimasukkan ke dalam iframe | URL |
|---|
| name | Menentukan nama dari iframe | Text |
|---|
| frameborder | Menentukan adanya border iframe | 0 | 1 |
|---|