HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan buat bikin halaman web. Dalam HTML, kita bisa bikin form buat ngebantu pengguna masukin info ke website. Form ini bisa berisi elemen kayak input, textarea, sama button. Di artikel ini, kita bakal belajar cara bikin form menggunakan script HTML.
Form Itu Apa Sih?
Form itu elemen HTML buat kumpulin data dari pengguna. Form biasanya dipake buat input data kayak nama, email, sama pesan ke dalam website.
Apa Saja Yang Dibutuhkan Untuk Membuat Form di HTML?
Sebelum kita mulai bikin form, ada beberapa hal yang perlu disiapkan, yaitu:
1. Text editor
Kita bisa pake text editor kayak Notepad, Sublime Text, atau VS Code buat bikin script HTML.
2. Browser
Kita butuh browser kayak Google Chrome atau Mozilla Firefox buat liat hasil dari script HTML yang kita bikin.
3. Pengetahuan dasar HTML
Kita harus punya pengetahuan dasar tentang HTML, kayak elemen, atribut, dan tag.
4. IDE online
Kita juga bisa pake IDE online kayak CodePen atau JSFiddle buat bikin script HTML.
Buat kamu yang cuma punya hp Android, tenang aja. Kamu tetap bisa kok buat Form Menggunakan HTML di Smartphone kesayangan kamu. Baca cara nya dengan klik tautan dibawah ini:
Langkah-Langkah Bikin Form di HTML
Setelah persiapan selesai, kita bisa mulai bikin form. Berikut adalah langkah-langkahnya:
1. Buat Struktur Dasar HTML
Pertama-tama, kita perlu bikin struktur dasar HTML. Struktur ini biasanya terdiri dari <!DOCTYPE html>, <html>, <head>, dan <body>.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Form</title>
</head>
<body>
<!-- Isi form di sini -->
</body>
</html>
2. Bikin Form Element
Setelah itu, kita perlu bikin elemen form. Elemen form ini bisa dibuat dengan menggunakan tag <form>.
<form>
<!-- Isi form di sini -->
</form>
3. Tambahkan Input Element
Setelah bikin elemen form, kita perlu tambahkan input element. Input element ini biasanya digunakan untuk meminta input dari pengguna. Contoh input element yang sering dipakai adalah text, email, password, dan checkbox.
<form>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama kamu">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Masukkan email kamu">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<label for="checkbox">Pilih satu atau lebih:</label>
<br>
<input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1">
<label for="checkbox1">Checkbox 1</label>
<br>
<input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox2">
<label for="checkbox2">Checkbox 2</label>
<br>
<input type="checkbox" id="checkbox3" name="checkbox3" value="checkbox3">
<label for="checkbox3">Checkbox 3</label>
<br>
</form>
4. Tambahkan Textarea Element
Textarea element digunakan untuk meminta input teks yang lebih panjang dari pengguna.
<form>
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="4" cols="50" placeholder="Tulis pesan kamu di sini"></textarea>
</form>
5. Tambahkan Button Element
Button element digunakan untuk membuat tombol yang dapat di klik oleh pengguna.
<form>
<label for="nama">Masukkan nama:</label>
<input type="text" id="nama" name="nama">
<button type="submit">Submit</button>
</form>
Dalam contoh di atas, kami menambahkan button element dengan atribut type="submit". Saat tombol ditekan, form akan disubmit ke URL yang ditentukan dalam atribut action pada element form.
<form>
<label for="nama">Masukkan nama:</label>
<input type="text" id="nama" name="nama">
<button type="submit"value=>Submit</button>
</form>
Terakhir, kita juga dapat menambahkan atribut form pada button element untuk menentukan form mana yang akan disubmit saat tombol ditekan.
lt;form id="form1">
<label for="nama">Masukkan nama:</label>
<input type="text" id="nama" name="nama">
</form>
<form id="form2">
<label for="email">Masukkan email:</label>
<input type="email" id="email" name="email">
</form>
<button type="submit" form="form1">Submit Form 1</button>
<button type="submit" form="form2">Submit Form 2</button>
6. Tambahkan Select Element
Selanjutnya, kita dapat menambahkan Select Element pada form yang telah kita buat sebelumnya. Select Element digunakan untuk memungkinkan pengguna memilih opsi dari sebuah dropdown menu.
Tambahkan element select pada form menggunakan tag <select></select> dengan menambahkan atribut "name" untuk menentukan nama dari field yang akan dikirimkan ke server saat form disubmit.
<select name="jenis_kelamin">
</select>
Tambahkan beberapa element option pada Select Element menggunakan tag <option></option> dengan menambahkan atribut "value" untuk menentukan nilai yang akan dikirimkan ke server saat pengguna memilih opsi tersebut.
<select name="jenis_kelamin">
<option value="pria">Pria</option>
<option value="wanita">Wanita</option>
<option value="lainnya">Lainnya</option>
</select>
Untuk menambahkan label pada Select Element, kita dapat menggunakan element <label></label> dan menentukan nilai dari atribut "for" dengan nama field yang telah ditentukan sebelumnya.
<label for="jenis_kelamin">Jenis Kelamin:</label>
<select name="jenis_kelamin" id="jenis_kelamin">
<option value="pria">Pria</option>
<option value="wanita">Wanita</option>
<option value="lainnya">Lainnya</option>
</select>
Dengan menambahkan Select Element pada form, pengguna dapat memilih opsi yang sesuai dengan kebutuhan mereka. Selanjutnya, kita dapat melanjutkan dengan menambahkan element lainnya untuk membuat form yang lebih lengkap dan interaktif.
7.Tambahkan Text Field
Text field adalah element yang digunakan untuk meminta pengguna memasukkan teks atau angka. Untuk membuat text field, kita dapat menambahkan element input dengan atribut type="text" atau type="number".
<form>
<label for="nama">Masukkan nama:</label>
<input type="text" id="nama" name="nama">
<label for="umur">Masukkan umur:</label>
<input type="number" id="umur" name="umur">
</form>
Dalam contoh di atas, kami menambahkan dua text field dengan atribut id dan name. Atribut id digunakan untuk mengidentifikasi input field secara unik dan digunakan dalam JavaScript atau CSS, sedangkan atribut name digunakan saat form disubmit.
<form>
<label for="nama">Masukkan nama:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap">
<label for="umur">Masukkan umur:</label>
<input type="number" id="umur" name="umur" placeholder="Masukkan umur dalam tahun">
</form>
Kita juga dapat menambahkan atribut required pada input field untuk memastikan pengguna memasukkan data pada field tersebut sebelum form disubmit.
<form>
<label for="nama">Masukkan nama:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap" required>
<label for="umur">Masukkan umur:</label>
<input type="number" id="umur" name="umur" placeholder="Masukkan umur dalam tahun" required>
</form>
8. Tambahkan Radio Button
Radio button digunakan untuk meminta pengguna memilih satu opsi dari beberapa opsi yang tersedia. Untuk membuat radio button, kita dapat menambahkan element input dengan atribut type="radio".
<form>
<label>Pilih jenis kelamin:</label><br>
<input type="radio" id="laki-laki" name="jenis-kelamin" value="laki-laki">
<label for="laki-laki">Laki-laki</label><br>
<input type="radio" id="perempuan" name="jenis-kelamin" value="perempuan">
<label for="perempuan">Perempuan</label><br>
</form>
Kita dapat menggunakan atribut name yang sama pada beberapa input radio button untuk mengelompokkan opsi-opsi tersebut.
Selain itu, kita juga dapat menambahkan atribut checked pada salah satu input radio button untuk menentukan opsi yang terpilih secara default.
<form> <label>Pilih jenis kelamin:</label><br> <input type="radio" id="laki-laki" name="jenis-kelamin" value="laki-laki" checked> <label for="laki-laki">Laki-laki</label><br> <input type="radio" id="perempuan" name="jenis-kelamin" value="perempuan"> <label for="perempuan">Perempuan</label><br> </form>
Jika kita gabungkan, kira-kira begini hasilnya:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Formulir Pendaftaran</title> </head> <body> <h1>Formulir Pendaftaran</h1> <form action="/submit" method="post"> <label for="nama">Nama Lengkap:</label> <input type="text" name="nama" id="nama" required> <label for="email">Email:</label> <input type="email" name="email" id="email" required> <label for="telepon">Nomor Telepon:</label> <input type="tel" name="telepon" id="telepon" required> <label for="alamat">Alamat:</label> <textarea name="alamat" id="alamat" rows="5" required></textarea> <label for="jenis_kelamin">Jenis Kelamin:</label> <select name="jenis_kelamin" id="jenis_kelamin" required> <option value="">Pilih jenis kelamin</option> <option value="pria">Pria</option> <option value="wanita">Wanita</option> <option value="lainnya">Lainnya</option> </select> <label for="agama">Agama:</label> <select name="agama" id="agama" required> <option value="">Pilih agama</option> <option value="islam">Islam</option> <option value="kristen">Kristen</option> <option value="katolik">Katolik</option> <option value="hindu">Hindu</option> <option value="budha">Budha</option> <option value="lainnya">Lainnya</option> </select> <label for="hobi">Hobi:</label> <input type="checkbox" name="hobi[]" id="musik" value="musik"> <label for="musik">Musik</label> <input type="checkbox" name="hobi[]" id="olahraga" value="olahraga"> <label for="olahraga">Olahraga</label> <input type="checkbox" name="hobi[]" id="traveling" value="traveling"> <label for="traveling">Traveling</label> <label for="foto">Unggah Foto:</label> <input type="file" name="foto" id="foto"> <input type="submit" value="Submit"> </form> </body> </html>
Video Lengkap Cara Membuat Form Pada Web dengan HTML
Kesimpulan
Dalam membuat form pada script HTML, kita perlu menambahkan beberapa element seperti form, label, input, dan button. Setiap element memiliki atribut yang berbeda dan dapat digunakan untuk meminta informasi dari pengguna. Untuk membuat form yang lebih interaktif, kita dapat menggunakan JavaScript untuk memvalidasi input dan merespon form submission.
Mungkin sekian dulu dari Admin, semoga bermanfaat!
Posting Komentar