chapter3.

md 2/8/2023

Modul Ajar 3
Contoh implementasi tag HTML: div, forms, frames, media, web API, dan tag HTML lainnya
Tujuan
Mahasiswa mampu mengimplementasik an konsep pembuatan website dengan HTML, CSS, dan
JavaScript (C3)
Form Element
Form element adalah elemen HTML yang digunakan untuk membuat form pada halaman web. Form
memungkinkan pengguna untuk mengirimkan data ke server untuk diproses, seperti mengirimkan informasi
pendaftaran atau membuat pemesanan.
Form elemen HTML termasuk:
<form>: elemen utama yang menentukan bagian form pada halaman web
<input>: elemen yang memungkinkan pengguna memasukkan data, seperti teks, angka, atau pilihan
<textarea>: elemen yang memungkinkan pengguna memasukkan teks bebas pada area yang lebih
luas dari <input>
<select>: elemen yang memungkinkan pengguna memilih satu atau lebih pilihan dari daftar yang
disediakan
<button>: elemen yang memungkinkan pengguna untuk mengirimkan data form
<label>: elemen yang menambahkan teks deskriptif untuk elemen form
<fieldset>: elemen yang memungkinkan Anda untuk mengelompokkan elemen form dan memberikan
garis pembatas visual
<legend>: elemen yang memberikan judul untuk setiap grup elemen form yang dikelompokkan
menggunakan <fieldset>. Semua elemen form harus berada dalam elemen <form> dan harus
memiliki atribut action dan method yang menentukan tujuan form dan cara mengirim data form ke server.
Berikut adalah contoh sederhana dari form elemen dalam HTML:

<form action="https://www.example.com/submit-form" method="post">

<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>

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

<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>

1 / 17
chapter3.md 2/8/2023

</select><br><br>

<input type="submit" value="Submit">

</form>

Form ini memiliki beberapa elemen input seperti teks, password, dan email. Selain itu, form ini juga memiliki
elemen select yang memungkinkan pengguna memilih jenis kelamin. Semua elemen form memiliki atribut name
yang digunakan untuk mengirimkan data ke server. Form ini juga memiliki atribut action dan method yang
menentukan bahwa data form akan dikirim ke URL https://www.example.com/submit-form menggunakan
metode post.
Atribut Action pada HTML
Atribut action pada elemen form dalam HTML menentukan URL yang akan digunakan untuk mengirimkan data
form ke server. Nilai dari atribut ini harus berupa URL yang valid. Data form akan dikirim ke URL yang ditentukan
oleh atribut action menggunakan metode yang ditentukan oleh atribut method.
Contoh:

<form action="https://www.example.com/submit-form" method="post">

<!-- form elements here -->
</form>

Dalam contoh di atas, data form akan dikirimkan ke URL https://www.example.com/submit-form menggunakan
metode post.
Atribut method
Atribut method pada elemen form dalam HTML menentukan metode yang akan digunakan untuk mengirimkan
data form ke server. Ada dua metode utama yang digunakan dalam pengiriman data form, yaitu GET dan POST.
Metode GET digunakan untuk mengirimkan data form sebagai bagian dari URL. Data form akan diterima oleh
server sebagai parameter URL. Metode POST digunakan untuk mengirimkan data form sebagai bagian dari
pesan HTTP. Data form akan diterima oleh server sebagai bagian dari pesan HTTP, dan tidak terlihat dalam
URL. contoh :

<form action="https://www.example.com/submit-form" method="post">

<!-- form elements here -->
</form>

Dalam contoh di atas, data form akan dikirimkan ke URL https://www.example.com/submit-form menggunakan
metode post.
Input Element Type Text (text box)

2 / 17
chapter3.md 2/8/2023

Elemen input tipe text (text box) adalah elemen HTML yang digunakan untuk membuat kotak teks dimana
pengguna dapat memasukkan data teks. Kotak teks ini biasanya digunakan dalam formulir untuk meminta
informasi dari pengguna.
Contoh:

<form action="https://www.example.com/submit-form" method="post">

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

Dalam contoh di atas, kotak teks dibuat dengan menggunakan elemen input dengan tipe text. Atribut id dan
name digunakan untuk memberikan identitas unik pada elemen, dan atribut for dari elemen label menunjukkan
bahwa label tersebut diterapkan pada elemen input dengan id yang sama.
Atribut Name
Atribut name pada elemen HTML digunakan untuk memberikan identitas unik pada elemen tersebut. Saat data
form dikirimkan ke server, setiap elemen dengan atribut name akan dikirimkan sebagai pasangan nama-nilai.
Nama dalam pasangan nama-nilai ini adalah nilai dari atribut name pada elemen.
Contoh:

<form action="https://www.example.com/submit-form" method="post">

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

Dalam contoh di atas, elemen input memiliki atribut name dengan nilai "name". Saat form dikirimkan ke server,
data yang dikirimkan akan berisi pasangan nama-nilai "name" dan nilai yang dimasukkan oleh pengguna dalam
kotak teks. Ini memungkinkan server untuk menentukan dari mana datanya berasal dan bagaimana data
tersebut harus diterapkan.
Atribut Value
Atribut value pada elemen HTML digunakan untuk memberikan nilai awal pada elemen. Nilai ini akan
ditampilkan pada halaman web dan akan dikirimkan ke server jika formulir dikirimkan.
Contoh:

<form action="https://www.example.com/submit-form" method="post">

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

3 / 17
chapter3.md 2/8/2023

Dalam contoh di atas, elemen input memiliki atribut value dengan nilai "Masukkan nama Anda". Nilai ini akan
ditampilkan dalam kotak teks sebagai teks placeholder. Jika pengguna tidak memasukkan data baru, nilai dari
atribut value akan dikirimkan ke server sebagai nilai yang diambil dari formulir.
Atribut Size
Atribut size pada elemen HTML digunakan untuk menentukan ukuran dalam karakter dari elemen formulir
seperti kotak teks (input type text) atau pilihan (select). Ukuran ini menentukan jumlah karakter yang akan
ditampilkan dalam kotak teks atau jumlah pilihan yang ditampilkan dalam daftar drop-down.
Contoh:

<form action="https://www.example.com/submit-form" method="post">

<label for="name">Nama:</label>
<input type="text" id="name" name="name" size="30">
</form>

Atribut Readonly
Atribut readonly pada elemen HTML digunakan untuk membuat elemen formulir seperti kotak teks (input type
text) hanya bisa dibaca, tapi tidak bisa diubah oleh pengguna.
Contoh:

<form action="https://www.example.com/submit-form" method="post">

<label for="username">Username:</label>
<input type="text" id="username" name="username" value="admin" readonly>
</form>

Dalam contoh di atas, elemen input memiliki atribut readonly sehingga kotak teks hanya bisa dibaca dan tidak
bisa diubah oleh pengguna. Nilai dari atribut value akan ditampilkan dalam kotak teks dan dikirimkan ke server
jika formulir dikirimkan.
Atribut Disabled
Atribut disabled pada elemen HTML digunakan untuk mematikan elemen formulir seperti kotak teks (input type
text), tombol (button), atau pilihan (select). Elemen yang dinonaktifkan tidak dapat diterima oleh server saat
formulir dikirimkan.
Contoh:

<form action="https://www.example.com/submit-form" method="post">

<label for="name">Nama:</label>
<input type="text" id="name" name="name" disabled>
<br><br>
<input type="submit" value="Submit">
</form>
4 / 17
chapter3.md 2/8/2023

Dalam contoh di atas, elemen input memiliki atribut disabled, sehingga kotak teks tidak bisa diisi oleh pengguna
dan tidak dapat diterima oleh server saat formulir dikirimkan.
Atribut maxlength
Atribut maxlength pada elemen HTML digunakan untuk membatasi jumlah karakter yang dapat diterima oleh
elemen formulir seperti kotak teks (input type text). Jika pengguna mencoba memasukkan lebih banyak
karakter dari nilai maxlength, elemen tidak akan menerima input tambahan.
Contoh:

<form action="https://www.example.com/submit-form" method="post">

<label for="name">Nama:</label>
<input type="text" id="name" name="name" maxlength="10">
<br><br>
<input type="submit" value="Submit">
</form>

Dalam contoh di atas, elemen input memiliki atribut maxlength="10", sehingga hanya 10 karakter pertama yang
diterima oleh elemen.
Input Element Type Submit
Elemen input type="submit" pada HTML adalah tombol yang memungkinkan pengguna untuk mengirimkan
data dari formulir HTML ke server. Saat pengguna mengklik tombol ini, browser akan mengirimkan semua data
formulir yang terkait ke server menggunakan metode yang ditentukan oleh atribut method pada elemen form.
Contoh:

<form action="https://www.example.com/submit-form" method="post">

<label for="name">Nama:</label>
<input type="text" id="name" name="name">
<br><br>
<input type="submit" value="Submit">
</form>

Dalam contoh di atas, elemen input type="submit" memiliki nilai value="Submit", sehingga tombol akan
ditampilkan dengan teks "Submit" pada layar. Saat pengguna mengklik tombol ini, data formulir akan dikirim ke
server menggunakan metode post.
Atribut Target
Atribut target dalam HTML adalah atribut yang digunakan untuk menentukan bagaimana halaman web harus
dibuka ketika link diklik. Nilai atribut target menentukan browser tab atau jendela yang digunakan untuk
menampilkan halaman terkait. Beberapa nilai yang paling umum adalah:
5 / 17
chapter3.md 2/8/2023

_blank: membuka halaman web baru di browser tab atau jendela baru.
_self: membuka halaman web pada tab atau jendela saat ini.
_parent: membuka halaman web di tab atau jendela yang menjadi parent dari iframe saat ini.
_top: membuka halaman web di tab atau jendela tanpa frame. Contoh penggunaan atribut target:

<a href="https://www.example.com" target="_blank">Visit Example.com</a>

Ini akan membuka halaman web pada tab atau jendela baru saat link diklik.
Input Element Type Reset
input type="reset" adalah tipe elemen input HTML yang membuat tombol reset form. Tombol ini akan
mengembalikan semua nilai elemen form ke nilai awal ketika diklik. Ini berguna untuk menghapus entri yang
salah sebelum mengirimkan form.
Contoh penggunaan elemen input type="reset":

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Ini akan membuat form dengan dua tombol, yaitu "Submit" dan "Reset". Tombol "Reset" akan mengembalikan
nilai elemen form ke nilai awal ketika diklik.
Input Element Type Password
input type="password" adalah tipe elemen input HTML yang membuat bidang masukan password. Bidang ini
memungkinkan pengguna memasukkan informasi rahasia, seperti kata sandi, dengan aman. Teks yang
dimasukkan akan ditampilkan sebagai tanda bintang (*) atau bullet (•) untuk menjaga privasi.
Contoh penggunaan elemen input type="password":

<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>

Ini akan membuat form dengan bidang password dan tombol submit. Saat pengguna memasukkan teks ke
bidang password, teks tersebut akan ditampilkan sebagai tanda bintang (*) atau bullet (•) untuk menjaga
privasi.
6 / 17
chapter3.md 2/8/2023

Input Element Type Checkbox

input type="checkbox" adalah tipe elemen input HTML yang membuat kotak centang. Kotak centang ini
memungkinkan pengguna memilih opsi atau menandai beberapa item dalam suatu daftar. Nilai dari kotak
centang bisa disimpan dan dikirim bersama dengan form lain ketika form dikirim.
Contoh penggunaan elemen input type="checkbox":

<form>
<input type="checkbox" id="item1" name="item" value="item1">
<label for="item1">Item 1</label><br>
<input type="checkbox" id="item2" name="item" value="item2">
<label for="item2">Item 2</label><br>
<input type="checkbox" id="item3" name="item" value="item3">
<label for="item3">Item 3</label><br><br>
<input type="submit" value="Submit">
</form>

Ini akan membuat form dengan tiga kotak centang dan tombol submit. Saat pengguna memilih salah satu atau
beberapa kotak centang, nilai dari kotak centang tersebut akan disimpan dan dikirim bersama dengan form
ketika form dikirim.
Atribut Checked
Atribut checked adalah atribut HTML yang digunakan untuk menentukan apakah elemen input seperti
checkbox atau radio harus diteruskan sebagai diterima (tercentang) atau tidak diteruskan (tidak tercentang). Ini
berguna untuk memastikan bahwa elemen input memiliki nilai yang ditentukan ketika form ditampilkan pada
halaman web.
Contoh penggunaan atribut checked:

<form>
<input type="checkbox" id="item1" name="item" value="item1" checked>
<label for="item1">Item 1</label><br>
<input type="checkbox" id="item2" name="item" value="item2">
<label for="item2">Item 2</label><br>
<input type="checkbox" id="item3" name="item" value="item3">
<label for="item3">Item 3</label><br><br>
<input type="submit" value="Submit">
</form>

Ini akan membuat form dengan tiga kotak centang dan tombol submit. Kotak centang dengan atribut checked
akan diteruskan sebagai diterima (tercentang) saat form ditampilkan pada halaman web.
Input Element Type Radio (radio button)
Input element type radio (radio button) adalah elemen HTML yang digunakan untuk membuat opsi pilihan
bersyarat dalam formulir HTML. Radio button memiliki beberapa pilihan opsi yang dapat dipilih oleh pengguna,
7 / 17
chapter3.md 2/8/2023

namun hanya satu opsi yang dapat dipilih pada satu waktu. Elemen ini memiliki atribut type="radio" dan dapat
dikontrol dengan atribut name yang sama. Hanya satu radio button dengan nama yang sama yang dapat dipilih
pada satu waktu.
Contoh penggunaan:

<input type="radio" name="gender" value="male"> Male<br>

<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

Textarea Element
Textarea element adalah elemen HTML yang digunakan untuk membuat area teks multi-baris pada halaman
web. Ini memungkinkan pengguna untuk mengetik beberapa baris teks pada formulir HTML. Textarea memiliki
atribut rows dan cols yang dapat digunakan untuk menentukan jumlah baris dan kolom teks yang dapat
diterima.
Contoh penggunaan:

<textarea rows="4" cols="50">

Default text in the textarea.
</textarea>

Atribut Rows dan Cols

Atribut rows dan cols adalah atribut HTML yang digunakan dalam elemen textarea untuk menentukan jumlah
baris dan kolom teks yang dapat diterima oleh area teks.
Atribut rows menentukan jumlah baris teks yang dapat diterima oleh textarea, sementara atribut cols
menentukan jumlah kolom teks yang dapat diterima. Ini membantu dalam membuat tampilan yang diharapkan
untuk area teks pada formulir HTML.
Contoh penggunaan:

<textarea rows="5" cols="50">

Default text in the textarea.
</textarea>

Atribut Maxlength
Atribut maxlength adalah atribut HTML yang digunakan pada elemen input dan textarea untuk menentukan
jumlah maksimal karakter yang dapat diterima oleh elemen tersebut. Ini berguna untuk membatasi jumlah
karakter yang dapat dimasukkan oleh pengguna pada formulir HTML, menghindari masalah validasi data atau
membatasi jumlah karakter yang dapat diterima oleh database.
8 / 17
chapter3.md 2/8/2023

Contoh penggunaan:

<input type="text" maxlength="10">

<textarea rows="4" cols="50" maxlength="100"></textarea>

Dalam contoh di atas, elemen input akan menerima maksimal 10 karakter teks dan textarea akan menerima
maksimal 100 karakter teks.
Select Element dan Option Element (menu dropdown)
Elemen select dan option adalah elemen HTML yang digunakan untuk membuat menu dropdown pada formulir
HTML. Elemen select digunakan sebagai container untuk beberapa elemen option yang mewakili opsi yang
tersedia untuk dipilih. Elemen option memiliki atribut value yang menentukan nilai yang akan dikirimkan ke
server saat formulir dikirim.
Contoh penggunaan:

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Dalam contoh di atas, menu dropdown akan menampilkan empat opsi: Volvo, Saab, Opel, dan Audi. Nilai yang
akan dikirimkan ke server saat formulir dikirim akan menjadi nilai dari opsi yang dipilih.
Atribut Selected
Atribut selected adalah atribut HTML yang digunakan dalam elemen option untuk menentukan opsi mana yang
dipilih secara default pada menu dropdown. Hanya satu opsi yang dapat memiliki atribut selected pada elemen
select yang sama.
Contoh penggunaan:

<select>
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Dalam contoh di atas, opsi "Saab" akan dipilih secara default pada menu dropdown. Jika pengguna tidak
memilih opsi lain, opsi "Saab" yang akan dikirimkan ke server saat formulir dikirim.
Atribut Multiple
9 / 17
chapter3.md 2/8/2023

Atribut multiple adalah atribut HTML yang digunakan pada elemen select untuk menentukan bahwa lebih dari
satu opsi dapat dipilih pada menu dropdown.
Contoh penggunaan:

<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Dalam contoh di atas, pengguna dapat memilih lebih dari satu opsi pada menu dropdown. Nilai dari semua opsi
yang dipilih akan dikirimkan ke server saat formulir dikirim.
Optgroup Element
Elemen optgroup adalah elemen HTML yang digunakan untuk mengelompokkan opsi pada menu dropdown. Ini
memungkinkan Anda untuk membuat struktur hierarkis dalam menu dropdown, membantu pengguna untuk
memahami dan memilih opsi yang tersedia.
Contoh penggunaan:

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Dalam contoh di atas, opsi pada menu dropdown dikelompokkan menjadi dua grup: "Swedish Cars" dan
"German Cars". Ini membantu pengguna untuk memahami dan memilih opsi yang tersedia dengan lebih baik.
Input Element Type File
Elemen input type="file" adalah elemen HTML yang digunakan untuk memungkinkan pengguna memilih dan
mengunggah file dari komputer mereka. Ini digunakan dalam formulir web untuk mengirim data file, seperti
gambar, video, atau dokumen, ke server.
Contoh penggunaan:

<form action="upload.php" method="post" enctype="multipart/form-data">

<input type="file" name="fileToUpload">

10 / 17
chapter3.md 2/8/2023

<input type="submit" value="Upload File">

</form>

Dalam contoh di atas, elemen input type="file" memungkinkan pengguna memilih file dari komputer mereka.
Saat formulir dikirim, file akan dikirimkan ke server dan disimpan dalam folder yang sesuai. Ini bergantung pada
skrip server yang memproses formulir untuk menentukan apa yang harus dilakukan dengan file yang diunggah.
Atribut Enctype
Atribut enctype adalah atribut HTML yang digunakan pada elemen form untuk menentukan jenis enkoding data
yang akan dikirimkan ke server saat formulir dikirim. Ini sangat penting untuk memastikan bahwa data yang
dikirimkan dapat diterima dan diproses oleh server dengan benar.
Berikut adalah tiga jenis enkoding data yang sering digunakan:
application/x-www-form-urlencoded: Ini adalah enkoding data default. Ini mengubah data formulir
menjadi string urlencoded dan menambahkannya ke URL yang digunakan untuk mengirim formulir.
multipart/form-data: Ini digunakan untuk mengirim data file seperti gambar, video, atau dokumen. Data
file akan dikencode sebagai bagian dari data multipart, yang dapat diterima oleh server dan diproses.
text/plain: Ini adalah enkoding data sederhana yang hanya mengirimkan data formulir sebagai teks biasa.
Contoh penggunaan:

<form action="upload.php" method="post" enctype="multipart/form-data">

<input type="file" name="fileToUpload">
<input type="submit" value="Upload File">
</form>

Dalam contoh di atas, atribut enctype digunakan untuk menentukan bahwa data yang dikirimkan adalah data
file dan harus dikencode sebagai data multipart. Ini memastikan bahwa file yang diunggah dapat diterima dan
diproses oleh server dengan benar.
Atribut Accept
Atribut accept adalah atribut HTML yang digunakan pada elemen input type="file" untuk menentukan jenis file
yang dapat diterima oleh formulir. Ini membantu mengurangi risiko pengguna memilih file yang tidak sesuai atau
tidak dapat diproses oleh server.
Contoh penggunaan:

<form action="upload.php" method="post" enctype="multipart/form-data">

<input type="file" name="fileToUpload" accept="image/jpeg, image/png">
<input type="submit" value="Upload File">
</form>

Dalam contoh di atas, atribut accept digunakan untuk menentukan bahwa hanya file JPEG dan PNG yang dapat
diterima oleh formulir. Saat pengguna memilih file, hanya file dengan tipe ini yang akan ditampilkan dan dapat
11 / 17
chapter3.md 2/8/2023

dipilih. Ini membantu memastikan bahwa file yang diunggah dapat diterima dan diproses oleh server dengan
benar.
Input Element Type Hidden
Elemen input type="hidden" adalah elemen HTML yang digunakan untuk menyimpan data formulir yang tidak
dapat dilihat oleh pengguna. Ini sering digunakan untuk menyimpan data yang diperlukan oleh server untuk
memproses formulir, tetapi tidak perlu diketahui oleh pengguna.
Contoh penggunaan:

<form action="submit.php" method="post">

<input type="text" name="username">
<input type="hidden" name="form_type" value="login">
<input type="submit" value="Submit">
</form>

Dalam contoh di atas, elemen input type="hidden" digunakan untuk menyimpan tipe formulir sebagai "login". Ini
dapat digunakan oleh server untuk memproses formulir dengan benar dan menentukan tindakan apa yang
harus diambil setelah formulir diterima. Karena elemen ini tidak dapat dilihat oleh pengguna, data yang
disimpan dalam elemen ini tidak dapat diterima oleh pengguna.
Input Element Type Image
Elemen input type="image" adalah elemen HTML yang digunakan untuk menambahkan gambar sebagai tombol
submit pada formulir. Ini memungkinkan Anda menambahkan gambar yang menyenangkan dan menarik
sebagai tombol submit, sehingga membuat formulir lebih menyenangkan dan mudah digunakan.
Contoh penggunaan:

<form action="submit.php" method="post">

<input type="text" name="username">
<input type="password" name="password">
<input type="image" src="login.png" alt="Submit Form">
<input type="hidden" name="form_type" value="login">
</form>

Dalam contoh di atas, elemen input type="image" digunakan untuk menambahkan gambar "login.png" sebagai
tombol submit formulir. Saat pengguna mengeklik gambar, formulir akan diteruskan ke server untuk diproses.
Ini membuat formulir lebih menyenangkan dan mudah digunakan, dan memungkinkan Anda menambahkan
gaya dan tampilan unik pada tombol submit formulir.
Input Elemeny Type Button
Elemen input type="button" adalah elemen HTML yang digunakan untuk membuat tombol yang dapat diklik
oleh pengguna. Ini tidak mengirimkan formulir saat diklik, tetapi dapat digunakan untuk memicu skrip
JavaScript yang membantu Anda menangani aksi pengguna.
12 / 17
chapter3.md 2/8/2023

Contoh penggunaan:

<form action="submit.php" method="post">

<input type="text" id="name">
<input type="button" value="Show Name" onclick="alert('Your name is ' +
document.getElementById('name').value)">
</form>

Dalam contoh di atas, elemen input type="button" digunakan untuk membuat tombol "Show Name". Saat
pengguna mengeklik tombol, skrip JavaScript akan dipicu dan memunculkan alert dengan nama pengguna. Ini
memungkinkan Anda membuat tombol yang dapat memicu skrip dan menangani aksi pengguna, tanpa
mengirimkan formulir ke server.
Label Element
Label Element pada HTML adalah sebuah elemen yang digunakan untuk memberikan informasi atau deskripsi
terkait dengan elemen HTML lainnya. Label element ini dapat digunakan untuk menyertakan teks atau judul
yang berkaitan dengan elemen lain seperti form, gambar, atau tabel. Label element ini memiliki tag
<label>whestlife yang dapat ditempatkan sebelum atau sesudah elemen yang bersangkutan.

Contoh penggunaan label element pada HTML:

<label for="username">Username:</label>
<input type="text" id="username">

Di sini, label element digunakan untuk memberikan deskripsi "Username" pada elemen input teks.
Fieldset Element dan Legend Element
Fieldset Element dan Legend Element pada HTML adalah elemen yang digunakan untuk membuat grup elemen
form pada halaman web. Fieldset digunakan untuk membatasi area grup elemen form, sementara Legend
digunakan untuk memberikan deskripsi atau judul pada grup elemen form tersebut.
Tag <fieldset> digunakan untuk membuat grup elemen form, dan tag <legend> digunakan untuk
memberikan deskripsi pada grup elemen form tersebut.
Contoh penggunaan Fieldset dan Legend pada HTML:

<fieldset>
<legend>Personal Information</legend>
<label for="username">Username:</label>
<input type="text" id="username"><br>
<label for="email">Email:</label>
<input type="email" id="email">
</fieldset>

13 / 17
chapter3.md 2/8/2023

Di sini, Fieldset digunakan untuk membatasi area elemen form dan Legend digunakan untuk memberikan
deskripsi "Personal Information" pada area elemen form.
Penutup: Form Element
Berikut adalah contoh form HTML lengkap dengan semua jenis elemen:

<html>
<body>
<form action="#">
<fieldset>
<legend>Personal Information</legend>
<label for="username">Username:</label>
<input type="text" id="username"><br>
<label for="email">Email:</label>
<input type="email" id="email"><br>
<label for="password">Password:</label>
<input type="password" id="password"><br>
</fieldset>
<fieldset>
<legend>Gender</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br>
</fieldset>
<fieldset>
<legend>Interests</legend>
<input type="checkbox" id="reading" name="interests"
value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label><br>
<input type="checkbox" id="sports" name="interests"
value="sports">
<label for="sports">Sports</label><br>
</fieldset>
<fieldset>
<legend>Address Information</legend>
<label for="address">Address:</label>
<textarea id="address"></textarea><br>
<label for="city">City:</label>
<input type="text" id="city"><br>
<label for="zip">Zip Code:</label>
<input type="text" id="zip"><br>
</fieldset>
<fieldset>
<legend>Phone Information</legend>
<label for="phone">Phone:</label>
<input type="tel" id="phone"><br>

14 / 17
chapter3.md 2/8/2023

</fieldset>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

Di sini, form memiliki 5 fieldset untuk membatasi area elemen form dan memberikan deskripsi pada area
elemen form tersebut. Element form seperti label, input teks, input email, input password, radio button,
checkbox, textarea, input tel, dan tombol submit/reset juga terlihat dalam form ini. Setiap fieldset mengandung
elemen yang berbeda sesuai dengan deskripsinya. Misalnya, fieldset "Gender" mengandung radio button untuk
memilih jenis kelamin, fieldset "Interests" mengandung checkbox untuk memilih minat,
Berikut adalah contoh form HTML lengkap dengan semua jenis elemen dan styling menggunakan CSS:

<html>
<head>
<style>
/* Style for form */
form {
width: 500px;
padding: 20px;
margin: auto;
background-color: lightgray;
border: 2px solid black;
border-radius: 5px;
}

/* Style for fieldset */

fieldset {
margin: 20px 0;
border: 2px solid black;
border-radius: 5px;
padding: 20px;
}

/* Style for legend */

legend {
font-size: 1.5em;
font-weight: bold;
}

/* Style for label */

label {
display: block;
margin-bottom: 10px;
font-size: 1.2em;
font-weight: bold;
}

/* Style for input elements */

15 / 17
chapter3.md 2/8/2023

input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
font-size: 1.2em;
}

/* Style for submit and reset buttons */

input[type="submit"], input[type="reset"] {
width: 49%;
padding: 10px;
font-size: 1.2em;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<legend>Personal Information</legend>
<label for="username">Username:</label>
<input type="text" id="username"><br>
<label for="email">Email:</label>
<input type="email" id="email"><br>
<label for="password">Password:</label>
<input type="password" id="password"><br>
</fieldset>
<fieldset>
<legend>Gender</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br>
</fieldset>
<fieldset>
<legend>Interests</legend>
<input type="checkbox" id="reading" name="interests"
value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label><br>
<input type="checkbox" id="sports" name="interests"
value="sports">
<label for="sports">Sports</label><br>
</fieldset>
<fieldset>
<legend>Address Information</legend>
<label for="address">Address:</label>
16 / 17
chapter3.md 2/8/2023

<textarea id="address"></textarea><br>
<label for="city">City:</label>
<input type="text" id="city"><br>
<label for="zip">Zip Code:</label>
<input type="text" id="zip"><br>
</fieldset>
<fieldset>
<legend>Phone Information</legend>
<label for="phone">Phone:</label>
<input type="tel" id="phone"><br>
</fieldset>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

17 / 17