.jpg)
Advertisement
.jpg)
Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan. Data bisa diinputan dalam bentuk input teks , pilihan radio button, check box dan lain sebagainya. Bentuk inputan tersebut dikemas elemen dalam tag-tag form. Berikut adalah elemen-elemen yang disediakan oleh html
- Baca Juga : Pengertian dan fungsi form html>>
- Baca Juga : Membuat Format Target Link, Email>>
- Baca Juga : Mengenal dan fungsi antribut Action pada html>>
- Baca Juga : Mengenal dan Fungsi antribut Autocompelete>>
Tag
|
Deskripsi
|
Format umum tag
|
Mendefinisikan untuk form bagi user
|
<form>
</form>
| |
Mendefinisikan kontrol input pada form
|
<form>
<input type="submit" value="Submit">
</form>
| |
Mendefinisikan kontrol input berupa area teks pada form
|
<textarea rows="4" cols="50">
teks yang akanditampilkan
</textarea>
| |
Mendefinisikan label pada tag elemen <input>
|
<form action="demo_form.asp">
<label for="buku">Buku</label>
<input type="radio" name="barang" id="buku" value="buku"><br>
</form>
| |
Group dengan element yang berhubungan satu sama lain didalam form
|
<form>
<fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form | |
Mendefinisikan judul untuk elemen <fieldset>
|
<fieldset>
<legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form | |
Merupakan daftar secara drop-down
|
<select>
<option value="volvo">Volvo</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select | |
Mendefinisikan group options yang berhubungan satu sama lain dalam bentuk drop-down list, merupakan bagian dari tag elemen <select>
|
<select>
<optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> | |
mendefinisikan option pilihan dalam bentuk drop-down list, merupakan bagian dari tag elemen <select>
|
<select>
<option value="volvo">Volvo</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select | |
Merupakan tombol yang dapat diklik
|
<button type="button">Klik disini!</button>
| |
Daftar/list khusus yang didefinisikan dalam elemen tag <input>
|
<input list="browsers">
<datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> | |
Merupakan generator key-pair field untuk form
|
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form> | |
Merupakan hasil dari suatu perhitungan
|
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> |
Contoh form sederhana
Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana :
<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name=”form1” method=”POST” action=”inputdata.php”>
Nama : <input type="text" name="nama"> <br><br>
Kelas: <input type="text" name="kelas" maxlength="2"> <br><br>
No : <input type="text" name="nomor" value="10"> <br><br>
Hobby: <input type="text" name="hobby" size="8"> <br><br>
Password: <input type="password" name="password">
<br><br>
<input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset">
</form>
</body>
</html>
|
Apabila dibuka di dalam browser, maka tampilan dari susunan kode HTML di atas adalah sebagai berikut :
Apabila tombol “Submit” diklik, maka semua nilai yang sudah diinputkan oleh pengguna akan di olah di dalam file PHP “inputdata.php”.
[[Berikutnya : Format penulisan Form pada HTML>>