Materi PWPB XI Format Formulir Pada Web

BAB III

FORMAT FORMULIR

PADA HALAMAN WEB

KOMPETENSI INTI

3.      Memahami, menerapkan, menganalisis, dan mengevaluasi tentang pengetahuan faktual, konseptual, operasional dasar, dan metakognitif sesuai dengan bidang dan lingkup kerja Rekayasa Perangkat Lunak pada tingkat teknis, spesifik, detail, dan kompleks, berkenaan dengan ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam konteks pengembangan potensi diri sebagai bagian dari keluarga, sekolah, dunia kerja, warga masyarakat nasional, regional, dan internasional.

4.      Melaksanakan tugas spesifik dengan menggunakan alat, informasi, dan prosedur kerja yang lazim dilakukan serta memecahkan masalah sesuai dengan bidang kerja Rekayasa Perangkat Lunak. Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur sesuai dengan standar kompetensi kerja. Menunjukkan keterampilan menalar, mengolah, dan menyaji secara efektif, kreatif, produktif, kritis, mandiri, kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung. Menunjukkan keterampilan mempersepsi, kesiapan, meniru, membiasakan, gerak mahir, menjadikan gerak alami dala ranah konkret terkait dengan pengembangan dari yang dipelajarinya di sekolah serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung.

 

KOMPETENSI DASAR

3.6 Menerapkan format formulir pada halaman web

4.6 Membuat kode html untuk menampilkan formulir pada halaman web

 

APERSEPSI
Di dalam situs web biasanya akan tcrlihat tcks yang warnanya berbeda, bawah, bcrada dalam kotak (tombol). Inilah yang discbut hyperlink atau link. Jika bagian ini diklik, Anda akan dibawa kc halaman web lainnya. Anda akan mengctahui bahwa teks terscbut aktif (link) karena jika melewatkan pointer mouse di atasnya, pointer itu betilbah menjadi pointing finger. Pranala atau hipertaut (Inggris : hyperlink) adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau sumber lain, seperti halnya suatu kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan.

MENGAMATI
Pelajarilah buku teks maupun sumber lain tentang format kaitan dan format formulir pada halaman web dengan baik dan benar!

 

AYO PAHAMI

FORMAT FORMULIR PADA HALAMAN WEB
Form dapat digunakan untuk berbagai keperluan, seperti keperluan login,  transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari user, menawarkan barang/jasa secara online, dan sebagainya. Form sangat sering dijumpai dalam satu aplikasi sistem informasi berbasis web.

1.      Konsep Formulir dalam HTML

Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima perintah masukan dari user, yang selanjutnya diolah menggunakan bahasa pemrograman web, baik secara server side scripting menggunakan PHP atau JSP maupun client-side scripting (javascript). Berikut ini standar atau format umum penulisan dari form.

 

<Form metode="post/get" action="…">

…

…

…

</form>

Di antara elemen <form> dan </form>, terdapat elemen—elemen HTML <input> yang berfungsi untuk mendefinisikan input yang akan dimasukkan. Berikut ini format umum dari penulisan elemen HTML <input>.

Jenis masukan (input) dari halaman web minimal harus mempunyai atribut jenis (type), nama (name), dan nilai (value) default. Di samping atribut type, masing-masing elemen input memiliki atribut-atribut lain dan berlakü pula untuk beberapa jenis elemen input. Elemen <input> yang atribut TYPE-nya adalah text, memiliki atribut sebagai berikut.

a.      Name          : untuk menamai kotak

b.      Value           : untuk menandai' ataii menampung teks

c.       Size              : mengatur ukuran teks pada kotak

d.      MaxLength  : menentukan panjang maksimum teks

Masing-masing jenis input memiliki karakteristik berbeda dan pemilihan pengguna disesuaikan dengan kesesuaian nilai dari input data yang dikelola. Perhatikan contoh listing berikut.

 

<form>

Nama Lengkap : <input type text" name="fnama"><br>

<input name="negara" value="Republik Indonesia" >

<input type=" submit" value="Submi">

</form>

 

Jika dibuka menggunakan web browser, akan tampak sebagai berikut.

 

2.      Penggunaan Tag Form

Form HTML digunakan untuk memilih berbagai macam inputan yang disediakan. Data bisa dimasukkan dalam bentuk input teks, pilihan radio button, check box, dan lain-lain. Bentuk inputan tersebut dikemas elemen dalam tag-tag form. Berikut ini elemen-elemen yang disediakan oleh HTML.

a.      Elemen Form Button

Berikut ini format umum penulisan input button pada tag <form>.

 

<button type=button>

<button type=button name=name>

<button type=button value=value>

 

b.      Elemen Form Reset dan Input submit

Format tag HTML untuk form reset adalah: <INPUT TYPE=RESET>, sedangkan format tag HTML input submit diuraikan sebagai berikut.

 

<input type=submit>

<input type=submit name=name>

<input type=submit value=value>

 

Berikut ini contoh bentuk listing programnya.

 

<!DOCTYPE html>

<html>

<head>

  <title>Latihan 5 : Menghapus data (Reset)</title>

</head>

<body>

  ---IDENTITAS PESERTA DIDIK---

  <FORM>

       Nama Lengkap   : <input type="text" name="nama"><br>

       No Induk Siswa : <input type="text" name="nis" maxlength="12"><br>

       <input type="reset" value="Reset">

       <input type="submit" name="submit" value="Submit">

  </FORM>

</body>

</html>

 

Sementara itu, berikut ini bentuk tampilan di browser.

 

 

3.      Form Option

<Form> merupakan formulir yang digunakan sebagai perantara dalam memasukkan data ke server. Elemen form harus membungkus seluruh elemen masukan informasi agar dapat dibaca oleh aplikasi web. Setiap elemen form dalam suatu halaman web hat-us memiliki atribut name yang digunakan sebagai pengenal dari nama elemen tersebut. Tag <form> digunakan untuk membuat form dalam dokumen HTML. Berikut ini format umum penulisan dari form.

         <form atribut="atribut">

     ......

     ......

     </form>

a.      Atribut

Penulisan form dilengkapi oleh atribut berjumlah sembilan dan dari sembilan atribut, hanya accept yang tidak mendukung pada penerapan HTML5. Berikut ini beberapa atribut yang dimiliki oleh tag <form>.

a)      Accept

Atribut "accept" mendefinisikan MIME yang diizinkan oleh server yang memuat script untuk memproses form. Atribut "accept" tidak support pada penerapan HTML5.

b)      Accept-charset

Atribut "accept-charset" merupakan atribut untuk menentukan karakter tertentu yang akan digunakan untuk pengiriman formulir. Nilai default string yang diterima adalah "UNKNOWN" karena menunjukkan pengodean sama dengan pengodean dokumen yang mengandung tag elemen <form>.

c)      Action

Atribut action digunakan untuk mengirimkan data form ketika form disubmit atau dapat dikatakan Aksi yang muncul ketika user menekan tombol tertentu. Action menentukan lokasi dari script yang akan memproses data dari form.

d)      Autocomplete

Atribut autocomplete memungkinkan form dapat menentukan untuk memiliki autocomplete on atau off. Atribut autocomplete merupakan atribut baru di HTML5.

e)      Method

Atribut method adalah atribut yang wajib dicantumkan saat penulisan <form> karena atribut method merupakan metode untuk pengiriman data ke tujuan, yaitu Get dan Post.

f)       Enctype

Atribut enctype merupakan atribut yang menentukan bagaimana data form dikirim ke server. Atribut enctype hanya digunakan saat form menggunakan method = post.

g)      Name

Format umum penulisan atribut name adalah <form: name="text"> dengan nilai dari atribut name berupa text.

h)      Novalidate

Atribut novalidate tidak support ketika dijalankan pada browser  Internet Explorer versi 9 ke bawah dan Safari.

i)        Target

Atribut target menentukan nama atau keyword yang  mengindikasikan di mana respons dari form akan ditampilkan,  misanya tab, window, atau dalam frame. Pada umumnya, target window name selalu berisi data berikut.

a.   _ blank (respons ditampilkan dalam new window or tab)

b.   _self (respons ditampilkan dalam frame yang sama (default)

c.    _parent (respons ditampilkan dalam parent frame)

d.   _top (respons ditampilkan dalam window full body)

e.   framename (respons ditampilkan dalam iframe)

 

b.      Jenis format formulir

Beberapa hal yang berhubungan dengan jenis format formulir dijelaskan sebagai berikut.

1)      Format Formulir Horizontal

Untuk membuat tampilan form tertata rapi, umumnya digunakan elemen HTML <table>. Secara umum, layout dari form adalah  layout horizontal, yakni layout setiap input ditempatkan di samping dari label keterangan masing-masing input. Perhatikan tampilan form secara horizontal berikut.

 

<!DOCTYPE html>

<html>

<head>

  <title>CONTOH TAG FORM</title>

</head>

<body>

<form method="Post" ACTION="mailto:teknisi@jardiknas.org">

<table border=0 width="75%">

 <tr>

  <td width="25%">NIS</td>

  <td><INPUT TYPE="TEXT" Name="NPM" MAXLENGTH="10" SIZE="11"></td>

 </tr>

 <tr>

  <td width="25%">Nama Siswa</td>

  <td><INPUT TYPE="TEXT" Name="NamaMHS" MAXLENGTH="25" SIZE="25"></td>

 </tr>

 <tr>

  <td width="25%">Alamat</td>

  <td><INPUT TYPE="TEXT" Name="Alamat" MAXLENGTH="50" SIZE="40"></td>

 </tr>

 <tr>

  <td width="25%">Jenis Kelamin</td>

  <td><INPUT TYPE="RADIO" Name="Jenkel" CHECKED VALUE="Laki2">Laki-laki

      <INPUT TYPE="RADIO" Name="Jenkel" VALUE="Perempuan">Perempuan

  </td>

 </tr>

 <tr>

 <tr>

  <td width="25%">Konsentrasi Keahlian</td>

  <td><SELECT Name="Jurusan">

              <OPTION VALUE="KA">Rekayasa Perangkat Lunak

              <OPTION VALUE="MI">Teknik Komputer Jaringan

              <OPTION VALUE="TK">Teknik Pemesinan

              <OPTION VALUE="TK">Teknik Sepeda Motor

              <OPTION VALUE="TK">Teknik Kendaraan Ringan

         </SELECT>

  </td>

 </tr>

 <tr>

  <td width="25%">Fasilitas</td>

  <td><INPUT TYPE="CHECKBOX">Flash Disk</td>

 </tr>

 <tr>

  <td></td><td><INPUT TYPE="CHECKBOX">Bakal Baju</td>

 </tr>

 <tr>

  <td></td><td><INPUT TYPE="CHECKBOX">Bakal Jas</td>

 </tr>

  <td></td>

  <td><INPUT TYPE="SUBMIT" VALUE="Simpan"> 

  <INPUT TYPE="RESET" VALUE="Batal">

  </td>

 </tr>

</table>

</form>

</body>

</html>

 

Berikut ini tampilan dari listing program di atas jika dilihat dari browser.

2)      Format Formulir Vertikal

Halaman web berbasis mobile tentu memerlukan form dalam menerima input dari user untuk menyesuaikan ukuran perangkat yang bersangkutan. Oleh sebab itu, layout dari halaman web harus disesuaikan, termasuk untuk layout dari sebuah form. Apabila sebuah form digunakan pada aplikasi mobile, layout yang diterapkan adalah layout secara vertikal, sesuai dengan karakteristik layar yang tidak terlalu besar.

4.      Metode Get dan Post

Protokol HTTP menyediakan dua metode dalam melakukan permintaan pengiriman data bentuk HTML, yaitu metode GET dan metode POST. Sementara itu, permintaan HTTP terdiri atas dua bagian, yaitu sebuah header yang berisi sekumpulan metadata global mengenai kemampuan browser dan body yang dapat berisi informasi yang diperlukan ke server untuk memproses permintaan khusus.

a.      Metode GET

Metode GET identik dengan metode yang digunakan oleh browser untuk meminta server mengirim kembali resource yang diberikan. Dalam hal ini, browser mengirimkan sebuah body kosong. Body kosong sehingga jika formulir dikirim menggunakan metode ini, data yang dikirim ke server ditambahkan ke URL. Berikut ini bent-uk implementasi metode get pada elemen <form>.

 

<!DOCTYPE html>

<html>

<head>

<title>Latihan Metode GET</title>

</head>

<body>

<form action="https://smk-korpri-mjl.sch.id" method="get">

<input name="say" value="Hello, semua">

<input name="to" value="Apa kabar hari ini?">

<button>Kirim salam</button>

</form>

</body>

</html>

 

Dari listing di atas, jika tombol "kirim salam" diklik akan mengarah ke alamat web, yaitu https://smk-korpri-mjl.sch.id/.

b.      Metode POST

Metode POST sedikit berbeda dengan GET karena pada POST akan mengirimkan server permintaan respons dengan mem-perhitungkan data yang tersedia. Form yang dikirim dengan menggunakan data metode POST akan ditambahkan dalam body dari I-ITTP yang direquest. Berikut ini bentuk implementasi metode POST pada elemen <form>.

5.      Tipe-Tipe Inputan dalam Form

(Text, Password, Radio, Checkbox, Hidden, Button, Submit, dan File)

Form HTML digunakan untuk memilih pelbagai macam data yang disediakan dalam bentuk text area, input teks, pilihan radio button, check box, dan lain-lain. Bentuk input tersebut dikemas elemen dalam tag-tag form.

a.      Komponen Textarea Multiline

Komponen textarea merupakan area untuk menyimpan text baru atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text. HTML5 menyediakan 6 atribut barm textarea. Format umum penulisan text area multilinc adalah: <textarea atribute="attribute">. Untuk menarnpung input teks  yang panjang dan mungkin tersusun atas lebih dari J baris, digunakan komponen input bernama 'textarea'. Textarea dapat digabungkan dengan tag form untuk menjadi inputan yang akan diolah oleh file pemroses seperti yang telah dijelaskan pada tag Form tersebut. Ada beberapa atribut dari textarea, di antaranya sebagai berikut.

b.      Komponen Input Text Password

Komponen input text password bertanggung jawab untuk memasukkan data password. Di samping tipe text, terdapat pula tipe input teks yang lain, yakni 'password'. Input tipe 'password' ini akan  menghasilkan input dengan notasi Input tipe 'password' biasanya digunakan oleh user di dalam form login. Berikut ini format dari elemen input text password HTML-nya.

 

<input type=password name=name>

<input type=password name=name MaxLength=length>

<input type=password name=name size=size>

<input type=password name=name value=value>

 

c.       Komponen Input Text

Komponen input text merupakan komponen untuk memasukkan data text ke server dalam bentuk textfield. Format tag HTML-nya adalah sebagai berikut.

 

<Input Type=Text Name=name>

<lnput Type=Text Name=name MaxLength=length>

<lnput Type=Text Name=name Size=size>

<lnput Type=Text Name=name Value=value>

 

d.      Form Menggunakan Input Hidden

Formatnya adalah <lnput Type=Hidden Name=name Value=value>. Format form input hidden ditandai dengan atribut form type =hidden pada tag <input>, yang artinya ada form ,inputan yang disembunyikan atau tidak tampilkan.

e.      Komponen Entri Pilihan

Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan. Data bisa diinputkan dalam komponen entri pilihan, di antaranya input file, radio button, checkbox, select, serta datalist.

a)      Komponen Input File

Komponen input file berfungsi untuk memasukkan data file yang dibutuhkan ke dalam sistem web yang dibuat. Berikut format tag HTML-nya.

 

<input type=file name=name accept=mime type list>

 

Bentuk tampilannya diuraikan sebagai berikut:

 

<!DOCtype html>

<html>

<head>

<title> input file </title>

</head>

<body>

<font face="Arial, arial, mono">

--- Tambahkan File KRS---

</font><br>

<form > <input type="file" name="pic" accept="image/*"></form>

</body>

</html>

 

b)      Komponen Radio Button

Form input radio button hanya ada satu pilihan yang terseleksi, tidak bisa digunakan untuk multiple answer. Berikut ini format umum tag HTML dari form input radio button.

 

<input type=radio name=name value=value>

<input type=radio name=name value=value checked>

 

Name= "name" merupakan pemberian nama pada komponen input sebagai nama dari komponen. Pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut.

<!DOCtype html>

<html>

<head>

<tit1e>Latihan radio Button</title>

</head>

<body>

Tingkat Pendidikan

<form>

<input type="radio" name="pendidikan" value="SMK">SMK sederajat<br>

<input type="radio" name="pendidikan" value="D3">D3<br>

<input type="radio" name="pendidikan" value="S1">S1<br>

<input type="radio" name="pendidikan" value="S2">S2<br>

</form>

</body>

</html>

 

c)      Komponen Checkbox

Tampilan dari komponen input ini berupa kotak yang dapat diberi tanda centang. Komponen checkbox memiliki fungsi yang hampir sama dengan radio button, yaitu menentukan pilihan. Namun, pada checkbox dapat digunakan untuk memilih lebih dari satu jawaban (multi-answer) atau nilai pilihan dengan alternatif jawaban lebih dari I opsi pilihan. Berikut format tag HTML-nya.

<input type=checkbox name=name value=value>

<input type=checkbox name=name value=value checked>

 

Sementara itu, berikut bentuk penerapan dari format form input check box.

<!DOCtype html>

<html>

<head>

<title>FORM INPUT</title>

</head>

<body>

--- KETERÄNGÄN ---

<form>

<input type=" checkbox" name="vehicle" value= "BukuSiswa> Buku Siswa <br>

<input type=" checkbox" name="vehicle" value=" BukuGuru"> Buku Guru <br>

<input type=" checkbox" name="vehicle" value=" BukuUmum">

Buku Umum<br>

</form>

</body>

</html>

 

d)      Komponen Select

Istilah lain dari bentuk komponen select adalah combo box atau list box, misalnya pada pemilihan data agama, jurusan,  pekerjaan, dan sebagainya. Komponen input dengan tipe 'select'  merupakan komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan. Berikut ini format umum penulisan komponen select.

 

<select name="name">

<option value=”nilai1”> nilail </option>

.....

<option value="nilaix"> nilaix</option> </select>

 

Saat sistem web dijalankan maka data yang diolah di dalam pemrograman berdasarkan nilai (value) dari nama komponen input tersebut. Sementara itu, value=”nilai” merupakan nilai dari setiap pilihan yang diberikan.

e)      Komponen Datalist

Komponen datalist merupakan elemen form baru pada HTML5. Saat membuat pilihan pada datalist, akan muncul item yang cocok (fungsi autocomplete bekerja) jika terdapat huruf/ item yang sama dengan sata pada datalist. Berikut ini forat umum penulisan komponen datalist.

<input list="list">

<datalist id="id">

<option value="nilai1">

<option value="nilai2">

<option value="nilai3">

</datalist>

6.      Link dalam Form

Penggunaan link pada HTML, yaitu untuk menghubungkan dokumen HTML tersebut ke halaman lain yang merupakan alamat tujuan. Link digunakan sebagai penghubung antara satu halaman dengan halaman lainnya. Link merupakan teks atau gambar yang terkait dengan suatu alamat tertentu.

a.      Penggunaan Tag <a>

Penggunaan link pada dokumen HTML ditandai dengan penggunaan elemen anchor, yaitu tag berpasangan <a> </a>. Pada browser, link umumnya ditandai dengan teks berwarna biru yang memiliki garis bawah. Jika mengeklik teks atau gambar yang  mengandung link, path dari link tersebut akan dibuka baik di tab itu sendiri maupun di tab baru. Adapun atribut yang ada pada tag <a> dapat  dilihat pada tabel berikut.

 

b.      Atribut id

Atribut href pada tag <a> digunakan untuk menyatakan suatu file tujuan. Path tujuan HTML yang berada di dalam tag <a> dapat diikuti dengan menggunakan atribut id yang digunakan untuk membawa pembaca ke suatu bagian tertentu dalam dokumen.

c.       Atribut title

Selanjutnya, jika menggunakan atribut title, akan ditampilkan isi title tersebut sebagai tooltip yang akan muncul jika mengarahkan kursor pada link yang valid.

 

MENGEKSPLORASI

Buatlah sebuah kelompok kemudian kumpulkan data informasi konsep formulir dalam HTML terutama tentang implementasinya!

MENGASOSIASIKAN DAN MENGOMUNIKASIKAN

·         Uraikan kembali informasi yang diþeroleh tentang masalah penggunaan tag form terutama bentuk input teks, pilihan radio button, check box, dan IainIain!

·         Presentasikan kesimpulan masalah form option terutama yang berhubungan dengan atribut dan jenis-jenis format formulir!

 

INFO

Jenis Elemen dari HTML

Secara garis besar, terdapat 4 jenis elemen dari HTML sebagai berikut.

a.      Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, <h1>Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1.

b.      Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan menarnpilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan.

c.       Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu).

d.      Elemen widget yang membuat objek-objek lain seperti tombol (<button>), daftar (<li>), dan garis horizontal (<hr>). Konsep hiperteks pada HTML memungkinkan pembuatan tautan pada suatu kelompok kata atau frasa untuk menuju ke bagian mana pun dalam World Wide Web.

Sumber: https://xia2chrisanda.wordpress.com/2015/08/24/sejarah-html-sintakstag-html-kegunaannya/

 

RANGKUMAN

1.      Di dalam situs web biasanya akan terlihat teks yang warnanya berbeda, bergaris bawah, atau berada dalam kotak (tombol).

2.      Link merupakan singkatan dari hyperlink, yang identik dengan sebuah fungsi dalam HTML yang digunakan untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website bersangkutan.

3.      Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan. Data bisa dimasukkan dalam bentuk input teks, pilihan radio button, check box, dan lain-lain.

4.      Beberapa atribut yang dimiliki oleh tag   adalah Accept, Accept-charset, Action, Autocomplete,       Enctype, Name, Novalidate, dan Target.

5.      Pada metode HTTP yang digunakan, server menerima string yang akan  diorder untuk mendapatkan data list sebagai key (nilai pasangan). cara  mengakses list/daftar tergantung pada platform pengembangan yang digunakan

Lihat Materi Versi PDF

Download Materi

Assessmen !

Klik Link Berikut Ini