Belajar Koding html Bagian 2: Membuat Halaman Form
.png)
Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web.
Untuk
membuat formulir dalam HTML, Anda dapat menggunakan elemen-elemen seperti <form>,
<input>, <label>, <textarea>, dan <button>. Berikut adalah langkah-langkah
dasar untuk membuat formulir sederhana:
- Membuat
Elemen <form>: Elemen <form> berfungsi sebagai wadah untuk
semua elemen input dalam formulir. Atribut action
menentukan URL tujuan data formulir akan dikirim, dan atribut method menentukan metode pengiriman
data (GET atau POST).
<html>
<form action="proses.php"
method="POST">
<!-- Elemen
input akan ditempatkan di sini -->
</form>
 |
| Tampilan Input Elemen Form |
- Menambahkan
Elemen <label> dan <input>: Elemen <label> memberikan keterangan untuk
elemen input, sedangkan elemen <input> digunakan untuk menerima input
dari pengguna. Atribut type pada <input> menentukan jenis input,
seperti teks, sandi, atau email.
<form action="proses.php"
method="POST">
<label
for="username">Username:</label>
<input
type="text" id="username" name="username"
required>
<br>
<label
for="password">Password:</label>
<input type="password"
id="password" name="password" required>
<br>
<button
type="submit">Login</button>
</form>
 |
| Tampilan Kodingan (input) membuat Halaman Form |
 |
| Tampilan Hasil (Ontput) Membuat Halaman Form |
- Menambahkan
Elemen <textarea>: Elemen <textarea> digunakan untuk input teks
yang lebih panjang, seperti komentar atau pesan.
<form action="proses.php"
method="POST">
<label
for="komentar">Komentar:</label>
<textarea
id="komentar" name="komentar" rows="4"
cols="50"></textarea>
<br>
<button
type="submit">Kirim</button>
</form>
 |
| Tampilan Kodingan (input) TextArea Halaman Form |
 |
| Tampilan Hasil (otnput) TextArea Halaman Form |
- Menambahkan
Tombol Submit dan Reset: Tombol submit digunakan untuk mengirim data formulir,
sedangkan tombol reset untuk mengatur ulang semua input ke nilai awal.
<form action="proses.php"
method="POST">
<!-- Elemen
input lainnya -->
<button
type="submit">Kirim</button>
<button
type="reset">Reset</button>
</form>
 |
| Tampilan Kodingan (input) Tombol Submit dan Reset Halaman Form |
 | |
|
0 Response to "Belajar Koding html Bagian 2: Membuat Halaman Form"
Post a Comment