Wuri na input na HTML

Babban kama na wannan yana nuna sabon wuri na input na <input>.

Wuri na input: tekun

<input type="text"> Dabara donInput na tekunwuri na input na wuri gaba:

Sample

<form>
 Sunan farko: <br>
<input type="text" name="firstname">
<br>
 Sunan: <br>
<input type="text" name="lastname">
</form> 

Fakar Gwamna

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

Sunan farko:


Sunan:

Wuri na input: password

<input type="password"> TamaWuri na password

Sample

<form>
 Sunan mutum:<br>
<input type="text" name="username">
<br>
 Password na mutum:<br>
<input type="password" name="psw">
</form> 

Fakar Gwamna

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

Sunan mutum:


Password na mutum:

注释:Furanni na password suna da wuri na maska (zai yiwa hanyar alamar yanzu ko tasuwar kai).

Wuri na input: tattauna

<input type="submit"> TamaTattaunaBayanai na form gaba daKamfanin da a yiwa kara gudanar da bayanai na form.na buton.

Kamfanin da a yiwa kara gudanar da bayanai na input (form-handler) yana da wani shafin yanar gizo da ke da sabunta script.

Tana cikin ɗaukar ƙoƙari na ƙasa (form-action) wanda zai zartar da kudade (form-handler):

Sample

<form action="action_page.php">
Sunan farko: <br>
<input type="text" name="firstname" value="Mickey">
<br>
Sunan: <br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

Fakar Gwamna

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

Sunan farko:


Sunan:


Idan ka yi saurin kammala ƙarfin kura 'value', kura zai samu littafin ɗaya a cikin:

Sample

<form action="action_page.php">
Sunan farko: <br>
<input type="text" name="firstname" value="Mickey">
<br>
Sunan: <br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form> 

Fakar Gwamna

Type of Input: radio

<input type="radio"> Tama tatsi dama ƙoƙari.

Tatsi dama ƙoƙari ƙiyyan ɗaya daga ɗaukar ƙoƙari da yawa:

Sample

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

Fakar Gwamna

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

Makka

Femila

Type of Input: checkbox

<input type="checkbox"> Tama tatsi dama ƙoƙari.

Tatsi dama ƙoƙari ƙiya ɗaya ko kuma ɗaɗɗe daga ɗaukar ƙoƙari da yawa.

Sample

<form>
<input type="checkbox" name="vehicle" value="Bike">Ina ɗaya ƙirgi
<br>
<input type="checkbox" name="vehicle" value="Car">Ina ɗaya ƙarƙaɗe 
</form> 

Fakar Gwamna

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

Ina ɗaya ƙirgi

Ina ɗaya ƙarƙaɗe

Type of Input: button

<input type="button"> TamaBato

Sample

<input type="button" onclick="alert('Sannu Duniya!')" value="Fita Me!">

Fakar Gwamna

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

HTML5 输入类型

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

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

注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。

输入类型:number

用于应该包含数字值的输入字段。

您能够对数字做出限制。

根据浏览器支持,限制可应用到输入字段。

Sample

<form>
  Quantity (between 1 and 5):
  
</form>

Fakar Gwamna

输入限制

这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的):

属性 描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读(无法修改)。
required 规定输入字段是必需的(必需填写)。
size Dabbobi na gida na yanar gizo na dacewa na haruffa (a cikin haruffa).
step Dabbobi na gida na yanar gizo na hukumar daidaiwa na dajin.
value Dabbobi na gida na yanar gizo na gaba daya.

Za a iya samun ilimi kan kawar da kuma bayan bayan a cikin babban abubuwa.

Sample

<form>
  Yawan:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Fakar Gwamna

Radda a cikin yanar gizo: date

<input type="date"> Wannan shi ne gida na yanar gizo wanda zai zama wajibin a kuma kuma kuma a cikin shafin yanar gizo.

Dake kaiyar aya (yanuwa da lokaci):

Sample

<form>
  Kwanan Hafi:
  <input type="date" name="bday">
</form>

Fakar Gwamna

Iya za a zuba kawar da kuma bayan bayan a cikin shafin yanar gizo:

Sample

<form>
  Raba a cikakar a shekarar 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

Fakar Gwamna

Dake kaiyar aya: color

<input type="color"> Yiwar da ke aminuwa da kaiyar wata (wata).

Dake kaiyar aya (yanuwa da lokaci):

Sample

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

Fakar Gwamna

Dake kaiyar aya: range

<input type="range"> Yiwar da ke aminuwa da kaiyar waɗannan dake kaiyar wata (wata).

Dake kaiyar aya (yanuwa da lokaci):

Sample

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

Fakar Gwamna

An yi amfani da waɗannan matsayi domin kwarewa: min, max, step, value.

Dake kaiyar aya: month

<input type="month"> Yiwar da ke aminuwa da kaiyar shekara da wata.

Dake kaiyar aya (yanuwa da lokaci):

Sample

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

Fakar Gwamna

Dake kaiyar aya: week

<input type="week"> Yiwar da ke aminuwa da kaiyar week da shekara.

Dake kaiyar aya (yanuwa da lokaci):

Sample

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

Fakar Gwamna

Dake kaiyar aya: time

<input type="time"> Yiwar da ke aminuwa da kaiyar lokaci (bayanin wakilin lokaci).

Dake kaiyar aya (yanuwa da lokaci):

Sample

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

Fakar Gwamna

Dake kaiyar aya: datetime

<input type="datetime"> Yiwar da ke aminuwa da kaiyar aya da lokaci (wakilin lokaci).

Dake kaiyar aya (yanuwa da lokaci):

Sample

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

Fakar Gwamna

Dake kaiyar aya: datetime-local

<input type="datetime-local"> Yiwar da ke aminuwa da kaiyar aya da lokaci (bayanin wakilin lokaci).

Dake kaiyar aya (yanuwa da lokaci):

Sample

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

Fakar Gwamna

Gani na: email

<input type="email"> Gani na yana da email.

Daga kaiyar kaiyar na kaiyar, ana iya tafkiyar email a lokacin da a kaiya.

Anfi na kaiyar da email na anfi, kuma a fi kaiyar ".com" a kan kaiyar email don daidaitu kaiyar email.

Sample

<form>
  E-mail:
  <input type="email" name="email">
</form>

Fakar Gwamna

Gani na: search

<input type="search"> Gani na yana da kaiyar na nuna (gani na nuna ana da yadda gani na nuna na kaiyar).

Sample

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

Fakar Gwamna

Gani na: tel

<input type="tel"> Gani na yana da hukumar telefon.

Kaiyar na Safari 8 na suka tsakiya kan gani na tel.

Sample

<form>
  Telefon:
  <input type="tel" name="usrtel">
</form>

Fakar Gwamna

Gani na: url

<input type="url"> Gani na yana da URL.

Daga kaiyar kaiyar na kaiyar, ana iya tafkiyar kaiyar URL a lokacin da a kaiya.

Anfi na kaiyar kaiyar da URL na anfi, kuma a fi kaiyar ".com" a kan kaiyar kaiyar don daidaitu kaiyar URL.

Sample

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

Fakar Gwamna