ฟอร์ม HTML

ฟอร์ม HTML ใช้เพื่อรับรองการข้อมูลที่ผู้ใช้ใส่ที่มีหลายรูปแบบ

<form>

ฟอร์ม HTML ใช้เพื่อรับรองการข้อมูลที่ผู้ใช้ใส่

<form> มีความหมายเป็นฟอร์ม HTML

ตัวอย่าง

<form>
 .
form elements
 .
</form>

ฟอร์ม HTML มีรวมทั้งองค์ประกอบฟอร์ม。

องค์ประกอบฟอร์มหมายถึงรูปแบบของเศษส่วน input ต่างๆ และยังรวมถึงตัวกำจัดชาติภาพ ปุ่มเลือกเดียว ปุ่มส่ง และอื่นๆ

เศษส่วน <input>

<input> เศษส่วนที่สำคัญที่สุดรวมทั้งองค์ประกอบฟอร์ม。

เศษส่วน <input> มีหลายรูปแบบ ขึ้นอยู่กับ type คุณสมบัติ

นี่คือประเภทที่ใช้ในบทวิชานี้

ประเภท รายละเอียด
text กำหนดข้อมูลข้อความทั่วไป
radio กำหนดปุ่มเลือกเดียว (เลือกหนึ่งในหลายทางเลือก)
submit กำหนดปุ่มส่ง (ส่งฟอร์ม)

หมายเหตุ：คุณจะเรียนรู้เกี่ยวกับรูปแบบของประเภทการใส่ข้อมูลในบทวิชาต่อไป

ข้อมูลข้อความ

<input type="text"> กำหนดใช้สำหรับข้อมูลข้อความของช่องข้อมูลเข้ารหัสตัวเดียวบรรทัดเดียว

ตัวอย่าง

<form>
 名字：<br>
<input type="text" name="firstname">
<br>
 姓氏：<br>
<input type="text" name="lastname">
</form>

親自試一試

ดูเหมือนนี้ในบราวเซอร์

First name:


Last name:

หมายเหตุ：ฟอร์มตัวเองไม่มีความเห็นได้ และจะต้องระวังว่าความกว้างปริมาณตัวอักษรในช่องข้อมูลข้อความเป็นของตัวอักษร 20 ตัว

ปุ่มเลือกเดียวออกตัว

<input type="radio"> กำหนดปุ่มเลือกเดียว。

ปุ่มเลือกเดียวอนุญาตให้ผู้ใช้เลือกหนึ่งในจำนวนที่กำหนด

ตัวอย่าง

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

親自試一試

โปรแกรมปุ่มเลือกเดียวดูเหมือนนี้ในบราวเซอร์

Male

Female

ปุ่มส่ง

<input type="submit"> กำหนดใช้สำหรับส่งโปรแกรมประมวลฟอร์ม（form-handler）ส่งปุ่มฟอร์ม

โปรแกรมประมวลฟอร์มมักจะเป็นหน้าเว็บเซิร์ฟเวอร์ที่มีสคริปต์เพื่อจัดการข้อมูลที่ใส่เข้ามา

โปรแกรมประมวลฟอร์มที่อยู่ในฟอร์ม action กำหนดในคุณสมบัติ

ตัวอย่าง

<form action="action_page.php">
名字：<br>
<input type="text" name="firstname" value="Mickey">
<br>
姓氏：<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

親自試一試

ดูเหมือนนี้ในบราวเซอร์

First name:


Last name:


Action 属性

action 属性กำหนดการกระทำที่จะทำขณะส่งฟอร์ม

วิธีที่มักที่สุดเพื่อส่งฟอร์มไปยังเซิร์ฟเวอร์คือการใช้ปุ่มส่ง

ตั้งตามปกติ ฟอร์มจะถูกส่งมายังหน้าเว็บบนเซิร์ฟเวอร์ web

ในตัวอย่างที่ได้รับมา ได้กำหนดบริการสไตล์เซิร์ฟเวอร์เพื่อจัดการฟอร์มที่ถูกส่งมา

<form action="action_page.php">

如果省略 action 屬性，則 action 會被設置為當前頁面。

Method 屬性

method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）：

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

或：

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

何時使用 GET？

您可以使用 GET（默認方法）：

如果表單提交是被動的（例如搜索引擎查詢），並且沒有敏感信息。

當您使用 GET 時，表單數據在頁面地址欄中是可見的：

action_page.php?firstname=Mickey&lastname=Mouse

หมายเหตุ：GET 最適合少量數據的提交。瀏覽器會設置容量限制。

何時使用 POST？

您應該使用 POST：

如果表單正在更新數據，或者包含敏感信息（例如密碼）。

POST 的安全性更好，因為在頁面地址欄中被提交的數據是不可見的。

Name 屬性

要正確提交，每個輸入字段必須設置一個 name 屬性。

本例僅會提交 "姓氏" 輸入字段：

ตัวอย่าง

<form action="action_page.php">
名字：<br>
<input type="text" value="Mickey">
<br>
姓氏：<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

親自試一試

使用 <fieldset> 組合表單數據

<fieldset> 元素組合表單中的相關數據

<legend> 元素為 <fieldset> 元素定義標題。

ตัวอย่าง

<form action="action_page.php">
<fieldset>
<legend>個人信息：</legend>
名字：<br>
<input type="text" name="firstname" value="Mickey">
<br>
姓氏：<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

親自試一試

HTML 代码在瀏覽器中顯示如下：

Personal information:
First name:


Last name:


HTML Form Attribute

HTML <form> element ที่ถูกกำหนดอัตราะการทั้งหมด มีลักษณะเช่นนี้:

ตัวอย่าง

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

หมายเหตุ：คุณจะได้เรียนรู้เกี่ยวกับอัตราะการมากยิ่งขึ้นในบทที่ต่อไป