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) సాధారణంగా ఇన్‌పుట్ డేటాను ప్రాసెస్ చేసే సెర్వర్ పేజీలో స్క్రిప్ట్స్ ఉంటాయి.

Specify the form handler (form-handler) in the action attribute of the form:

ఉదాహరణ

<form action="action_page.php">
పేరు వరుస: <br>
<input type="text" name="firstname" value="Mickey">
<br>
పేరు వరుస: <br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

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

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

పేరు వరుస:


పేరు వరుస:


If you omit the value attribute of the submit button, then the button will get the default text:

ఉదాహరణ

<form action="action_page.php">
పేరు వరుస: <br>
<input type="text" name="firstname" value="Mickey">
<br>
పేరు వరుస: <br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

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

Input Type: radio

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

Radio buttons let a user select ONLY ONE of a limited number of choices:

ఉదాహరణ

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

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

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

Male

Female

Input Type: checkbox

<input type="checkbox"> క్రియాశీల బక్స్‌ని నిర్వచించండి。

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

ఉదాహరణ

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

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

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

I have a bike

I have a car

Input Type: button

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

ఉదాహరణ

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

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

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

HTML5 输入类型

హెచ్ఎటిఎల్5 వారందరూ కొత్త ప్రవేశపెట్టిన రకాలను జోడించారు:

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

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

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

<input type="number"> సంఖ్యల విలువను కలిగించిన ప్రవేశపెట్టిన ఫీల్డ్ కొరకు ఉపయోగిస్తారు.

మీరు సంఖ్యలపై పరిమితులను విధించవచ్చు.

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

ఉదాహరణ

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

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

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

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

అంశం వివరణ
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>
  E-mail:
  
</form>

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

输入类型：search

用于搜索字段（搜索字段的表现类似常规文本字段）。

ఉదాహరణ

<form>
  Search Google:
  
</form>

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

输入类型：tel

用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。

ఉదాహరణ

<form>
  Telephone:
  
</form>

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

输入类型：url

用于应该包含 URL 地址的输入字段。

根据浏览器支持，在提交时能够自动验证 url 字段。

某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。

ఉదాహరణ

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

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