Form ( html )

1.       Menu Form

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.  Contohnya  proses  pengiriman  data, browse, hapus, penyuntingan data dan lain sebagainya. Cara penulisan form dalam html adalah.

Pada  penulisan  form  "nama  form"  adalah  nama  form  yang  sedang  digunakan, method adalah metode atau cara yang digunakan untuk menyimpan data ke server sedangkan action adalah alamat atau bisa juga file lain yang digunakan untuk memproses input dari form kedalam server.

2.      Jenis-jenis media input dalam Form

Pada bagian form tersedia kontrol-kontrol input yang digunakan untuk masing- masing keperluan dalam memasukan data input. Dan kontrol form terdiri dari :

A.    Kontrol Berupa Text

Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan menggunakan  dua  buah  elemen:textarea dan input. textarea digunakan  untuk masukan teks yang terdiri dafi beberapa baris, sementara inputdigunakan untuk

masukan teks yang hanya satu baris.

Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya

langsung memasukkan tag-nya saja

selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag

untuk mendapatkan nilai masukan standar:

Gambar 3.1 Contoh Penggunaan Elemen TextArea

Contoh :

Simpan dengan nama file text area dalam form.html

Gambar Contoh skrip penggunaan input berupa text area

Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan menggunakan properti height danwidth.

Walaupun dapat mengisikan teks dengan banyak sekaligus, textarea tentunya tidak  dapat  digunakan  untuk  seluruh  kasus  pengisian  data.  Seringkali  kita

menginginkan pengguna hanya mengisikan data singkat, tanpa isi teks yang

banyak. Untuk jenis masukan seperti itu, kita dapat menggunakan elemen input:

yang akan menghasilkan elemen masukan seperti berikut:

Gambar 3.2 Contoh Penggunaan Elemen Input

Contoh :

                1.  Penggunaan input text dalam sebuah form.

                       Simpan dengan nama input text                                                          dalam sebuah form.html

Gambar Contoh skrip untuk penggunaan input text dalam sebuah form

2.  Penggunaan Input Text berupa Password.

                     Simpan dengan nama input text berupa password.html

Gambar Contoh skrip untuk penggunaan input text dalam sebuah password menu

Perhatikan  juga  bahwa  kita  menggunakan  atribut type pada  elemen  ini  untuk menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data yang dapat kita isikan, dan browser akan menyesuaikan jenis masukan teks yang ada, sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang dapat diisikan pada atribut type yaitu:

1.  color

2.  datetime-local

3.  number

4.  tel

5.  week

6.  date

7.  email

8.  range

9.  time

10. datetime

11. month

12. search

13. url

14. password

15. text

16. file

B.      Kontrol Berupa Radio Button

Radio button di gunakan untuk menyatakan pilihan yang bersifat tunggal, umumnya pada web di  gunakan  untuk  kelengkapan  pertanyaan  seperti pada pendaftaran online, biasanya pertanyaan itu adalah pilihan untuk menyetakan jenis kelamin , agama,  ataupun  sebagainya. Radio  Button  ini  akan  sering kita temui  saat kita berselancar  di  dunia  maya  yang  terkait  dengan  proses  input  data  seperti

pendaftaran dll.

Radio  button  dibuat  dalam  HTML  dengan  menggunakan  elemen input,  dengan

atribut type bernilai : code`radio`:

dalam pembuatan elemen radio button, kita juga wajib menambahkan dua atribut lainnya,   yaitu name dan value.   Atribut name digunakan   untuk   memberitahukan browser bahwa radio button dengan atribut name yang sama adalah merupakan kumpulan radio button yang sama, sehingga pengguna tidak boleh memilih dua

buah pilihan pada radio button tersebut.

Atribut value digunakan untuk menyimpan nilai yang ingin kita kirimkan ke server.

Gambar 3.3 Contoh Penggunaan Elemen Radio Button

Contoh :

Simpan dengan nama file input text berupa radio button.html

Gambar Contoh skrip untuk penggunaan input text berupa radio butto 

C.    Kontrol Berupa Checkbox

Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan, pada input type checked box Anda dapat memilih satu atau beberapa pilihan, atau tidak memilih sama sekali.   Pilihan ini biasanya dipakai untuk memasukkan data yang sifatnya opsional. Anda dapat menggunakan  “Checkbox” pada atribut. Input checkbox adalah sebuah masukan untuk memilih sesuatu opsi/ pilihan. Jika dipilih maka  pengguna  akan  men-check  (mencentang)  dan  jika  tidak  memilih  akan dibiarkan saja.

Elemen  ini  sama  seperti  radio  button,  dibuat  dengan  elemen input yang  nilai

atribut type-nya berisikancheckbox

Seperti yang dapat dilihat, atribut name dan value juga wajib dimiliki oleh checkbox, dengan alasan yang sama untuk radio button.

Gambar 3.4 Contoh Penggunaan Elemen Checkbox

Meskipun dapat memberikan pilihan nilai kepada pengguna, radio button maupun checkbox sangat tidak ideal untuk digunakan pada pilihan yang memiliki nilai yang sangat banyak. Misalnya, pilihan negara yang ditinggali oleh pengguna dari ratusan

negara  yang  ada  di  dunia  akan  jika  ditampilkan  pada  radio  button  akan menyebabkan  daftar  yang  dipaparkan  sangat  banyak  dan  sulit  dibaca  oleh pengguna. Dalam kasus seperti ini lebih baik kita menggunakan dropdown list.

Contoh :

Simpan dengan nama file checkbox dalam html.html

Gambar contoh skrip untuk penggunaan input text berupa checkbox

D.    Dropdown list

Pembuatan  elemen  dropdown  dilakukan  dengan  menggabungkan  dua  elemen, yaitu select dan option. Elemenselect membungkus seluruh elemen option yang ada, untuk membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari

dropdown yang diinginkan. Perhatikan kode di bawah:

yang akan menghasilkan:

Gambar 3.5 Contoh Penggunaan Elemen Dropdown

dan  jika  ingin  memungkinkan  pengguna  memilih  beberapa  pilihan  kita  dapat menambahkan atribut multiple pada elemen select:

Gambar 3.6 Contoh Penggunaan Elemen Dropdown dengan Pilihan Banyak

Contoh :

Simpan dengan nama file select dropdown dalam form.html

Gambar Contoh skrip penggunaan Select Dropdown     

 

E.      Button

Pada saat kita melakukan browsing di dunia maya, dan mengakses sebuah website. Sering kita menemui tombol-tombol fungsi seperti reset, submit, send dan lain sebagainya. Dan sering pula kita sering menemui gambar yang dibuat fungsi seperti tombol.

A.    Submit

Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut action. Pembuatan tombol submit juga dilakukan dengan menggunakan elemen input, yang atribut type-nya diisikan dengan nilai submit, seperti berikut:

Perhatikan  bahwa  berbeda  dengan  elemen-elemen input sebelumya,  nilai  dari atribut value diproses menjadi teks dari tombol yang ditampilkan ke pengguna. Hal ini menyebabkan kita tidak lagi perlu menambahkan teks setelah  elemen form, seperti pada radio button ataupun checkbox.

Gambar 3.7 Contoh Penggunaan Tombol Submit        

B.     Reset

Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan nilai semua elemen yang ada pada form). Pembuatan tombol dilakukan sama persis seperti pada tombol submit, dengan perbedaan nilai pada atribut type, yang diisikan dengan reset pada tombol penghapusan ini.

Contoh :

Simpan dengan nama file submit,reset dan image sebagai button.html

Gambar Contoh skrip penggunaan input berupa button

 

F.     Organisasi Elemen Form

Mengetahui bagaimana membuat elemen-elemen masukan / input pada form masih merupakan langkah awal dalam pembuatan form HTML. Elemen-elemen masukan form jika ditampilkan tanpa informasi tambahan tidaklah berguna, karena pengguna tidak dapat mengetahui data apa yang harus diisikan ke dalam elemen-elemen tersebut.

Untuk memberikan informasi tambahan kepada pengguna, HTML juga menyediakan elemen-elemen yang dapat digunakan sebagai penanda dari elemen masukan form. Adapun    elemen-elemen    yagn    dapat    digunakan    untuk    tujuan    tersebut yaitu label, fieldset, dan legend.

A.     Label

Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan, dan harus memiliki atribut for. Atribut for pada elemenlabel berisikan nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan, sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik pada teks yang dihasilkan oleh elemen label.

Perhatikan kode berikut di mana isi dari atribut for pada label adalah sama dengan

isi atribut id pada elemen input.

B.      Fieldset

Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan.

Secara standar, elemen fieldset akan memberikan border di sekitar grup elemen- elemen  di  dalamnya,  yang  tentunya  dapat  diubah  dengan  menggunakan  CSS. Berikut adalah contoh

penggunaan fieldset :

yang hasil eksekusinya adalah:

 

 

gambar 3.8 Contoh Penggunaan Fieldset

C.    Legend

Elemen legend digunakan untuk memberikan judul pada sebuah fieldset. Pengunaan elemen legend sangat  sederhana, hanya dengan  menambahkan  elemen  tersebut

sebagai child pertama dari fieldset, seperti berikut:

yang akan menghasilkan tampilan seperti berikut:

Gambar 3.9 Contoh Penggunaan Legend

dan tentunya tampilan dari legend dapat diubah dengan menggunakan CSS.

G.     Validasi Masukan pada Form

Seringkali dalam pengembangan form pada aplikasi, terdapat elemen-elemen yang tidak wajib diisikan oleh pengguna dan elemen-elemen yang wajib diisikan oleh pengguna. Aplikasi kemudian akan melakukan pengecekan terhadap nilai masukan dari pengguna, apakah nilai yang wajib ada sudah diisikan atau belum. Jika nilai belum diisikan maka aplikasi akan menolak form pengguna, dengan pesan kesalahan yang menjelaskan bahwa terdapat isian yang wajib diisi oleh pengguna. Proses pengecekan  kewajiban  isi  atau  berbagai  batasan  lain  ini  dikenal  dengan  nama validasi.

Validasi pada elemen-elemen form HTML dilakukan dengan beberapa cara, yaitu:

1.      Atribut requied pada  elemen-elemen  masukan  yang  wajib  diisikan.  Jika pengguna tidak mengisikan

 elemen maka browser secara otomatis akan memberikan  peringatan  kepada  pengguna  dan  membatalkan  pengiriman form. Contoh penggunaan atribut ini yaitu:

          <input type="text" name="username" requied>

2.      Pengunaan  atribut type yang  benar,  untuk  memastikan  browser  dapat melakukan pengecekan nilai

yang diisikan pengguna dengan format sesuai dengan yang dispesifikasikan pada standar HTML. Misalnya, jika menggunakantype="email",        maka        pengguna        tidak        dapat mengisikan bukanemail sebagai masukan form.

Gambar 3.10 Contoh Pesan Kesalahan Pengisian Email pada HTML