Menyajikan Komponen Entri Pilihan
Form dalam HTML ialah suatu bab yang berfungsi sebagai input atau masukan dari pengguna yang lalu akan diproses atau diolah untuk sanggup dipakai sesuai dengan kebutuhan. Form HTML dipakai untuk menentukan pelbagai macam inputan yang disediakan di sebuah web. Data sanggup diinputan dalam komponen entri pilihan, diantaranya input file, radio button, chexbox, select serta datalist.
A. Komponen Input File
Komponen input file berfungsi untuk memasukan data file yang diperlukan kedalam sistem web yang dibuat. Format tag HTML-nya ialah 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 ketika sistem web dijalankan maka data yang diolah di dalam pemrograman ialah menurut nilai (value) dari nama komponen input tersebut. Contoh bentuk tampilannya ialah 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>
Kode di atas kalau ditampilkan di halaman web ialah sebagai berikut ;
---- Tambahkan File KRS ---
B. Komponen Radio Button
Pada form input radio button hanya ada satu pilihan yang terseleksi,tidak sanggup dipakai untuk multiple answer. Format umum tag HTML dari Form Input Radio Button ialah 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 ketika sistem web dijalankan maka data yang diolah di dalam pemrograman ialah menurut nilai (value) dari nama komponen input tersebut. Catatan pada penggunaan input radio ialah bahwa atribut nama (name) dari komponen dari input tersebut harus sama. Berikut ialah belahan listing agenda 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>
Kode di atas kalau ditampilkan di halaman web ialah sebagai berikut ;
Tingkat Pendidikan :
C. Komponen Chexbox
Komponen chexbox mempunyai fungsi yang hampir sama dengan radio button, yaitu untuk menentukan pilihan. Namun pada chexbox sanggup dipakai untuk menentukan lebih dari satu tanggapan (multi answer).
KAtau sanggup dikatakan bahwa komponen input checkbox dipakai sebgai masukan untuk data atau nilai pilihan dengan alternatif tanggapan lebih dari 1 opsi pilihan. Format tag HTML-nya ialah 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 alasannya data yang diolah di dalam pemrograman ialah menurut 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 ialah pola 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>
Kode di atas kalau ditampilkan di halaman web ialah sebagai berikut ;
---- KETERANGAN ----
D. Komponen Input Image
Komponen input image bertujuan untuk memasukan file gambar yang diperlukan oleh sistem web, contohnya saja file gambar foto.jpg. Format tag HTML dengan atribut image ialah 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 ketika sistem web dijalankan maka data yang diolah di dalam pemrograman ialah menurut nilai (value) dari nama komponen input tersebut. Sedangkan type=image merupakan tipe file yang sanggup dimasukan dalam sistem. Berikut ialah salah satu pola 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8JgdnFnQcxh-lpHJWVJbtqb4txvlrCRcnUFE9iFe1EvCj5UX4vYgP52WfVhc5Jxg1p-CVuk9YvOEEvtAIStf8z_uqGa1kh9KrA5fswfx3JusiTi2ThvH1AdJGhmEEdDiR6tlL4fQFAuLz/s1600/submit.gif" alt=" Form dalam HTML ialah suatu bab yang berfungsi sebagai input atau masukan dari penggu Menyajikan Komponen Entri Pilihan"
width="50" height="50">
</form>
</body>
</html>
Kode di atas kalau ditampilkan di halaman web ialah sebagai berikut ;
Perintah submit aku ganti dengan reset.
E. Komponen Select
Komponen input dengan tipe ‘select’ ialah komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk menentukan 1 alternatif opsi pilihan. Istilah lain dari bentuk komponen ini ialah combo box atau list box. Contoh penggunaan komponen ini ialah pemilihan data agama, jurusan, pekerjaan, dan sebagainya. Format umum Penulisan komponen select ialah sebagai berikut :
<select name=”name”>
<option value="nilai1"> nilai ulagang 1 </option>
<option value=" nilai2"> nilai ulangan 2 </option>
<option value=" nilai3"> nilai ulangan 3 </option>
<option value=" nilai4 "> nilai ulangan 4</option>
</select>
Name= “name” merupakan pemberian nama pada komponen input select sebagai nama dari komponen. Karena pada ketika sistem web dijalankan maka data yang diolah di dalam pemrograman ialah menurut nilai (value) dari nama komponen input tersebut. Sedangkan value=”nilai” merupakan nilai dari setiap pilihan yang diberikan.
Kode di atas kalau ditampilkan di halaman web ialah sebagai berikut
F. Komponen Datalist
Komponen datalist merupakan elemen form gres pada HTML5. Datalist dipakai untuk menciptakan daftar list. Komponen datalist menunjukkan pemberian autocomplete dasar untuk pilihan pada field input. Komponen datalist merupakan pengabungan antara list dan field input dengan atribut autocomplete. Saat menciptakan pilihan pada datalist, bila terdapat huruf/item yang sama dengan data pada data list maka akan muncul item yang cocok (fungsi autocomplete bekerja).
Format umum Penulisan komponen datalist ialah sebagai berikut :
<input list="list">Berikut ini ialah pola penggunaan dari komponen input datalist
<datalist id="id">
<option value="nilai1">
<option value=" nilai2">
<option value=" nilai3">
</datalist>
<!DOCTYPE html>Kode di atas kalau ditampilkan di halaman web ialah sebagai berikut
<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>
Catatan : Perintah submit aku ganti dengan reset.
Contoh Pembuatan Form dengan Elemen Entri Pilihan
Berikut ialah listing isyarat untuk menciptakan form memakai elemen entri pilihan, textarea.
<!DOCTYPE html >
<html>
<head>
<title>form</title>
</head>
<body>
<table border="1" style="width: 100%;"><tbody>
<tr><td><form action="" id="form1" method="post" name="form1">
<table align="center" style="width: 354px;"><tbody>
<tr><td align="center" colspan="3" height="24"><b>PENDAFTARAN</b></td></tr>
<tr><td>Nama Pengguna</td><td align="center">:</td><td><label for="textfield"></label><input id="textfield" name="textfield" type="text" /></td></tr>
<tr><td>Sandi</td><td align="center">:</td><td><label for="textfield2"></label><input id="textfield2" name="textfield2" type="text" /></td></tr>
<tr><td>Jenis Kelamin</td><td align="center">:</td><td><input id="checkbox" name="checkbox" type="checkbox" /><label for="checkbox">Pria <input id="checkbox2" name="checkbox2" type="checkbox" /> Wanita</label></td> </tr>
<tr> <td>Tanggal lahir</td><td align="center">:</td> <td><label for="select"></label><select id="select" name="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option></select> <label for="select2"></label><select id="select2" name="select2"> <option>Januari</option> <option>Februari</option> <option>Maret</option> <option>April</option> <option>Mei</option> <option>Juni</option> <option>Juli</option> <option>Agustus</option> <option>September</option> <option>Oktober</option> <option>November</option> <option>Desember</option> </select> <select id="select3" name="select3"><option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> <option>1999</option> </select></td> </tr>
<tr> <td colspan="2"></td> <td><input id="button" name="button" type="reset" value="Simpan" /> <input id="button2" name="button2" type="reset" value="Batal" /></td> </tr>
</tbody></table>
</form>
</td></tr>
</tbody></table>
</body>
</html>
Hasilnya ialah sebagai berikut :
Pembuatan Form dengan Elemen Entri Pilihan dan Elemen Fieldset
Berikut ialah listing isyarat untuk menciptakan form memakai elemen entri pilihan, textarea dan fieldset.
<html>
<head>
<title>pengaturan pada form</title>
</head>
<body>
<form>
<fieldset>
<legend>Tentang Anda</legend>
<table><tbody>
<tr><td width="50"><label for="first">nama lengkap </label></td><td><input id="first" maxlength="50" name="nama_lengkap" size="20" type="text" />
</td></tr>
<tr><td><label for="last">alamat</label></td><td><input id="last" maxlength="50" name="alamat" size="20" type="text" />
</td></tr>
<tr><td><label for="desc">pesan dan kesan</label></td><td><textarea cols="20" id="desc" rows="5">tuliskan pesan anda disini</textarea></td></tr>
</tbody></table>
<fieldset class="hoby">
<legend>hoby anda?</legend><input id="berkebun" name="hoby" type="radio" value="berkebun" /><label for="cberkebun"> berkebun</label>
<input id="memasak" name="hoby" type="radio" value="memasak" /><label for="memasak"> memasak</label>
<input id="renang" name="hoby" type="radio" value="renang" /><label for="renang"> renang</label></fieldset>
<input id="submit" type="submit" value="submit" />
</fieldset>
</form>
</body>
</html>
Tampilanya ialah sebagai berikut :
Catatan : Perintah submit aku ganti dengan reset.
Data sanggup diinputan dalam komponen entri pilihan, diantaranya dengan memakai input file, radio button, chexbox, select serta datalist. Komponen input file berfungsi untuk memasukan data file yang diperlukan kedalam sistem web yang dibuat.
Komentar
Posting Komentar