HTMLలో పరిచయం Form: నిర్మాణం, ఇన్‌పుట్ రకాలు మరియు ఉదాహరణలు

వెబ్‌సైట్‌తో పరస్పర చర్య చేయడానికి మరియు సర్వర్‌కు డేటాను సమర్పించడానికి వినియోగదారులను అనుమతించే వెబ్ అభివృద్ధిలో HTML form కీలకమైన భాగం. వినియోగదారుని సేకరించడం, వినియోగదారు ఇన్‌పుట్‌ను ప్రాసెస్ చేయడం మరియు వెబ్‌సైట్‌లో వినియోగదారు చర్యలను ప్రారంభించడం Form వంటి విస్తృత ప్రయోజనాల కోసం ఉపయోగించబడతాయి. form ఈ కథనంలో, మేము HTMLలో సాధారణంగా ఉపయోగించే అట్రిబ్యూట్‌లు మరియు వివిధ రకాల ఇన్‌పుట్ ఫీల్డ్‌లు, ఎలిమెంట్స్, టెక్స్ట్‌ఏరియాలు మరియు బటన్‌లను ఎంచుకుంటాము form.

ఇన్‌పుట్ ఫీల్డ్‌లు

• <input type="text">: వినియోగదారులు ఆల్ఫాన్యూమరిక్ అక్షరాలను నమోదు చేయగల టెక్స్ట్ ఇన్‌పుట్ ఫీల్డ్‌ను సృష్టిస్తుంది.
• <input type="password">: ఎంటర్ చేసిన అక్షరాలను మాస్క్ చేసే పాస్‌వర్డ్ ఇన్‌పుట్ ఫీల్డ్‌ను ప్రదర్శిస్తుంది.
• <input type="email">: చెల్లుబాటు అయ్యే ఇమెయిల్ చిరునామా అవసరమయ్యే ఇన్‌పుట్ ఫీల్డ్‌ల కోసం ఇమెయిల్ ధ్రువీకరణను అందిస్తుంది.
• <input type="number">: ఇన్‌పుట్‌ను సంఖ్యా విలువలకు మాత్రమే పరిమితం చేస్తుంది.
• <input type="checkbox">: వినియోగదారులు ఎంచుకోగల లేదా ఎంపికను తీసివేయగల చెక్‌బాక్స్‌ని సూచిస్తుంది.
• <input type="radio">: ఎంపికల సమూహం నుండి ఒక ఎంపికను ఎంచుకోవడానికి వినియోగదారులను అనుమతించే రేడియో బటన్‌ను సూచిస్తుంది.
• <input type="file">: ఫైళ్లను ఎంచుకోవడానికి మరియు అప్‌లోడ్ చేయడానికి వినియోగదారులను అనుమతిస్తుంది.
• <input type="submit"> form: క్లిక్ చేసినప్పుడు సమర్పించే బటన్‌ను ప్రదర్శిస్తుంది .
• <input type="reset"> form: దాని ప్రారంభ స్థితికి రీసెట్ చేసే బటన్‌ను ప్రదర్శిస్తుంది .
• <input type="date">: తేదీలను ఎంచుకోవడానికి తేదీ పికర్‌ను అందిస్తుంది.
• <input type="time">: సమయ విలువలను ఇన్‌పుట్ చేయడానికి వినియోగదారులను అనుమతిస్తుంది.

ఎలిమెంట్స్ ఎంచుకోండి

• <select>: ఎంచుకోదగిన ఎంపికలతో డ్రాప్‌డౌన్ మెనుని సృష్టిస్తుంది.
• <option>: ట్యాగ్ లోపల ఉంచబడిన డ్రాప్‌డౌన్ మెనులో ఒక ఎంపికను నిర్వచిస్తుంది <select>.
• <optgroup>: డ్రాప్‌డౌన్ మెనులో సమూహ సంబంధిత ఎంపికలు కలిసి ఉంటాయి.
• <select multiple>: క్లిక్ చేస్తున్నప్పుడు Ctrl కీని(లేదా Macలో కమాండ్ కీ) నొక్కి ఉంచడం ద్వారా ఏకకాలంలో బహుళ ఎంపికలను ఎంచుకోవడానికి వినియోగదారులను అనుమతిస్తుంది.

టెక్స్టారియాస్

<textarea>: బహుళ లైన్ టెక్స్ట్ ఇన్‌పుట్ ఫీల్డ్‌ను సృష్టిస్తుంది, ఇక్కడ వినియోగదారులు ఎక్కువ టెక్స్ట్ బ్లాక్‌లను నమోదు చేయవచ్చు మరియు సవరించవచ్చు. rows దాని పరిమాణం మరియు cols దాని కొలతలు నిర్వచించడం వంటి లక్షణాలతో ఇది పరిమాణం మార్చబడుతుంది మరియు కాన్ఫిగర్ చేయబడుతుంది .

బటన్లు

<button>: ఒక లోపల వివిధ చర్యలను ప్రేరేపించగల బటన్‌ను సూచిస్తుంది form. form ఇది ఒక JavaScript ఫంక్షన్‌కు సమర్పించడానికి form లేదా వేరే పేజీకి నావిగేట్ చేయడానికి ఉపయోగించబడుతుంది .

ఉదాహరణ వినియోగం:

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

ఈ ఉదాహరణ ఫీల్డ్‌లు,, , మరియు బటన్‌తో form సహా వివిధ అంశాల వినియోగాన్ని ప్రదర్శిస్తుంది. మీ నిర్దిష్ట అవసరాల ఆధారంగా మూలకాలు మరియు లక్షణాలను అనుకూలీకరించడానికి సంకోచించకండి. input textarea checkbox select dropdown submit form