HTML5 మోడరన్ ఇన్‌పుట్ టైప్స్: text, email, password, number, date, range, color & inputmode

• HTML4 vs HTML5 ఇన్‌పుట్ పరిణామం: జావాస్క్రిప్ట్ పై భారం తగ్గించిన నేటివ్ బ్రౌజర్ ఎలిమెంట్స్.
• ప్రాథమిక టెక్స్ట్ & పాస్‌వర్డ్ ఇన్‌పుట్స్: type="text", type="password", maxlength, మరియు minlength.
• ఆటోమేటిక్ వాలిడేషన్ ఇన్‌పుట్స్: type="email", type="url", మరియు type="search" ప్రత్యేకతలు.
• మొబైల్ కీబోర్డ్ మ్యాజిక్ (inputmode): స్మార్ట్‌ఫోన్లలో న్యూమరిక్, డెసిమల్, లేదా ఈమెయిల్ కీబోర్డ్‌ను రప్పించే టెక్నిక్స్.
• సంఖ్యాపరమైన కంట్రోల్స్: type="number" మరియు type="range" (స్లైడర్) లతో min, max, step వాడకం.
• తేదీ & సమయ పికర్లు: type="date", type="time", type="datetime-local", type="month", type="week".
• కలర్ & ఫైల్ సెలెక్టర్లు: type="color" కలర్ పికర్ వీల్ మరియు type="file" తో accept, multiple.
• ఇన్‌పుట్ స్టేట్ మేనేజ్‌మెంట్: readonly vs disabled మధ్య గల సూక్ష్మ వ్యత్యాసాలు.

HTML5 ప్రవేశపెట్టిన ఇన్‌పుట్ టైప్స్ వెబ్ డెవలప్‌మెంట్‌ను ఎంత సులభతరం చేశాయో క్రింది పోలికలో చూడండి:

ఏదైనా సాధారణ వచనాన్ని (పేరు, నగరం, చిరునామా) సేకరించడానికి type="text", మరియు రహస్య సమాచారాన్ని యూజర్ స్క్రీన్ పై ఇతరులు చూడకుండా నక్షత్రాలు (•••) గా దాచడానికి type="password" ఉపయోగిస్తాం.

<form style="max-width: 400px; padding: 16px; border: 1px solid #cbd5e1; border-radius: 8px;">
  <!-- సాధారణ టెక్స్ట్ -->
  <label for="uname">యూజర్‌నేమ్ (కనిష్టంగా 3, గరిష్టంగా 15 అక్షరాలు):</label><br>
  <input type="text" id="uname" name="username" minlength="3" maxlength="15" required 
         style="width: 100%; padding: 8px; margin: 6px 0 14px;">

  <!-- రహస్య పాస్‌వర్డ్ -->
  <label for="pwd">రహస్య పాస్‌వర్డ్:</label><br>
  <input type="password" id="pwd" name="password" minlength="8" required 
         placeholder="కనీసం 8 అక్షరాలు" 
         style="width: 100%; padding: 8px; margin-top: 6px;">
</form>

💡 minlength మరియు maxlength ఆట్రిబ్యూట్‌లు యూజర్ ఎన్ని అక్షరాల లోపు టైప్ చేయాలో బ్రౌజర్ స్థాయిలో పరిమితి విధిస్తాయి.

ఈ మూడు ఇన్‌పుట్ రకాలు ప్రత్యేకమైన సింటాక్స్ నియమాలను బ్రౌజర్‌కు పరిచయం చేస్తాయి:

• type="email": యూజర్ నమోదు చేసిన టెక్స్ట్‌లో ఈమెయిల్ ఫార్మాట్ (name@domain.com) ఉందో లేదో సబ్మిట్ చేసేటప్పుడు బ్రౌజర్ ఆటోమేటిక్‌గా వాలిడేట్ చేస్తుంది. తప్పుగా ఉంటే "దయచేసి సరైన ఈమెయిల్ ఇవ్వండి" అని ఎర్రర్ చూపిస్తుంది! అంతేకాకుండా మొబైల్‌లో కీబోర్డ్‌పై "@" మరియు ".com" బటన్లు ప్రత్యక్షమవుతాయి.
• type="url": వెబ్‌సైట్ అడ్రస్‌లను స్వీకరించడానికి. ఇది తప్పనిసరిగా http:// లేదా https:// తో ప్రారంభమయ్యేలా చూస్తుంది.
• type="search": సెర్చ్ బాక్సుల కోసం. యూజర్ ఏదైనా టైప్ చేసినప్పుడు బాక్స్ కుడివైపున వెంటనే టెక్స్ట్‌ను క్లియర్ చేసే చిన్న "X" బటన్ ఆటోమేటిక్‌గా వస్తుంది!

<form style="max-width: 450px;">
  <p>
    <label for="mail">అధికారిక ఈమెయిల్:</label><br>
    <input type="email" id="mail" name="email" placeholder="student@gmail.com" required style="width:100%; padding:8px;">
  </p>

  <p>
    <label for="portfolio">మీ పోర్ట్‌ఫోలియో వెబ్‌సైట్ (URL):</label><br>
    <input type="url" id="portfolio" name="website" placeholder="https://mywebsite.com" style="width:100%; padding:8px;">
  </p>

  <p>
    <label for="query">కోర్సును వెతకండి:</label><br>
    <input type="search" id="query" name="q" placeholder="ఉదా: JavaScript..." style="width:100%; padding:8px;">
  </p>
  
  <button type="submit" style="background:#10b981; color:white; padding:8px 16px; border:none; border-radius:6px; cursor:pointer;">సబ్మిట్ చేయండి</button>
</form>

మొబైల్ ఫోన్లలో యూజర్ ఎక్స్‌పీరియన్స్ (Mobile UX) ను నిర్దేశించే అత్యంత విప్లవాత్మక ఫీచర్ ఇది!

1. type="tel": ఫోన్ నంబర్ల కోసం వాడతారు. అయితే ప్రపంచంలో దేశాల వారీగా ఫోన్ నంబర్ల ఫార్మాట్లు వేర్వేరుగా ఉంటాయి కాబట్టి బ్రౌజర్ దీనికి ప్రత్యేకమైన సింటాక్స్ ఆంక్షలు విధించదు; కానీ మొబైల్‌లో నేరుగా డయలర్ నంబర్ ప్యాడ్ ను తెరుస్తుంది.

2. inputmode ఆట్రిబ్యూట్: మీ ఇన్‌పుట్ ఏదైనప్పటికీ, మొబైల్ స్క్రీన్‌పై సరిగ్గా ఏ రకమైన కీబోర్డ్ రావాలో మీరు స్వయంగా శాసించవచ్చు!

<!-- మొబైల్‌లో కేవలం నంబర్ కీప్యాడ్ మాత్రమే ఓపెన్ అవుతుంది -->
<label for="otp">6 అంకెల మొబైల్ OTP:</label><br>
<input type="text" id="otp" name="otp" inputmode="numeric" maxlength="6" placeholder="123456" 
       style="font-size: 20px; letter-spacing: 8px; width: 180px; padding: 8px; text-align: center;">

సంఖ్యలతో కూడిన విలువలను స్వీకరించడానికి మరియు మార్చడానికి HTML5 రెండు అద్భుతమైన ఎలిమెంట్లను అందిస్తుంది:

• type="number": సంఖ్యలను టైప్ చేయడానికి లేదా బాక్స్ పక్కన ఉండే చిన్న పైకి/క్రిందికి బాణాల ద్వారా (Spinner Arrows) సంఖ్యను పెంచడానికి/తగ్గించడానికి ఉపయోగపడుతుంది.
• type="range": ఒక స్లైడర్ బార్‌ను (Slider Bar) సృష్టిస్తుంది. వాల్యూమ్ పెంచడం, స్క్రీన్ బ్రైట్‌నెస్ మార్చడం, లేదా ధర ఫిల్టర్ (ఉదా: ₹ 500 నుండి ₹ 5000 వరకు) ఎంచుకోవడానికి ఇది సూపర్ అనుకూలం.

వీటికి వాడే 3 గోల్డెన్ ఆట్రిబ్యూట్‌లు:

• min="సంఖ్య": అనుమతించబడే కనిష్ట విలువ.
• max="సంఖ్య": అనుమతించబడే గరిష్ట విలువ.
• step="సంఖ్య": ప్రతి క్లిక్‌కు ఎంత చొప్పున పెరగాలి/తగ్గాలి (ఉదా: step="5" లేదా దశాంశాల కోసం step="0.5").

<form style="max-width: 450px;">
  <!-- నంబర్ ఇన్‌పుట్: వయస్సు -->
  <p>
    <label for="age">మీ వయస్సు (18 నుండి 60 వరకు):</label><br>
    <input type="number" id="age" name="age" min="18" max="60" value="25" style="padding: 6px 10px;">
  </p>

  <!-- రేంజ్ స్లైడర్: బడ్జెట్ -->
  <p>
    <label for="budget">కోర్సు బడ్జెట్ పరిమితి (₹ 1,000 నుండి ₹ 20,000):</label><br>
    <input type="range" id="budget" name="price" min="1000" max="20000" step="500" value="5000" style="width: 100%;">
  </p>
</form>

గతంలో వెబ్‌సైట్‌లో పుట్టిన తేదీ ఎంచుకోవడానికి 3 డ్రాప్‌డౌన్లు (రోజు, నెల, సంవత్సరం) లేదా భారీ jQuery/JavaScript క్యాలెండర్ ప్లగిన్లు పెట్టేవాళ్ళు. కానీ HTML5 లో కేవలం type="date" రాస్తే చాలు — ఆపరేటింగ్ సిస్టమ్ యొక్క అధికారిక క్యాలెండర్ విండో దానంతట అదే పాపప్ అవుతుంది!

<form style="max-width: 450px;">
  <p>
    <label for="bday">పుట్టిన తేదీ:</label><br>
    <input type="date" id="bday" name="birthday" min="1950-01-01" max="2026-12-31" style="padding: 6px;">
  </p>

  <p>
    <label for="slot">ఇంటర్వ్యూ సమయం:</label><br>
    <input type="time" id="slot" name="interview_time" style="padding: 6px;">
  </p>
</form>

1. type="color" (కలర్ పికర్):

యూజర్ ఒక రంగును ఎంచుకోవడానికి ఈ ట్యాగ్ ఉపయోగపడుతుంది. క్లిక్ చేయగానే పూర్తి స్థాయి కలర్ పాలెట్ వీల్ ఓపెన్ అవుతుంది. ఇది ఎంచుకున్న రంగును హెక్స్ కోడ్ (ఉదా: #10b981) రూపంలో సర్వర్‌కు పంపుతుంది.

2. type="file" (ఫైల్ అప్‌లోడ్):

యూజర్ తన కంప్యూటర్ లేదా మొబైల్ నుండి ఫోటోలు, రెజ్యూమ్ PDF లు లేదా డాక్యుమెంట్లను అప్‌లోడ్ చేయడానికి ఇది ఉపయోగపడుతుంది. దీనికి రెండు ముఖ్యమైన ఆట్రిబ్యూట్‌లు ఉంటాయి:

• accept="image/*, .pdf": కేవలం ఫొటోలు లేదా PDF ఫైల్స్ మాత్రమే ఎంచుకునేలా ఫిల్టర్ చేస్తుంది.
• multiple: యూజర్ ఒకేసారి బహుళ ఫైళ్లను (Multiple files) సెలెక్ట్ చేసుకోవడానికి అనుమతిస్తుంది.

<form enctype="multipart/form-data" style="max-width: 450px;">
  <!-- కలర్ పికర్ -->
  <p>
    <label for="favcolor">మీకు ఇష్టమైన వెబ్‌సైట్ థీమ్ రంగు:</label><br>
    <input type="color" id="favcolor" name="theme_color" value="#10b981" style="width: 60px; height: 36px; cursor: pointer;">
  </p>

  <!-- ఫైల్ అప్‌లోడ్ -->
  <p>
    <label for="resume">మీ రెజ్యూమ్ అప్‌లోడ్ చేయండి (PDF లేదా DOCX మాత్రమే):</label><br>
    <input type="file" id="resume" name="resume_doc" accept=".pdf, .docx" required style="margin-top: 6px;">
  </p>
</form>

మనం నేర్చుకున్న అన్ని ఇన్‌పుట్ టైప్స్ ఒక్క చూపులో:

ఒక ఇన్‌పుట్ బాక్స్‌ను యూజర్ మార్చకుండా ఆపడానికి HTML లో రెండు ఆట్రిబ్యూట్‌లు ఉన్నాయి. ఇంటర్వ్యూలలో వీటి మధ్య తేడాను ఖచ్చితంగా అడుగుతారు:

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