1.) Komponen
input file
Komponen input file berfungsi untuk
memasukan data file yang dibutuhkan kedalam sistem web yang dibuat. Format tag HTML-nya
adalah sebagai berikut :
<input
type=file name=name accept=mime type list>
Name= “name” merupakan pemberian nama
pada komponen input sebagai nama dari
komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam
pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut.
Contoh bentuk tampilannya adalah sebagai berikut :
<!doctype html>
<html>
<head>
<title>input file
</title>
</head>
<body>
<font face="Courier New,
Courier, mono">---- Tambahkan
File KRS ---
</font><br>
<form >
<input type="file"
name="pic" accept="image/*">
</form>
</body>
</html>
2.) Komponen radio button
Pada form input radio button hanya ada
satu pilihan yang terseleksi,tidak bisa digunakan untuk multiple answer. Format
umum tag HTML dari Form Input Radio
Button adalah sebagai berikut :
<input type=radio name=name
value=value>
<input type=radio name=name
value=value checked>
Name= “name” merupakan pemberian nama
pada komponen input sebagai nama dari
komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam
pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut.
Berikut adalah penggalan listing program penulisan form input radio button
<!doctype html>
<html>
<head>
<title>radio
button </title>
</head>
<body>
Tingkat Pendidikan :
<form>
<input
type="radio" name="pendidikan" value="SD">SD<br>
<input
type="radio" name="pendidikan"
value="SMP">SMP<br>
<input
type="radio" name="pendidikan" value="SMA">SMA
sederajat<br>
<input
type="radio" name="pendidikan"
value="D3">D3<br>
<input
type="radio" name="pendidikan"
value="S1">S1<br>
<input type="radio"
name="pendidikan" value="S2">S2<br>
<input
type="radio" name="pendidikan"
value="S3">S3<br>
</form>
</body>
</html>
Yang perlu diperhatikan pada
penggunaan input radio adalah bahwa atribut nama (name) dari komponen dari
input tersebut harus sama.
3)
Komponen chexbox
Komponen chexbox memiliki fungsi yang
hampir sama dengan radio button, yaitu untuk menentukan pilihan. Namun pada
chexbox dapat digunakan untuk memilih lebih dari satu jawaban (multi answer).
Atau bisa dikatakan bahwa komponen
input checkbox digunakan sebgai masukan untuk data atau nilai pilihan dengan
alternatif jawaban lebih dari 1 opsi pilihan. Tampilan dari komponen input ini
berupa kotak yang dapat diberi tanda centang/contreng. Jenis input ini biasa
digunakan untuk memasukkan data pilihan yang pilihannya bisa lebih dari satu,
seperti hobby, makanan, dan lain-lain. Format tag HTML-nya adalah sebagai
berikut :
<input
type=checkbox name=name value=value>
<input
type=checkbox name=name value=value checked>
Setiap komponen input harus diberikan
nama (name) yang berbeda karena data yang diolah di dalam pemrograman adalah
berdasarkan nilai (value) dari nama komponen input tersebut. Nilai dari
komponen checkbox berupa nilai boolean, yakni true apabila dicentang dan false
apabila input pilihan tersebut tidak dicentang.
Berikut ini adalah contoh penerapan
dari format form input check box
<!doctype
html>
<html>
<head>
<title>FORM
INPUT</title>
</head>
----
KETERANGAN ----
<form>
<input
type="checkbox" name="vehicle" value=" Sakit "
>Sakit<br>
<input
type="checkbox" name="vehicle"
value="Ijin">Ijin<br>
<input
type="checkbox" name="vehicle"
value="Tanpa">Tanpa
Keterangan<br>
</form>
</body>
</html>
4) Komponen Input Image
Komponen input image bertujuan untuk
memasukan file gambar yang dibutuhkan oleh sistem web, misalnya saja file
gambar foto.jpg. Format tag HTML dengan atribut image adalah sebagai berikut :
<input
type=image name=name src="url">
<input
type=image name=name src="url" align="alignment">
Name= “name” merupakan pemberian nama
pada komponen input sebagai nama dari
komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam
pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut.
Sedangkan type=image merupakan tipe file yang dapat dimasukan dalam sistem.
Berikut adalah salah satu contoh form Input Image dengan atribut image
<!doctype
html>
<html>
<body>
<form
>
Nama depan
: <input type="text" name="fname"><br>
Nama belakang: <input type="text"
name="lname"><br>
<input
type="image" src="img_submit.gif" alt="Submit"
width="50"
height="50">
</form>
</body>
</html>
Bila listing program diatas di
jalankan di browser (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_image)
