Berikut adalah contoh beberapa Elemen Form pada HTML
<form>
<form>
<!-- Konten formulir -->
</form>2. <input>
<input type="text" name="nama" placeholder="Masukkan nama Anda">3. <textarea>
<textarea name="pesan" rows="4" cols="50">Masukkan pesan Anda di sini</textarea>4. <select>
<select name="jenis_kelamin">
<option value="pria">Pria</option>
<option value="wanita">Wanita</option>
</select>5. <button>
<button type="submit">Kirim</button>6. <label>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">7. <fieldset> dan <legend>
<fieldset>
<legend>Informasi Pribadi</legend>
<!-- Konten formulir -->
</fieldset>8. <input type="checkbox">
<input type="checkbox" name="hobi" value="berenang"> Berenang
<input type="checkbox" name="hobi" value="membaca"> Membaca9. <input type="radio">
<input type="radio" name="jenis_kelamin" value="pria"> Pria
<input type="radio" name="jenis_kelamin" value="wanita"> Wanita10. <input type="submit">
<input type="submit" value="Kirim">11. <input type="reset">
<input type="reset" value="Reset">12. <input type="file">
<input type="file" name="gambar">13. <input type="password">
<input type="password" name="password">14. <input type="email">
<input type="email" name="email">15. <input type="number">
<input type="number" name="umur">16. <input type="date">
<input type="date" name="tanggal_lahir">17. <input type="time">
<input type="time" name="waktu">18. <input type="color">
<input type="color" name="warna">19. <input type="range">
<input type="range" name="nilai" min="0" max="100">20. <input type="hidden">
<input type="hidden" name="id" value="123">Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>Form Element</h2>
<form action="/proses-data" method="POST">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required><br/>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br/>
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="4" cols="50"></textarea><br/>
<label for="jenis-kelamin">Jenis Kelamin:</label>
<input type="radio" id="pria" name="jenis-kelamin" value="pria">
<label for="pria">Pria</label>
<input type="radio" id="wanita" name="jenis-kelamin" value="wanita">
<label for="wanita">Wanita</label><br/>
<label for="hobi">Hobi:</label>
<input type="checkbox" id="musik" name="hobi" value="musik">
<label for="musik">Musik</label>
<input type="checkbox" id="olahraga" name="hobi" value="olahraga">
<label for="olahraga">Olahraga</label>
<input type="checkbox" id="membaca" name="hobi" value="membaca">
<label for="membaca">Membaca</label><br/>
<label for="cars">Pilih Nama:</label>
<select id="cars" name="cars">
<option value="volvo">Webbiz</option>
<option value="saab">veebist</option>
<option value="fiat">Oppo</option>
<option value="audi">Samsi</option>
</select><br/>
<input type="submit" value="Kirim">
</form>
</body>
</html>Output:
See the Pen Elemen Form pada HTML by De Orchids (@De-Orchids) on CodePen.
Silakan gunakan contoh di atas sebagai referensi untuk menggabungkan elemen form HTML dalam proyek Anda. Anda dapat menyesuaikan atribut dan nilai sesuai kebutuhan Anda.
Semoga contoh di atas bermanfaat bagi Anda dalam mengembangkan form HTML yang interaktif dan fungsional.
Leave a Reply