Materi Pemrograman Web Semester I

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. Berikut contoh scriptnya:

<!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>

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>

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).

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 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">

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>

5) Komponen select
Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan.
Contoh penggunaan komponen ini adalah pemilihan data agama, jurusan, pekerjaan, dan sebagainya. Format umum Penulisan komponen select adalah sebagai berikut :

<select name=”name”>  <option value="nilai1"> nilai1 </option> <option value=" nilai2"> nilai2 </option> <option value=" nilai3"> nilai3 </option> <option value=" nilai4 "> nilai4</option> </select>

Berikut contoh penggunaan dari komponen input bertipe ‘select’ :

<html> <head> <title>Form</title> </head> <body> Pilih Jurusanmu : <form> <select name="jurusan"> <option value="informatika">informatika</option> <option value="matematika">matematika</option> <option value="kimia">kimia</option> <option value="biologi">biologi</option> <option value="fisika">fisika</option> </select> </form> </body> </html>

6) Komponen datalist

Komponen datalist merupakan elemen form baru pada HTML5. Datalist digunakan untuk membuat daftar list. Komponen datalist memberikan dukungan autocomplete dasar untuk pilihan pada field input. Komponen datalist merupakan pengabungan antara list dan field input dengan atribut autocomplete.

Penulisan komponen datalist adalah sebagai berikut :

<input list="list"> <datalist id="id">  <option value="nilai1">  <option value=" nilai2"> <option value=" nilai3">  </datalist>

Berikut ini adalah contoh penggunaan dari komponen input datalist;

<!DOCTYPE html> <html> <body> <form action="demo_form.asp" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> </body> </html>