Pambuka Form ing HTML: Struktur, Jinis Input lan Conto

HTML form minangka bagean penting saka pangembangan web sing ngidini pangguna sesambungan karo situs web lan ngirim data menyang server. Form digunakake kanggo macem-macem tujuan, kayata ngumpulake pangguna form, ngolah input pangguna, lan ngaktifake tumindak pangguna ing situs web. Ing artikel iki, kita bakal njelajah atribut lan macem-macem jinis kolom input, pilih unsur, area teks, lan tombol sing umum digunakake ing HTML form.

Lapangan Input

• <input type="text">: Nggawe kolom input teks ing ngendi pangguna bisa ngetik karakter alfanumerik.
• <input type="password">: Nampilake kolom input sandhi sing nutupi karakter sing dilebokake.
• <input type="email">: Nyedhiyani validasi email kanggo kolom input sing mbutuhake alamat email sing bener.
• <input type="number">: Watesan input mung kanggo angka.
• <input type="checkbox">: Makili kothak centhang sing pangguna bisa milih utawa mbatalake.
• <input type="radio">: Makili tombol radio sing ngidini pangguna milih salah siji opsi saka klompok opsi.
• <input type="file">: Mbisakake pangguna milih lan ngunggah file.
• <input type="submit">: Nampilake tombol sing ngirim form nalika diklik.
• <input type="reset">: Nampilake tombol sing ngreset form menyang negara wiwitan.
• <input type="date">: Nyedhiyani pamilih tanggal kanggo milih tanggal.
• <input type="time">: Ngidini pangguna kanggo input nilai wektu.

Pilih Elements

• <select>: Nggawe menu gulung mudhun kanthi opsi sing bisa dipilih.
• <option>: Nemtokake pilihan ing menu gulung mudhun, diselehake ing <select> tag.
• <optgroup>: Klompok opsi sing gegandhengan bebarengan ing menu gulung mudhun.
• <select multiple>: Ngidini pangguna milih macem-macem opsi bebarengan kanthi nahan tombol Ctrl(utawa tombol Command ing Mac) nalika ngeklik.

Area Teks

<textarea>: Nggawe kolom input teks multiline ing ngendi pangguna bisa ngetik lan ngowahi blok teks sing luwih dawa. Bisa diowahi ukurane lan dikonfigurasi kanthi atribut kayata rows lan cols kanggo nemtokake ukurane.

Tombol

<button>: Makili tombol sing bisa micu macem-macem tumindak ing a form. Bisa digunakake kanggo ngirim form, saben form fungsi JavaScript, utawa navigasi menyang kaca liyane.

Conto panggunaan:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Conto iki nuduhake panggunaan macem-macem form unsur, kalebu input kolom, textarea, checkbox, select dropdown lan submit tombol. Bebas bae kanggo ngatur form unsur lan atribut adhedhasar syarat khusus sampeyan.