HTML ఇన్‌పుట్ టైప్‌లు

ఈ భాగంలో <input> ఇన్‌పుట్ టైప్‌ను వివరించబడింది.

ఇన్‌పుట్ టైప్: text

<input type="text"> అందించడానికి నిర్వచించండిటెక్స్ట్ ఇన్‌పుట్యొక్క ఒక్క లైన్ ఇన్‌పుట్ ఫీల్డ్ ను నిర్వచించండి:

ఉదాహరణ

<form>
 ప్రథమ పేరు:<br>
<input type="text" name="firstname">
<br>
 తొలి పేరు:<br>
<input type="text" name="lastname">
</form>

స్వయంగా ప్రయత్నించండి

以上 HTML 代码在浏览器中看上去是这样的：

ప్రథమ పేరు:


తొలి పేరు:

ఇన్‌పుట్ టైప్: password

<input type="password"> నిర్వచించుపాస్వర్డ్ ఫీల్డ్కోసం:

ఉదాహరణ

<form>
 యూజర్ నెంబర్:<br>
<input type="text" name="username">
<br>
 యూజర్ పాస్వర్డ్:<br>
<input type="password" name="psw">
</form>

స్వయంగా ప్రయత్నించండి

以上 HTML 代码在浏览器中看上去是这样的：

యూజర్ నెంబర్:


యూజర్ పాస్వర్డ్:

కార్యకలాపం:పాస్వర్డ్ ఫీల్డ్‌లోని అక్షరాలు మాస్కర్ ప్రాసెస్ చేయబడతాయి (స్టార్ లేదా ఫుల్ స్క్వేర్ గా చూపబడతాయి).

ఇన్‌పుట్ టైప్: submit

<input type="submit"> నిర్వచించుసమర్పించండిఫారమ్ డేటా ను తీసుకువెళ్ళండిఫారమ్ హాండ్లర్బటన్‌.

ఫారమ్ హాండ్లర్ (form-handler) సాధారణంగా ఇన్‌పుట్ డేటాను ప్రాసెస్ చేసే సెర్వర్ పేజీలో ఇన్‌క్లూడ్ చేయబడిన స్క్రిప్ట్స్.

ఫారమ్ యొక్క action లక్షణంలో ఫారమ్ ప్రాసెసర్ (form-handler) ని నిర్వచించు:

ఉదాహరణ

<form action="action_page.php">
ప్రథమ పేరు:<br>
<input type="text" name="firstname" value="మిక్కీ">
<br>
తొలి పేరు:<br>
<input type="text" name="lastname" value="మౌస్">
<br><br>
<input type="submit" value="Submit">
</form>

స్వయంగా ప్రయత్నించండి

以上 HTML 代码在浏览器中看上去是这样的：

ప్రథమ పేరు:


తొలి పేరు:


మీరు సమర్పణ బటన్ను యొక్క value లక్షణాన్ని సరళించినట్లయితే, బటన్ను డిఫాల్ట్ టెక్స్ట్ పొందుతుంది:

ఉదాహరణ

<form action="action_page.php">
ప్రథమ పేరు:<br>
<input type="text" name="firstname" value="మిక్కీ">
<br>
తొలి పేరు:<br>
<input type="text" name="lastname" value="మౌస్">
<br><br>
<input type="submit">
</form>

స్వయంగా ప్రయత్నించండి

Input Type: radio

<input type="radio"> రేడియో బటన్ను నిర్వచించు

రేడియో బటన్లు వినియోగదారుని పరిమిత ఎంపికలను ఒకటి మాత్రమే ఎంచుకోవడానికి అనుమతిస్తాయి:

ఉదాహరణ

<form>
<input type="radio" name="sex" value="male" checked>పురుషులు
<br>
<input type="radio" name="sex" value="female">మహిళలు
</form>

స్వయంగా ప్రయత్నించండి

以上 HTML 代码在浏览器中看上去是这样的：

పురుషులు

మహిళలు

Input Type: checkbox

<input type="checkbox"> క్రియాశీల పెట్టెను నిర్వచించు

క్రియాశీల పెట్టెలు వినియోగదారుకు పరిమిత ఎంపికలను ఒకటి లేదా పలువురు ఎంచుకోవడానికి అనుమతిస్తాయి。

ఉదాహరణ

<form>
<input type="checkbox" name="vehicle" value="Bike">నేను ఒక బైక్ కలిగి ఉన్నాను
<br>
<input type="checkbox" name="vehicle" value="Car">నేను ఒక కారు కలిగి ఉన్నాను 
</form>

స్వయంగా ప్రయత్నించండి

以上 HTML 代码在浏览器中看上去是这样的：

నేను ఒక బైక్ కలిగి ఉన్నాను

నేను ఒక కారు కలిగి ఉన్నాను

Input Type: button

<input type="button"> నిర్వచించుబటన్。

ఉదాహరణ

<input type="button" onclick="alert('హలో వరల్డ్!')" value="క్లిక్ మీ!">

స్వయంగా ప్రయత్నించండి

以上 HTML 代码在浏览器中看上去是这样的：

HTML5 输入类型

HTML5 增加了多个新的输入类型：

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

కార్యకలాపం:పాత వెబ్ బ్రౌజర్లు మద్దతు చేయకుండా ఉన్న ప్రవేశపెట్టణి రకం, ఇది text ప్రవేశపెట్టణిగా పరిగణించబడుతుంది.

ప్రవేశపెట్టణి రకం: number

<input type="number"> నంబర్ విలువను కలిగివున్న ప్రవేశపెట్టణి కొరకు ఉపయోగించబడుతుంది.

మీరు నంబర్లపై పరిమితులను వర్తిస్తారు.

బ్రౌజర్ మద్దతు ప్రకారం, పరిమితులు ప్రవేశపెట్టణిపై వర్తిస్తాయి.

ఉదాహరణ

<form>
  పరిమాణం (1 మరియు 5 మధ్య ఉండబడింది):
  <input type="number" name="quantity" min="1" max="5">
</form>

స్వయంగా ప్రయత్నించండి

ప్రవేశపెట్టణి పరిమితులు

ఉపయోగించే సాధారణ ప్రవేశపెట్టణి పరిమితులను ఇక్కడ జాబితాభుక్తం చేయబడింది (కొన్నింటికి ఇటీవలి HTML5 లో జోడించబడింది):

అటువంటి వివరణ
disabled ప్రవేశపెట్టణిని డిసేబుల్ చేయండి.
max ప్రవేశపెట్టణి యొక్క గరిష్ట విలువను నిర్ధారించండి.
maxlength ప్రవేశపెట్టణి యొక్క గరిష్ట అక్షరాల సంఖ్యను నిర్ధారించండి.
min ప్రవేశపెట్టణి యొక్క కనీస విలువను నిర్ధారించండి.
pattern ప్రవేశపెట్టణి యొక్క పరిశీలనకు ఉపయోగించే రెగ్యులర్ ఎక్స్ప్రెషన్ ను నిర్ధారించండి.
readonly ప్రవేశపెట్టణిని రీడ్ ల్యూన్ పరిమితం చేయండి (మార్చలేదు).
required ప్రవేశపెట్టణి యొక్క అవసరపరచబడినది (అవసరం).
size ప్రవేశపెట్టణి యొక్క వెడల్పనను (అక్షరాల ప్రకారం) నిర్ధారించండి.
step ప్రవేశపెట్టణి యొక్క నియమిత నంబర్ అంతరాన్ని నిర్ధారించండి.
value ప్రవేశపెట్టణి యొక్క డిఫాల్ట్ విలువను నిర్ధారించండి.

మీరు తదుపరి చాప్త్రంలో ప్రవేశపెట్టణి పరిమితులను గురించి మరింత తెలుసుకునేందుకు తెలుసుకునేందుకు చేస్తాము.

ఉదాహరణ

<form>
  పరిమాణం:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

స్వయంగా ప్రయత్నించండి

ప్రవేశపెట్టణి రకం: date

<input type="date"> తేదీని కలిగివున్న ప్రవేశపెట్టణి కొరకు ఉపయోగించబడుతుంది.

బ్రాసర్ మద్దతు ప్రకారం, తేదీ ఎంపిక క్రొత్తిలో ఇన్‌పుట్ ఫీల్డ్ లో కనిపిస్తుంది.

ఉదాహరణ

<form>
  జన్మదినం:
  <input type="date" name="bday">
</form>

స్వయంగా ప్రయత్నించండి

మీరు ప్రవేశపెట్టిన నిమిత్తం పరిమితులను జోడించవచ్చు:

ఉదాహరణ

<form>
  అక్కడ తొలి నుంచి 1980-01-01 కంటే ముందు తేదీని ప్రవేశపెట్టండి:
  <input type="date" name="bday" max="1979-12-31"><br>
  2000-01-01 తర్వాత తేదీ నమోదు చేయండి:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

స్వయంగా ప్రయత్నించండి

ఇన్‌పుట్ రకం: color

<input type="color"> రంగును కలిగివుండే ఇన్‌పుట్ ఫీల్డ్ కొరకు ఉపయోగించబడుతుంది.

బ్రాసర్ మద్దతు ప్రకారం, రంగు ఎంపిక క్రొత్తిలో ఇన్‌పుట్ ఫీల్డ్ లో కనిపిస్తుంది.

ఉదాహరణ

<form>
  మీ ఇష్టమైన రంగును ఎంచుకోండి:
  <input type="color" name="favcolor">
</form>

స్వయంగా ప్రయత్నించండి

ఇన్‌పుట్ రకం: range

<input type="range"> కొంత పరిధిలో విలువలను కలిగివుండే ఇన్‌పుట్ ఫీల్డ్ కొరకు ఉపయోగించబడుతుంది.

బ్రాసర్ మద్దతు ప్రకారం, ఇన్‌పుట్ ఫీల్డ్ స్లైడర్ కంట్రోల్ గా చూపబడవచ్చు.

ఉదాహరణ

<form>
  <input type="range" name="points" min="0" max="10">
</form>

స్వయంగా ప్రయత్నించండి

మీరు క్రియాశీలత్వం నియంత్రించడానికి ఈ అంశాలను ఉపయోగించవచ్చు: min, max, step, value.

ఇన్‌పుట్ రకం: month

<input type="month"> వినియోగదారుకు నెల మరియు సంవత్సరం ఎంచుకోవడానికి అనుమతిస్తుంది.

బ్రాసర్ మద్దతు ప్రకారం, తేదీ ఎంపిక క్రొత్తిలో ఇన్‌పుట్ ఫీల్డ్ లో కనిపిస్తుంది.

ఉదాహరణ

<form>
  బిరత్తడు (నెల మరియు సంవత్సరం):
  <input type="month" name="bdaymonth">
</form>

స్వయంగా ప్రయత్నించండి

ఇన్‌పుట్ రకం: week

<input type="week"> వినియోగదారుకు వారం మరియు సంవత్సరం ఎంచుకోవడానికి అనుమతిస్తుంది.

బ్రాసర్ మద్దతు ప్రకారం, తేదీ ఎంపిక క్రొత్తిలో ఇన్‌పుట్ ఫీల్డ్ లో కనిపిస్తుంది.

ఉదాహరణ

<form>
  వారం ఎంచుకోండి:
  <input type="week" name="week_year">
</form>

స్వయంగా ప్రయత్నించండి

ఇన్‌పుట్ రకం: time

<input type="time"> వినియోగదారుకు సమయం ఎంచుకోవడానికి అనుమతిస్తుంది (నాట్ రీజన్ లేకుండా).

బ్రాసర్ మద్దతు ప్రకారం, సమయం ఎంపిక క్రొత్తిలో ఇన్‌పుట్ ఫీల్డ్ లో కనిపిస్తుంది.

ఉదాహరణ

<form>
  సమయం ఎంచుకోండి:
  <input type="time" name="usr_time">
</form>

స్వయంగా ప్రయత్నించండి

ఇన్‌పుట్ రకం: datetime

<input type="datetime"> వినియోగదారుకు తేది మరియు సమయం ఎంచుకోవడానికి అనుమతిస్తుంది (నాట్ రీజన్ తో).

బ్రాసర్ మద్దతు ప్రకారం, తేదీ ఎంపిక క్రొత్తిలో ఇన్‌పుట్ ఫీల్డ్ లో కనిపిస్తుంది.

ఉదాహరణ

<form>
  బిరత్తడు (తేది మరియు సమయం):
  <input type="datetime" name="bdaytime">
</form>

స్వయంగా ప్రయత్నించండి

ఇన్‌పుట్ రకం: datetime-local

<input type="datetime-local"> వినియోగదారుకు తేది మరియు సమయం ఎంచుకోవడానికి అనుమతిస్తుంది (నాట్ రీజన్ లేకుండా).

బ్రాసర్ మద్దతు ప్రకారం, తేదీ ఎంపిక క్రొత్తిలో ఇన్‌పుట్ ఫీల్డ్ లో కనిపిస్తుంది.

ఉదాహరణ

<form>
  బిరత్తడు (తేది మరియు సమయం):
  
</form>

స్వయంగా ప్రయత్నించండి

输入类型：email

用于应该包含电子邮件地址的输入字段。

根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

కొన్ని స్మార్ట్ఫోన్లు email రకాన్ని గుర్తించి, కీబోర్డుకు ".com" జోడించి ఉపయోగించబడుతుంది.

ఉదాహరణ

<form>
  ఇ-మెయిల్:
  <input type="email" name="email">
</form>

స్వయంగా ప్రయత్నించండి

ఇన్పుట్ రకం: search

<input type="search"> శోధన ఫీల్డ్ ఉపయోగం కొరకు ఉపయోగించబడుతుంది. ఇది సాధారణ టెక్స్ట్ ఫీల్డ్ రూపంలో చూడబడుతుంది.

ఉదాహరణ

<form>
  గూగుల్ శోధన:
  <input type="search" name="googlesearch">
</form>

స్వయంగా ప్రయత్నించండి

ఇన్పుట్ రకం: tel

<input type="tel"> టెలిఫోన్ నంబర్ అంశాన్ని చేర్చాలి ఉపయోగం కొరకు ఉపయోగించబడుతుంది.

ప్రస్తుతం మాత్రమే సఫారీ 8 టెల్ రకాన్ని మాన్యం చేస్తుంది.

ఉదాహరణ

<form>
  టెలిఫోన్:
  <input type="tel" name="usrtel">
</form>

స్వయంగా ప్రయత్నించండి

ఇన్పుట్ రకం: url

<input type="url"> యూరి అంశాన్ని చేర్చాలి ఉపయోగం కొరకు ఉపయోగించబడుతుంది.

బ్రౌజర్ మాన్యతల ప్రకారం, సమర్పించడం వలన యూరి ఫీల్డ్ స్వయంచాలకంగా పరిశీలించబడుతుంది.

కొన్ని స్మార్ట్ఫోన్లు url రకాన్ని గుర్తించి, కీబోర్డుకు ".com" జోడించి ఉపయోగించబడుతుంది.

ఉదాహరణ

<form>
  మీ హోమ్పేజీని జోడించండి:
  <input type="url" name="homepage">
</form>

స్వయంగా ప్రయత్నించండి