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>

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 :