HTML <input> 标籤

Paglilinaw at Paggamit

<input> Ang tag na ito ay nagtatalaga ng input field kung saan ang user ay makakapagpasok ng data.

<input> Ang elemento ay pinakamahalagang elemento ng form.

<input> Ang elemento ay maaring ipapakita sa iba't ibang paraan, depende sa Atribute ng type.

Ito ang iba't ibang uri ng input:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(Default na halaga)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Tingnan ang Atribute ng typePara makita ang mga halimbawa ng bawat uri ng input!

Eskwelahan

HTML form na may tatlong input field; dalawang text field at isang sumite button:

<form action="/action_page.php">
  <label for="fname">Unang pangalan：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Pangalawang pangalan：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Isumite">
</form>

Subukan nang personal

Mga payo at komento

Mga payo:Palaging gamitin ang <label> tag para sa paglalarawan ng sumusunod na mga elemento:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Atributo

Atributo Halaga Paglalarawan
accept
  • Ekstensyon ng file
  • audio/*
  • video/*
  • image/*
  • Uri ng media

Tinutukoy ang uri ng file na gagamitin sa pagisumite sa pamamagitan ng file upload.

Tinutukoy kung anong uri ng file ang maaaring pinili mula sa file input dialog (aplikado lamang sa type="file").
alt Teksto Tinutukoy ang alternatibong teksto ng imahe (aplikado lamang sa type="image").
autocomplete
  • on
  • off
 Tinutukoy kung dapat magkaroon ng auto-complete ang <input> elemento.
autofocus autofocus Tinutukoy kung dapat ang <input> elemento ay maging fokus kapag binuksan ang pahina.
checked checked Tinutukoy na dapat ay ma-select ng maaga ang <input> elemento kapag binuksan ang pahina (aplikado sa type="checkbox" o type="radio").
dirname inputname.dir Tinutukoy ang direksyon ng teksto na gagamitin sa pagisumite.
disabled disabled Tinutukoy na dapat ayaw gamitin ang <input> elemento.
form Id ng form Tinutukoy ang form na pinag-aari ng <input> elemento.
formaction URL Tinutukoy ang URL na gagamitin para sa pagproseso ng file ng input control sa pagisumite ng form (aplikado sa type="submit" at type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Tutukoy kung paano ay kailangan ayusin ang form data kapag isinasubmit sa server (aplikable para sa type="submit" at type="image").
formmethod
  • get
  • post
 Tutukoy ang HTTP method na ginagamit para ipagsend ang data sa URL ng action (aplikable para sa type="submit" at type="image").
formnovalidate formnovalidate Tutukoy na hindi dapat suriin ang form kapag isinasubmit ang elemento.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Pangalan ng framework 		Tutukoy kung saan ang tugon na natanggap pagkatapos isumite ang form (aplikable para sa type="submit" at type="image").
height Pixel Tutukoy ang taas ng <input> elemento (lamang para sa type="image").
list datalist_id Mga predefined na opsyon na kasama ang <input> elemento na binubuo ng <datalist> elemento.
max
  • bilang
  • Date
 Tutukoy ang pinakamalaking halaga ng <input> elemento.
maxlength bilang Tutukoy ang pinakamalaking bilang ng mga character na pinapayagan ng <input> elemento.
min
  • bilang
  • Date
 Tutukoy ang pinakamaliit na halaga ng <input> elemento.
minlength bilang Tutukoy ang pinakamaliit na bilang ng mga character na kailangan sa <input> elemento.
multiple multiple Tutukoy na ang user ay pwedeng mag-fill ng maraming halaga sa <input> elemento.
name Teksto Tutukoy ang pangalan ng <input> elemento.
pattern Regular expression Tutukoy ang regular expression na ginagamit para sa pagcheck ng halaga ng <input> elemento.
placeholder Teksto Tutukoy ang maikling pagtatagubilin ng inaasahang halaga ng <input> elemento.
popovertarget Elemento id Tutukoy ang elemento ng popup na dapat tawagan (lamang para sa type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Tutukoy kung anong mangyayari kapag inililipat ang buton (lamang para sa type="button").
readonly readonly Tutukoy na ang input field ay readonly.
required required Tutukoy na dapat magfill ang input field bago isumite ang form.
size bilang Tutukoy ang lapad ng <input> elemento (sa pamamagitan ng bilang ng mga character).
src URL URL na ginagamit para sa imaheng pindutin (lamang para sa type="image").
step
  • bilang
  • any
 Tinutukoy ang pagitan ng lehitimong bilang sa input field.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Tinutukoy ang uri ng <input> element na dapat ipakita.
value Teksto Tinutukoy ang halaga ng <input> element.
width Pixel Tinutukoy ang lapad ng <input> element (gaya ng type="image" lamang).

Mga pangkalahatang atribute

<input> Ang tag ay sumusuporta sa: Mga pangkalahatang atribute sa HTML.

Atribute ng pangyayari

<input> Ang tag ay sumusuporta sa: Atribute ng pangyayari sa HTML.

Default na setting ng CSS

Wala.

Suporta ng Browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporta Suporta Suporta Suporta Suporta

Mga kaugnayang pahina

Tuturo sa HTML:

Manwal sa HTML DOM: