Form Pada HTML

Assalamualaikum
Selamat pagi~
Melanjutkan mata pelajaran PWPB untuk kelas XI, mater terakhir kita pada
pembahasan tabel, dan juga kemarin kamu sudah mengerjakan latihan tabelnya.
Pada latihan tabel, soalnya seperti ini
Untuk kode HTML dari latihan tersebut, bisa kamu coba kode program di bawah
ini
<!DOCTYPE html>
<html>
<head>
<title>Latihan tabel</title>
</head>
<body>
<table border="1">
<tr bgcolor="blue">
<td rowspan="2">No</td>
<td rowspan="2">Nama</td>
<td colspan="2" align="center">Nilai</td>
</tr>
<tr bgcolor="blue">
<td>UTS</td>
<td>UAS</td>
</tr>
<tr>
<td align="center">1</td>
<td>ABDUL RAHMAN</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>ANDIKA ANDREANSYAH PUTRA</td>
<td>81</td>
<td>79</td>
</tr>
<tr>
<td>ANDIKA ANDREANSYAH PUTRA</td>
<td>75</td>
<td>87</td>
</tr>
<tr>
<td>ANREAN TRY MULYA</td>
<td>70</td>
<td>85</td>
</tr>
<tr>
<td>AYU CHOIRUNISSA SULAEMAN PUTRI</td>
<td>75</td>
<td>75</td>
</tr>
</table>
</body>
</html>
Hasilnya akan seperti gambar berikut ini
Okay, sekarang kita akan melanjutkan pembahasan ke bab selanjutnya yaitu tentang Form.
Form pada HTML
Form atau yang bahasa sundanya adalah formulir biasa kita jumpai di lingkungan
sekitar kita. Contohnya di lingkungan sekolah pada saat pemilihan kegiatan
ekstrakurikuler seperti gambar berikut ini
Pada contoh formulir di atas, terdapat isian untuk data diri dan macam-macam
ekstrakulikulernya. Nah kita pada kesempatan kali ini kita akan mencoba membuat
formulir menggunakan HTML, jadi formulirnya berbasis web, bisa juga nanti diakses
dengan handphone masing-masing.
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 akasi yang akan dilakukan saat data dikirim;

 method metode pengiriman data.
Contoh:
<form action="prosess.php" method="GET">


</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 prosess.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.
Nah, nilai dari atribut type ini bermacam-macam, antara lain

 text – menghasilkan field untuk mengisi data berupa teks
 email – menghasilkan field untuk mengisi data khusus email
 password – menghasilkan field untuk mengisi data khusus password atau kata
sandi, field ini nantinya hanya menampilkan bintang atau bulatan yang
berfungsi untuk menutupi nilai asli. Namanya juga password.
 radio – menghasilkan radio button, dengan menggunakan input type ini para
pengguna nantinya akan disuruh memilih salah satu dari dua atau lebih pilihan
yang ada.
 checkbox – menghasilkan checkbox yang membuat pengguna dapat memilih
lebih dari satu pilihan dari banyak daftar pilihan yang disediakan
 number – menghasilkan field untuk mengisi data khusus angka
 date – menghasilkan field untuk mengisi data khusus tanggal
 file – menghasilkan field untuk upload file
 submit – menghasilkan tombol submit
 reset – mereset form
Sekarang kita akan coba latihan membuat form login di HTML.

Pada form login, terdapat beberapa field dan elemen:
1. Field untuk input username atau email;

2. Field untuk input password;
3. Checkbok untuk remember me;
4. Tombol untuk login.
Berikut ini kodenya:

<!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 seperti ini

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;
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 atirbut yang digunakan pada setiap field.
 Atribut placeholder untuk menampilkan teks sementara (placeholder);

 Atribut value untuk membreikan nilai default pada field.
Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan sebuah
label dengan tag <label>.
Untuk latihan di rumah, buatlah form di bawah ini menggunakan HTML

Form Pada HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Form Pada HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Assalamualaikum

Hasilnya akan seperti gambar berikut ini

Cara Membuat Form di HTML

Tag ini memiliki beberapa atribut yang harus diberikan, seperti:

 action untuk menentukan akasi yang akan dilakukan saat data dikirim;

<form action="prosess.php" method="GET">

Untuk atribut action, kita dapat mengisinya dengan alaman URL dari endpoint yang

Secara sederhana,—pada contoh di atas— kita akan menyuruh

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?

<input type="text" name="info" />

Field memiliki beberapa atribut yang harus diberikan:

1. type merupakan type dari field.

Nah, nilai dari atribut type ini bermacam-macam, antara lain

Sekarang kita akan coba latihan membuat form login di HTML.

1. Field untuk input username atau email;

Berikut ini kodenya:

Hasilnya seperti ini

Pada kode di atas, kita membuat empat buah filed:

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

Lalu, perhatikan juga atirbut yang digunakan pada setiap field.

 Atribut placeholder untuk menampilkan teks sementara (placeholder);

Anda mungkin juga menyukai