Elemen Bagian Form Html Dan Fungsinya

Elemen-komponen Form HTML

Dalam berguru HTML dasar, Form ialah materi yang sangat penting untuk dipelajari. Form berisikan berbagai unsur / unsur. Elemen-unsur dalam sebuah form berfungsi untuk memasukan data dari user dan mengirimkannya ke server.
Sekarang mari kita diskusikan Jenis dan fungsi dari komponen form satu per satu :

1. Text Field (tag )

Elemen form yang digunakan untuk memasukan teks (aksara dan angka) dalam satu baris. Lebar abjad defaultnya adalah 20 abjad, nameun mampu kita ubah sesuai impian kita.
Penulisan :
Atribut :

name : nama dari text field
id : id dari text field, isinya bisa sama dengan name
maxlength : optimal panjang huruf yang bisa diinput
readonly : tekxt field hanya mampu dibaca, tidak mampu diinput, namun bisa diklik
disabled : tekxt field hanya bisa dibaca, tidak mampu 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 :

nama Depan :

nama Belakang :< input type="text" name="nmblk" maxlength="30" placeholder="nama belakang anda"/>

alhasil akan terlihat seperti di bawah ini :

2. Password Field (tag )

Elemen form yang digunakan untuk memasukan teks password dalam satu baris. Karakter yang kita ketik akan muncul dalam bentuk titik-titik atau bulatan-bulatan hitam. Lebar aksara defaultnya adalah 20 karakter, nameun bisa kita ubah sesuai harapan kita.

Penulisan :

Atribut :

name : nama dari password field

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

maxlength : maksimal panjang aksara yang bisa diinput

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

Struktur penulisan password field :

Password :

kesudahannya akan tampak seperti di bawah ini :

3. Number Field (tag )

Elemen form yang dipakai untuk memasukan angka. Lebar huruf defaultnya yaitu 20 huruf, nameun bisa kita ubah sesuai cita-cita kita. Angka yang dimasukan mampu dibatasi dalam rentang tertentu. Jika nilai yang dimasukan di luar rentang yang diputuskan, maka akan timbul perayaan. Untuk menaikan dan menurunkan nilainya mampu menggunakan tombol naik dan tombol turun.
Penulisan :
Atribut :

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

Struktur penulisan number field :

Jumlah :

risikonya akan terlihat mirip di bawah ini :

4. Date Field (tag )

Elemen form yang digunakan untuk memasukan tanggal. Kita tinggal menentukan tanggal yang diharapkan dari kalender yang ditawarkan.
Penulisan :
Atribut :

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

Struktur penulisan date field :

Tanggal Lahir:

jadinya akan terlihat seperti di bawah ini :

5. Range Field (tag )

Elemen form yang digunakan untuk memasukan nilai dalam rentang tertentu, nilai defaultnya 0 hingga dengan 100. disajikan dalam bentuk slider yang bisa digeser untuk menaikan dan menurunkan nilai.
Penulisan :
Atribut :

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

Struktur penulisan :

Volume :

risikonya akan terlihat seperti di bawah ini :

5. Drop Down List (tag )

Elemen form yang dipakai untuk daftar / list dalam bentuk drop down. Ada 2 tag yang digunakan yaitu
Atribut :

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

Struktur penulisan :

Jurusan :

risikonya akan terlihat mirip di bawah ini :

6. Text Area (tag )

Elemen form yang digunakan untuk memasukan teks (karakter dan angka) lebih dari satu baris.
Penulisan : Atribut : <ul> <li>name : nama dari text area</li> <li>id : id dari text area, isinya mampu sama dengan name</li> <li>cols : maksimal panjang aksara yang mampu diinput</li> <li>rows : optimal baris yang bisa diinput</li> <li>readonly : textarea cuma bisa dibaca, tidak mampu diinput, tapi mampu diklik</li> <li>disabled : textarea hanya mampu dibaca, tidak bisa diinput, dan tidak bisa diklik</li> <li>placeholder : diisi dengan petunjuk atau fungsi dari textarea, akan timbul dengan warna yang samar pada text field tersebut</li> </ul> Struktur penulisan : <blockquote> <textarea name="pesan" id="pesan" rows="4" cols="50"> Sesuatu yang paling pertama di hisab atas manusia ialah sholat. Jika sholatnya baik maka baik seluruh amalnya. Jika sholatnya buruk maka buruk seluruh amalnya. Bagaimana yang tidak permah sholat ???? risikonya akan tampak mirip di bawah ini :

7. Radio Button (tag )
Elemen form yang digunakan untuk menentukan satu opsi di antara beberapa opsi yang disediakan.
Penulisan :
Atribut :

name : nama dari radio button

id : id dari radio button, isinya bisa sama dengan name

value : nilai dari radio buttin

checked : menawarkan tanda pilihan pada salah satu radio button

disabled : radio button cuma ditampilkan, tidak bisa diinput dan tidak mampu diklik

Struktur penulisan :

Jurusan yang dipilih :

Teknik Komputer Jaringan

Teknik Sepeda Motor

Rekayasa Perangkat Lunak

Administrasi Perkantoran

jadinya akan terlihat seperti di bawah ini :

8. Checkbox (tag )
Elemen form yang digunakan untuk memilih beberapa pilihan atau semua di antara semua opsi pilihan yang ditawarkan.
Penulisan :
Atribut :

name : nama dari checkboxn

id : id dari checkbox, isinya bisa sama dengan name

value : nilai dari checkbox

checked : memperlihatkan tanda opsi pada salah satu checkbox

disabled : checkbox cuma ditampilkan, tidak bisa diinput dan tidak mampu diklik

Struktur penulisan :

Mata Pelajaran :

Pemrograman Web

Jaringan Dasar

Sistem Operasi

Perakitan Komputer

kesannya akan terlihat seperti di bawah ini :

9. Submit Button (tag )
Elemen form yang berupa tombol, dipakai 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 :
Atribut :

name : nama dari submit button

id : id dari submit button, isinya bisa sama dengan name

value : goresan pena yang muncul pada permukaan tombol

disabled : submit button hanya ditampilkan saja dan tidak bisa diklik

Struktur penulisan submit button :

nama Sekolah:

Aamat :

alhasil akan terlihat mirip di bawah ini :

Pada ketika tombol proses diklik, maka data nama sekolah dan alamat akan diantarke proses.php untuk dimasak di dalam proses tersebut.

10. Reset Button (tag )
Elemen form yang berbentuktombol, dipakai untuk membersihkan semua element form yang berupa isian.
Penulisan :
Atribut :

name : nama dari reset button

id : id dari reset button, isinya bisa sama dengan name

value : tulisan yang muncul pada permukaan tombol

disabled : reset button cuma ditampilkan saja dan tidak bisa diklik

Struktur penulisan reset button :

nama Sekolah:

Aamat :

hasilnya akan tampak seperti di bawah ini :

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

11. Output (tag )
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
dengan memakai atribut oninput.

Penulisan :
Atribut :

name : nama dari bagian output.

id : id dari komponen output, isinya bisa sama dengan name

for : untuk menghubungkan bagian output ini dengan bagian-komponen yang dipakai di dalam rumus matematika pada tag

Struktur penulisan elemen Output :

action=""
oninput = "x.value = parseInt(a.value) + parseInt(b.value)
y.value = parseInt(d.value) - parseInt(e.value)">
Penjumlahan :

a" value="10"> +
b" value="10"> =
x" for="a b">

Pengurangan :

d" value="10"> -
e" value="5"> =
y" for="d e">

Apabila script di atas di laksanakan di browser yang sudah mendukung HTM5, maka akan tampil mirip ini

Hasil dari tag pada gambar di atas ditandai dengan warna kuning pada bulat biru.

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

Itulah sedikit penjelasan tentang beberapa element form dalam bahasa HTML. Pembahasan di atas belum selengkap yang bahu-membahu, tetapi untuk aku kira cukup untuk sebatas bahan dasar.

Praktis-mudahan goresan pena ini berfaedah !.