|
HTML > HTML Tutorial
ฟอร์ม HTML และการนำเข้า
ฟอร์ม HTML ได้รับการใช้เลือกการนำเข้าข้อมูลประเภทต่างๆ
ฟอร์ม
ฟอร์มเป็นพื้นที่ที่สามารถเก็บ element ของฟอร์ม โดย element เหล่านี้ยอมให้ผู้ใช้ป้อนสารสนเทศ (เช่น ฟิลด์ text, ฟิลด์ textarea, เมนู drop-down, ปุ่ม radio, checkbox) ในฟอร์ม
ฟอร์มได้รับการกำหนดด้วยแท็ก <form>
<form>
<input>
<input>
</form>
|
การนำเข้า
แท็กฟอร์มที่ใช้มากที่สุดคือ แท็ก <input> ประเภทของการนำเข้าได้รับการเจาะจงด้วยคุณลักษณะ type ต่อไปคือประเภทการนำเข้าทั่วไป
ฟิลด์ Text
ฟิลด์ Text ได้รับการใช้ เมื่อต้องการให้ผู้ใช้พิมพ์ตัวอักษร ตัวเลข เป็นต้น ในฟอร์ม
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
|
การมองเห็นใน browser
หมายเหตุ ตัวฟอร์มเองมองไม่เห็น นอกจากนี้ browser ส่วนใหญ่มีความกว้างของฟิลด์ Text เป็น 20 อักษรโดยค่าเริ่มต้น
ปุ่ม Radio
ปุ่ม Radio ได้รับการใช้เมื่อต้องการให้ผู้ใช้เลือกหนึ่งในตัวเลือกที่จำกัดไว้
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
|
การมองเห็นใน browser
หมายเหตุ สามารถเลือกได้เพียงหนึ่งตัวเลือก
Checkbox
Checkbox ได้รับการใช้เมื่อต้องการให้ผู้ใช้เลือกหนึ่งในตัวเลือกที่จำกัดไว้
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br>
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br>
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form> |
การมองเห็นใน browser
คุณสมบัติ action และปุ่ม Submit
เมื่อผู้ใช้คลิกปุ่ม Submit เนื้อหาของฟอร์มได้รับการส่งไปอีกไฟล์ คุณลักษณะ action ของฟอร์มกำหนดชื่อของไฟล์เพื่อส่งเนื้อหาไปให้ ตามปกติไฟล์ที่กำหนดในคุณลักษณะ action ทำบางอย่างในการรับข้อมูล
<form name="input" action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form> |
การมองเห็นใน browser
ถ้าพิมพ์บางตัวอักษรในฟิลด์ Text ข้างบนและคลิกปุ่ม Submit จะเป็นการส่งการนำเข้าไปยังเพจชื่อ "html_form_action.asp" เพจนั้นจะแสดงว่าได้รับข้อนำเข้า
แท็ก Form
| แท็ก |
คำอธิบาย |
| <form> |
กำหนดฟอร์มสำหรับนำเข้าข้อมูลผู้ใช้ |
| <input> |
กำหนดฟิลด์นำเข้า |
| <textarea> |
กำหนดฟิลด์ text-area (ควบคุมการนำเข้าหลายบรรทัด) |
| <label> |
กำหนดป้ายให้กับตัว control |
| <fieldset> |
กำหนด fieldset |
| <legend> |
กำหนดป้ายชื่อ (caption) สำหรับ fieldset |
| <select> |
กำหนดรายการเลือกได้ (drop-down list) |
| <optgroup> |
กำหนดกลุ่มตัวเลือก |
| <option> |
กำหนดตัวเลือกใน drop-down box |
| <button> |
กำหนดปุ่มกด |
| <isindex> |
ยกเลิก ใช้ <input> แทน |
|
