HTML5 ఫారమ్స్ ఆర్కిటెక్చర్: form, action, method (GET vs POST), label & fieldset

• వెబ్ ఫారమ్ అనాటమీ & లైఫ్‌సైకిల్: బ్రౌజర్ నుండి సర్వర్‌కు డేటా ఎలా ప్రయాణిస్తుంది?
• <form> ఎలిమెంట్: action URL మరియు HTTP method యొక్క ప్రాథమిక భావన.
• ఇంటర్వ్యూ హాట్ టాపిక్ — GET vs POST: ఏది ఎప్పుడు వాడాలి? సెక్యూరిటీ మరియు డేటా లిమిట్స్.
• URL Encoding & Query String: ?username=rahul&email=... ఎలా ఏర్పడుతుంది?
• <label> ఎలిమెంట్: for ఆట్రిబ్యూట్, మొబైల్ ట్యాప్ ఏరియా పెంపుదల, మరియు Accessibility (a11y).
• <fieldset> మరియు <legend>: పెద్ద ఫారమ్‌లను ప్రొఫెషనల్ గ్రూప్స్‌గా విభజించే విధానం.
• name vs id ఆట్రిబ్యూట్ల వ్యత్యాసం: సర్వర్‌కు ఏది వెళ్తుంది? CSS/JS కు ఏది కావాలి?
• బటన్ల వర్గీకరణ: submit vs reset vs సాధారణ button తేడాలు.

ఒక యూజర్ వెబ్‌సైట్‌లో ఫారమ్ నింపి "Submit" బటన్ నొక్కినప్పుడు బ్యాక్‌గ్రౌండ్‌లో ఏం జరుగుతుందో క్రింది లైఫ్‌సైకిల్ డయాగ్రమ్ ద్వారా అర్థం చేసుకుందాం:

<form> ఎలిమెంట్ అనేది అన్ని ఇన్‌పుట్ కంట్రోల్స్‌ను (టెక్స్ట్‌బాక్స్, చెక్‌బాక్స్, రేడియో బటన్, సబ్మిట్ బటన్) తన లోపల భద్రపరిచే ప్రధాన కంటైనర్. దీనికి రెండు అత్యంత కీలకమైన ఆట్రిబ్యూట్‌లు ఉంటాయి:

• action="URL": ఫారమ్ సబ్మిట్ అయిన తర్వాత డేటాను ఏ సర్వర్ ఎండ్‌పాయింట్‌కు (Backend API / URL) పంపాలో నిర్దేశిస్తుంది (ఉదా: action="/api/register"). ఒకవేళ ఇది ఇవ్వకపోతే, ఫారమ్ అదే పేజీకి మళ్ళీ సబ్మిట్ అవుతుంది.
• method="GET | POST": డేటాను సర్వర్‌కు ఏ HTTP ప్రోటోకాల్ పద్ధతి ద్వారా పంపాలో నిర్ణయిస్తుంది.

<form action="/login" method="POST" style="max-width: 400px; padding: 20px; border: 1px solid #cbd5e1; border-radius: 8px;">
  <h3 style="margin-top:0;">యూజర్ లాగిన్</h3>
  
  <p>
    <label for="user">యూజర్‌నేమ్:</label><br>
    <input type="text" id="user" name="username" placeholder="మీ పేరు నమోదు చేయండి" style="width: 100%; padding: 8px; margin-top: 4px;">
  </p>

  <p>
    <label for="pass">పాస్‌వర్డ్:</label><br>
    <input type="password" id="pass" name="password" placeholder="••••••••" style="width: 100%; padding: 8px; margin-top: 4px;">
  </p>

  <button type="submit" style="background: #10b981; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer;">
    లాగిన్ అవ్వండి
  </button>
</form>

సాఫ్ట్‌వేర్ ఇండస్ట్రీలో ప్రతి వెబ్ డెవలపర్ ఇంటర్వ్యూలో తప్పకుండా అడిగే ప్రశ్న: "GET మరియు POST మధ్య తేడాలు ఏమిటి? పాస్‌వర్డ్ కోసం GET ఎందుకు వాడకూడదు?"

ఒక ఫారమ్‌ను GET మెథడ్‌తో సబ్మిట్ చేసినప్పుడు బ్రౌజర్ డేటాను "క్వెరీ స్ట్రింగ్" (Query String) రూపంలోకి మారుస్తుంది:

స్పేస్‌లు మరియు ప్రత్యేక అక్షరాలు:

URL లో ఖాళీ స్థలాలు (Spaces) ఉండకూడదు. కాబట్టి బ్రౌజర్ స్పేస్‌ను + లేదా %20 గా మారుస్తుంది. దీన్నే URL Encoding (Percent-encoding) అంటారు.

ఒక ఇన్‌పుట్ ఫీల్డ్ పక్కన సాధారణంగా టెక్స్ట్ రాయడానికి <p>పేరు:</p> లేదా <span>పేరు:</span> వాడకూడదు! ఎల్లప్పుడూ అధికారిక <label> ట్యాగ్‌ను మాత్రమే ఉపయోగించాలి.

<label for="..."> వాడటం వల్ల లభించే 2 విప్లవాత్మక ప్రయోజనాలు:

<!-- పద్ధతి 1: 'for' మరియు 'id' తో అనుసంధానం (సిఫార్సు చేయబడినది) -->
<label for="user-email">ఈమెయిల్ చిరునామా:</label>
<input type="email" id="user-email" name="email">

<!-- పద్ధతి 2: లేబుల్ లోపల ఇన్‌పుట్‌ను చుట్టడం (Implicit Association) -->
<label>
  <input type="checkbox" name="agree">
  నేను నిబంధనలు మరియు షరతులను అంగీకరిస్తున్నాను (ఈ అక్షరాలపై క్లిక్ చేసినా టిక్ అవుతుంది!)
</label>

పెద్ద పెద్ద రిజిస్ట్రేషన్ లేదా జాబ్ అప్లికేషన్ ఫారమ్‌లలో 20 నుండి 30 ఇన్‌పుట్ ఫీల్డ్‌లు ఉంటాయి. వాటన్నింటినీ ఒకేచోట గజిబిజిగా ఉంచితే యూజర్ కంగారుపడతాడు. సంబంధిత ఇన్‌పుట్‌లను అందమైన గ్రూపులుగా విభజించడానికి <fieldset> మరియు దానికి టైటిల్ ఇవ్వడానికి <legend> ఉపయోగిస్తాం:

<form action="/profile" method="POST" style="max-width: 500px;">
  <!-- గ్రూప్ 1: వ్యక్తిగత వివరాలు -->
  <fieldset style="border: 1px solid #10b981; border-radius: 8px; padding: 16px; margin-bottom: 20px;">
    <legend style="color: #059669; font-weight: bold; padding: 0 8px;">వ్యక్తిగత సమాచారం</legend>
    
    <label for="fullname">పూర్తి పేరు:</label><br>
    <input type="text" id="fullname" name="name" style="width:100%; margin-bottom:12px;"><br>

    <label for="dob">పుట్టిన తేదీ:</label><br>
    <input type="date" id="dob" name="birthdate">
  </fieldset>

  <!-- గ్రూప్ 2: చిరునామా వివరాలు -->
  <fieldset style="border: 1px solid #3b82f6; border-radius: 8px; padding: 16px;">
    <legend style="color: #2563eb; font-weight: bold; padding: 0 8px;">నివాస చిరునామా</legend>
    
    <label for="city">నగరం:</label><br>
    <input type="text" id="city" name="city" style="width:100%; margin-bottom:12px;"><br>

    <label for="pincode">పిన్‌కోడ్:</label><br>
    <input type="text" id="pincode" name="zip">
  </fieldset>
</form>

ప్రతి ఇన్‌పుట్ ఎలిమెంట్‌కు name మరియు id రాస్తుంటాం. చాలా మంది బిగినర్స్ ఈ రెండూ ఒకటే అని భ్రమపడుతుంటారు. కానీ వీటి పని పూర్తిగా వేర్వేరు:

ఫారమ్‌ను సబ్మిట్ చేయడానికి HTML లో రెండు రకాల ట్యాగ్‌లు ఉన్నాయి:

• <button type="submit">: ఆధునిక ప్రామాణిక పద్ధతి! దీని లోపల టెక్స్ట్‌తో పాటు ఐకాన్లు (SVG, ఈమోజీలు), ఇమేజ్‌లు మరియు స్టైలింగ్‌ను సులభంగా పెట్టవచ్చు (ఉదా: <button>🚀 రిజిస్టర్ చేసుకోండి</button>).
• <input type="submit" value="సబ్మిట్">: 1995 నాటి పాత శైలి. ఇందులో కేవలం ప్లెయిన్ టెక్స్ట్ మాత్రమే ఇవ్వగలం; ఐకాన్లు పెట్టలేము.

ఫారమ్స్‌ను మరింత యూజర్-ఫ్రెండ్లీగా మరియు సురక్షితంగా మార్చే రెండు ఆధునిక ఆట్రిబ్యూట్‌లు:

• autocomplete="on | off": యూజర్ గతంలో టైప్ చేసిన సమాచారాన్ని బ్రౌజర్ ఆటో-ఫిల్ చేయాలా వద్దా అని నిర్ణయిస్తుంది. క్రెడిట్ కార్డులు, సీక్రెట్ OTP ఫీల్డ్స్ కోసం autocomplete="off" పెట్టడం శ్రేయస్కరం.
• novalidate: బ్రౌజర్ యొక్క డిఫాల్ట్ HTML5 వాలిడేషన్ పాపప్‌లను ఆపివేసి, డెవలపర్ తన స్వంత జావాస్క్రిప్ట్ కస్టమ్ వాలిడేషన్ రాసుకోవడానికి అనుమతిస్తుంది.

ఈ అధ్యాయంలో మీరు నేర్చుకున్న విషయాలను స్వయంగా పరీక్షించుకోండి. ప్రతి ప్రశ్నను చదివి సమాధానం ఆలోచించిన తర్వాత "సమాధానం చూడండి" పై క్లిక్ చేయండి: