Jenis type Form Dan Cara Penggunaan Nya
Pengertian tag <input>
Tag <input> merupakan suatu tag yang membutuhkan tag <form> agar dapat bekerja. Tag <input> sendiri merupakan sebuah tag yang dapat menampung inputan yang sudah di inputkan oleh user. Tag <input> ini mempunyai beberapa tipe untuk inputan yang berbeda-beda. Berikut ini merupakan tipe dari tag <input> :
· Text
Digunakan untuk inputan yang dapat di isikan teks. Cara menggunakannya adalah ketikkan kode berikut pada struktur dasar HTML seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Input Teks</title>
</head>
<body>
<form>Inputan Berupa Teks : <input type="text"></form>
</body>
</html>
· Password
Digunakan untuk inputan yang harus di isikan dengan password. Cara type password yaitu seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Input Password</title>
</head>
<body>
<form>Inputan Berupa Password : <input type="password"></form>
</body>
</html>
· Radio
Digunakan untuk inputan yang berupa pilihan, dimana item yang dapat pilih hanya satu item saja. Untuk type Radio diperlukan attribut lain yaitu name agar yang hanya dipilih hanya 1 item. Biasanya tipe ini digunakan untuk Jenis kelamin. Cara penggunaannya :
<!DOCTYPE html>
<html>
<head>
<title>Input Radio</title>
</head>
<body>
<form>Inputan Berupa Radio : <br/><input type="radio" name="gender">Laki-laki
<input type="radio" name="gender">Perempuan</form>
</body>
</html>
· Checkbox
Digunakan untuk inputan yang berupa pilihan, dimana item yang dapat dipilih bisa lebih dari satu item. Berikut cara penggunaan checkbox :
<!DOCTYPE html>
<html>
<head>
<title>Input Checkbox</title>
</head>
<body>
<form>Inputan Berupa Checkbox : <br/><input type="checkbox”>A
<input type="checkbox">B</form>
</body>
</html>
· Submit
Digunakan sebagai tombol yang memiliki fungsi untuk memproses data. Cara penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Input Submit</title>
</head>
<body>
<form>Inputan Berupa Submit : <br/><input type="submit”>
</form>
</body>
</html>
· Reset
Digunakan sebagai tombol yang memiliki fungsi mereset data yang telah diinputkan oleh user. Cara penggunaan :
<!DOCTYPE html>
<html>
<head>
<title>Input Reset</title>
</head>
<body>
<form>Inputan Berupa Reset : <br/><input type="reset”>
</form>
</body>
</html>
· Date
Digunakan untuk inputan yang berupa tanggal. Cara menggunakannya :
<!DOCTYPE html>
<html>
<head>
<title>Input Date</title>
</head>
<body>
<form>Inputan Berupa Date : <input type="date"></form>
</body>
</html>
· Time
Digunakan untuk inputan yang berupa jam (waktu). Cara menggunakannya :
<!DOCTYPE html>
<html>
<head>
<title>Input Time</title>
</head>
<body>
<form>Inputan Berupa Time : <input type="time"></form>
</body>
</html>
· Email
Digunakan untuk inputan yang berupa alamat email. Cara menggunakannya :
<!DOCTYPE html>
<html>
<head>
<title>Input E-mail</title>
</head>
<body>
<form>Inputan Berupa E-mail : <input type="email"></form>
</body>
</html>
· Number
Digunakan untuk inputan yang berupa angka saja. Cara menggunakannya :
<!DOCTYPE html>
<html>
<head>
<title>Input Number</title>
</head>
<body>
<form>Inputan Berupa Number : <input type="number"></form>
</body>
</html>
Jangan Lupa Di Follow dan Comment nya.
Sumber Referensi :
Jenis type Form Dan Cara Penggunaan Nya
![Jenis type Form Dan Cara Penggunaan Nya]()
Reviewed by Yandi Rizki Nugraha
on
February 12, 2016
Rating:
No comments