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 untuk mendefinisilan drop down list dan untuk mendefinisikan isinya. Penulisan :  isi
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 :
    Teknik Komputer Jaringan   Teknik Sepeda Motor   Rekayasa Perangkat Lunak   Administrasi Perkantoran

risikonya akan terlihat mirip di bawah ini :

Jurusan : Teknik Komputer Jaringan Teknik Sepeda Motor Rekayasa Perangkat Lunak Administrasi Perkantoran

6. Text Area (tag  ) 

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

Berbagi :

Anda mungkin menyukai postingan ini :

• 
  Cara Mengatasi Error Mysql_Connect(): Headers And Client Library Minor Version Mismatch
• 
  Server Spek Tinggi Harga Murah