Berikut ini merupakan jenis dan type dalam form html kecuali

Home
Article
Form pada HTML

Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web.

Table of Contents Show

Form HTML apa saja?
Manakah yang termasuk jenis input type pada HTML?
Jelaskan apa itu form beserta fungsinya?
Apa fungsi dari input text field?

Elemen Form dapat terdiri dari check box, radio button, menu, text box, text area, dan button.

Berikut merupakan beberapa elemen Form yang akan dibahas :

Text fields
Text fields digunakan ketika pengguna ingin mengisi field seperti kata, angka dan lainnya.
Pada umumnya text field pada browser diberi kapasitas sebanyak 20 karakter.
Text Area
Text area dimana merupakan elemen yang dapat menyimpan kata dan dapat diperluas jika pengguna memasukkan lebih banyak text sehingga dapat dimasukkan pada elemen text area.
Radio Buttons
Radio Buttons digunakan ketika memerlukan form yang dapat memilih salah satu diantara beberapa pilihan.
Checkbox
Checkbox digunakan ketika memerlukan form yang dapat memilih lebih dari satu pilihan.
Drop Down Box
Drop-down box, biasanya digunakan ketika memilih satu pilihan diantara banyak pilihan.
Button
Elemen button ini biasa digunakan untuk membuat sebuah tombol, sehingga pengguna dapat melakukan suatu aksi.

Sumber : https://www.tutorialspoint.com/html/

Published at : 05 December 2018 Updated at : 08 December 2018

Home » SMK » Menyajikan Komponen Entri Pilihan

Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan. Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan di sebuah web. Data bisa 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 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>

Kode di atas jika ditampilkan di halaman web adalah sebagai berikut ;

---- Tambahkan File KRS ---

B. 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 :

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. Catatan pada penggunaan input radio adalah bahwa atribut nama (name) dari komponen dari input tersebut harus sama. 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>

Kode di atas jika ditampilkan di halaman web adalah sebagai berikut ; Tingkat Pendidikan :

C. 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). KAtau bisa dikatakan bahwa komponen input checkbox digunakan sebgai masukan untuk data atau nilai pilihan dengan alternatif jawaban lebih dari 1 opsi pilihan. 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>

Kode di atas jika ditampilkan di halaman web adalah sebagai berikut ; ---- KETERANGAN ----

D. 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 :

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="http://1.bp.blogspot.com/-1n-O7CYjfMg/V8j-cIprlJI/AAAAAAAAJas/0NRIdMe11goef0TTGuf0lnmVVbzLy9wfgCLcB/s1600/submit.gif" alt="Submit" width="50" height="50"> </form> </body>
</html>

Kode di atas jika ditampilkan di halaman web adalah sebagai berikut ; Perintah submit saya ganti dengan reset.

E. Komponen Select

Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan. Istilah lain dari bentuk komponen ini adalah combo box atau list box. 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"> 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 saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Sedangkan value=”nilai” merupakan nilai dari setiap pilihan yang diberikan.

Kode di atas jika ditampilkan di halaman web adalah sebagai berikut

nilai ulangan 1 nilai ulangan 2 nilai ulangan 3 nilai ulangan 4

F. 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. Saat membuat 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 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>

Kode di atas jika ditampilkan di halaman web adalah sebagai berikut Catatan : Perintah submit saya ganti dengan reset.

Contoh Pembuatan Form dengan Elemen Entri Pilihan

Berikut adalah listing kode untuk membuat form menggunakan 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 adalah sebagai berikut : Catatan : Perintah submit saya ganti dengan reset

Pembuatan Form dengan Elemen Entri Pilihan dan Elemen Fieldset

Berikut adalah listing kode untuk membuat form menggunakan 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 adalah sebagai berikut : Catatan : Perintah submit saya ganti dengan reset.

Data bisa diinputan dalam komponen entri pilihan, diantaranya dengan menggunakan input file, radio button, chexbox, select serta datalist. Komponen input file berfungsi untuk memasukan data file yang dibutuhkan kedalam sistem web yang dibuat.

Posted by Nanang_Ajim

Mikirbae.com Updated at: 12:12 PM

Form HTML apa saja?

Form pada HTML.

Text fields. Text fields digunakan ketika pengguna ingin mengisi field seperti kata, angka dan lainnya. ... .

Text Area. ... .

Radio Buttons. ... .

Checkbox. ... .

Drop Down Box..

Manakah yang termasuk jenis input type pada HTML?

Macam-Macam Tipe Input.

<input type="button">.

<input type="checkbox">.

<input type="color">.

<input type="date">.

<input type="datetime-local">.

<input type="email">.

<input type="file">.

<input type="hidden">.

Jelaskan apa itu form beserta fungsinya?

Formulir memiliki banyak fungsi misalnya untuk mengumpulkan informasi tertentu, mengumpulkan dan merekam data, sebagai bukti untuk pertanggungjawaban, meminta dan mencatat suatu tindakan, juga sebagai media komunikasi baik antarindividu atau antara individu dengan perusahaan.