Elemen Komponen Form Html Dan Fungsinya

Elemen-elemen Form HTML

Dalam mencar ilmu HTML dasar, Form merupakan materi yang sungguh penting untuk dipelajari. Form berisikan banyak sekali unsur / elemen. Elemen-elemen dalam suatu form berfungsi untuk memasukan data dari user dan mengirimkannya ke server.
Sekarang mari kita diskusikan Jenis dan fungsi dari elemen form satu per satu :

1. Text Field (tag <input type="text" />)

Elemen form yang digunakan untuk memasukan teks (huruf dan angka) dalam satu baris. Lebar karakter defaultnya merupakan 20 karakter, nameun dapat kita ubah sesuai impian kita.
Penulisan : <input type="text" />
Atribut :

name : nama dari text field
id : id dari text field, isinya dapat sama dengan name
maxlength : optimal panjang karakter yang bisa diinput
readonly : tekxt field cuma dapat dibaca, tidak bisa diinput, tetapi dapat diklik
disabled : tekxt field cuma dapat dibaca, tidak bisa diinput, dan tidak bisa diklik
placeholder : diisi dengan isyarat atau fungsi dari text field, akan timbul dengan warna yang samar pada text field tersebut

Struktur penulisan text field :

<form name="form1">
nama Depan : <input type="text" name="nmdpn" maxlength="30" placeholder="nama depan anda"/><br/>
nama Belakang :< input type="text" name="nmblk" maxlength="30" placeholder="nama belakang anda"/>
</form>

balasannya akan terlihat menyerupai di bawah ini :

2. Password Field (tag <input type="password" />)

Elemen form yang digunakan untuk memasukan teks password dalam satu baris. Karakter yang kita ketik akan timbul dalam bentuk titik-titik atau bulatan-bulatan hitam. Lebar karakter defaultnya merupakan 20 karakter, nameun dapat kita ubah sesuai impian kita.

Penulisan : <input type="password" />

Atribut :

name : nama dari password field

id : id dari password field, isinya dapat sama dengan name

maxlength : optimal panjang karakter yang bisa diinput

placeholder : diisi dengan petunjuk, akan timbul dengan warna yang samar pada password field tersebut sebelum password diisi.

Struktur penulisan password field :

<form name="form1">
Password : <input type="password" name="pwd" maxlength="10" placeholder="kata kunci anda"/>
</form>

balasannya akan terlihat menyerupai di bawah ini :

3. Number Field (tag <input type="number" />)

Elemen form yang digunakan untuk memasukan angka. Lebar karakter defaultnya merupakan 20 karakter, nameun dapat kita ubah sesuai impian kita. Angka yang dimasukan dapat dibatasi dalam rentang tertentu. Jika nilai yang dimasukan di luar rentang yang ditentukan, maka akan timbul peringatan. Untuk menaikan dan menurunkan nilainya dapat menggunakan tombol naik dan tombol turun.
Penulisan : <input type="number" />
Atribut :

name : nama dari number field
id : id dari number field, isinya dapat sama dengan name
maxlength : optimal panjang karakter yang bisa diinput
min : nilai minimal yang bisa diinput
max : nilai optimal yang bisa diinput
placeholder : diisi dengan petunjuk, akan timbul dengan warna yang samar pada number field tersebut sebelum diisi angka.

Struktur penulisan number field :

<form name="form1">
Jumlah : <input type="number" name="angka" maxlength="10" min="1000" max="1000000" placeholder="Jumlah Hutang Anda"/>
</form>

balasannya akan terlihat menyerupai di bawah ini :

4. Date Field (tag <input type="date" />)

Elemen form yang digunakan untuk memasukan tanggal. Kita tinggal memutuskan tanggal yang dikehendaki dari kalender yang disediakan.
Penulisan : <input type="date" />
Atribut :

name : nama dari date field
id : id dari date field, isinya dapat sama dengan name

Struktur penulisan date field :

<form name="form1">
Tanggal Lahir: <input type="date" name="tgllahir" />
</form>

balasannya akan terlihat menyerupai di bawah ini :

5. Range Field (tag <input type="range" />)

Elemen form yang digunakan untuk memasukan nilai dalam rentang tertentu, nilai defaultnya 0 hingga dengan 100. disuguhkan dalam bentuk slider yang bisa digeser untuk menaikan dan menurunkan nilai.
Penulisan : <input type="range" />
Atribut :

name : nama dari range field
id : id dari range field, isinya dapat sama dengan name
min : nilai terkecil
max : nilai terbesar
value : nilai yang aktif
step : nilai range penamebahan dan pengurangan

Struktur penulisan :

<form name="form1">
Volume : <input type="range" name="rgnilai" min="0" max="100" step="1" />
</form>

balasannya akan terlihat menyerupai di bawah ini :

5. Drop Down List (tag <select> </select>)

Elemen form yang digunakan untuk daftar / list dalam bentuk drop down. Ada 2 tag yang digunakan yakni <select> untuk mendefinisilan drop down list dan <option> untuk mendefinisikan isinya.
Penulisan : <select ><option> isi </option></select>
Atribut :

name : nama dari drop down list (atribut dari tag select)
id : id dari drop down list (atribut dari tag select)
value : isi opsi dari drop down list (atribut dari option)

Struktur penulisan :

<form name="form1">Jurusan :
<select name="Jurusan" id="jurusan">
<option value="TKJ">Teknik Komputer Jaringan</option>
<option value="TSM">Teknik Sepeda Motor</option>
<option value="RPL">Rekayasa Perangkat Lunak</option>
<option value="AP">Administrasi Perkantoran</option>
</select>
</form>

balasannya akan terlihat menyerupai di bawah ini :

6. Text Area (tag <input type="text" />)

Elemen form yang digunakan untuk memasukan teks (huruf dan angka) lebih dari satu baris.
Penulisan : <textarea>
Atribut :

name : nama dari text area
id : id dari text area, isinya dapat sama dengan name
cols : optimal panjang karakter yang bisa diinput
rows : optimal baris yang bisa diinput
readonly : textarea cuma dapat dibaca, tidak bisa diinput, tetapi dapat diklik
disabled : textarea cuma dapat dibaca, tidak bisa diinput, dan tidak bisa diklik
placeholder : diisi dengan isyarat atau fungsi dari textarea, akan timbul dengan warna yang samar pada text field tersebut

Struktur penulisan :

<textarea name="pesan" id="pesan" rows="4" cols="50">
Sesuatu yang paling pertama di hisab atas insan merupakan sholat.
Jika sholatnya baik maka baik seluruh amalnya.
Jika sholatnya buruk maka buruk seluruh amalnya.
Bagaimana yang tidak permah sholat ????
</textarea>

balasannya akan terlihat menyerupai di bawah ini :

7. Radio Button (tag <input type="radio" />)

Elemen form yang digunakan untuk memutuskan satu opsi di antara beberapa opsi yang disediakan.
Penulisan : <input type="radio">
Atribut :

name : nama dari radio button
id : id dari radio button, isinya dapat sama dengan name
value : nilai dari radio buttin
checked : menyediakan tanda opsi pada salah satu radio button
disabled : radio button cuma ditampilkan, tidak bisa diinput dan tidak bisa diklik

Struktur penulisan :

<form name="form1">Jurusan yang diseleksi :<br>
<input type="radio" name="myRadio" id="myRadio" value="TKJ" checked="checked">Teknik Komputer Jaringan <br>
<input type="radio" name="myRadio" id="myRadio" value="TSM">Teknik Sepeda Motor <br>
<input type="radio" name="myRadio" id="myRadio" value="RPL">Rekayasa Perangkat Lunak <br>
<input type="radio" name="myRadio" id="myRadio" value="AP">Administrasi Perkantoran <br>
</form>

balasannya akan terlihat menyerupai di bawah ini :

8. Checkbox (tag <input type="checkbox" />)

Elemen form yang digunakan untuk memutuskan beberapa opsi atau semua di antara semua opsi pilihan yang disediakan.
Penulisan : <input type="checkbox">
Atribut :

name : nama dari checkboxn
id : id dari checkbox, isinya dapat sama dengan name
value : nilai dari checkbox
checked : menyediakan tanda opsi pada salah satu checkbox
disabled : checkbox hanya ditampilkan, tidak bisa diinput dan tidak bisa diklik

Struktur penulisan :

<form name="form1">Mata Pelajaran :<br>
<input type="checkbox" name="mp" id="mp" value="PW" checked="checked">Pemrograman Web <br>
<input type="checkbox" name="mp" id="mp" value="JD">Jaringan Dasar <br>
<input type="checkbox" name="mp" id="mp" value="SO">Sistem Operasi <br>
<input type="checkbox" name="mp" id="mp" value="PK">Perakitan Komputer <br>
</form>

balasannya akan terlihat menyerupai di bawah ini :

9. Submit Button (tag <input type="submit" />)

Elemen form yang berupa tombol, digunakan untuk mengirim semua data isian dalam element form ke server (dalam hal ini file asp, php, jsp atau yang lainnya, yang dituliskan di dalam atribut action di dalam form di mana tombol ini ditempatkan) untuk diproses.
Penulisan : <input type="submit">
Atribut :

name : nama dari submit button
id : id dari submit button, isinya dapat sama dengan name
value : goresan pena yang timbul pada permukaan tombol
disabled : submit button hanya ditampilkan saja dan tidak bisa diklik

Struktur penulisan submit button :

<form name="form1" action="proses.php">
<p align="center">
nama Sekolah: <br>
<input type="text" name="nm" id="nm" value="SMK Al-Manshuriyah"><br>
Aamat : <br>
<input type="text" name="alm" id="alm" value="Nanggerang Salawu"><br>
<input type="submit" name="ok" id="ok" value="Proses" />
</p>
</form>

balasannya akan terlihat menyerupai di bawah ini :

Pada dikala tombol proses diklik, maka data nama sekolah dan alamat akan dikirim ke proses.php untuk dimasak di dalam proses tersebut.

10. Reset Button (tag <input type="reset" />)

Elemen form yang berupa tombol, digunakan untuk membersihkan semua element form yang berupa isian.
Penulisan : <input type="reset">
Atribut :

name : nama dari reset button
id : id dari reset button, isinya dapat sama dengan name
value : goresan pena yang timbul pada permukaan tombol
disabled : reset button hanya ditampilkan saja dan tidak bisa diklik

Struktur penulisan reset button :

<form name="form1" action="proses.php">
<p align="center">
nama Sekolah: <br>
<input type="text" name="nm" id="nm"><br>
Aamat : <br>
<input type="text" name="alm" id="alm" ><br><br>
<input type="reset" name="rst" id="rst" value="Bersihkan Semua Data" />
</p>
</form>

balasannya akan terlihat menyerupai di bawah ini :

Pada dikala tombol Bersihkan Semua Data diklik, maka data nama sekolah dan alamat yang seudah diketik akan dikosongkan.

11. Output (tag <output>)

Elemen form yang berfungsi untuk memperlihatkan hasil perkiraan matematika dari 2 atau lebih elemen form input text field, number field, atau range field .
Rumus matematikanya sendiri di tulis di dalam tag <form> dengan menggunakan atribut oninput.

Penulisan : <output name="x" id="x" for="a b"></output>
Atribut :

name : nama dari elemen output.
id : id dari elemen output, isinya dapat sama dengan name
for : untuk menghubungkan elemen output ini dengan elemen-elemen yang digunakan di dalam rumus matematika pada tag <form>

Struktur penulisan elemen Output :

<form action=""
     oninput = "x.value = parseInt(a.value) + parseInt(b.value)
                   y.value = parseInt(d.value) - parseInt(e.value)">
Penjumlahan : <br>
<input type="number"   name="a" value="10"> +
<input type="number" name="b" value="10"> =
<output name="x" for="a b"></output>
<br><br>

Pengurangan : <br>
<input type="number" name="d" value="10"> -
<input type="number" name="e" value="5"> =
<output name="y" for="d e"></output>
</form>

Apabila script di atas di laksanakan di browser yang telah mendukung HTM5, maka akan tampil menyerupai ini

Hasil dari tag <output> pada gambar di atas ditandai dengan warna kuning pada lingkaran biru.

Jika angka ditulis pada number field maka atomatis balasannya akan berubah.

Itulah sedikit klarifikasi tentang beberapa element form dalam bahasa HTML. Pembahasan di atas belum selengkap yang sebenarnya, tetapi untuk aku kira cukup untuk sebatas materi dasar.

Mudah-mudahan goresan pena ini berharga !.

Sumber http://afm98.blogspot.com

LOKER