Scribd
Unggah
9 tayangan10 halaman

Belajar HTML

Dokumen ini adalah modul latihan HTML untuk jurusan TKJ di SMK Ma'arif NU 03. Modul ini menjelaskan cara membuat form menggunakan tag <form> dan berbagai jenis field seperti input, checkbox, radio, select, dan textarea. Terdapat beberapa latihan praktis untuk membuat form login, contact, registrasi, dan form tingkat lanjut.

Diunggah oleh

nontonanime212121
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
9 tayangan10 halaman

Belajar HTML

Dokumen ini adalah modul latihan HTML untuk jurusan TKJ di SMK Ma'arif NU 03. Modul ini menjelaskan cara membuat form menggunakan tag <form> dan berbagai jenis field seperti input, checkbox, radio, select, dan textarea. Terdapat beberapa latihan praktis untuk membuat form login, contact, registrasi, dan form tingkat lanjut.

Diunggah oleh

nontonanime212121
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

MODUL LATIHAN

#HTML

JURUSAN TKJ

SMK MA’ARIF NU 03
SIRAMPOG

DI SUSUN :
GURU INFORMATIKA

YAYASAN AL-IKHSANIYAH
SEKOLAH MENENGAH KEJURUAN
TAHUN 2025

1
2
Belajar HTML #11: Cara Membuat Form
pada HTML
Cara Membuat Form di HTML
Form di HTML dapat kita buat dengan tag <form>.
Tag ini memiliki beberapa atribut yang harus diberikan, seperti:
 action untuk menentukan aksi yang akan dilakukan saat data dikirim;
 method metode pengiriman data.

Contoh:
<form action="proses.php" method="GET">
<!-- form field di sini -->
</form>
Untuk atribut action, kita dapat mengisinya dengan alaman URL
dari endpoint yang akan memproses form.
Secara sederhana,—pada contoh di atas— kita akan menyuruh
file proses.php untuk memproses data form.
Ini nanti akan kita pelajari pada PHP.
Kode HTML di atas, tidak akan menghasilkan apa-apa.
Karena kita belum membuat field-nya.
Apa itu Field?
Field adalah ruas yang dapat diisi dengan data.
Contoh field:
<input type="text" name="info" />

Field memiliki beberapa atribut yang harus diberikan:

1. type merupakan type dari field.


2. name merupakan nama dari field yang akan menjadi kunci dan variabel di dalam
program.

Latihan: Membuat Form Login

Sebagai latihan, mari kita buat form login.

Pada form login, terdapat beberapa field dan elemen:

1. Field untuk input username atau email;


2. Field untuk input password;
3. Checkbox untuk remember me;
4. Tombol untuk login.

Berikut ini kodenya:


3
<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<form action="login.php" method="POST">
<fieldset>
<legend>Login</legend>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="username..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="password..." />
</p>
<p>
<label><input type="checkbox" name="remember" value="remember" />
Remember me</label>
</p>
<p>
<input type="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
</body>
</html>

Hasilnya:

Sekarang perhatikan!

Pada kode di atas, kita membuat empat buah filed:

1. input username dengan tipe text;


2. input password dengan tipe password;
3. input remember dengan tipe checkbox;
4. input submit dengan tipe submit;

4
Lalu ketiga filed ini dibungkus ke dalam tag <fieldset>.

Nanti tag <fieldset> ini akan membuat sebuah garis.

Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan teks
pada fieldset.

Lalu, perhatikan juga atribut yang digunakan pada setiap field.

 Atribut placeholder untuk menampilkan teks sementara (placeholder);


 Atribut value untuk memberikan nilai default pada field.

Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan
sebuah label dengan tag <label>.

Latihan: Membuat Form Contact

Latihan Selanjutnya, kita akan membuat form contact. Form ini berfungsi
untuk menghubungi atau kontak admin.

Silakan ikuti kode berikut:

<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Contact</legend>
<p>
<label>Name:</label>
<input type="text" name="name" placeholder="your name..." />
</p>
<p>
<label>Subject:</label>
<input type="text" name="subject" placeholder="subject..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="your email..." />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>

Hasilnya:

5
Pada contoh di atas, kita memberikan type="email" untuk field email, agar filed
ini harus diisi dengan email saja.

Coba saja isi dengan yang lain, lalu klik Send…maka akan muncul pesan
peringatan.

Latihan: Membuat Form Register

Semakin banyak latihan, semakin bagus.

Berikutnya kita akan coba membuat form registrasi.

6
Form ini berisi field untuk:

 Input nama lengkap;


 Input username;
 Input email;
 Input password;
 Input jenis kelamin;
 Input Agama;
 Input Biografi.
 dsb.

Mari kita buat…

<!DOCTYPE html>
<html>
<head>
<title>Registrasi</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Registrasi</legend>
<p>
<label>Nama:</label>
<input type="text" name="nama" placeholder="Nama lengkap..." />
</p>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="Username..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Your email..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="Passowrd..." />
</p>
<p>
<label>Jenis kelamin:</label>
<label><input type="radio" name="jenis_kelamin" value="laki-
laki" /> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin"
value="perempuan" /> Perempuan</label>
</p>
<p>
<label>Agama:</label>
<select name="agama">
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="hindu">Hindu</option>
<option value="budha">Budha</option>
</select>
</p>
<p>
<label>Biografi:</label>
<textarea name="biografi"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Daftar" />
</p>
</fieldset>
7
</form>
</body>
</html>

Hasilnya:

Apa saja field baru yang ada di form tersebut?

1. Field radio;
2. Field <select><option>;
3. Field <textearea>.

Apa bedanya radio dengan checkbox?

Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan radio.

Tapi kalau kita ingin pengunjung memilih lebih dari satu, maka kita
gunakan checkbox.

Lalu untuk <select></option>, sifatnya sama seperti radio. Cuma dia bentuknya
berbeda.

Lalu untuk menginputkan teks yang panjang, kita gunakan tag <textarea>.

8
Latihan: Membuat Form Tingkat Lanjut

Field-field di atas merupakan jenis field yang sering digunakan dalam


pembuatan form.

Masih ada jenis field lagi yang belum kita coba,


seperti meter, color, url, number, date, datetime, dsb.

Mari kita coba beberapa:

<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Form</legend>
<p>
<label>Alamat Web:</label>
<input type="url" name="name" placeholder="Masukan URL Web..." />
</p>
<p>
<label>Tanggal Lahir:</label>
<input type="date" name="tanggal" />
</p>
<p>
<label>Umur:</label>
<input type="number" min="10" max="90" name="umur" />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>

Hasilnya:

9
Apabila di browser anda tidak tampil kalender seperti di atas, coba gunakan
browser versi terbaru.

10

Anda mungkin juga menyukai