Ang uri ng input ng HTML

Ang kabanata na ito ay naglalarawan ng uri ng input ng <input> element.

Uri ng input: text

<input type="text"> Tinukoy para saInput ng tekstoAng mga single-line input field ng:

实例

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

亲自试一试

Ang HTML na ito ay lalagay sa browser na tulad nito:

First name:


Last name:

Uri ng input: password

<input type="password"> 定义Ang password field:

实例

<form>
 Name ng user:<br>
<input type="text" name="username">
<br>
 Password ng user:<br>
<input type="password" name="psw">
</form>

亲自试一试

Ang HTML na ito ay lalagay sa browser na tulad nito:

Name ng user:


Password ng user:

Komento:Ang mga character sa password field ay gagawing maskara (na ipapakita bilang bituin o malaking buto).

Uri ng input: submit

<input type="submit"> 定义IsumiteAng form data saAng form handlerng mga button.

Ang form handler (form-handler) ay isang server page na naglalaman ng script na magpaproseso ng input na data.

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

实例

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

亲自试一试

Ang HTML na ito ay lalagay sa browser na tulad nito:

First name:


Last name:


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

实例

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

亲自试一试

Input Type: radio

<input type="radio"> Defines a radio button.

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>

亲自试一试

Ang HTML na ito ay lalagay sa browser na tulad nito:

Male

Female

Input Type: checkbox

<input type="checkbox"> Defines a checkbox.

Checkboxes allow users to select zero or more options from a limited number of choices.

实例

<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>

亲自试一试

Ang HTML na ito ay lalagay sa browser na tulad nito:

I have a bike

I have a car

Input Type: button

<input type="button"> 定义按钮。

实例

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

亲自试一试

Ang HTML na ito ay lalagay sa browser na tulad nito:

Uri ng pagpasok ng HTML5

Nadagdagan ng HTML5 ang ilang bagong uri ng pagpasok:

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

Komento:Ang mga uri ng pagpasok na hindi suportado ng lumang web browser ay ipapakita bilang uri ng pagpasok text.

Uri ng pagpasok: number

<input type="number"> Ginagamit para sa mga lapud na dapat maglaman ng numero na halaga.

Maaari mong limitahan ang numero.

Ayon sa suporta ng browser, ang mga limitasyon ay maaring ilapat sa lapud na pagpasok.

实例

<form>
  Quantity (sa pagitan ng 1 at 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

亲自试一试

Limitasyon ng pagpasok

Nailista dito ang ilang pangkaraniwang mga limitasyon ng pagpasok (ang iba ay pinakabago sa HTML5):

Atributo Paglalarawan
disabled Tinutukoy na ang lapud na pagpasok ay dapat ibawal.
max Tinutukoy ang pinakamataas na halaga ng lapud na pagpasok.
maxlength Tinutukoy ang pinakamataas na bilang ng character ng lapud na pagpasok.
min Tinutukoy ang pinakamaliit na halaga ng lapud na pagpasok.
pattern Tinutukoy ang regular expression na gagamitin para sa pagsubaybay ng halaga ng pagpasok.
readonly Tinutukoy na ang lapud na pagpasok ay readonly (hindi maipatuloy na baguhin).
required Tinutukoy na ang lapud na pagpasok ay kinakailangan (dapat ipasok).
size Tinutukoy ang lapad ng lapud na pagpasok (sa halip ng mga character).
step Tinutukoy ang lehitimong intervalo ng numero ng lapud na pagpasok.
value Tinutukoy ang default na halaga ng lapud na pagpasok.

Matututunan ka pa mas marami tungkol sa mga limitasyon ng pagpasok sa susunod na kabanata.

实例

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

亲自试一试

Uri ng pagpasok: date

<input type="date"> Ginagamit para sa mga lapud na dapat maglaman ng petsa.

Ayon sa suporta ng browser, ang pilihan ng petsa ay magpapakita sa lapit ng input field.

实例

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

亲自试一试

Maaari mong idagdag ang mga limitasyon sa pagipasok:

实例

<form>
  Iwan ang isang petsa bago ang 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Magpasok ng petsa pagkatapos ng 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

亲自试一试

Uri ng input: color

<input type="color"> Ginagamit para sa input field na dapat maglaman ng kulay.

Ayon sa suporta ng browser, ang pilihan ng kulay ay magpapakita sa lapit ng input field.

实例

<form>
  Piliin ang iyong paboritong kulay:
  <input type="color" name="favcolor">
</form>

亲自试一试

Uri ng input: range

<input type="range"> Ginagamit para sa input field na dapat maglaman ng mga halaga na nasa ilang saklaw.

Ayon sa suporta ng browser, ang input field ay maaring magpakita bilang slider control.

实例

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

亲自试一试

Maaari mong gamitin ang mga sumusunod na attribute upang tukuyin ang limitasyon: min, max, step, value.

Uri ng input: month

<input type="month"> Pinapayagan ang gumamit na piliin ang buwan at taon.

Ayon sa suporta ng browser, ang pilihan ng petsa ay magpapakita sa lapit ng input field.

实例

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

亲自试一试

Uri ng input: week

<input type="week"> Pinapayagan ang gumamit na piliin ang linggo at taon.

Ayon sa suporta ng browser, ang pilihan ng petsa ay magpapakita sa lapit ng input field.

实例

<form>
  Piliin ang isang linggo:
  <input type="week" name="week_year">
</form>

亲自试一试

Uri ng input: time

<input type="time"> Pinapayagan ang gumamit na piliin ang oras (walang timezone).

Ayon sa suporta ng browser, ang pilihan ng oras ay magpapakita sa lapit ng input field.

实例

<form>
  Piliin ang isang oras:
  <input type="time" name="usr_time">
</form>

亲自试一试

Uri ng input: datetime

<input type="datetime"> Pinapayagan ang gumamit na piliin ang petsa at oras (may timezone).

Ayon sa suporta ng browser, ang pilihan ng petsa ay magpapakita sa lapit ng input field.

实例

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

亲自试一试

Uri ng input: datetime-local

<input type="datetime-local"> Pinapayagan ang gumamit na piliin ang petsa at oras (walang timezone).

Ayon sa suporta ng browser, ang pilihan ng petsa ay magpapakita sa lapit ng input field.

实例

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

亲自试一试

输入类型：email

<input type="email"> 用于应该包含电子邮件地址的输入字段。

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

某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。

实例

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

亲自试一试

输入类型：search

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

实例

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

亲自试一试

输入类型：tel

<input type="tel"> 用于应该包含电话号码的输入字段。

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

实例

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

亲自试一试

输入类型：url

<input type="url"> 用于应该包含 URL 地址的输入字段。

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

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

实例

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

亲自试一试