Belajar HTML #12 | Cara Membuat Form Pada HTML
Belajar Bareng Minarsih - Edisi Ngoding
07 Desember 2022
Saat mendaftar akun atau login di suatu situs, kamu pasti akan menginputkan data pada form di situs tersebut.
Nah, kali ini kita akan belajar membuat kotak form inputan tersebut beserta tombolnya dan html tag/attribute apa saja yang dibutuhkan untuk membuatnya.
1. Formulir
Tag <form> digunakan untuk mengawali pembuatan form.
Contoh penggunaannya:
<form action="/path">
<!-- Elemen pada formulir -->
</form>
2. Input
Tag <input> digunakan untuk membuat kotak input dimana user akan mengisi data.
Tag input ada bermacam-macam bentuknya. Ada yang hanya bisa diisi dengan teks, ada yang hanya bisa diisi dengan angka, ada yang berbentuk checkbox, dan lain sebagainya. Untuk menentukan input seperti apa yang ingin kita dapatkan dari user, maka tag <input> harus diberi attribute type.
Di bawah ini adalah contoh-contoh dari tag <input> beserta bermacam-macam attribute type nya:
<form action="/path">
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
</form>
hasil :
3. Select dan Option
Pernahkah kalian melihat pilihan dropdown pada halaman sebuah website? Nah, pilihan tersebut menggunakan tag <select> dan <option> dalam membuatnya.
Contoh penggunaannya:
<select>
<option value="Jakarta">Jakarta</option>
<option value="Surabaya">Surabaya</option>
<option value="Bandung">Bandung</option>
</select>
Hasil kode di atas pada browser akan muncul seperti ini:
5. Text Area
Pernahkah kalian mencoba menulis komentar di facebook maupun youtube? Nah, kalian pasti menulis di kolom komentar yang sudah disediakan. Kita juga bisa membuat kolom komentar tersebut dengan menggunakan tag <textarea>.
Tag <textarea> digunakan untuk menampung input dari user berupa teks yang lebih dari satu baris, dan mempunyai karakter yang sangat banyak (misalnya seperti input berupa paragraf).
Contoh penggunaannya:
<textarea rows="4" cols="50" placeholder="Tulis komentar Anda di sini...."></textarea>
Di browser, kode di atas akan terlihat seperti ini:
6. Button (Tombol)
Untuk membuat sebuah tombol yang dapat diklik, maka kita memerlukan tag <button>, dan juga bisa menggunakan tag <input> dengan type button atau submit.
Contoh penggunaannya:
<button>Klik di sini</button>
Maka, kode di atas akan terlihat seperti ini:
Contoh Formulir Sederhana :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form pada HTML</title>
</head>
<body>
<form>
<fieldset>
<legend>Formulir Calon Pegawai</legend>
<p>Nama : <input type="text" name="nama"></p>
<p>Alamat : <input type="text" name="alamat"></p>
<p>Password : <input type="password" name="pass"></p>
<p>
Jenis Kelamin :
<input type="radio" name="jk" value="laki-laki" checked />
Laki - Laki
<input type="radio" name="jk" value="perempuan" />
Perempuan
</p>
<p>
Bahasa pemograman yang dikuasai :
<input type="checkbox" name="web"> Web
<input type="checkbox" name="mobile"> MOBILE
<input type="checkbox" name="desk"> DESKTOP
</p>
<p>
Kota asal :
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
</p>
<p>
Apa yang Membuat Kami harus memilih Anda?:<br>
<textarea rows='10' cols='60' placeholder="Tulis jawaban Anda di sini" ></textarea>
</p>
<p><input type="submit" value="proses"></p>
</fieldset>
</form>
</body>
</html>
Maka, kode di atas akan terlihat seperti ini:
Artikel Lainnya Dengan Kategori Terkait :
1. 5 HTML Tags For Accessibility
2. Belajar HTML #01 | Apa Itu HTML ? Pengertian HTML Lengkap Untuk Pemula
3. Belajar HTML #02 | Cara Sederhana Membuat Code HTML
4. Belajar HTML #03 | Membuat Heading di HTML
5. Belajar HTML #04 | Format Text di HTML
6. Belajar HTML #05 | Membuat Paragraf di HTML
7. Belajar HTML #06 | Membuat Tabel Pada HTML
8. Belajar HTML #07 | Membuat Link Pada HTML
9. Belajar HTML #08 | Cara Membuat List Di HTML
10. Belajar HTML #09 | Cara Membuat Box Shadow CSS dan HTML Praktis Tanpa ribet (efek bayangan CSS)
11. Belajar HTML #10 | Cara Menampilkan Gambar Pada Halaman Website Menggunakan HTML
12. Belajar HTML #11 | Cara Menampilkan Video Pada Halaman Website Menggunakan HTML
13. Belajar HTML #12 | Cara Membuat Form Pada HTML
14. Belajar HTML #13 | Belajar Membuat Layout Pada HTML
15. Belajar HTML #14 | Belajar Menghubungkan HTML dengan CSS
16. Belajar HTML #15 | Cara Menambahkan Audio ke Halaman Website Menggunakan HTML.
17. Belajar HTML #16 | Cara Menambahkan Garis Horizontal di HTML
18. Belajar HTML #17 | Cara Menambahkan Komentar di HTML
19. Belajar HTML #18 | Tutorial Cara Membuat Checkbox dan Radio Button di HTML
20. Buat Desain Web Responsif CSS
21. Cara Membuat Accordions Dengan HTML & CSS
22. Cara Membuat Favicon Dengan HTML
26. Input HTML Yang Perlu Diketahui
27. Memahami Pentingnya Semantic HTML dalam Struktur Website
28. Membuat Form HTML dengan Input Sugestion
29. Penggunaan Atribut Elemen Anchor dalam HTML
31. Tag HTML yang Jarang Diketahui
