URI ng HTML pagpasok

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

Uri ng pagpasok: teksto

<input type="text"> Tukoy ngPagpasok ng tekstoAng unang bahagi ng pagpasok:

实例

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

亲自试一试

Ang nasabing HTML code ay magiging tulad nito sa browser:

First name:


Last name:

Uri ng pagpasok: password

<input type="password"> 定义Larawan ng password:

实例

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

亲自试一试

Ang nasabing HTML code ay magiging tulad nito sa browser:

Ang pangalan ng user:


Password ng user:

Komento:Ang mga character sa larawan ng password ay gagawing maskara (na ipapakita bilang bituin o sarsariling bilog).

Uri ng pagpasok: sumite

<input type="submit"> 定义IsumiteAng form data saAng form-handlerng pindutan.

Ang form-handler ay karaniwang isang pahina ng server na naglalaman ng script na papapagawain ang paghawak ng impormasyon ng input.

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 nasabing HTML code ay magiging tulad nito sa browser:

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 nasabing HTML code ay magiging tulad nito sa browser:

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 nasabing HTML code ay magiging tulad nito sa browser:

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 nasabing HTML code ay magiging tulad nito sa browser:

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 ng lumang web browser na hindi suportado ay magiging uri ng pagpasok text.

Uri ng pagpasok: number

<input type="number"> Ginagamit para sa isang pagsasalit na dapat kasama ang numero ng halaga.

Maaari mong limitahan ang numero.

Ayon sa suporta ng browser, ang mga limitasyon ay maaaring ilapat sa pagsasalit ng input.

实例

<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 limitasyon ng pagpasok (ang ilan ay pinakita sa HTML5):

Attribute Description
disabled Tinutukoy na ang pagsasalit ng input ay dapat ibawal.
max Tinutukoy ang pinakamalaking halaga ng pagsasalit ng input.
maxlength Tinutukoy ang pinakamalaking bilang ng character ng pagsasalit ng input.
min Tinutukoy ang pinakamaliit na halaga ng pagsasalit ng input.
pattern Tinutukoy ang regular expression na nagpapatunay ng halaga ng pagpasok.
readonly Tinutukoy na ang pagsasalit ng input ay read-only (hindi maaaring baguhin).
required Tinutukoy na ang pagsasalit ng input ay kinakailangan (dapat ipasok).
size Tinutukoy ang lapad ng pagsasalit ng input (sa halip ng mga character).
step Tinutukoy ang lehitimong tawiran ng numero ng pagsasalit ng input.
value Tinutukoy ang default na halaga ng pagsasalit ng input.

Makakatutok ka ng mas maraming kaalaman 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 isang pagsasalit ng input na dapat kasama ang petsa.

Ayon sa suporta ng browser, ang selector ng petsa ay lalabas sa input field.

实例

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

亲自试一试

Maaari mong magdagdag ng limitasyon sa pagpasok:

实例

<form>
  Mag-enter ng 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>

亲自试一试

Type ng input: color

<input type="color"> Ginagamit para sa input field na dapat kasama ang kulay.

Ayon sa suporta ng browser, ang selector ng kulay ay lalabas sa input field.

实例

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

亲自试一试

Type ng input: range

<input type="range"> Ginagamit para sa input field na dapat kasama ang mga halaga na kasama sa isang saklaw.

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

实例

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

亲自试一试

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

Type ng input: month

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

Ayon sa suporta ng browser, ang selector ng petsa ay lalabas sa input field.

实例

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

亲自试一试

Type ng input: week

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

Ayon sa suporta ng browser, ang selector ng petsa ay lalabas sa input field.

实例

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

亲自试一试

Type ng input: time

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

Ayon sa suporta ng browser, ang selector ng oras ay lalabas sa input field.

实例

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

亲自试一试

Type ng input: datetime

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

Ayon sa suporta ng browser, ang selector ng petsa ay lalabas sa input field.

实例

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

亲自试一试

Type ng input: datetime-local

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

Ayon sa suporta ng browser, ang selector ng petsa ay lalabas sa 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>

亲自试一试