Pemrograman Web - FORMAT FORMULIR DENGAN HTML (Bab 6)(Kelas XI)

BAB VI

FORMAT FORMULIR DENGAN HTML

A. KOMPETENSI DASAR

3.6 Menerapkan format formulir pada halaman web

4.6 Membuat kode html untuk menampilkan formulir pada halaman web

B. MATERI PEMBELAJARAN

Anatomi dan Cara Kerja Form

Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna web, kemudian masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript).

Didalam web, form biasanya digunakan untuk keperluan pembuatan buku tamu, login, form transaksi dalam jual beli online, form umpan balik dari pengguna, dan sebagainya.

Selain atribut type, masing-masing elemen input memiliki atribut-atribut yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis elemen input. Sebagai contoh adalah elemen <input> yang atribut TYPE-nya adalah text memiliki atribut antara lain :

• NAME, digunakan untuk menamai kotak

• VALUE, digunakan untuk menandai atau menampung teks

• SIZE, digunakan untuk mengatur ukuran teks pada kotak

• MAXLENGTH, digunakan untuk menentukan panjang maksimum teks

Form HTML digunakan untuk melewatkan data dari klien ke server.

Elemen – elemen tag form HTML, yaitu <form>, <input>, <texarea>, <label>, <fieldset>, <legend>, <select>, <optgroup>, <option>, <button>, <datalist>, <keygen>, <output>.

Format Form

<Form> merupakan formulir yang digunakan sebagai perantara untuk memasukan data inputan ke server. Browser web akan mengirimkan data dari form ke server dengan mengacu kepada name dari elemen. Beberapa atribut yang dimiliki oleh tag <form> adalah :

• Accept

• Accept-charset

• Action

• Autocomplete

• Encrype

• Method

• Name

• Novalidate

• target

Form didalam website dapat berbentuk horisonal namun untuk mengimbangi perkembangan teknologi mobile adakalanya form dilayout secara vertikal

Bentuk umum dari tag <FORM> adalah sebagai berikut :

Keterangan:

Method → ada 2 yaitu Post (data dikirim terpisah) dan Get (mengirim data ke server dengan cara meletakan data pada bagian akhir dari URL yang dituju)

Action → aksi yang muncul ketika pengguna menekan tombol tertentu, bisa dikata sebagai link

Beberapa atribut untuk

tag <FORM> adalah :

Untuk target window name dapat diisi berupa :

_blank : membuka link di jendela atau tab baru

_self : membuka link di frame yang sama seperti yang diklik (default)

_parent: membuka link dalam frame induk

_top : membuka link dalam body penuh disatu jendela

Di antara tag <form> dan </form> terdapat elemen - elemen HTML <input> yang berfungsi untuk mendefinisikan masukkan yang akan dimasukkan oleh pengguna. Bentuk umum dari penulisan elemen HTML <input> adalah sebagai berikut:

keterangan:

name : untuk memberi nama kotak masukan

size : untuk memberi ukuran kotak masukan

value : untuk memberi nilai tampungan teks

contoh penerapan form pada HTML

Tampilan pada browser

contoh form dengan password:

Tampilan pada browser:

C. TUGAS MANDIRI (5 SOAL URAIAN)

Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!

1. Jelaskan dan buatlah analisis tentang cara menggunakan format form!

2. Apa saja komponen yang ada di dalam form?Jelaskan dan buatlah analisisnya untuk tiap-tiap komponennya!

3. Jelaskan perbedaan komponen input teks dan password!

4. Jelaskan bagaimana cara input file didalam formulir !

5. Buatlah analisis tentang anatomi form!

D. TUGAS KELOMPOK (5 SOAL PRAKTIK URAIAN)

Buatlah kelompok dengan jumlah anggota 2 siswa setiap kelompoknya, dan bacalah petunjuk lalu kerjakan soal-soal di bawah ini dengan cermat dan teliti!

1. Jelaskan tentang cara kerja dari form!

2. Jelaskan tentang macam-macam elemen tag <form> html !

3. Buatlah form biodata seperti di bawah ini :

4. Tuliskan perintah HTML nya lalu buat analisisnya dari tiap-tiap perintahnya!

5. Presentasikan di depan kelas

E. UJI KOMPETENSI

PILIHAN GANDA

Berilah tanda silang (X) pada pilihan jawaban yang benar!

1. Type yang berfungsi untuk menerima masukan berupa teks dari pengguna adalah...

a. Checkbox

b. Submit

c. File

d. Text

e. Button

2. Atribut NAME digunakan sebagai

a. Menamai kotak

b. Menandai teks

c. Menentukan panjang maksimum teks

d. Mengatur ukuran

e. Memasukan teks

3. Untuk menerima masukan berupa pilihan ialah

a. Submit

b. Reset

c. Radio

d. Password

e. Text

4. Perintah atau type masukkan untuk menampilkan berupa pilihan adalah:

a. Radio

b. Checkbox

c. Submit

d. Resume

e. Password

5. Perintah masukkan yang benar agar menampilkan tampilan seperti dibawah ini: "ini tombol input dengan type="submit": Kirimkan adalah:

a. <br> ini tombol input dengan type="submit":

b. <input type="submit" value="kirimkan">

<br> ini tombol input dengan type="reset" <input type="submit" value="kirimkan">

c. <br> ini tombol input dengan type="reset" <input type="reset" value="kirimkan">

d. <br> ini tombol input dengan type="submit" <input type="reset" value="kirimkan">

e. <br> ini tombol input dengan type="reset"

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

6. Untuk memasukkan perinttah masukkan berupa gambar yang dapat diklik dan fungsinya hamper sama dengan Submit adalah:

a. Hidden

b. File

c. Image

d. Reset

e. Submit

7. Tag <Input> yang atribut TYPE-nya dapat digunakan untuk menerima masukan berupa pilihan yaitu

a. Radio

b. Circle

c. Password

d. Square

e. Submit

8. Atribute ACTION digunakan untuk ...

a. Menentukan nama form

b. Menetukan metode pengiriman yang dipakai

c. Menentukan alamat halaman web yang akan memproses masukan dariForm.

d. Menerima masukan berupa pilihan

e. Menandai atau mengatur nilai dari sebuah radio

9. Untuk menerima masukan berupa pilihan. Pilihan yang dapat dipilih bisa lebih dari satu yaitu

a. Text

b. Password

c. Checkbox

d. Radio

e. Submit

10. Kegunaan form adalah...

a. memperoleh informasi pembelian secara online

b. untuk mencetak miring dalam pembuatan web

c. untuk melihat data-data yang tersedia

d. untuk dapat mengakses internet lebih cepat

e. untuk melakukan hubungan local antar computer

11. Apa fungsi dari type="password"??

a. jika kita mengetik sesuatu akan tertulis yang sebenarnya

b. jika kita mengetik sesuatu maka ketikan tersebut akan tidak terlihat

c. jika kita mengetik sesuatu maka yang muncul adalah angka

d. jika kita mengetik sesuatu maka yang muncul adalah

e. jika kita mengetik sesuatu tidak muncul apa-apa

12. Bagaimanakah perintah HTML agar muncul input type password

a. <td><input type="password" name="alamat"</td>

b. <td><input type="name" name="password"</td>

c. <td><input type="password" password=”alamat"</td>

d. <td><input type="word" name="password"</td>

e. <td><input type="password1" name="password2"</td>

13. Tag <textarea> memiliki atribut di bawah ini adalah:

a. Name

b. Action

c. Method

d. Value

e. Option

14. Bagaimanakah perintah HTML agar muncul input type password..

a. <td><input type="password" name="alamat"</td>

b. <td><input type="name" name="password"</td>

c. <td><input type="password" password="alamat"</td>

d. <td><input type="word" name="password"</td>

e. <td><input type="password1" name="password2"</td>

15. Tombol yang berfungsi untuk membatalkan pengisian dalam form adalah....

a. RESET

b. SUBMIT

c. PRESET

d. UNDO

e. BUTTON

16. Kontrol form yang berfungsi untuk membuat daftar pilihan adalah...

A. Text

B. Checkbox

C. Select

D. Radio

E. Textarea

17. Atribut dari select yang berfungsi untuk menampilkan drop down box seperti tombol spinner adalah...

A. Multiply

B. Multiple

C. Selected

D. Scrollbar

E. Checked

18. Perintah yang biasa digunakan untuk membuat kotak isian komentar adalah...

A. <TEXTAREA NAME-komentar COLS-20 ROWS=2></TEXTAREA>

B. <TEXT NAME=komentar COLS-20 ROWS=2></TEXT>

C. <AREA NAME=komentar COLS-20 ROWS=2></AREA>

D. <INPUT TYPE-TEXT-komentar COLS=20 ROWS=2></TEXT>

E. <INPUT TYPE=TEXTAREA NAME=komentar COLS-20 ROWS=2></TEXTAREA>

19. Perintah yang biasa digunakan untuk membuat tombol proses adalah...

A. <INPUT TYPE-submit NAME=Proses VALUE=Ok>

B. <INPUT TYPE=reset NAME=Hapus VALUE=BATAL>

C. <INPUT TYPE=submit NAME-OK VALUE=Proses>

D. <INPUT TYPE=reset NAME=Batal VALUE=Hapus>

E. <INPUT TYPE-button NAME-OK VALUE=Proses>

20. Perintah yang biasa digunakan untuk membuat tombol Batal adalah...

A. <INPUT TYPE=submit NAME-Proses VALUE=Ok>

B. <INPUT TYPE=reset NAME=Hapus VALUE=BATAL>

C. <INPUT TYPE=submit NAME=OK VALUE=Proses>

D. <INPUT TYPE=reset NAME=Batal VALUE=Hapus>

E. <INPUT TYPE-button NAME=OK VALUE=Proses>

21. Atribut VALUE pada elemen <input type="submit"> berfungsi untuk...

a. Memberikan nama unik pada tombol

b. Menentukan tujuan pengiriman data

c. Mengatur ukuran tombol

d. Menentukan teks yang akan ditampilkan pada tombol

e. Menampilkan nilai yang sudah diisi secara default

22. Kontrol form yang digunakan untuk memilih tanggal, bulan, dan tahun adalah...

a. type="text"

b. type="date"

c. type="datetime-local"

d. type="calendar"

e. type="time"

23. Perintah yang benar untuk membuat kotak centang yang sudah tercentang secara default adalah...

a. <input type="checkbox" name="hobi" checked>

b. <input type="checkbox" name="hobi" value="checked">

c. <input type="checkbox" name="hobi" selected>

d. <input type="checkbox" name="hobi" checked="true">

e. <input type="checkbox" name="hobi" on>

24. Untuk membuat field yang tidak dapat diubah oleh pengguna, tetapi tetap dikirimkan saat form di-submit, digunakan atribut...

a. readonly

b. disabled

c. hidden

d. passive

e. locked

25. Tag HTML yang berfungsi sebagai "wadah" untuk semua elemen formulir adalah...

a. <fieldset>

b. <form>

c. <input>

d. <section>

e. <formbox>

26. Atribut METHOD pada tag <form> yang mengirimkan data form sebagai bagian dari URL adalah...

a. POST

b. GET

c. ACTION

d. SUBMIT

e. PUT

27. Elemen form yang digunakan untuk membuat judul atau keterangan pada sekelompok input adalah...

a. <label>

b. <legend>

c. <head>

d. <title>

e. <h1>

28. Perintah untuk membuat sebuah tombol yang tidak memiliki fungsi bawaan (seperti submit atau reset) adalah...

a. <input type="button">

b. <input type="submit">

c. <input type="reset">

d. <input type="action">

e. <input type="link">

29. Atribut yang digunakan untuk menentukan jumlah baris yang terlihat pada <textarea> adalah...

a. rows

b. cols

c. size

d. lines

e. height

30. Atribut placeholder pada elemen <input> berfungsi untuk...

a. Menentukan nilai awal pada input

b. Memberikan petunjuk teks di dalam input yang akan hilang saat diketik

c. Menentukan panjang maksimum input

d. Mengatur ukuran input

e. Memberikan deskripsi singkat tentang input

31. Untuk membuat sebuah input yang tidak terlihat oleh pengguna, tetapi nilainya tetap dikirimkan bersama form, digunakan type="....

a. invisible

b. none

c. hidden

d. secure

e. stealth

32. Perintah untuk membuat pilihan dropdown box dengan opsi "Merah", "Hijau", "Biru" adalah...

a. <select name="warna"><option>Merah</option><option>Hijau</option><option>Biru</option></select>

b. <dropdown name="warna"><choice>Merah</choice><choice>Hijau</choice><choice>Biru</choice></dropdown>

c. <input type="dropdown" name="warna" value="Merah,Hijau,Biru">

d. <select name="warna" values="Merah,Hijau,Biru"></select>

e. <list name="warna"><item>Merah</item><item>Hijau</item><item>Biru</item></list>

33. Tag <label> biasanya digunakan bersama dengan elemen input. Atribut yang menghubungkan <label> dengan input tertentu adalah...

a. for

b. id

c. name

d. link

e. target

34. Atribut required pada elemen <input> berfungsi untuk...

a. Membuat input menjadi readonly

b. Mengharuskan pengguna untuk mengisi input tersebut sebelum form dapat di-submit

c. Memberikan nilai default pada input

d. Mengatur format input yang benar

e. Membatasi panjang teks yang bisa dimasukkan

35. Tipe file pada elemen <input> digunakan untuk...

a. Mengunggah file dari komputer pengguna

b. Menampilkan nama file yang ada di server

c. Membuat link ke sebuah file

d. Menyimpan data dalam format file

e. Menampilkan daftar file dalam sebuah folder

36. Perintah <input type="radio" name="kelamin" value="Pria"> Pria akan berfungsi dengan baik jika...

a. Ada input radio lain dengan name yang berbeda

b. Ada input radio lain dengan value yang sama

c. Ada input radio lain dengan name="kelamin"

d. Digunakan di luar tag <form>

e. Diberikan atribut checked

37. Perintah yang benar untuk membuat field email adalah...

a. <input type="mail" name="email">

b. <input type="email" name="email">

c. <input type="text" name="email" format="email">

d. <input type="eml" name="email">

e. <input type="text" name="email" validate="true">

38. maxlength adalah atribut yang digunakan untuk...

a. Menentukan nilai maksimum dari input numerik

b. Mengatur lebar maksimum dari sebuah input

c. Menentukan jumlah maksimum karakter yang dapat dimasukkan

d. Mengatur jumlah baris maksimum pada <textarea>

e. Memberi batasan ukuran file yang diunggah

39. Atribut autofocus pada elemen <input> berfungsi untuk...

a. Secara otomatis mengisi input dengan data sebelumnya

b. Mengaktifkan fitur auto-complete pada browser

c. Menempatkan kursor di dalam input secara otomatis saat halaman dimuat

d. Mengatur agar input selalu berada dalam keadaan fokus

e. Membantu mencari data secara otomatis

40. Atribut disabled pada elemen formulir akan membuat elemen tersebut...

a. Tidak terlihat oleh pengguna

b. Menjadi readonly

c. Terkunci dan tidak dapat dikirimkan datanya saat form di-submit

d. Tidak dapat diketik, tetapi datanya tetap terkirim

e. Terlihat, tetapi tidak dapat diinteraksi oleh pengguna dan datanya tidak akan dikirimkan

MENJODOHKAN

Perhatikan perintah HTML di bawah ini :

Lengkapilah skrip form diatas dengan perintah yang benar sehingga menghasilkan tampilan Form dibawah ini dengan memilih pada kotak jawaban yang tersedia !

Tampilan form pada browser:

Kotak Jawaban :