<form> องค์ประกอบ
รูปแบบ HTML ที่ใช้ในการเก็บรวบรวมการป้อนข้อมูลของผู้ใช้
<form> องค์ประกอบที่กำหนดรูปแบบ HTML นี้:
<form>
.
รูปแบบ HTML มีองค์ประกอบแบบฟอร์ม องค์ประกอบของแบบฟอร์มที่มีแตกต่างกันขององค์ประกอบการป้อนช่องทำเครื่องหมายปุ่มส่งปุ่ม, และอื่น ๆ
<input> ธาตุ
<input> องค์ประกอบเป็นองค์ประกอบที่สำคัญที่สุดฟอร์ม
<input> องค์ประกอบมีหลายรูปแบบขึ้นอยู่กับ type แอตทริบิวต์
นี่คือประเภทที่ใช้ในบทนี้คือ:
ชนิด ลักษณะ text กำหนดป้อนข้อความปกติ radio กำหนดอินพุตปุ่ม (for selecting one of many choices) submit กำหนดปุ่มส่ง (for submitting the form)
คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับรูปแบบการใส่ในภายหลังในการกวดวิชานี้
ป้อนข้อความ
<input type="text"> กำหนดช่องใส่หนึ่งบรรทัดสำหรับป้อนข้อความ:
ตัวอย่าง
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
ลองตัวเอง» นี่คือวิธีที่มันจะมีลักษณะเหมือนในเบราว์เซอร์:
ชื่อจริง:
นามสกุล:
Note: รูปแบบที่ตัวเองมองไม่เห็น นอกจากนี้ยังทราบว่าเริ่มต้นความกว้างของช่องข้อความคือ 20 ตัวอักษร
Radio ปุ่มอินพุต
<input type="radio"> กำหนด radio ปุ่ม
Radio ปุ่มให้ผู้ใช้เลือกหนึ่งในจำนวนที่ จำกัด ของตัวเลือก:
ตัวอย่าง
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
ลองตัวเอง» นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:
ชาย
หญิง
อื่น ๆ
ปุ่มส่ง
<input type="submit"> กำหนดปุ่มสำหรับการส่งแบบฟอร์มไปยังรูปแบบจัดการ
รูปแบบที่จัดการโดยปกติจะเป็นหน้าเซิร์ฟเวอร์ที่มีสคริปต์สำหรับการป้อนข้อมูลการประมวลผล
รูปแบบจัดการที่ระบุไว้ในรูปแบบของ action แอตทริบิวต์:
ตัวอย่าง
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
ลองตัวเอง» นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:
ชื่อจริง:
นามสกุล:
Action แอตทริบิวต์
action แอตทริบิวต์กำหนดดำเนินการที่จะดำเนินการเมื่อมีการส่งแบบฟอร์ม
วิธีที่ใช้กันส่งแบบฟอร์มไปยังเซิร์ฟเวอร์โดยใช้ปุ่มส่ง
โดยปกติการส่งแบบฟอร์มไปยังหน้าเว็บบนเว็บเซิร์ฟเวอร์
ในตัวอย่างข้างต้นสคริปต์ฝั่งเซิร์ฟเวอร์ที่ระบุไว้ในการจัดการรูปแบบที่ส่ง:
<form action="action_page.php ">
ถ้า action แอตทริบิวต์ละเว้นการกระทำที่มีการตั้งค่าหน้าปัจจุบัน
Method แอตทริบิวต์
method แอตทริบิวต์ระบุถึงวิธีของ HTTP ( GET หรือ POST ) เพื่อนำมาใช้เมื่อมีการส่งรูปแบบ:
<form action="action_page.php" method="get" > หรือ:
<form action="action_page.php" method="post" >
เมื่อการใช้ GET ?
คุณสามารถใช้ GET (the default method) :
หากการส่งแบบฟอร์มเรื่อย ๆ (like a search engine query) และไม่มีข้อมูลที่สำคัญ
เมื่อคุณใช้ GET , ข้อมูลในแบบฟอร์มจะปรากฏอยู่ในหน้านี้:
action_page.php?firstname=Mickey&lastname=Mouse GET เหมาะที่สุดที่จะสั้นจำนวนของข้อมูล ข้อ จำกัด ของขนาดที่ตั้งอยู่ในเบราว์เซอร์ของคุณ
เมื่อการใช้ POST ?
คุณควรใช้ POST :
หากรูปแบบคือการปรับปรุงข้อมูลหรือมีข้อมูลที่สำคัญ (password)
POST มีการรักษาความปลอดภัยที่ดีกว่าเพราะข้อมูลที่ส่งจะไม่ปรากฏอยู่ในหน้า
Name แอตทริบิวต์
จะต้องส่งอย่างถูกต้อง, ช่องใส่แต่ละคนจะต้องมี name แอตทริบิวต์
ตัวอย่างเช่นนี้จะส่ง "Last name" ช่องใส่:
ตัวอย่าง
<form action="action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<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>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
ลองตัวเอง» นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:
HTML Form คุณสมบัติ
HTML ที่ <form> องค์ประกอบที่มีคุณลักษณะที่เป็นไปได้ทั้งหมดการตั้งค่าจะมีลักษณะเช่นนี้
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
ทดสอบตัวเองด้วยการออกกำลังกาย! การใช้สิทธิ 1 » ใช้สิทธิ 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»
นี่คือรายการของ <form> แอตทริบิวต์:
คุณลักษณะ ลักษณะ accept-charset ระบุ charset ที่ใช้ในแบบฟอร์มการส่ง (ค่าเริ่มต้น: charset หน้า) action ระบุที่อยู่ (url) ที่จะส่งแบบฟอร์ม (ค่าเริ่มต้น: หน้าส่ง) autocomplete ระบุหากเบราว์เซอร์ควรเติมแบบฟอร์ม (default: on) enctype ระบุการเข้ารหัสข้อมูลที่ส่งที่ (default: is url-encoded) method ระบุวิธีการ HTTP ที่ใช้เมื่อมีการส่งแบบฟอร์ม (default: GET) name ระบุชื่อที่ใช้ในการระบุรูปแบบ (สำหรับการใช้งาน DOM: document.forms.name) novalidate ระบุว่าเบราว์เซอร์ไม่ควรตรวจสอบรูปแบบ target ระบุเป้าหมายที่อยู่ในการ action แอตทริบิวต์ (ค่าเริ่มต้น: _self)
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับคุณลักษณะในบทต่อไป
ตัวอย่างอื่น ๆ
ส่งอีเมลจากรูปแบบ
วิธีการส่งอีเมลจากรูปแบบ