Forms

Nah, kalau tadi kita sudah bisa bikin halaman dengan teks, gambar, dan link.

Kalian tau kan kalau kalian di sebuah halaman login, signup, atau apapun yang memerlukan kalian mengisi sesuatu?

Nah itu yang dinamakan forms. Jadi di HTML ada tag form yang isinya itu adalah input-inputnya.

Forms ini punya hubungan dengan backend, karena saat kita ingin mengirim data, misal pas kita login kita klik tombol login, kita akan mengirim data ke sebuah server or backend. Cuman karena kita fokus di frontend saja. Kita tidak akan sampai situ. Kita akan hanya fokus ke penggunaan forms secara tampilan saja.

Struktur Dasar Form

Form selalu dimulai dengan tag <form> dan di dalamnya kita bisa taruh berbagai input.
Contoh sederhana:

<form>
	<!-- Isi Form -->
</form>

Setiap input biasanya punya dua hal. Label dan Input. Label itu tuh yang biasanya ngasih informasi apa yang kalian harus isi di situ misal Nama: nah itu label. Kalo input ya kotak yang bisa kalian isi. Biasanya menulisnya seperti ini:

<label for="isi_nama">Nama:</label>
<input type="tipe-input" id="isi_nama" name="isi_nama">

Atribut for itu berisi untuk siapa sih label ini. Nah Pastikan atribut for di label, kemudian atribut id dan name di input memiliki nilai yang sama. Jadi kalian lihat disitu kalau itu adalah input untuk nama. Nah di label atribut for, id, dna name berisi hal yang sama yaitu isi_nama. Nama untuk ini bebas yang penting sama, tidak pakai spasi, dan jelas.

Kemudian type itu berisi tipe inputnya. Kita tahu kalau ada banyak tipe input di website, misal email, password, angka, dll.

Lebih lengkapnya di sini:

• type="text" → kotak teks biasa
• type="email" → kotak email (akan cek format email)
• type="password" → kotak password (teks disembunyikan)
• type="number" → hanya bisa angka
• type="checkbox" → kotak centang
• type="radio" → tombol pilihan satu dari beberapa
• type="submit" → tombol untuk kirim form

Nah kalau submit biasanya ga perlu label karena dia tombol submit.

Jadi sederhananya kita bisa buat form kita seperti ini yang terdiri dari beberapa label dan input:

<form>
	<label for="nama">Nama:</label>
	<input type="text" id="nama" name="nama" required>

	<label for="email">Email:</label>
	<input type="email" id="email" name="email" required>

	<button type="submit">Kirim</button>
</form>

Nah kalian lihat ada required dia itu atribut yang gaperlu memiliki value. Fungsi required itu adalah memberi tahu ke website bahwa user wajib mengisi input ini.

Elemen-Elemen Lain Form

Kita tadi sudah belajar baru input dan label tapi ada beberapa lain juga, dan di sini adalah list penjelasan elemen-elemen form:

1. <input> Digunakan untuk membuat kotak input. Bisa diatur jenisnya menggunakan atribut type

2. <label> Dipakai untuk memberi label pada input. Menyambungkan input dengan atribut for supaya klik label juga fokus ke input.

3. <textarea> Dipakai untuk kotak input yang lebih besar yang berisi paragraf. Kan kalau input tadi cuman satu baris. textarea bisa multiline. Seperti review misal.

   <textarea id="pesan" name="pesan" rows="4" cols="30"></textarea>

4. <select> Dipakai untuk dropdown pilihan dan di dalamnya adalah option.

   <select name="lokasi" id="lokasi">
   	<option value="yosemite">Yosemite National Park</option>
   	<option value="yellowstone">Yellowstone National Park</option>
   	<option value="grandcanyon">Grand Canyon National Park</option>
   </select>

5. <button> Untuk membuat tombol. Bisa type="submit" untuk kirim form, atau type="button" untuk tombol biasa.

Things to Note

Beberapa input di sini merupakan inline elements jadi kalian harus manual memberikan <br> di akhir label or input, atau menggunakan div untuk tiap kelompok input. Seperti contoh:

<form>
	<!-- Bisa Gini -->
	<div>
		<label for="nama">Nama:</label>
		<input type="text" id="nama" name="nama" required>
	</div>

	<!-- Atau -->
	<label for="email">Email:</label><br>
	<input type="email" id="email" name="email" required><br>

	<button type="submit">Kirim</button>
</form>

Contoh Form Lengkap

Kombinasikan semua elemen tadi, hasilnya bisa seperti ini:

<form>
	<h2>Form Pendaftaran Camping</h2>
	
	<div>
		<label for="nama">Nama Peserta:</label><br>
		<input type="text" id="nama" name="nama" required>
	</div>

	<div>
		<label for="email">Email:</label><br>
		<input type="email" id="email" name="email" required>
	</div>

	<div>
		<label for="gender">Jenis Kelamin:</label><br>
		<input type="radio" id="male" name="gender" value="male">
		<label for="male">Laki-laki</label><br>
		<input type="radio" id="female" name="gender" value="female">
		<label for="female">Perempuan</label>
	</div>

	<label for="lokasi">Pilih Lokasi Camp:</label>
	<select name="lokasi" id="lokasi">
		<option value="yosemite">Yosemite National Park</option>
		<option value="yellowstone">Yellowstone National Park</option>
		<option value="grandcanyon">Grand Canyon National Park</option>
	</select>

	<label for="pesan">Catatan</label>
	<textarea id="pesan" name="pesan"></textarea>

	<button type="submit">Daftar Sekarang</button>
</form>

Semoga kalian sudah enak dan lebih paham mengenai materi forms ini. Tenang saja kalau ada yang bingung, mungkin dari materinya, dll. Bisa langsung tanya ke grup atau chat aku yes. Happy learning everyone. See you guys next week.

Oiya tugasnya jangan lupa.