Gabatarwa a Form cikin HTML: Tsarin, Nau'in shigarwa da Misalai

HTML form wani yanki ne mai mahimmanci na ci gaban yanar gizo wanda ke ba masu amfani damar yin hulɗa tare da gidan yanar gizo da ƙaddamar da bayanai zuwa uwar garken. Form ana amfani da su don dalilai da yawa, kamar tattara mai amfani a cikin form ation, sarrafa shigar da mai amfani, da ba da damar ayyukan mai amfani akan gidan yanar gizo. A cikin wannan labarin, za mu bincika halaye da nau'ikan filayen shigarwa daban-daban, zaɓi abubuwa, wuraren rubutu, da maɓallan da aka saba amfani da su a cikin HTML form.

Filayen shigarwa

  • <input type="text">: Yana ƙirƙira filin shigar da rubutu inda masu amfani zasu iya shigar da haruffan haruffa.
  • <input type="password">: Yana Nuna filin shigar da kalmar sirri wanda ke rufe haruffan da aka shigar.
  • <input type="email">: Yana ba da ingantaccen imel don filayen shigarwa waɗanda ke buƙatar ingantaccen adireshin imel.
  • <input type="number">: Yana ƙuntata shigarwa zuwa ƙimar lambobi kawai.
  • <input type="checkbox">: Yana wakiltar akwati wanda masu amfani za su iya zaɓa ko zaɓe.
  • <input type="radio">: Yana wakiltar maɓallin rediyo wanda ke ba masu amfani damar zaɓar zaɓi ɗaya daga rukunin zaɓuɓɓuka.
  • <input type="file">: Yana ba masu amfani damar zaɓar da loda fayiloli.
  • <input type="submit">: Nuna maɓallin da ke ƙaddamar da form lokacin da aka danna.
  • <input type="reset">: Nuna maɓallin da ke sake saita form yanayin zuwa farkon sa.
  • <input type="date">: Yana ba da zaɓen kwanan wata don zaɓar ranakun.
  • <input type="time">: Yana ba masu amfani damar shigar da ƙimar lokaci.

Zaɓi Abubuwa

  • <select>: Ƙirƙirar menu na zaɓuka tare da zaɓuɓɓuka masu zaɓi.
  • <option>: Yana bayyana wani zaɓi a cikin menu na zazzagewa, sanya a cikin <select> alamar.
  • <optgroup>: Zaɓuɓɓukan da ke da alaƙa tare a cikin menu na zaɓuka.
  • <select multiple>: Yana ba masu amfani damar zaɓar zaɓuɓɓuka da yawa a lokaci guda ta hanyar riƙe maɓallin Ctrl(ko maɓallin umarni akan Mac) yayin dannawa.

Yankunan rubutu

<textarea>: Yana ƙirƙira filin shigar da rubutu na layi da yawa inda masu amfani za su iya shigar da gyara dogon tubalan rubutu. Ana iya daidaita shi da daidaita shi tare da halaye kamar rows kuma cols don ayyana girmansa.

Buttons

<button>: Yana wakiltar maɓalli wanda zai iya haifar da ayyuka daban-daban a cikin form. Ana iya amfani da shi don ƙaddamar da form, kowane form aikin JavaScript, ko kewaya zuwa wani shafi na daban.

Misali amfani:

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

Wannan misalin yana nuna amfani da form abubuwa daban-daban, gami da input filayen, textarea, checkbox, select dropdown da submit maɓalli. Jin kyauta don keɓance form abubuwa da halaye dangane da takamaiman buƙatun ku.