1. Apa Itu HTML Form?
HTML Form adalah elemen yang digunakan untuk menerima input dari pengguna dan mengirimkan data tersebut ke server untuk diproses. Form merupakan komponen penting dalam web programming karena memungkinkan interaksi dua arah antara pengguna dan website.
Contoh penggunaan form dalam kehidupan sehari-hari meliputi formulir pendaftaran, login page, formulir kontak, survei online, dan berbagai jenis input data lainnya.
Form berfungsi sebagai media untuk menerima berbagai jenis input pengguna seperti teks, angka, tanggal, pilihan, dan file, kemudian mengirimkannya ke server untuk diproses lebih lanjut.
2. Tag Form dan Strukturnya
Tag <form> digunakan sebagai wadah atau container untuk menampung semua elemen input. Setiap form dapat memiliki berbagai macam input, button, checkbox, dan elemen interaktif lainnya.
<form action="proses.php" method="POST">
<!-- Elemen input di sini -->
</form>
Atribut penting pada tag form:
- action - URL tujuan pengiriman data
- method - Metode pengiriman (GET atau POST)
- enctype - Tipe encoding untuk upload file
3. Berbagai Tipe Input HTML
Tag <input /> adalah elemen paling sering digunakan dalam form. Tipe input dapat diatur menggunakan atribut type. Berikut berbagai tipe input yang tersedia:
Contoh Kode Input Dasar
<!-- Input Text -->
<input type="text" id="fname" name="fname"/>
<!-- Input dengan Value -->
<input type="text" id="fname" name="fname" value="John Doe"/>
Selalu tambahkan atribut
id dan name pada setiap input untuk memudahkan identifikasi dan pengolahan data.
Berbagai Tipe Input Lainnya
<!-- Date -->
Date: <input type="date" name="myDate" id="myDate"/>
<!-- Email -->
Email: <input type="email" name="myEmail" id="myEmail"/>
<!-- Tel -->
Tel: <input type="tel" name="myTel" id="myTel"/>
<!-- File -->
File: <input type="file" name="myFile" id="myFile"/>
<!-- Password -->
Password: <input type="password" name="myPass" id="myPass"/>
<!-- Number -->
Number: <input type="number" name="myNumber" id="myNumber"/>
<!-- Range -->
Range: <input type="range" name="myRange" id="myRange"/>
<!-- Hidden -->
Hidden: <input type="hidden" name="myHidden" id="myHidden"/>
Contoh dengan Value
Date: <input type="date" name="myDate" value="2023-02-14"/>
Email: <input type="email" name="myEmail" value="john@test.com"/>
Tel: <input type="tel" name="myTel" value="+62 85484447"/>
Password: <input type="password" name="myPass" value="secret"/>
Number: <input type="number" name="myNumber" value="13"/>
Range: <input type="range" name="myRange" value="10"/>
| Tipe Input | Fungsi |
|---|---|
| text | Input teks satu baris |
| password | Input password (karakter tersembunyi) |
| Input email dengan validasi format | |
| number | Input angka dengan spinner |
| date | Input tanggal dengan date picker |
| file | Upload file |
| hidden | Input tersembunyi |
| range | Slider untuk memilih nilai |
4. Penggunaan Label
Label adalah deskripsi untuk sebuah input. Penggunaan label sangat penting untuk membantu pengguna mengidentifikasi input mana yang sedang aktif. Label juga meningkatkan aksesibilitas website.
Gunakan atribut for yang berisi nilai id dari input yang dituju.
<label for="fname">First name:</label><br/>
<input type="text" id="fname" name="fname"/>
Ketika pengguna mengklik label, cursor akan otomatis fokus ke input yang terkait. Ini sangat membantu untuk meningkatkan user experience.
5. Membuat Button
Button adalah elemen yang dapat diklik oleh pengguna. Biasanya digunakan untuk konfirmasi aksi atau untuk memicu suatu proses dalam form. Ada dua cara untuk membuat button:
Cara 1: Menggunakan Input Type Button
<input type="button" value="Click Me"/>
Cara 2: Menggunakan Tag Button
<button>Click Me</button>
Tipe Button
Ada dua tipe button utama yang perlu diketahui:
- button - Button biasa tanpa aksi default
- submit - Button yang akan mengirim form ke server
<!-- Button biasa -->
<button type="button">Click Me</button>
<!-- Button submit -->
<button type="submit">Submit Form</button>
<!-- Input type submit -->
<input type="submit" value="Submit Form"/>
6. Atribut Input Penting
Berikut adalah berbagai atribut yang dapat digunakan pada elemen input untuk mengontrol perilaku dan validasi:
<form>
<!-- size: lebar input -->
Username: <input type="text" id="username" name="username"
value="John" size="20"/>
<!-- autofocus: fokus otomatis saat halaman dimuat -->
Nickname: <input type="text" id="nickname" name="nickname"
autofocus/>
<!-- readonly: hanya baca, tidak bisa diedit -->
StudentID: <input type="text" id="studentId" name="studentId"
value="001" readonly/>
<!-- disabled: dinonaktifkan -->
Major: <input type="text" id="major" name="major"
value="IT" disabled/>
<!-- placeholder, maxlength, required -->
Hobby: <input type="text" id="hobby" name="hobby"
placeholder="Sing" maxlength="20" required/>
<!-- min dan max untuk number -->
Rate: <input type="number" id="rate" name="rate"
min="1" max="5"/>
<input type="submit" value="Submit Form"/>
</form>
| Atribut | Fungsi |
|---|---|
| value | Nilai default input |
| size | Lebar input dalam karakter |
| autofocus | Fokus otomatis saat halaman dimuat |
| readonly | Hanya bisa dibaca, tidak bisa diedit |
| disabled | Menonaktifkan input |
| placeholder | Teks petunjuk di dalam input |
| maxlength | Maksimal karakter yang bisa diinput |
| required | Input wajib diisi |
| min / max | Nilai minimum dan maksimum untuk number |
7. Radio Button dan Checkbox
Radio Button
Radio button digunakan ketika pengguna hanya boleh memilih satu opsi dari beberapa pilihan yang tersedia.
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML"/>
<label for="html">HTML</label><br/>
<input type="radio" id="css" name="fav_language" value="CSS"/>
<label for="css">CSS</label><br/>
<input type="radio" id="javascript" name="fav_language" value="JavaScript"/>
<label for="javascript">JavaScript</label>
</form>
Checkbox
Berbeda dengan radio, checkbox memungkinkan pengguna untuk memilih lebih dari satu opsi sekaligus.
<form>
<input type="checkbox" id="toppingA" name="topping" value="Peanut"/> Peanut
<input type="checkbox" id="toppingB" name="topping" value="Cookies"/> Cookies
<input type="checkbox" id="toppingC" name="topping" value="Almond"/> Almond
</form>
Untuk radio button dan checkbox, pastikan memberikan
name yang sama untuk opsi dalam satu grup, dan id yang berbeda untuk setiap opsi. Coba ubah name menjadi berbeda dan lihat apa yang terjadi!
8. Select dan Option
Select digunakan untuk membuat dropdown menu yang memungkinkan pengguna memilih dari daftar opsi yang tersedia.
Select Dasar
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="toyota">Toyota</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Auto Select (Default Selection)
Gunakan atribut selected untuk menentukan opsi yang terpilih secara default.
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="toyota" selected>Toyota</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Multiple Select
Gunakan atribut multiple untuk memungkinkan pemilihan lebih dari satu opsi (tahan Ctrl untuk memilih beberapa).
<label for="cars">Choose cars:</label>
<select id="cars" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="toyota">Toyota</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Optgroup (Mengelompokkan Opsi)
Gunakan <optgroup> untuk mengelompokkan opsi berdasarkan kategori.
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Japan Cars">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="bmw">BMW</option>
</optgroup>
</select>
9. Textarea untuk Input Panjang
Textarea digunakan untuk input teks yang panjang atau multi-baris, seperti komentar, deskripsi, atau pesan.
<label for="web_programming">How Web Programming is:</label>
<textarea id="web_programming" name="web_programming"
rows="4" cols="50">
Learn web programming they say, it will be fun they say.
</textarea>
Atribut penting pada textarea:
- rows - Jumlah baris yang terlihat
- cols - Jumlah kolom (karakter per baris)
10. Fieldset dan Legend
Fieldset digunakan untuk mengelompokkan elemen form yang berhubungan, sementara legend memberikan judul untuk grup tersebut.
<form>
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
11. Datalist untuk Autocomplete
Datalist menyediakan fitur autocomplete pada input, memberikan saran pilihan yang bisa dipilih pengguna sambil tetap memungkinkan input bebas.
<form>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Find Browser"/>
</form>
Select membatasi pengguna hanya pada pilihan yang tersedia, sedangkan datalist memberikan saran tetapi pengguna masih bisa mengetik nilai lain yang tidak ada dalam daftar.
12. Frame dan Frameset (Deprecated)
Frame dan Frameset sudah tidak digunakan lagi (deprecated) di HTML5, namun masih berguna untuk dipelajari. Frame digunakan untuk menyematkan halaman HTML lain di dalam satu halaman, memungkinkan pembagian tampilan menjadi beberapa bagian.
Frame sudah deprecated di HTML5. Untuk pengembangan modern, gunakan iframe atau CSS layout seperti Flexbox dan Grid.
Struktur File yang Diperlukan
Untuk menggunakan frameset, Anda perlu membuat beberapa file HTML terpisah:
- index.html - Halaman utama dengan frame
- nav.html - Navigasi
- main.html - Halaman utama
- form.html - Halaman form
- about.html - Halaman tentang
- info.html - Halaman info
index.html (Master Page)
<frameset cols="110,*">
<frame name="leftframe" src="nav.html"/>
<frame name="main" src="main.html"/>
<noframes>
Not Supported
</noframes>
</frameset>
Penjelasan kode:
- cols="110,*" - Kolom pertama 110 pixel, sisanya untuk kolom kedua
- name - Nama unik untuk frame (digunakan sebagai target link)
- src - File HTML yang akan dimuat
- noframes - Pesan untuk browser yang tidak mendukung frame
nav.html (Navigasi)
<a href="main.html" target="main">Main Page</a><br/><br/>
<a href="form.html" target="main">Form</a><br/><br/>
<a href="about.html" target="main">About</a><br/><br/>
Atribut target menentukan frame mana yang akan memuat halaman ketika link diklik.
Nested Frame (Frame Bersarang)
Anda dapat menempatkan frameset di dalam frameset untuk membuat layout yang lebih kompleks.
<frameset cols="110,*">
<frame name="leftframe" src="nav.html"/>
<frameset rows="100,*">
<frame name="info" src="info.html"/>
<frame name="main" src="main.html"/>
</frameset>
<noframes>
Not Supported
</noframes>
</frameset>
- cols - Membagi frame secara horizontal (kolom)
- rows - Membagi frame secara vertikal (baris)
13. Iframe Modern
Iframe (Inline Frame) adalah cara modern untuk menyematkan konten eksternal ke dalam halaman web. Berbeda dengan frame yang sudah deprecated, iframe masih aktif digunakan di HTML5.
Kegunaan umum iframe meliputi:
- Menyematkan video YouTube
- Menampilkan Google Maps
- Menyematkan konten dari website lain
- Menampilkan preview halaman web
Contoh Embed Video YouTube
Here is a video:<br/>
<iframe
width="420"
height="315"
src="https://www.youtube.com/embed/LDU_Txk06tM">
</iframe>
Untuk mendapatkan URL embed YouTube, ambil ID video dari URL (contoh: LDU_Txk06tM dari youtube.com/watch?v=LDU_Txk06tM) dan tambahkan ke format: https://www.youtube.com/embed/[VIDEO_ID]
Atribut Penting Iframe
| Atribut | Fungsi |
|---|---|
| src | URL sumber konten |
| width | Lebar iframe |
| height | Tinggi iframe |
| frameborder | Border iframe (0 untuk hilangkan) |
| allowfullscreen | Mengizinkan fullscreen |
| sandbox | Menambahkan pembatasan keamanan |
Kesimpulan
HTML Form adalah komponen penting dalam web programming yang memungkinkan interaksi antara pengguna dan website. Dengan memahami berbagai elemen form seperti input, select, checkbox, radio, dan textarea, Anda dapat membuat formulir yang interaktif dan user-friendly.
Meskipun Frame sudah deprecated, pemahaman tentang konsepnya tetap berguna. Untuk pengembangan modern, gunakan iframe untuk menyematkan konten eksternal dan CSS layout untuk mengatur tata letak halaman.
Praktikkan setiap contoh kode yang diberikan dalam tutorial ini untuk memahami lebih dalam cara kerja setiap elemen. Selamat belajar web programming!
Komentar
Posting Komentar