(Tugas Evaluasi) Membuat Form dan Table Pada HTML

Assalamualaikum wr.wbr

TUGAS EVALUASI

CONTOH OUTPUT YANG AKAN DITAMPILKAN

a. Form

LISTING FORM

PENJELASAN LISTING A

[code hl="1, 2, 3, 4"]

Form Pengajuan KTP

[/code]

• Pada Line 1 terdapat tag <div> yang berfungsi untuk menampung beberapa element menjadi satu kelompok. Didalam tag <div> terdapat atribut style yang berfungsi untuk mengubah tampilan dasar dari element HTML, dengan value background-color: red; untuk mengubah warna background dan color: white; untuk mengubah warna teks.
• Pada Line 2 terdapat tag <table> yang berfungsi untuk membuat table. Didalam tag <table> terdapat atribut align yang digunakan untuk meratakan teks secara horizontal, dengan value-nya center agar posisi teks berada di tengah. Dan juga terdapat atribut cellpadding yang digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri, dengan value-nya 4.
• Pada Line 3 terdapat tag <tr> kepanjangan dari Table Row yang digunakan untuk mendefiniskan baris pada table.
• Pada Line 4 terdapat tag <th> kepanjangan dari Table Heading yang digunakan untuk membuat judul sebuah table dan biasanya di tanda dengan hurufnya menjadi bold.

PENJELASAN LISTING B

[code hl="1, 4"]

Nomor Pendaftaran [/code]

• Pada Line 1 terdapat tag <form> yang berfungsi untuk membuat sebuah form HTML untuk input pengguna.
• Pada Line 4 terdapat tag <input> yang berfungsi untuk untuk membuat sebuah kontrol input. Didalam tag <input> terdapat atribut style yang berfungsi untuk mengubah tampilan dasar dari element HTML, dengan value-nya margin-left: 22px. Atribut type yang digunakan untuk menentukan jenis penomoran/symbol, dengan value-nya text. Dan atribut size yang digunakan untuk menentukan ukuran sebuah objek baik berupa gambar, font atau huruf dan bahkan untuk ukuran layout tertentu, dengan value-nya 1.

PENJELASAN LISTING C

[code hl="2"] Nama [/code]

• Pada Line 2 terdapat tag <input> yang berfungsi untuk membuat sebuah kontrol input. Didalam tag <input> terdapat atribut name yang digunakan untuk pemrosesan tag <input> type text, dengan value-nya username agar nilai dari atribut yang akan digunakan sebagai nama variable yang akan diproses oleh web server. Dan atribut placeholder yang digunakan untuk membuat penamaan pada sebuah form yang letaknya berada didalam form dan tulisan tersebut tidak berpengaruh pada saat melakukan submit, dengan value-nya Nama Lengkap.

PENJELASAN LISTING D

[code hl="2"] Alamat [/code]

• Pada Line 2 terdapat tag <textarea> yang berfungsi untuk membuat text inputan yang dapat menampung lebih dari 1 baris inputan. Didalam tag <textarea> terdapat atribut cols yang digunakan untuk membatasi tampilan lebar kolom dan atribut rows untuk membatasi tampilan tinggi baris.

PENJELASAN LISTING E

[code hl="2, 3"] Provinsi Sulawesi Selatan Sulawesi Tenggara [/code]

• Pada Line 2 terdapat tag <select> yang berfungsi untuk membuat objek form yang berupa list pilihan yang dapat dipilih oleh user.
• Pada Line 3 terdapat tag <option> yang sebagai isi dari tag <select> yang digunakan untuk menentukan label dari sebuah item daftar pilihan (opsi).

PENJELASAN LISTING F

[code hl="2"] Jenis Kelamin Pria Wanita [/code]

• Pada Line 2 terdapat tag <input> dengan atribut type dan value radio yang digunakan untuk membuat tombol radio atau tombol pilihan yang diisi dengan cara memilih dari salah satu tombol radio yang ada.

PENJELASAN LISTING G

[code hl="3"] Tempat/ Tanggal Lahir [/code]

• Pada Line 3 terdapat tag <input> dengan atribut type dan value date yang digunakan untuk membuat bidang isian sesuai dengan format tanggal.

PENJELASAN LISTING H

[code hl="1"] FC. KK Surat Pengantar

Kelengkapan Berkas

Pas Foto Surat Domisili [/code]

• Pada Line 1 terdapat tag <input> dengan atribut type dan value checkbox yang digunakan untuk membuat checkbox atau kotak isian yang diisi dengan cara menceklis kotak tersebut.

PENJELASAN LISTING I

[code hl="2"] File Scan [/code]

• Pada Line 1 terdapat tag <input> dengan atribut type dan value file yang digunakan untuk meng-upload file.

PENJELASAN LISTING J

[code hl="1, 2"] [/code]

• Pada Line 1 terdapat tag <input> dengan atribut type dan value submit yang digunakan untuk memulai proses pengolahan data. Atribut value supaya mengubah nama pengajuan didalam tombol submit.
• Pada Line 2 terdapat tag <input> dengan atribut type dan value reset yang digunakan untuk mengosongkan nilai pada form inputan.

OUTPUT FORM

Form Pengajuan KTP

Nomor Pendaftaran

Nama

Alamat

Provinsi Sulawesi Selatan Sulawesi Tenggara

Kota Kec.

Pekerjaan

Jenis Kelamin Pria Wanita

Tempat/ Tanggal Lahir

FC. KK	Surat Pengantar
Kelengkapan Berkas

Pas Foto

Surat Domisili

File Scan

CONTOH OUTPUT YANG AKAN DITAMPILKAN

b. Table

PENJELASAN LISTING TABLE

[code hl="1, 2, 3, 4, 5, 6, 7"] [/code]

• Pada Line 1 terdapat tag <table> yang berfungsi untuk membuat tabel. Didalam tag <table> terdapat atribut width yang digunakan untuk mengatur lebar tabel dengan value-nya 450px. Atribut heigh yang digunakan untuk mengatur panjang tabel dengan value-nya 400px. Dan atribut cellspacing yang digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar dengan value-nya 0.
• Pada Line 2 terdapat tag <tr> kepanjangan dari Table Row yang berfungsi untuk mendefinisikan baris pada tabel.
• Pada Line 3 terdapat tag <td> kepanjangan dari Table Data yang berfungsi untuk menunjukkan sebuah baris. Didalam tag <td> terdapat atribut rowspan="3" yang artinya menggabungkan 3 baris kebawah menjadi satu.
• Pada Line 4 terdapat tag <td> dengan atribut rowspan="2" yang artinya menggabungkan 2 baris kebawah menjadi satu.
• Pada Line 5 terdapat tag <td> dengan atribut colspan="2" yang artinya menggabungkan 2 kolom kesamping menjadi satu.
• Pada Line 6 terdapat tag <td> dengan atribut rowspan="3" yang artinya menggabungkan 3 baris kebawah menjadi satu.
• Pada Line 7 terdapat tag <td> dengan atribut colspan="2" yang artinya menggabungkan 3 kolom kesamping menjadi satu.

OUTPUT TABLE

SS OUTPUT YANG SAYA KERJAKAN