HTML form

Ang HTML form ay ginagamit upang kolektahin ang iba't ibang uri ng input ng user.

<form> element

Ang HTML form ay ginagamit upang kolektahin ang input ng user.

<form> element na tinukoy ang HTML form:

实例

<form>
 .
form elements
 .
</form>

Ang HTML form ay naglalaman ngelement ng form。

Ang elemento ng form ay tumutukoy sa iba't ibang uri ng elementong input, checkbox, radio button, submit button, at iba pa.

Elemento ng <input>

<input> Ang element ay pinaka-mahalagaelement ng form。

Ang <input> element ay may maraming uri, ayon sa iba't ibang type property.

Ito ang mga uri na ginagamit sa kabanata na ito:

Uri 描述
text Tutukoy ang regular text input.
radio Tutukoy ang radio button input (piliin ang isa sa maraming opsyon)
submit Tutukoy ang sumite na button (pagsubmit ng form)

注释：Makikita mo sa huli sa tutorial na ito ang mas maraming kaalaman tungkol sa mga uri ng input.

Text input

<input type="text"> Tutukoy ang ginagamit para saText inputAng isang-linang na input field:

实例

<form>
 Unang pangalan:<br>
<input type="text" name="firstname">
<br>
 Pangalawang pangalan:<br>
<input type="text" name="lastname">
</form>

Subukan nang personal

Sa browser, ito ay lumalabas na ganito:

First name:


Last name:

注释：Ang form mismo ay hindi nakikita. At maging pansin, ang default na lapad ng text field ay 20 na character.

Radio button input

<input type="radio"> TutukoyRadio button。

Ang radio button ay nagbibigay sa user ng pagpili ng isa sa mga limitadong opsyon:

实例

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

Subukan nang personal

Ang radio button ay lumalabas sa browser na ganito:

Male

Female

Submit button

<input type="submit"> Tutukoy ang ginagamit para sa pagsumite saForm handler（form-handler）SubmitAng mga button ng form.

Ang form handler ay isang server na pahina na naglalaman ng script na gagamitin upang pamahalaan ang input data.

Ang form handler sa form action Tutukoy sa property:

实例

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

Subukan nang personal

Sa browser, ito ay lumalabas na ganito:

First name:


Last name:


property ng Action

property ng actionTutukoy ang ginagawang aksyon kapag isinasubmit ang form.

Ang karaniwang paraan ng pagsubmit ng form sa server ay sa pamamagitan ng isang sumite na button.

Karaniwan, ang form ay isinasubmit sa web server na pahina.

Sa paglapit na halimbawa, itinakda ang isang server script na magpapatnubay sa isang isinumite na form:

<form action="action_page.php">

Kung ang action na attribute ay naaabot, ang action ay gagawing kasalukuyang pahina.

Method na attribute

method na attributeTinutukoy ang HTTP na paraan na gagamitin sa pagsubok ng porma (GET O POST)

<form action="action_page.php" method="GET">

O:

<form action="action_page.php" method="POST">

Kailan gamitin ang GET?

Maaari kang gamitin ang GET (default na paraan):

Kung ang pagsubok ng porma ay passive ( tulad ng search engine query) at walang sensitive information.

Kung ginagamitin mo ang GET, ang datos ng porma sa address bar ng pahina ay nakikita:

action_page.php?firstname=Mickey&lastname=Mouse

注释：Ang GET ang pinakamagandang pagsubok sa maliit na dami ng datos. Ang browser ang magtatakda ng limitasyon sa kapasidad.

Kailan gamitin ang POST?

Dapat gamitin mo ang POST:

Kung ang porma ay nag-a-update ng datos o naglalaman ng sensitive information (tulad ng password).

Ang seguridad ng POST ay mas mabuti, dahil ang mga datos na isinasubmit sa address bar ng pahina ay hindi nakikita.

Name na attribute

Bawat input na porma ay dapat may isang name na attribute para ma-sumite nang maayos.

Ang kasong ito ay magsumite lamang ang "Pangalawang pangalan" na pormang input:

实例

<form action="action_page.php">
Unang pangalan:<br>
<input type="text" value="Mickey">
<br>
Pangalawang pangalan:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Subukan nang personal

Gamitin ang <fieldset> para sa pagkakaisama ng datos ng porma

<fieldset> Ang elemento ay pinagsasama-samang ang kaugnay na datos ng porma.

<legend> Ang elemento ay nagbibigay ng título sa elemento <fieldset>.

实例

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
Unang pangalan:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Pangalawang pangalan:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Subukan nang personal

Ang HTML code ay lumalabas sa browser na ito:

Personal information:
First name:


Last name:


HTML Form 属性

HTML <form> 元素，已设置所有可能的属性，是这样的：

实例

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

下面是 <form> 属性的列表：

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

注释：您将在下面的章节学到更多关于属性的知识。