Form and Input Data

Presentasi HTML Form dan Input Data

Pertemuan 9

Pengantar Form HTML

Form HTML berfungsi sebagai jembatan interaktif antara pengguna (user) dan server. Melalui form, pengguna dapat mengirimkan data yang akan diproses oleh server.

                <form action="proses.php" method="POST">

                  <!-- Elemen form di sini -->

                </form>

Atribut penting dalam form HTML:

action: Menentukan tujuan pengiriman data (URL yang akan memproses data)
method: Menentukan metode pengiriman data (GET atau POST)

Elemen Input Dasar

Berikut adalah elemen input dasar yang umum digunakan dalam form HTML:

Text Input:

Password:

Textarea:

                <input type="text" name="nama" placeholder="Masukkan nama">

                <input type="password" name="sandi" placeholder="Masukkan kata sandi">

                <textarea name="alamat" rows="3"></textarea>

Elemen Input Pilihan

Elemen input pilihan memungkinkan pengguna memilih dari beberapa opsi yang tersedia.

Radio Button (Jenis Kelamin):

Laki-laki

Perempuan

Checkbox (Hobi):

Membaca

Olahraga

Musik

Select Dropdown:

                <input type="radio" name="jenis_kelamin" value="L"> Laki-laki

                <input type="checkbox" name="hobi[]" value="Membaca"> Membaca

                <select name="jurusan">

                  <option value="TI">Teknik Informatika</option>

                  <option value="SI">Sistem Informasi</option>

                </select>

Method GET vs POST

Perbandingan antara metode GET dan POST dalam pengiriman data form:

Aspek	GET	POST
Visibilitas Data	Data terlihat di URL	Data tersembunyi
Keamanan	Kurang aman untuk data sensitif	Lebih aman untuk data sensitif
Panjang Data	Terbatas (sekitar 2048 karakter)	Tidak terbatas
Penggunaan	Pencarian, filter, data non-sensitif	Login, pendaftaran, upload file
Bookmark	Dapat di-bookmark	Tidak dapat di-bookmark

Mengambil data di PHP:

                // Untuk method GET

                $nama = $_GET['nama'];

                // Untuk method POST

                $nama = $_POST['nama'];

Contoh Praktis: Form Pendaftaran

Berikut adalah contoh form pendaftaran yang mengimplementasikan berbagai elemen input:

Form Pendaftaran (form.html)

Nama Lengkap:

Email:

Password:

Jenis Kelamin:

Laki-laki

Perempuan

Jurusan:

Hobi:

Membaca

Olahraga

Musik

Data yang Dikirim (proses.php)

Download Materi

Silakan download file materi berikut untuk praktik lebih lanjut:

File form.html

File HTML berisi form pendaftaran dengan berbagai elemen input.

File proses.php

File PHP untuk menangani data yang dikirim dari form.

Tugas Kelompok: Form Design Challenge

Setiap tim terdiri dari 3 orang dengan peran berbeda yang harus berkolaborasi membuat form yang sempurna.

Tim harus dengan golongan yang berbeda tiap orangnya

Struktur Tim & Peran

ROLE 1: UX DESIGNER (Desainer Pengalaman Pengguna)

Tugas:

Membuat sketsa/wireframe form
Memastikan form user-friendly dan mudah dipahami
Menentukan layout dan flow input data

ROLE 2: FRONTEND DEVELOPER (Developer Tampilan)

Tugas:

Menulis kode HTML form berdasarkan sketsa
Menambahkan styling CSS dasar
Memastikan struktur form benar

ROLE 3: BACKEND DEVELOPER (Developer Penrosesan)

Tugas:

Menulis kode PHP untuk memproses data form
Validasi input data
Menampilkan hasil dengan rapi

Cara Pengumpulan Tugas

Instruksi Pengumpulan

a) Dikumpulkan di S-Learn

b) Hanya ketua Tim upload dengan memasukkan anggota kelompok

c) Yang di upload link drive dari zip folder

Tugas sudah tersedia di S-Learn. Silakan login dan kerjakan sesuai instruksi.