FORM DENGAN HTML

HTML form adalah salah satu elemen dalam web development yang memungkinkan user
untuk memasukkan data dan berinteraksi dengan website. Elemen ini biasanya digunakan
untuk pendaftaran, login, pencarian, dan banyak lagi.

Struktur dari HTML form cukup sederhana, biasanya terdiri dari elemen
yang di dalamnya terdapat berbagai jenis kontrol seperti teks, tombol, kotak centang, dan
lain-lain.

Bagi developer, adanya HTML form tidak hanya membantu dalam membangun website
yang responsif dan mudah digunakan, tetapi juga memungkinkan pengumpulan data dari
audiens dengan cara yang efisien.

Untuk membuat form menggunakan bahasa HTML dapat mengunakan element HTML
yaitu <form> … </form>. Dalam element form tersebut, harus ditambahkan element lain
sesuai dengan jenis inputan yang dipakai yaitu element <input>, <label>, <textarea>,
<select>, dan <button>.

Membuat Form HTML – Element Label

Element pertama yang kita bahas adalah label. Element label difungsikan untuk
menambahkan informasi maupun keterangan terkait dengan jenis inputan yang digunakan
pada form HTML. Elemen label selalu disandingkan dengan element input yang dipakai.
Tag yang digunakan untuk membuat label adalah <label> … </label>. Element label dapat
ditambahkan dengan atribut lain seperti for=”value” untuk menghubungkan label dengan
element lain pada form.

Membuat Form HTML – Element Input

Element input banyak digunakan pada pembuatan form HTML dan berfungsi sebagai
inputan data maupun informasi lain yang dibutuhkan. Tag yang digunakan untuk membuat
element ini adalah <input> tanpa tag penutup. Tag pembuka yang tidak memiliki pasangan
tag penutup biasa kita sebut dengan istilah self closing tag.
Ada banyak jenis inputan atau text fields yang dapat kita gunakan untuk membuat form
pada HTML, kita ambil beberapa jenis text fields yang biasa dipakai dalam pembuatan form
yaitu:

Element input dengan type=”text” <input type=”text”>, menerima input berapa text
singkat seperti nama, username, alamat, tempat lahir, dan lain-lain.

Element input dengan type=”password” <input type=”password”>, berfungsi untuk

menerima input berupa password yang disamarkan dengan tanda titik.

Element input dengan type=”radio” <input type=”radio”>, input berupa radio button
(memilih salah satu opsi yang telah disediakan).

Element input dengan type=”checkbox” <input type=”checkbox”>, input berupa

checkbox atau centang (dapat memilih lebih dari satu opsi yang telah disediakan).
Element input dengan type=”number” <input type=”number”>, menerima input berupa
nomor atau angka. Tambahkan atribut min (angka minimal), max (angka maksimal).

Element input dengan type=”date” <input type=”date”>, menerima input berapa tanggal.

Element input dengan type=”email” <input type=”email”>, menerima input berupa

alamat email.

Elemen input dengan type=”tel” <input type=”tel”>, menerima input berupa nomor
telepon. Tambahkan atribut pattern untuk format nomor telepon.

Element input dengan type=”file” <input type=”file”>, menerima input berupa file
maupun dokumen.

Element input dengan type=”submit” <input type=”submit”>, menerima input berupa

submit.

Elemen input dengan type=”reset” <input type=”reset”>, menerima input berupa reset.

Selain type input di atas, masih terdapat type inputan lain yaitu:
 <input type=”color”>
 <input type=”datetime-local”>
 <input type=”hidden”>
 <input type=”image”>
 <input type=”month”>
 <input type=”range”>
 <input type=”search”>
 <input type=”time”>
 <input type=”url”>
 <input type=”week”>

PRAKTIK ELEMENT LABEL DAN INPUT

labeldaninput.html
password.html

radio.html
checkbox.html
number.html

tanggalemaildantelepon.html
upload.html

submitdanreset.html

TUGAS.
Gabungkan semua file dari labeldaninput.html sampai dengan submitdanreset.html
Membuat Form HTML – Element Textarea

Textarea merupakan element yang memiliki fungsi sama dengan element input dengan
type=”text” yaitu menerima input berupa text, perbedaanya textarea dapat menerima
lebih banyak karakter teks. Textarea biasa difungsikan untuk inputan berupa isian lengkap
maupun komentar.
Untuk membuat element ini gunakan tag <textarea> … </textarea>. Ukuran textarea
dapat dicustom dengan menambahkan atribut row dengan value berupa jumlah baris yang
diinginkan, dan atribut cols untuk lebar textarea yang digunakan.

Membuat Form HTML – Element Select

Element select berfungsi untuk membuat form dalam bentuk list dropdown. Penggunaan
element form jenis ini biasa difungsikan untuk membuat form dengan banyak opsi atau
pilihan, misalnya nama kota atau provinsi. Untuk membuat element select dibutuhkan tag
<select> … </select>, sedangkan untuk menambahkan opsinya gunakan tag <option> …
</option>.

Element Button
Sesuai namanya, element button digunakan untuk membuat tombol yang dapat diklik.
Fungsinya tergantung dari atribut yang digunakan, bisa sumbit, reset, login, atau tombol
yang mengarah ke halaman paling atas pada website. Biasanya element ini diintegrasikan
dengan fungsi javascript untuk menciptakan perilaku dari button tersebut.
Untuk membuat element button gunakan tag <button> … </button>.

Element Fieldset dan Legend

Element terakhir yang akan kita bahas adalah fieldset dan legend. Element <fieldset>
berfungsi untuk mengelompokkan (grouping) element form sedangkan <legend>
berfungsi menampilkan judul dari group form tersebut. Contoh mengelompokkan nama
awal, akhir, dan alias kedalam group.

PRAKTIK HTML ELEMENT

textarea.html
select.html

button.html

fieldset.html
Contoh form pendaftaran
pendaftaran.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Form Pendaftaran </title>
</head>
<body>

<h2>Formulir Pendaftaran Pelatihan Pemrograman Dasar :</h2>

<form action="action_page.php">
<table>
<tr>
<td><label for="nama">Nama Lengkap</label></td>
<td>:</td>
<td><input type="text" name="nama" id="nama"></td>
</tr>
<tr>
<td><label for="NIK">Nomor Induk Kependudukan</label></td>
<td>:</td>
<td><input type="number" name="NIK" id="NIK"></td>
</tr>
<tr>
<td><label for="lahir">Tempat Lahir</label></td>
 <td>:</td>
<td><input type="text" name="lahir"></td>
</tr>
<tr>
<td><label for="date">Tanggal Lahir</label></td>
<td>:</td>
<td><input type="date" name="date" id="date"></td>
</tr>
<tr><td><label for="kota">Asal Kabupaten/Kota</label></td>
<td>:</td>
<td>
<select id="kota">
<option value="Batang">Batang</option>
<option value="Pekalongan">Pekalongan</option>
<option value="Pemalang">Pemalang</option>
<option value="Tegal">Tegal</option>
<option value="Kendal">Kendal</option>
<option value="Semarang">Semarang</option>
<option value="Demak">Demak</option>
<option value="Kudus">Kudus</option>
<option value="Pati">Pati</option>
<option value="Rembang">Rembang</option>
<option value="Surakarta">Surakarta</option>
<option value="Salatiga">Salatiga</option>
<option value="Banyumas">Banyumas</option>
<option value="Purworejo">Purworejo</option>
</select>
</td>
</tr>
<tr>
<td><label for="pendidikan">Pendidikan Terakhir</label></td>
<td>:</td>
<td>
<input type="radio" name="pendidikan" id="pendidikan"
value="Diploma 3">
<label for="D3">Diploma 3</label>
<input type="radio" name="pendidikan" id="pendidikan"
value="Strata 1">
<label for="S1">Strata 1</label>
<input type="radio" name="pendidikan" id="pendidikan"
value="Strata 2">
<label for="S2">Strata 2</label>
</td>
</tr>
<tr>
<td><label for="hp">Nomor Telepon</label></td>
<td>:</td>
<td><input type="tel" name="hp" id="hp" value="+62"></td>
 </tr>
<tr>
<td><label for="email">Alamat Email</label></td>
<td>:</td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="lang">Pelatihan yang dipilih</label></td>
<td>:</td>
<td>
<input type="checkbox" name="diklat" id="lang1" value="HTML">
<label for="lang">HTML</label>
<input type="checkbox" name="diklat" id="lang2" value="CSS">
<label for="lang">CSS</label>
<input type="checkbox" name="diklat" id="lang3"
value="Javascript">
<label for="lang">Javascript</label>
</td>
</tr>
<tr>
<td>Alasan singkat mengikuti pelatihan</td>
<td>:</td>
<td><textarea style="width: 250; height: 100;"></textarea></td>
</tr>
<tr>
<td><label for="cv">Upload Dokumen CV</label></td>
<td>:</td>
<td><input type="file" name="CV" id="CV"></td>
</tr>
<tr>
<td>
<br>
<button type="submit" onclick="alert('Terima kasih sudah
mendaftar pelatihan ini.')">Kirim</button>
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>