Elemen Elemen Form HTML dan Fungsinya

Elemen-elemen Form HTML

Dalam belajar HTML dasar, Form merupakan materi yang sangat penting untuk dipelajari. Form terdiri dari berbagai komponen / elemen. Elemen-elemen dalam sebuah form berfungsi untuk memasukan data dari user dan mengirimkannya ke server.
Sekarang mari kita bahas 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 adalah 20 karakter, nameun bisa kita ubah sesuai keinginan kita.
Penulisan : <input type="text" />
Atribut :

• name : nama dari text field
• id : id dari text field, isinya bisa sama dengan name
• maxlength : maksimal panjang karakter yang bisa diinput
• readonly : tekxt field hanya bisa dibaca, tidak bisa diinput, tapi bisa diklik
• disabled : tekxt field hanya bisa dibaca, tidak bisa diinput, dan tidak bisa diklik
• placeholder : diisi dengan petunjuk atau fungsi dari text field, akan muncul 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>

hasilnya akan tampak seperti 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 muncul dalam bentuk titik-titik atau bulatan-bulatan hitam. Lebar karakter defaultnya adalah 20 karakter, nameun bisa kita ubah sesuai keinginan kita.

Penulisan : <input type="password" />

Atribut :

• name : nama dari password field
• id : id dari password field, isinya bisa sama dengan name
• maxlength : maksimal panjang karakter yang bisa diinput
• placeholder : diisi dengan petunjuk, akan muncul 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>

hasilnya akan tampak seperti di bawah ini :

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

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

• name : nama dari number field
• id : id dari number field, isinya bisa sama dengan name
• maxlength : maksimal panjang karakter yang bisa diinput
• min : nilai minimal yang bisa diinput
• max : nilai maksimal yang bisa diinput
• placeholder : diisi dengan petunjuk, akan muncul 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>

hasilnya akan tampak seperti di bawah ini :

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

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

• name : nama dari date field
• id : id dari date field, isinya bisa sama dengan name

Struktur penulisan date field :

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

hasilnya akan tampak seperti di bawah ini :

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

Elemen form yang digunakan untuk memasukan nilai dalam rentang tertentu, nilai defaultnya 0 sampai dengan 100. disajikan 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 bisa 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>

hasilnya akan tampak seperti 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 yaitu <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 pilihan 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>

hasilnya akan tampak seperti di bawah ini :

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

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 bisa sama dengan name
• cols : maksimal panjang karakter yang bisa diinput
• rows : maksimal baris yang bisa diinput
• readonly : textarea hanya bisa dibaca, tidak bisa diinput, tapi bisa diklik
• disabled : textarea hanya bisa dibaca, tidak bisa diinput, dan tidak bisa diklik
• placeholder : diisi dengan petunjuk atau fungsi dari textarea, akan muncul 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 manusia adalah sholat.
Jika sholatnya baik maka baik seluruh amalnya.
Jika sholatnya buruk maka buruk seluruh amalnya.
Bagaimana yang tidak permah sholat ????
</textarea>

hasilnya akan tampak seperti di bawah ini :

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

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

• name : nama dari radio button
• id : id dari radio button, isinya bisa sama dengan name
• value : nilai dari radio buttin
• checked : memberikan tanda pilihan pada salah satu radio button
• disabled : radio button hanya ditampilkan, tidak bisa diinput dan tidak bisa diklik
• 
  

Struktur penulisan  :

<form name="form1">Jurusan yang dipilih :<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>

hasilnya akan tampak seperti di bawah ini :

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

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

• name : nama dari checkboxn
• id : id dari checkbox, isinya bisa sama dengan name
• value : nilai dari checkbox
• checked : memberikan tanda pilihan 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>

hasilnya akan tampak seperti 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 bisa sama dengan name
• value : tulisan yang muncul 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>

hasilnya akan tampak seperti di bawah ini :

Pada saat tombol proses diklik, maka data nama sekolah dan alamat akan dikirim ke proses.php untuk diolah 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 bisa sama dengan name
• value : tulisan yang muncul 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>

hasilnya akan tampak seperti di bawah ini :

Pada saat 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 menampilkan hasil perhitungan 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 bisa 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 jalankan di browser yang sudah mendukung HTM5, maka akan tampil seperti ini

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

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

Itulah sedikit penjelasan mengenai beberapa element form dalam bahasa HTML. Pembahasan di atas belum selengkap yang sebenarnya, tapi untuk saya kira cukup untuk sebatas materi dasar.

Mudah-mudahan tulisan ini bermanfaat !.

Cara Membuat Form (formulir) dengan Bahasa HTML

Belajar membuat form dengan bahasa pemrograman HTML

Form adalah sebuah antarmuka atau interface yang berfungsi untuk mengumpulkan data dari user. Hasil dari isian form tersebut akan diproses untuk disimpan ke dalam database dengan menggunakan bahasa pemrograman web selain html, seperti PHP, ASP, JSP atau JavaScript. Namun pada materi ini pembuatan form masih belum sampai ke proses penyimpnan data ke dalam database hanya sampai pada tampilan di web client atau browser saja.

Contoh dari sebuah form adalah seperti di bawah ini :

Form di atas menyediakan fasilitas untuk mengisi data pribadi, data tersebut akan disimpan ke dalam database pada saat tombol Kirim diklik. Sebenarnya pada saat tombol Kirim diklik, form tersebut akan menjalankan sebuah program untuk menyimpan data. Program tersebut hanya bisa dijalankan di server, bahasa pemrogramannya pun bukan HTML lagi, tapi bahasa pemrograman web seperti yag telah disebutkan di atas.

Elemen Form HTML

Sebelum kita bahas cara membuat form dengan html, sebaiknya kita mengetahui elemen-elemen dari sebuah form. Form dalam bahasa HTML dibentuk dari beberapa elemen form, masing-masing elemen didefiniskan dalam bentuk tag. Berikut adalah elemen-elemen dari sebuah form :

Simbol	Nama	Tag
	Text Field	<input type="text"/>
	Password Field	<input type="password"/>
	Text Area	<textarea> </textarea>
Silahkan Pilih	Combo Box	<select> </select>
	Check box	<input type=checkbox"/>
	Radio Button	<input type="radio"/>
	Button	<input type="submit"/>

Atribut Form dan Elemen-elemennya

Tag <Form...>

Fungsi : Tag ini berfungsi untuk mendefinisikan sebuah form

Atribut-atribut
name : untuk memberikan nama form
methode : cara pengiriman data pada server dengan memberikan nilai salah satu di bawah ini yaitu :

• Get : mengirim data pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk.
• Post : mengirim datanya secara terpisah.

Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini adalah nilai default seandainya kita tidak menuliskannya) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.

action : menentukan lokasi dari script yang akan memproses data dari form.

Struktur dasar form akan terlihat sebagai berikut:

<form &nbsp name="form1" action="login.php" method="post">
...isi form...
</form>

Form tersebut memiliki nama form1, pada saat tombol submit/login di klik, maka form ini akan menjalankan script php yang ada pada file login.php, data-data yang sudah diisi akan dikirim ke server dengan menggunakan metode post.

Demikian sedikit penjelasan mengenai Cara Membuat Form (formulir) dengan Bahasa HTML. Untuk lebih memahami lebih lanjut mengenai form ini, silahkan pelajari Elemen-elemen form html dan fungsinya.

Mudah-mudahan tulisan ini bermanfaat !.