Hyrje Form në HTML: Struktura, Llojet e hyrjes dhe Shembujt

HTML form është një pjesë thelbësore e zhvillimit të uebit që lejon përdoruesit të ndërveprojnë me një faqe interneti dhe të dërgojnë të dhëna në një server. Form përdoren për një gamë të gjerë qëllimesh, të tilla si mbledhja e përdoruesve në form veprim, përpunimi i të dhënave të përdoruesit dhe mundësimi i veprimeve të përdoruesit në një faqe interneti. Në këtë artikull, ne do të eksplorojmë atributet dhe llojet e ndryshme të fushave të hyrjes, elementët e përzgjedhur, zonat e tekstit dhe butonat që përdoren zakonisht në HTML form.

Fushat hyrëse

• <input type="text">: Krijon një fushë për futjen e tekstit ku përdoruesit mund të fusin karaktere alfanumerike.
• <input type="password">: Shfaq një fushë të futjes së fjalëkalimit që maskon karakteret e futura.
• <input type="email">: Ofron vërtetimin e emailit për fushat e hyrjes që kërkojnë një adresë të vlefshme emaili.
• <input type="number">: Kufizon hyrjen vetëm në vlerat numerike.
• <input type="checkbox">: Përfaqëson një kuti zgjedhjeje që përdoruesit mund të zgjedhin ose çaktivizojnë.
• <input type="radio">: Përfaqëson një buton radio që lejon përdoruesit të zgjedhin një opsion nga një grup opsionesh.
• <input type="file">: U mundëson përdoruesve të zgjedhin dhe ngarkojnë skedarë.
• <input type="submit">: Shfaq një buton që dërgon form kur klikohet.
• <input type="reset">: Shfaq një buton që e rivendos form në gjendjen e tij fillestare.
• <input type="date">: Ofron një përzgjedhës datash për zgjedhjen e datave.
• <input type="time">: Lejon përdoruesit të futin vlerat e kohës.

Zgjidhni Elementet

• <select>: Krijon një meny rënëse me opsione të përzgjedhshme.
• <option>: Përcakton një opsion brenda menysë rënëse, të vendosur brenda <select> etiketës.
• <optgroup>: Grupon opsionet e lidhura së bashku brenda menysë rënëse.
• <select multiple>: Lejon përdoruesit të zgjedhin disa opsione njëkohësisht duke mbajtur të shtypur tastin Ctrl(ose tastin Command në Mac) ndërsa klikojnë.

Tekstareas

<textarea>: Krijon një fushë të futjes së tekstit me shumë rreshta ku përdoruesit mund të futin dhe modifikojnë blloqe më të gjata teksti. Mund të ndryshohet përmasa dhe të konfigurohet me atribute të tilla si rows dhe cols për të përcaktuar dimensionet e tij.

Butonat

<button>: Përfaqëson një buton që mund të aktivizojë veprime të ndryshme brenda një form. Mund të përdoret për të paraqitur një form, për form një funksion JavaScript, ose për të lundruar në një faqe tjetër.

Shembull i përdorimit:

<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>

Ky shembull tregon përdorimin e elementeve të ndryshëm, form duke përfshirë input fushat, textarea, dhe një buton. Mos ngurroni të personalizoni elementet dhe atributet bazuar në kërkesat tuaja specifike. checkbox select dropdown submit form