HTML Input Attribute

Ang attribute na nagbibigay ng pagtutukoy sa 'value'

value Ang attribute na nagbibigay ng pagtutukoy sa awtomatikong halaga ng input na pinagkakalooban:

实例

<form action="">
 Pangalan ng Una:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Pangalan ng Pangalawang Ama:<br>
<input type="text" name="lastname">
</form>

亲自试一试

Ang attribute na nagbibigay ng pagtutukoy sa 'readonly'

readonly Ang attribute na nagbibigay ng pagtutukoy na ang input na pinagkakalooban ay readonly (hindi mababago):

实例

<form action="">
 Pangalan ng Una:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Pangalan ng Pangalawang Ama:<br>
<input type="text" name="lastname">
</form>

亲自试一试

Hindi kailangan ng halaga ang attribute na 'readonly'. Ito ay katumbas ng 'readonly="readonly"'.

Ang attribute na nagbibigay ng pagtutukoy sa 'disabled'

disabled Ang attribute na nagbibigay ng pagtutukoy na ang input na pinagkakalooban ay pinagbawalan.

Ang mga elemento na pinagbawalan ay hindi magagamit at hindi klikable.

Ang mga elemento na pinagbawalan ay hindi maitatala sa pagsusumite.

实例

<form action="">
 Pangalan ng Una:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Pangalan ng Pangalawang Ama:<br>
<input type="text" name="lastname">
</form>

亲自试一试

Hindi kailangan ng halaga ang attribute na 'disabled'. Ito ay katumbas ng 'disabled="disabled"'.

Ang attribute na nagbibigay ng pagtutukoy sa 'size'

size Ang attribute na nagbibigay ng pagtutukoy sa sukat ng input na pinagkakalooban ng character:

实例

<form action="">
 Pangalan ng Una:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Pangalan ng Pangalawang Ama:<br>
<input type="text" name="lastname">
</form>

亲自试一试

Ang attribute na nagbibigay ng pagtutukoy sa 'maxlength'

maxlength Ang pagtutukoy ay nagbibigay ng pinakamataas na haba ng input na pinagkakalooban ng lapad ng character:

实例

<form action="">
 Pangalan ng Una:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Pangalan ng Pangalawang Ama:<br>
<input type="text" name="lastname">
</form>

亲自试一试

Kapag itinakda ang attribute na maxlength, ang input control ay hindi tatanggapin ang higit sa pinahintulutang bilang ng character.

Ang attribute na ito ay hindi magbibigay ng anumang feedback. Kung nais na magbigay ng babala sa user, dapat isulat ang JavaScript code.

Komento:Ang pagpipigil sa input ay hindi ganap na walang kamalian. Ang JavaScript ay nagbibigay ng maraming paraan upang magdagdag ng pagpipigil sa ilegal na input. Kung nais na magpipigil nang ligtas ang input, dapat ring suriin ng tagapagtanggap (server) ang pagpipigil.

Attribute na HTML5

HTML5 ay nagdagdag ng mga sumusunod na attribute para sa <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height at width
  • list
  • min at max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

at magdagdag ng mga susunod na attribute para sa <form>:

  • autocomplete
  • novalidate

Attribute na autocomplete

Ang attribute na autocomplete ay nagtutukoy kung dapat ba ang form o input field ay magkakompleto.

Kapag ang automatic na pagkakompleto ay naka-on, ang browser ay magsasalain ng mga halaga base sa naunang input ng user.

提示：Maaari mong itakda ang automatic na pagkakompleto ng form upang ayon sa on, at ang partikular na input field upang ayon sa off, at vice versa.

Ang attribute na autocomplete ay para sa <form> at ang mga sumusunod na <input> type: text, search, url, tel, email, password, datepickers, range at color.

实例

HTML 表单 na may automatic na pagkakompleto (ang isang input field ay off):

<form action="action_page.php" autocomplete="on">
   Pangalan ng Una:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

亲自试一试

提示：Sa ilang mga browser, maaring kailangan mong manindigan ng kamay ang pag-activate ng feature ng awtomatikong kumpletasyon.

Ang attribute na novalidate

Ang attribute na novalidate ay isang attribute ng <form>.

Kung ito ay nakatakda, ito ay nangangahulugan na walang pag��sikasyon ang form data kapag isinasubmit ang form.

实例

Ipinapahiwatig na walang pag��sikasyon ang form kapag isinasubmit:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

亲自试一试

Ang attribute na autofocus

Ang attribute na autofocus ay isang boolean attribute.

Kung ito ay nakatakda, ito ay nangangahulugan na ang <input> element ay dapat magiging fokus kapag nagkarga ang pahina.

实例

Gumawa ng "First name" input field na magiging fokus sa pagkarga ng pahina:

First name:<input type="text" name="fname" autofocus>

亲自试一试

Ang attribute na form

Ang attribute na form ay nangangahulugan kung anong isang o ilang form ang pag-aari ng <input> element.

提示：Kung mayroon kang kailangang mabigyang alam ng mahigit isang form, gamitin ang listahan ng form id na nagsasagupa ng mga space.

实例

Ang input field ay nasa labas ng HTML form (pero pa rin bahagi ng form):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Magsumite">
</form>
 Last name: <input type="text" name="lname" form="form1">

亲自试一试

Ang attribute na formaction

Ang attribute na formaction ay nangangahulugan kung anong URL ang paglalagay ng file na gagamitin kapag isinasubmit ang form.

Ang attribute na formaction ay kinabibilangan ng action attribute ng <form> element.

Ang attribute na formaction ay ginagamit para sa type="submit" at type="image".

实例

May dalawang pindutin na sumusunod sa HTML form at may magkakaibang aksyon:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Magsumite"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Isumite bilang admin">
</form>

亲自试一试

Ang attribute na formenctype

Ang attribute na formenctype ay nangangahulugan kung paano ang form data (form-data) ay kumakode kapag isinasubmit sa server (tanging para sa form na may method="post").

Ang attribute na formenctype ay kinabibilangan ng enctype attribute ng <form> element.

Ang atributo ng formenctype ay ginagamit para sa type="submit" at type="image"。

实例

Magpadala ng datos ng form sa default encoding at encoding na "multipart/form-data" (iklalawang pindutin):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Magsumite">
   <input type="submit" formenctype="multipart/form-data">
   value="Magsumite bilang Multipart/form-data">
</form>

亲自试一试

Atributo ng formmethod

Ang atributo ng formmethod ay nagpapahintulot sa paggamit ng HTTP na paraan para ipadala ang form data (form-data) sa URL ng action.

Ang atributo ng formmethod ay lumalagpas sa atributo ng method ng elemenyo <form>。

Ang atributo ng formmethod ay ginagamit para sa type="submit" at type="image"。

实例

Ang ikalawang pindutin na sumusunod ang HTTP na paraan ng form:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Magsumite">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Magsumite gamit ang POST">
</form>

亲自试一试

Atributo ng formnovalidate

Ang atributo ng novalidate ay boolean na atributo.

Kung nakatakdang ito, ang pagkukumpuni sa elemento <input> ay hindi gagawin kapag isinasubmit ang form.

Ang atributo ng formnovalidate ay lumalagpas sa atributo ng novalidate ng elemenyo <form>。

Ang atributo ng formnovalidate ay maaaring gamitin para sa type="submit"。

实例

Form na may dalawang pindutin na sumusunod ang pagkukumpuni (pagkumpuni at walang pagkumpuni):

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Magsumite"><br>
   <input type="submit" formnovalidate value="Magsumite walang patotoo">
</form>

亲自试一试

Ang attribute na formtarget

Ang pangalan o keyword na itinakda ng attribute na formtarget ay nagtutukoy sa kung saan ipapakita ang natanggap na tugon pagkatapos isumite ang form.

Ang attribute na formtarget ay papalitan ang attribute na target ng <form> elemento.

Ang attribute na formtarget ay magagamit kasama ang type="submit" at type="image".

实例

Ang form na ito ay may dalawang pindutin na sumusunod sa iba't ibang target window:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Isumite bilang normal">
   <input type="submit" formtarget="_blank"
   value="Isumite sa bagong window">
</form>

亲自试一试

Ang attribute na height at width

Ang attribute na height at width ay nagtutukoy sa taas at lapad ng <input> elemento.

Ang attribute na height at width ay gamit lamang para sa <input type="image">.

Komento:Laging itakda ang sukat ng imahe. Kung ang browser ay hindi malalaman ang sukat ng imahe, ang pahina ay magiging parang kumikislap kapag naglalagay ng imahe.

实例

Gawing imaheng pindutin ang imahe, at itakda ang attribute na height at width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

亲自试一试

List na propyed

Ang list na propyed ng <datalist> na elemento ay naglalaman ng predefined na opsyon ng <input> elemento.

实例

Gamit ang <datalist> upang itakda ang predefined na halaga ng <input> elemento:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

亲自试一试

Ang min at max na katangian

Ang min at max na katangian ay nagtutukoy sa pinakamaliit at pinakamataas na halaga ng <input> na elemento.

Ang min at max na katangian ay ginagamit para sa mga sumusunod na uri ng input: number, range, date, datetime, datetime-local, month, time, at week.

实例

Ang <input> na elemento na may pinakamaliit at pinakamataas na halaga:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

亲自试一试

Ang multiple na katangian

Ang multiple na katangian ay isang boolean na katangian.

Kung ito ay nakatakda, ito ay nagtutukoy na pinahihintulutan ng user na mag-type ng higit sa isang halaga sa <input> na elemento.

Ang multiple na katangian ay ginagamit para sa mga sumusunod na uri ng input: email at file.

实例

Ang kahitungan ng file upload na maaaring tanggapin ang maraming halaga:

Pumili ng imaheng iyong nais ilagay: <input type="file" name="img" multiple>

亲自试一试

Ang pattern na katangian

Ang pattern na katangian ay nagtutukoy sa regular expression na ginagamit upang suriin ang halaga ng <input> na elemento.

Ang pattern na katangian ay ginagamit para sa mga sumusunod na uri ng input: text, search, url, tel, email, at password.

提示：Gamitin mo ang pangkalahatang title na katangian upang ilarawan ang pattern para tulungan ang user.

提示：Matututunan mo pa ang higit pang kaalaman tungkol sa regular expression sa aming tutorial sa JavaScript.

实例

Ang kahitungan ay dapat ay may tatlong titik lamang (walang numero o espesyal na simbolo):

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

亲自试一试

Ang placeholder na katangian

Ang placeholder na katangian ay nagtutukoy sa paalaala na ginagamit upang ilarawan ang inaasahang halaga ng input field (halimbawa ng halaga o maikling paglalarawan ng format).

Ang paalaala na ito ay magpapakita sa loob ng kahitungan ng input bago mag-type ang user ng halaga.

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

实例

拥有占位符文本的输入字段：

<input type="text" name="fname" placeholder="First name">

亲自试一试

required 属性

required 属性是布尔属性。

如果设置，则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

实例

必填的输入字段：

Username: <input type="text" name="usrname" required>

亲自试一试

step 属性

step 属性规定 <input> 元素的合法数字间隔。

示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。

提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。

step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

示例

拥有具体的合法数字间隔的输入字段：

<input type="number" name="points" step="3">

亲自试一试