การสร้างแบบฟอร์มโดยใช้ html การสร้างและทำงานกับแบบฟอร์มใน html องค์ประกอบและคุณสมบัติเพิ่มเติม

เมื่อพิจารณาถึงแท็ก HTML พื้นฐานแล้ว เราไม่สามารถช่วยพูดถึงองค์ประกอบที่สำคัญเช่นแบบฟอร์มได้ คำติชมมักจำเป็นบนหน้าเว็บ ตัวอย่างเช่น การกรอกแบบฟอร์มบนเว็บไซต์ การลงทะเบียน การอนุญาต ความคิดเห็น ฯลฯ ในกรณีเหล่านี้ทั้งหมด ผู้ใช้กรอกข้อมูลในพื้นที่พิเศษ (ช่องแบบฟอร์ม) บนเพจ หลังจากนั้นข้อมูลจะถูกส่งไปยังเซิร์ฟเวอร์ แบบฟอร์มใช้เพื่อสร้างคำติชม แบบฟอร์มคือส่วนของเอกสาร HTML ที่มีไว้สำหรับการป้อนข้อมูลของผู้ใช้

รูปแสดงแบบฟอร์มลงทะเบียนนักศึกษาบนเว็บไซต์ของสถาบันการศึกษา

คอนเทนเนอร์ถูกใช้เพื่อสร้างแบบฟอร์ม

ด้วยแอตทริบิวต์การดำเนินการซึ่งระบุหน้าบนเซิร์ฟเวอร์ที่จะประมวลผลข้อมูลที่ส่งโดยแบบฟอร์ม

โครงสร้างในรูปแบบที่ง่ายที่สุด:

องค์ประกอบแบบฟอร์ม...

แต่ละแบบฟอร์มจะต้องมีปุ่มส่งเพื่อส่งข้อมูลหลังจากกรอกแบบฟอร์มแล้ว

โครงสร้างปุ่ม:

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

ในการสร้างฟิลด์ข้อความ จะมีพารามิเตอร์ข้อความ มีการใช้พารามิเตอร์ต่อไปนี้: ชื่อ – ชื่อฟิลด์; ขนาด – สำหรับฟิลด์ในสัญลักษณ์ ความยาวสูงสุด - จำนวนอักขระสูงสุดที่เป็นไปได้ในฟิลด์ ค่า – ข้อมูลที่แสดงในแบบฟอร์มตามค่าเริ่มต้น

ตัวอย่างการกรอกแบบฟอร์มที่มีช่องข้อความสองช่อง:

ผลลัพธ์ของแบบฟอร์มแสดงในรูป

หากคุณต้องการป้อนข้อมูลจำนวนมากลงในช่องข้อความ เช่น ความคิดเห็น ให้ใช้แบบฟอร์มพื้นที่ข้อความซึ่งสร้างขึ้นโดยใช้แท็ก โดยมีลักษณะดังนี้ ชื่อ – ชื่อเขต; cols – จำนวนคอลัมน์พื้นที่ แถว – จำนวนแถว; wrap – วิธีการพันเส้น (บน – ตัดเส้น, ปิด – ห้ามพันเส้น)</p><p>ในโค้ดข้างต้นให้เพิ่มฟิลด์พื้นที่ข้อความ:</p><p>ความคิดเห็น: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

ผลลัพธ์ของโค้ดที่ทำงานกับพื้นที่ข้อความจะแสดงในรูป

องค์ประกอบถัดไปของแบบฟอร์มคือรายการที่ให้คุณเลือกจากชุดค่าที่นำเสนอ แท็กช่วยให้คุณสร้างแบบฟอร์มรายการได้

เพื่อให้องค์ประกอบได้รับการไฮไลต์เมื่อโหลดหน้าเว็บ จำเป็นต้องมีองค์ประกอบในแท็ก

วิธีการเลือกที่คล้ายกันคือองค์ประกอบแบบฟอร์มช่องทำเครื่องหมายและปุ่มตัวเลือก ความแตกต่างระหว่างองค์ประกอบเหล่านี้ก็คือ ช่องทำเครื่องหมายให้คุณเลือกได้หลายรายการ ในขณะที่ปุ่มตัวเลือกให้คุณเลือกได้เพียงรายการเดียวเท่านั้น

โครงสร้างของช่องทำเครื่องหมายและรายการปุ่มตัวเลือก:

ข้อความ

ปุ่มตัวเลือก:

ข้อความ

ในองค์ประกอบที่ระบุในโครงสร้าง คุณลักษณะที่เลือกจะถูกใช้โดยค่าเริ่มต้นเพื่อเน้นช่องทำเครื่องหมายและปุ่มตัวเลือก ตัวอย่างการใช้ช่องทำเครื่องหมาย ปุ่มตัวเลือก และโค้ด HTML ดังแสดงในรูป

องค์ประกอบแบบฟอร์มอื่นคือปุ่ม ที่ระบุโดยใช้แอตทริบิวต์แท็กประเภท ด้วยปุ่มค่า:

ในโค้ดที่ระบุสำหรับการสร้างปุ่ม จะมีพารามิเตอร์ onclick ซึ่งโดยปกติจะระบุโค้ดในภาษาการเขียนโปรแกรมเพื่อดำเนินการเฉพาะเมื่อมีการคลิกปุ่มนี้:

หากต้องการแสดงข้อความในหน้าต่างพิเศษ ให้ใช้คำสั่ง JavaScript – aler ผลลัพธ์ของตัวอย่างแสดงในรูป

หากต้องการแทรกรูปภาพลงในปุ่ม ให้ใช้โค้ดที่แสดงในตัวอย่างต่อไปนี้:

เมื่อลงทะเบียนและเข้าสู่ระบบเว็บไซต์ จะใช้ฟิลด์ที่มีการทดสอบที่ซ่อนอยู่ซึ่งแสดงเป็นรูปดาว นี่คือองค์ประกอบแบบฟอร์มรหัสผ่าน:

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

องค์ประกอบแบบฟอร์มที่ซ่อนอยู่จะไม่ปรากฏให้เห็นในหน้าต่างเบราว์เซอร์

ในการอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ แบบฟอร์มจะมีองค์ประกอบไฟล์ โค้ดตัวอย่างสำหรับการอัพโหลดไฟล์ไปยังเซิร์ฟเวอร์แสดงไว้ด้านล่าง:

ดังนั้นในหัวข้อนี้ เราจึงดูองค์ประกอบของแบบฟอร์มสำหรับการสร้างหน้า HTML ต่างๆ ซึ่งเมื่อใช้ร่วมกับตัวจัดการสคริปต์บนคอมพิวเตอร์หรือเซิร์ฟเวอร์ จะช่วยให้คุณสามารถพัฒนาเว็บแอปพลิเคชันที่มีคุณสมบัติครบถ้วนได้

2018-06-28

การสร้างแบบฟอร์ม HTML

สวัสดีผู้เยี่ยมชมที่รัก!

ในส่วนก่อนหน้านี้ เราได้สร้างองค์ประกอบหลักของเว็บไซต์ และยังพิจารณาประเด็นที่เกี่ยวข้องกับการกรอกเนื้อหาด้วย และตอนนี้เราสามารถไปยังหัวข้อถัดไปที่ค่อนข้างสำคัญและกว้างขวางได้ - การทำงานกับฟอร์ม HTML

แบบฟอร์ม HTML เป็นองค์ประกอบการโต้ตอบที่สำคัญที่สุดที่กำหนดส่วนโต้ตอบของหน้าเว็บ โดยที่ไม่มีเว็บไซต์เต็มรูปแบบสามารถทำได้ ท้ายที่สุดแล้ว ด้วยความช่วยเหลือของพวกเขาในการแลกเปลี่ยนหลักระหว่างผู้ใช้และฝั่งเซิร์ฟเวอร์

แต่ในขณะเดียวกัน แบบฟอร์มก็เป็นองค์ประกอบอินเทอร์เฟซที่ค่อนข้างซับซ้อน โดยมีส่วนประกอบการทำงานและฟิลด์ข้อความที่หลากหลาย ดังนั้นในส่วนนี้เราจะพยายามพิจารณาองค์ประกอบหลักโดยละเอียดยิ่งขึ้นโดยให้ความสนใจเป็นพิเศษกับการใช้งานจริงบนเว็บไซต์ที่ถูกสร้างขึ้น

นอกจากนี้ ปัญหาในการทำงานกับฐานข้อมูล MySQL จะถูกกล่าวถึงที่นี่ด้วย เนื่องจากการใช้แบบฟอร์มในตัวอย่างของเราจะเชื่อมโยงกับการโต้ตอบกับตารางฐานข้อมูลอย่างแยกไม่ออก ซึ่งข้อมูลที่ผู้ใช้ป้อนจะถูกจัดเก็บ ซึ่งเซิร์ฟเวอร์จะใช้ในภายหลังเมื่อประมวลผลคำขอ

เกี่ยวกับรูปแบบ HTML โดยทั่วไป
แบบฟอร์มสั่งซื้อออนไลน์
แบบฟอร์มการอนุญาต
แบบฟอร์มตอบรับ

เกี่ยวกับรูปแบบ HTML โดยทั่วไป

แบบฟอร์มบนหน้าเว็บถูกกำหนดโดยองค์ประกอบบล็อก

ซึ่งเป็นคอนเทนเนอร์ที่รวมองค์ประกอบทั้งหมดที่รับผิดชอบในการประมวลผลข้อมูลเข้า เช่น , ,

.</p>
 <p>ขณะเดียวกันก็ติดแท็ก <form>มีแอตทริบิวต์หลายรายการ แต่ต้องมีสองรายการ  นี่คือ "การกระทำ" ที่มีที่อยู่ซึ่งระบุว่าจะส่งแบบฟอร์มไปที่ใด และ "วิธีการ" ที่ระบุวิธีการ (POST หรือ GET) ที่จะส่งแบบฟอร์ม</p>
 <p>ในส่วนขององค์ประกอบนั้น แท็กนั้นมีความหลากหลายมากที่สุด <input>ด้วยความช่วยเหลือในการส่งข้อมูลส่วนใหญ่และสร้างองค์ประกอบอินเทอร์เฟซต่างๆ  นอกจากนี้ประเภทของฟิลด์อินพุตจะถูกกำหนดโดยแอตทริบิวต์หลัก "ประเภท" ซึ่งค่าจะกำหนดวัตถุประสงค์การทำงาน</p>
 <p>ดังนั้น เมื่อค่าคือ "ข้อความ" - ช่องข้อความ "รหัสผ่าน" - ช่องที่มีรหัสผ่าน "อีเมล" - ช่องสำหรับป้อนที่อยู่อีเมล "วิทยุ" - สวิตช์ "ช่องทำเครื่องหมาย" - ช่องทำเครื่องหมาย "ส่ง" - ปุ่มสำหรับส่งแบบฟอร์ม</p>
 <p>ด้านล่างนี้เป็นตัวอย่างของการใช้องค์ประกอบ <input>สำหรับฟิลด์ประเภทต่างๆ</p>
 <ol><p><form name
=<b>"ตัวอย่าง"</b>การกระทำ = <b>"#"
</b>วิธีการ = <b>"โพสต์"</b>
></p>
 <p><input type
=<b>"ข้อความ"</b>ชื่อ = <b>"เข้าสู่ระบบ"</b>
></p>
 <p><input type
=<b>"อีเมล"</b>ชื่อ = <b>"อีเมล"</b>
></p>
 <p><input type
=<b>"รหัสผ่าน"</b>ชื่อ = <b>"รหัสผ่าน"</b>
></p>
 <p><input type
=<b>"ส่ง"</b>ชื่อ = <b>"ปุ่ม"</b>ค่า = <b>"ส่ง"</b>
></p>
 <li>
</ol><p>รูปที่ 1 ตัวอย่างแบบฟอร์ม HTML</p>
 <p>ในตัวอย่างนี้ คุณจะเห็นว่าสำหรับองค์ประกอบนั้น <input>ขึ้นอยู่กับค่าของแอตทริบิวต์ "type" ฟิลด์อาจมีรูปแบบที่แตกต่างกัน  ตัวอย่างเช่นในองค์ประกอบแรก (ตำแหน่ง 2) ฟิลด์นี้มีไว้สำหรับป้อนข้อมูลข้อความ (ในกรณีนี้คือการเข้าสู่ระบบ)  อันถัดไป (ตำแหน่ง 3) ใช้สำหรับกรอกอีเมล์ของคุณ จากนั้น (ตำแหน่ง 4) ใช้สำหรับรหัสผ่าน และอันสุดท้าย (ตำแหน่ง 5) เป็นปุ่มสำหรับส่งแบบฟอร์ม</p>
 <p>แน่นอนว่า นี่เป็นตัวอย่างง่ายๆ ที่ส่วนใหญ่ใช้แอตทริบิวต์ที่จำเป็น  ในความเป็นจริง ฟิลด์อื่นๆ ที่กำหนดลักษณะของฟิลด์มักจะถูกนำมาใช้</p>
 <p>นอกจากนี้ แต่ละองค์ประกอบยังมีรายการคุณลักษณะของตัวเอง  มันไม่คุ้มที่จะแสดงรายการทั้งหมดที่นี่เนื่องจากมีค่อนข้างมากและควรใช้ข้อมูลนี้จากเอกสารอ้างอิง HTML ที่ออกแบบมาเพื่อสิ่งนี้โดยเฉพาะ</p>
 <p>คุณสามารถค้นหาหนังสืออ้างอิง HTML ที่น่าเชื่อถือจำนวนมากได้บนอินเทอร์เน็ต  ตัวอย่างเช่นดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ เพื่อวัตถุประสงค์เหล่านี้ คุณสามารถใช้เทคโนโลยีเว็บที่อ้างอิงถึง WebReference.ru ซึ่งส่วนหนึ่งมีไว้สำหรับคำอธิบายโดยละเอียดขององค์ประกอบทั้งหมดที่มีอยู่ใน HTML5</p>
 <p>ภาพหน้าจอที่ 33</p>
 <p>ที่นี่เราจะสร้างแบบฟอร์มสำหรับสร้างหน่วยการทำงานของเว็บไซต์ของเรา  และเราจะพยายามใช้องค์ประกอบต่าง ๆ พร้อมคุณสมบัติที่แตกต่างกันให้มากที่สุด</p>
 
 <h2><i>แบบฟอร์มสั่งซื้อออนไลน์</i></h2>
 <p>เว็บไซต์ที่สร้างขึ้นมีไว้สำหรับการสั่งซื้อการติดตั้งเครื่องหมายป้องกันการโจรกรรมบนกระจกรถยนต์  ในการดำเนินการนี้ คุณจะต้องป้อนข้อมูลรถยนต์และเลือกวิธีการทำเครื่องหมาย  หลังจากนั้นตามข้อมูลที่ป้อนผู้ใช้ควรได้รับข้อมูลเกี่ยวกับค่าใช้จ่ายในการดำเนินงาน  อีกทั้งทั้งราคาเต็มและคำนวณโดยคำนึงถึงส่วนลดด้วย</p>
 <p>แบบฟอร์มการสั่งซื้อออนไลน์เวอร์ชันที่เกี่ยวข้องที่เราจะสร้างจะแสดงอยู่ในภาพหน้าจอต่อไปนี้</p>
 
 <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-onlajn-zakaza.jpg' width="100%" loading=lazy loading=lazy><p>รูปที่ 2 แบบฟอร์มสั่งซื้อออนไลน์</p>
 <p>องค์ประกอบต่อไปนี้จะถูกใช้ที่นี่:</p>
 <ul><li><input>พร้อมช่องป้อนข้อความ</li>
 <li><select>;</li>
 <li><option>.</li>
</ul><p>แบบฟอร์มลงทะเบียนที่ใช้ในเว็บไซต์ที่กำลังสร้างจะรวมกับการสั่งซื้อออนไลน์  เนื่องจากในกรณีนี้บัญชีส่วนตัวของผู้ใช้มีวัตถุประสงค์เพื่อแสดงสถานะของคำสั่งซื้อที่วางไว้และทำการสั่งซื้อใหม่  ดังนั้นจึงค่อนข้างสมเหตุสมผลในตัวเลือกนี้ที่จะลงทะเบียนพร้อมกันกับการดำเนินการตามคำสั่งแรก</p>
 <p>ด้านล่างนี้คือวิธีการสร้างส่วนการทำงานนี้</p>
 <p>หากต้องการเพิ่ม/ลดขนาดรูปภาพ ให้คลิกที่รูปภาพ</p>
 <br><img src='https://i2.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-registracii.jpg' width="100%" loading=lazy loading=lazy><p>รูปที่ 3 แบบฟอร์มลงทะเบียน</p>
 <p>องค์ประกอบที่ต้องระบุในตัวเลือกนี้:</p>
 <ul><li><label>;</li>
 <li><input>พร้อมช่องป้อนข้อความ</li>
 <li><input>ด้วยช่องป้อนข้อมูลอีเมล</li>
 <li><input>ด้วยช่องป้อนรหัสผ่าน</li>
 <li><input>พร้อมปุ่มส่งแบบฟอร์ม (รวมกับแบบฟอร์มสั่งซื้อออนไลน์)</li>
</ul><h2><i>แบบฟอร์มการอนุญาต</i></h2>
 <p>ในการเข้าสู่บัญชีส่วนตัวของคุณ จำเป็นต้องได้รับอนุญาต  โดยทั่วไปแล้ว แบบฟอร์มดังกล่าวประกอบด้วยช่องป้อนข้อมูลสำหรับการเข้าสู่ระบบ รหัสผ่าน และปุ่มสำหรับส่งแบบฟอร์ม  นอกจากนี้ ในการกู้คืนข้อมูลประจำตัว มักใช้ลิงก์เพิ่มเติมเช่น: “ลืมการเข้าสู่ระบบของคุณ?”, “ลืมรหัสผ่าน?” มักจะถูกนำมาใช้</p>
 <p>แม้ว่าลิงก์เพิ่มเติมดังกล่าวมักจะอยู่พร้อมกับองค์ประกอบของแบบฟอร์มการลงทะเบียน แต่จริงๆ แล้วลิงก์เหล่านั้นไม่เกี่ยวข้องกับองค์ประกอบต่างๆ</p>
 <p>ด้านล่างนี้เป็นมุมมองทั่วไปของแผงผู้ใช้พร้อมองค์ประกอบการอนุญาต</p>
 <p>หากต้องการเพิ่ม/ลดขนาดรูปภาพ ให้คลิกที่รูปภาพ</p>
 <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-avtorizacii.jpg' width="100%" loading=lazy loading=lazy>
 <p>ในกรณีนี้จะใช้องค์ประกอบต่อไปนี้:</p>
 <ul><li><label>;</li>
 <li><input>พร้อมช่องป้อนข้อความ</li>
 <li><input>ด้วยช่องป้อนรหัสผ่าน</li>
 <li><input> </li>
</ul><h2><i>แบบฟอร์มตอบรับ</i></h2>
 <p>ชื่อของแบบฟอร์มนี้พูดถึงจุดประสงค์ของมัน  ดังนั้นช่องที่จำเป็นทั้งหมดสำหรับการส่งข้อความควรอยู่ที่นี่  ในกรณีนี้จะประกอบด้วยสี่ฟิลด์: สองฟิลด์สำหรับป้อนชื่อและที่อยู่ทางไปรษณีย์ของผู้ส่งและอีกสองฟิลด์สำหรับการส่งข้อความเอง</p>
 <p>ลักษณะที่ปรากฏของแบบฟอร์มนี้จะแสดงอยู่ในภาพหน้าจอต่อไปนี้</p>
 <p>หากต้องการเพิ่ม/ลดขนาดรูปภาพ ให้คลิกที่รูปภาพ</p>
 <br><img src='https://i2.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-obratnoj-svyazi.jpg' width="100%" loading=lazy loading=lazy><p>รูปที่ 5 แบบฟอร์มคำติชม</p>
 <p>ที่นี่ นอกเหนือจากองค์ประกอบที่ใช้แล้ว ควรเพิ่มอีกรายการหนึ่ง ( <textarea>) ซึ่งคุณสามารถป้อนข้อความหลายบรรทัดในช่องได้  และรายการทั้งหมดของตัวเลือกนี้จะอยู่ในรูปแบบต่อไปนี้:</p>
 <ul><li><label>;</li>
 <li><input>พร้อมช่องป้อนข้อความ</li>
 <li><input>ด้วยช่องป้อนข้อมูลอีเมล</li>
 <li><textarea>ด้วยพื้นที่ที่คุณสามารถป้อนข้อความได้หลายบรรทัด</li>
 <li><input>พร้อมปุ่มส่งแบบฟอร์ม</li>
</ul><p>ดังนั้นในบทความเบื้องต้นนี้ เราได้กล่าวถึงปัญหาทั่วไปบางประการที่เกี่ยวข้องกับแบบฟอร์ม HTML  และเราตัดสินใจว่าเราจะใช้ตัวอย่างใดโดยเฉพาะในอนาคต</p>
 <p>หลังจากนั้นเราสามารถไปยังการสร้างแบบฟอร์มในทางปฏิบัติ รวบรวมโค้ดที่จำเป็นสำหรับแต่ละกรณี และอธิบายการโต้ตอบกับตาราง MySQL ที่เกี่ยวข้อง  แต่นี่จะอยู่ในบทความถัดไป</p>
 <p>ขอแสดงความนับถือนิโคไล กริชิน</p>
 <ul><li>สัตยาต่อไป:</li></ul>
<p><b>แบบฟอร์ม HTML</b>เป็นเครื่องมือที่เอกสาร HTML สามารถส่งข้อมูลบางอย่างไปยังจุดที่กำหนดไว้ล่วงหน้าในโลกภายนอกซึ่งข้อมูลจะถูกประมวลผลในทางใดทางหนึ่ง</p>
<p>เป็นเรื่องยากมากที่จะพูดถึงแบบฟอร์มในบทช่วยสอนสำหรับ HTML โดยเฉพาะ  เหตุผลนั้นง่ายมาก: การสร้างแบบฟอร์ม HTML นั้นง่ายกว่าการสร้าง "จุดในโลกภายนอก" ซึ่งแบบฟอร์ม HTML จะส่งข้อมูลไปให้  ในกรณีส่วนใหญ่ “จุด” ดังกล่าวคือโปรแกรมที่เขียนด้วยภาษา Perl หรือ C</p>
<p>โปรแกรมที่ประมวลผลข้อมูลที่ส่งโดยแบบฟอร์มมักเรียกว่าสคริปต์ CGI  ตัวย่อ CGI ย่อมาจาก Common Gateways Interface  การเขียนสคริปต์ CGI ในกรณีส่วนใหญ่จำเป็นต้องมีความรู้ที่ดีเกี่ยวกับภาษาการเขียนโปรแกรมที่เกี่ยวข้องและความสามารถของระบบปฏิบัติการ Unix</p>
<p>ในปัจจุบัน ภาษา PHP/FI ค่อนข้างแพร่หลาย โดยคำสั่งนี้สามารถฝังลงในเอกสาร HTML ได้โดยตรง (เอกสารจะถูกบันทึกเป็นไฟล์ที่มีนามสกุล *.pht หรือ *.php)</p>
<p>แบบฟอร์ม HTML ส่งข้อมูลไปยังโปรแกรมตัวจัดการในรูปแบบของคู่ [ชื่อตัวแปร]=[ค่าตัวแปร]  ควรระบุชื่อตัวแปรด้วยตัวอักษรละติน  ค่าตัวแปรจะถือเป็นสตริงโดยตัวจัดการแม้ว่าจะมีเพียงตัวเลขก็ตาม</p>
<h3>แบบฟอร์ม HTML ทำงานอย่างไร</h3>
<p>แบบฟอร์มถูกเปิดพร้อมกับแท็ก <FORM>และปิดท้ายด้วยแท็ก</FORM>.  เอกสาร HTML สามารถมีหลายรูปแบบได้ แต่ไม่ควรวางแบบฟอร์มไว้ภายในอีกรูปแบบหนึ่ง  ข้อความ HTML รวมทั้งแท็ก สามารถวางไว้ในแบบฟอร์มได้โดยไม่มีข้อจำกัด</p>
<p>แท็ก <FORM>อาจมีแอตทริบิวต์สามรายการ ซึ่งหนึ่งในนั้นจำเป็น  เหล่านี้คือคุณลักษณะ:</p>
<p>แอตทริบิวต์ที่จำเป็น  กำหนดตำแหน่งของตัวจัดการแบบฟอร์ม</p><p>กำหนดวิธีการ (หรืออีกนัยหนึ่ง โดยใช้วิธีการถ่ายโอนไฮเปอร์เท็กซ์) ข้อมูลจากแบบฟอร์มจะถูกถ่ายโอนไปยังตัวจัดการ  ค่าที่ถูกต้องคือ METHOD=POST และ METHOD=GET  หากไม่ได้ตั้งค่าแอ็ตทริบิวต์ METHOD=GET จะถูกถือว่าเป็นค่าดีฟอลต์</p><p>กำหนดวิธีการเข้ารหัสข้อมูลจากแบบฟอร์ม HTML เพื่อส่งไปยังตัวจัดการ  หากไม่ได้ตั้งค่าแอ็ตทริบิวต์ ค่าดีฟอลต์คือ ENCTYPE=application/x-www-form-urlencoded</p><h3>รูปแบบ HTML ที่ง่ายที่สุด</h3>
<p>เพื่อเริ่มกระบวนการถ่ายโอนข้อมูลจากแบบฟอร์มไปยังตัวจัดการ จำเป็นต้องมีการควบคุมบางอย่าง  การสร้างส่วนควบคุมนั้นง่ายมาก:</p><p>
 <INPUT TYPE=submit>
</p><p>เมื่อพบบรรทัดดังกล่าวในแบบฟอร์มเบราว์เซอร์จะวาดปุ่มบนหน้าจอพร้อมข้อความว่าส่ง (อ่าน "ส่ง" โดยเน้นที่พยางค์ที่สองจากภาษาอังกฤษ "ส่ง") เมื่อคลิกข้อมูลทั้งหมดจะมีอยู่ใน แบบฟอร์มจะถูกโอนไปยังตัวจัดการที่กำหนดไว้ในแท็ก <FORM> .</p>
<p>ป้ายบนปุ่มสามารถตั้งค่าตามที่คุณต้องการได้โดยการป้อนแอตทริบิวต์ VALUE="[Label]" (читается "вэлью"
с ударением на первом слоге, от английского "значение"),
например:!}</p><p>
 <INPUT TYPE=submit VALUE="ไป!">
</p><p>ตอนนี้เรารู้เพียงพอที่จะเขียนแบบฟอร์ม HTML แบบง่ายแล้ว (ตัวอย่างที่ 11)  มันจะไม่รวบรวมข้อมูลใด ๆ แต่เพียงส่งเรากลับไปที่เนื้อหาของบทนี้</p><p>
 <HTML>
<HEAD>
<TITLE>ตัวอย่างที่ 11</TITLE>
</HEAD>
<H1>รูปแบบที่ง่ายที่สุด</H1>
<FORM ACTION="pr0008.html"> 
<INPUT TYPE=submit VALUE="กลับไปที่บทที่ 8...">
</FORM> 
</BODY>
</HTML>
</p><p>คำจารึกที่วางไว้บนปุ่มสามารถส่งผ่านไปยังตัวจัดการได้หากจำเป็น โดยการแนะนำแอตทริบิวต์ NAME=[ชื่อ] ลงในคำจำกัดความของปุ่ม (อ่านว่า "ชื่อ" จากภาษาอังกฤษว่า "ชื่อ") เช่น:</p><p>
 <INPUT TYPE=submit NAME=button VALUE="ไป!">
</p><p>เมื่อคุณคลิกที่ปุ่มดังกล่าว ตัวจัดการพร้อมกับข้อมูลอื่นๆ ทั้งหมดจะได้รับตัวแปรปุ่มที่มีค่า Let's go!  .</p>
<p>แบบฟอร์มสามารถมีปุ่มส่งได้หลายปุ่มซึ่งมีชื่อและ/หรือค่าต่างกัน  ตัวจัดการจึงสามารถดำเนินการแตกต่างออกไปได้ ขึ้นอยู่กับปุ่มส่งที่ผู้ใช้คลิก</p>
<h3>แบบฟอร์ม HTML รวบรวมข้อมูลอย่างไร</h3>
<p>มีองค์ประกอบประเภทอื่น <INPUT>.  แต่ละองค์ประกอบ <INPUT>ต้องมีแอตทริบิวต์ NAME=[name] ซึ่งระบุชื่อขององค์ประกอบ (และตามด้วยชื่อของตัวแปรที่จะถูกส่งไปยังตัวจัดการ)  ต้องระบุชื่อ <b>เป็นตัวอักษรละตินเท่านั้น</b>.  รายการส่วนใหญ่ <INPUT>ต้องมีแอตทริบิวต์ VALUE="[value]" , определяющий значение, которое будет
передано обработчику под этим именем. Для элементов !} <INPUT TYPE=text>และ <INPUT TYPE=password>อย่างไรก็ตาม แอ็ตทริบิวต์นี้เป็นทางเลือกเนื่องจากผู้ใช้สามารถป้อนค่าของตัวแปรที่เกี่ยวข้องได้โดยใช้แป้นพิมพ์</p>
<p>ประเภทองค์ประกอบพื้นฐาน <INPUT> :</p>
<p><i>ประเภท=ข้อความ</i></p><p>กำหนดหน้าต่างสำหรับการป้อนบรรทัดข้อความ  อาจมีแอตทริบิวต์เพิ่มเติม SIZE=[number] (ความกว้างของหน้าต่างอินพุตเป็นอักขระ) และ MAXLENGTH=[number] (ความยาวสูงสุดที่อนุญาตของสตริงอินพุตเป็นอักขระ)</p><h3>ตัวอย่าง:</h3>
<p><INPUT TYPE=text SIZE=20 NAME=user VALUE="อีวาน"></p><p>กำหนดหน้าต่างกว้าง 20 ตัวอักษรสำหรับการป้อนข้อความ  ตามค่าเริ่มต้น หน้าต่างจะมีข้อความ Ivan ซึ่งผู้ใช้สามารถแก้ไขได้  ข้อความที่แก้ไข (หรือไม่ได้แก้ไข) จะถูกส่งผ่านไปยังตัวจัดการในตัวแปรผู้ใช้</p><p><i>TYPE=รหัสผ่าน</i></p><p>กำหนดหน้าต่างสำหรับการป้อนรหัสผ่าน  คล้ายกับประเภทข้อความอย่างแน่นอน แต่จะแสดงเครื่องหมายดอกจัน (*) บนหน้าจอแทนสัญลักษณ์ของข้อความที่ป้อน  ตัวอย่าง:</p><p><INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10></p><p>กำหนดหน้าต่างกว้าง 20 ตัวอักษรสำหรับการป้อนรหัสผ่าน  ความยาวรหัสผ่านสูงสุดที่อนุญาตคือ 10 ตัวอักษร  รหัสผ่านที่ป้อนจะถูกส่งผ่านไปยังตัวจัดการในตัวแปร pw</p><p><i>ประเภท=วิทยุ</i></p><p>กำหนดปุ่มตัวเลือก  อาจมีแอตทริบิวต์ที่เลือกเพิ่มเติม (บ่งชี้ว่ามีการตรวจสอบปุ่ม)  ในกลุ่มของปุ่มตัวเลือกที่มีชื่อเดียวกัน จะมีปุ่มตัวเลือกที่มีป้ายกำกับได้เพียงปุ่มเดียวเท่านั้น</p><h3>ตัวอย่าง:</h3>
<p><INPUT TYPE=radio NAME=modem VALUE="9600" checked>9600 ต่อวินาที <br>
<INPUT TYPE=radio NAME=modem VALUE="14400">14400 ต่อวินาที <br>
<INPUT TYPE=radio NAME=modem VALUE="28800">28800 ต่อวินาที</p><p>กำหนดกลุ่มของปุ่มตัวเลือกสามปุ่มที่มีป้ายกำกับ 9600 bps, 14400 bps และ 28800 bps  ปุ่มแรกจะมีป้ายกำกับไว้ตั้งแต่แรก  หากผู้ใช้ไม่ตรวจสอบปุ่มอื่น ตัวแปรโมเด็มที่มีค่า 9600 จะถูกส่งไปยังตัวจัดการ  หากผู้ใช้ตรวจสอบปุ่มอื่น ตัวแปรโมเด็มที่มีค่า 14400 หรือ 28800 จะถูกส่งไปยังตัวจัดการ</p><p><i>TYPE=ช่องทำเครื่องหมาย</i></p><p>กำหนดสี่เหลี่ยมจัตุรัสที่สามารถทำเครื่องหมายได้  อาจมีแอตทริบิวต์ที่เลือกเพิ่มเติม (ระบุว่ามีการตรวจสอบช่องสี่เหลี่ยม)  ไม่เหมือนกับปุ่มตัวเลือก กลุ่มของสี่เหลี่ยมจัตุรัสที่มีชื่อเดียวกันสามารถมีสี่เหลี่ยมที่มีป้ายกำกับได้หลายอัน</p><h3>ตัวอย่าง:</h3>
<p><INPUT TYPE=checkbox NAME=comp VALUE="พีซี">คอมพิวเตอร์ส่วนบุคคล <br>
<INPUT TYPE=checkbox NAME=comp VALUE="ดับบลิว.เอส." checked>เวิร์กสเตชัน <br>
<INPUT TYPE=checkbox NAME=comp VALUE="แลน">เซิร์ฟเวอร์เครือข่ายท้องถิ่น <br>
<INPUT TYPE=checkbox NAME=comp VALUE="เป็น" checked>เซิร์ฟเวอร์อินเทอร์เน็ต</p><p>กำหนดกลุ่มของสี่ช่องสี่เหลี่ยม  สี่เหลี่ยมที่สองและสี่จะถูกทำเครื่องหมายไว้ในตอนแรก  หากผู้ใช้ไม่ทำการเปลี่ยนแปลง ตัวแปรสองตัวจะถูกส่งไปยังตัวจัดการ: comp=WS และ comp=IS</p><p><i>TYPE=ซ่อนอยู่</i></p><p>กำหนดองค์ประกอบข้อมูลที่ซ่อนไว้ซึ่งผู้ใช้จะมองไม่เห็นเมื่อกรอกแบบฟอร์มและถูกส่งผ่านไปยังตัวจัดการโดยไม่มีการเปลี่ยนแปลง  บางครั้งการมีองค์ประกอบดังกล่าวบนแบบฟอร์มที่ได้รับการออกแบบใหม่เป็นครั้งคราวก็มีประโยชน์ เพื่อให้ผู้จัดการทราบว่าแบบฟอร์มนั้นกำลังจัดการกับเวอร์ชันใด  คุณสามารถคิดหาการใช้งานอื่น ๆ ที่เป็นไปได้ด้วยตัวเองได้อย่างง่ายดาย</p><h3>ตัวอย่าง:</h3>
<p><INPUT TYPE=hidden NAME=version VALUE="1.1"></p><p>กำหนดตัวแปรเวอร์ชันที่ซ่อนอยู่ซึ่งถูกส่งผ่านไปยังตัวจัดการด้วยค่า 1.1</p><p><i>ประเภท=รีเซ็ต</i></p><p>กำหนดปุ่มที่เมื่อคลิกแล้ว จะทำให้ฟอร์ม HTML กลับสู่สถานะดั้งเดิม  เนื่องจากไม่มีการส่งข้อมูลไปยังตัวจัดการเมื่อใช้ปุ่มนี้ ปุ่มรีเซ็ตจึงอาจไม่มีแอตทริบิวต์ชื่อ</p><h3>ตัวอย่าง:</h3>
<p><INPUT TYPE=reset VALUE="ล้างช่องแบบฟอร์ม"></p><p>กำหนดปุ่มล้างฟิลด์ฟอร์มที่เมื่อคลิกแล้ว จะทำให้ฟอร์ม HTML กลับสู่สถานะดั้งเดิม</p><p>นอกจากองค์ประกอบแล้ว <INPUT>แบบฟอร์ม HTML สามารถมีเมนูได้ <SELECT>และช่องป้อนข้อความ <TEXTAREA> .</p>
<p>เมนู <SELECT>ขององค์ประกอบ n มีลักษณะดังนี้:</p><p>
 <SELECT NAME="[имя]">
<OPTION VALUE="[ค่า 1]">[ข้อความ 1] <OPTION VALUE="[ค่า 2]">[ข้อความ 2] ... <OPTION VALUE="[ค่า n]">[ข้อความ n]</SELECT>
</p><p>อย่างที่คุณเห็น เมนูจะเริ่มต้นด้วยแท็ก <SELECT>และปิดท้ายด้วยแท็ก</SELECT>.  แท็ก <SELECT>มีแอตทริบิวต์ NAME ที่จำเป็นซึ่งระบุชื่อของตัวแปรที่เมนูสร้างขึ้น</p>
<p>แท็ก <SELECT>อาจมีแอตทริบิวต์ MULTIPLE ซึ่งระบุว่าสามารถเลือกได้หลายรายการจากเมนู  เบราว์เซอร์ส่วนใหญ่แสดงเมนู <SELECT MULTIPLE>ในรูปแบบของหน้าต่างที่มีรายการเมนูอยู่ (ความสูงของหน้าต่างในบรรทัดสามารถกำหนดได้ด้วยแอตทริบิวต์ SIZE=[number])  เมนู <SELECT>ในกรณีส่วนใหญ่จะแสดงเป็นเมนูแบบเลื่อนลง</p>
<p>แท็ก <OPTION>กำหนดรายการเมนู  แอตทริบิวต์ VALUE ที่จำเป็นจะตั้งค่าที่จะส่งผ่านไปยังตัวจัดการหากเลือกรายการเมนูนี้  แท็ก <OPTION>อาจรวมแอตทริบิวต์ที่เลือกไว้ซึ่งระบุว่าองค์ประกอบถูกตรวจสอบโดยค่าเริ่มต้น</p>
<h3>ลองดูตัวอย่างเล็กๆ น้อยๆ:</h3>
 <SELECT NAME="selection">
<OPTION VALUE="ตัวเลือกที่ 1" checked>ตัวเลือกที่ 1 <OPTION VALUE="ตัวเลือกที่ 2">ตัวเลือกที่ 2 <OPTION VALUE="ตัวเลือกที่ 3">ตัวเลือกที่ 3</SELECT>
<p>ส่วนนี้กำหนดเมนูของสามองค์ประกอบ: ตัวเลือก 1 ตัวเลือก 2 และตัวเลือก 3  ตามค่าเริ่มต้น รายการ ตัวเลือก 1 จะถูกเลือกไว้  ตัวจัดการจะถูกส่งผ่านตัวแปรการเลือกซึ่งค่าสามารถเป็น option1 (ค่าเริ่มต้น), option2 หรือ option3</p>
<p>หลังจากทุกสิ่งที่เราได้เรียนรู้ไปแล้วองค์ประกอบ <TEXTAREA>อาจดูเรียบง่าย  ตัวอย่างเช่น:</p><p>
 <TEXTAREA NAME=address ROWS=5 COLS=50>และนี่คือที่อยู่ของคุณ...

ต้องระบุแอตทริบิวต์ทั้งหมด คุณลักษณะ NAME กำหนดชื่อที่จะถ่ายโอนเนื้อหาของหน้าต่างไปยังตัวจัดการ (ในตัวอย่าง - ที่อยู่) แอตทริบิวต์ ROWS กำหนดความสูงของหน้าต่างเป็นแถว (5 ในตัวอย่าง) คุณลักษณะ COLS กำหนดความกว้างของหน้าต่างเป็นอักขระ (50 ในตัวอย่าง)

ข้อความอยู่ระหว่างแท็ก และแสดงถึงเนื้อหาเริ่มต้นของหน้าต่าง ผู้ใช้สามารถแก้ไขหรือลบออกได้

สิ่งสำคัญคือต้องรู้ว่ามีตัวอักษรรัสเซียอยู่ที่หน้าต่าง เมื่อส่งผ่านไปยังตัวจัดการ พวกมันจะถูกแปลงเป็นอ็อบเจ็กต์อักขระที่สอดคล้องกัน</p> <h3>ตัวอย่าง:</h3> <p>เพื่อสาธิตการใช้รูปแบบ HTML ฉันเขียนโปรแกรมขนาดเล็กใน PHP ซึ่งอยู่ที่:</p><p>http://206.31.82.215/hp/nc/fd-win.pht</p><p>ข้อมูลต้นฉบับจะถูกถ่ายโอนไปยังโปรแกรมนี้ตามแบบฟอร์มที่อธิบายไว้ในตัวอย่างที่ 12:</p><p> <HTML> <HEAD> <TITLE>ตัวอย่างที่ 12</TITLE> </HEAD> <H1>รูปแบบที่ซับซ้อนกว่าเล็กน้อย</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>เล่าเกี่ยวกับตัวคุณให้เราฟังหน่อยสิ...</H2> <P>ไม่จำเป็นต้องให้ข้อมูลที่เป็นความจริง เพื่อวัตถุประสงค์ในการสาธิต สิ่งที่ปลอมแปลงก็ค่อนข้างเหมาะสมเช่นกัน</P> <P>ชื่อ: <INPUT TYPE=text SIZE=40 NAME=fn><BR>นามสกุล: <INPUT TYPE=text SIZE=40 NAME=ln><BR>พื้น: <INPUT TYPE=radio NAME=gender VALUE="ชาย" checked>ชาย <INPUT TYPE=radio NAME=gender VALUE="หญิง">หญิง <BR>อายุ: <INPUT TYPE=text SIZE=5 NAME=age>ปี <BR> <INPUT TYPE=submit VALUE="เรียกใช้ตัวจัดการ"></P> </FORM> </BODY> </HTML> </p><p>กรอกแบบฟอร์ม HTML คลิกที่ปุ่มและดูว่าเกิดอะไรขึ้น...</p> <p><b>เคล็ดลับเล็กน้อย <br>หรือวิธีการส่งแบบฟอร์มทางไปรษณีย์</b></p><p>ทั้งหมดนี้เป็นเรื่องปกติ คนขี้ระแวงจะพูด แต่ทำไมผู้คนถึงต้องการแบบฟอร์ม HTML ที่ไม่มีอะไรจะประมวลผลด้วย นี่เป็นความจริงบางส่วน แต่เพียงบางส่วนเท่านั้น</p> <p>HTML เป็นกลไกที่มีประสิทธิภาพพอสมควรในการส่งเนื้อหาแบบฟอร์มผ่านทางอีเมล นี่คือสิ่งที่ดูเหมือนในทางปฏิบัติ</p> <p>สมมติว่าเราเปลี่ยนตัวอย่างที่ 12 เล็กน้อย แทนที่จะเป็นสตริง</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>เราเข้าแถว</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>โปรดทราบว่าเราได้เปลี่ยนอัลกอริธึมการเข้ารหัสเป็นข้อความ/ธรรมดา ซึ่งก็คือเราได้ปิดการเข้ารหัสไปโดยสิ้นเชิง</p> <p>สมมติว่าผู้ใช้ระบุชื่อ Ivan นามสกุล Petrov เพศชาย และอายุ 22 ปี ตอนนี้คำถามคือ: จะเกิดอะไรขึ้นหากผู้ใช้คลิกที่ปุ่ม Run Handler?</p> <p>คำตอบนั้นง่าย ข้อความต่อไปนี้จะถูกส่งไปยัง user@mail.box ทางอีเมลโดยอัตโนมัติ:</p><p>Fn=อีวาน ln=เปตรอฟ เพศ=ชาย อายุ=22</p><p>ขออภัย ไม่ใช่ผู้ใช้ทุกคนจะสามารถใช้แบบฟอร์ม HTML นี้ได้ ความจริงก็คืองานเขียนข้อความและการเปิดโปรแกรมอีเมลเพื่อส่งทั้งหมดนั้นจริง ๆ แล้วเบราว์เซอร์ของผู้ใช้เข้ายึดครอง ซึ่งหมายความว่าการกำหนดค่าการเข้าถึงอินเทอร์เน็ตของผู้ใช้จะต้องรับประกันการทำงานพร้อมกันของ Hypertext Transfer Protocol และ Outgoing Mail Delivery Protocol สิ่งนี้ไม่สามารถทำได้เสมอไป อย่างไรก็ตาม แม้ว่าจะเป็นไปไม่ได้ แต่ก็ไม่มีอะไรร้ายแรงเกิดขึ้น เบราว์เซอร์จะแสดงข้อความแสดงข้อผิดพลาด</p> <p>ในปัจจุบัน แทบจะไม่มีเว็บไซต์ใดสามารถทำได้หากไม่มีองค์ประกอบอินเทอร์เฟซ เช่น ช่องป้อนข้อความ ปุ่ม สวิตช์ และช่องทำเครื่องหมาย สิ่งเหล่านี้จำเป็นสำหรับการโต้ตอบของผู้ใช้เพื่อให้เขาสามารถค้นหาไซต์โดยใช้คำหลัก เขียนความคิดเห็น ตอบแบบสำรวจ แนบรูปภาพ และทำสิ่งอื่นที่คล้ายคลึงกันอีกมากมาย เป็นแบบฟอร์มที่ช่วยให้มั่นใจว่าได้รับข้อมูลจากผู้ใช้และถ่ายโอนไปยังเซิร์ฟเวอร์ซึ่งมีการวิเคราะห์และประมวลผลแล้ว ดังนั้นหากคุณวางแผนที่จะทำสิ่งที่คล้ายกันบนเว็บไซต์ คุณจะไม่สามารถดำเนินการได้หากไม่มีแบบฟอร์ม</p> <p>แบบฟอร์มนั้นถูกสร้างขึ้นโดยใช้แท็ก <form>ซึ่งสามารถมีแท็กที่จำเป็นได้ และมีลักษณะเฉพาะด้วยพารามิเตอร์ทางเลือกต่อไปนี้:</p> <ol><li>ที่อยู่ของโปรแกรมบนเว็บเซิร์ฟเวอร์ที่จะประมวลผลเนื้อหาของข้อมูลแบบฟอร์ม</li> <li>องค์ประกอบของแบบฟอร์มซึ่งเป็นฟิลด์มาตรฐานสำหรับการป้อนข้อมูลของผู้ใช้</li> <li>ปุ่มเพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์</li> </ol><p>อนุญาตให้ใช้หลายรูปแบบบนเพจได้ แต่ไม่ควรซ้อนกัน (ตัวอย่างที่ 1)</p> <p>ตัวอย่างที่ 1: การใช้แบบฟอร์มที่ผิดพลาด</p> <p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>แบบฟอร์ม</title> </head> <body> <form action="handler.php"> <p><input name="a"> <input type="submit"></p> <form action="handler.php"> <p><input name="b"> <input type="submit"></p> </form> </form> <br> <br> </body> </html> </p><p>ก่อนที่จะส่งข้อมูล เบราว์เซอร์จะเตรียมข้อมูลเป็นคู่ชื่อ=ค่า โดยที่ชื่อจะถูกกำหนดโดยแอตทริบิวต์ชื่อของแท็ก <input>หรือแท็กที่ถูกต้องอื่น ๆ ในแบบฟอร์ม และผู้ใช้ป้อนค่าหรือตั้งค่าเป็นฟิลด์แบบฟอร์มเริ่มต้น หลังจากที่ผู้ใช้คลิกปุ่มส่ง ตัวจัดการแบบฟอร์มจะถูกเรียก ซึ่งรับข้อมูลที่ป้อนในแบบฟอร์ม จากนั้นจะดำเนินการตามที่นักพัฒนาต้องการ ตัวจัดการแบบฟอร์มมักจะเป็นโปรแกรมที่ระบุโดยแอตทริบิวต์การกระทำของแท็ก <form>. โปรแกรมสามารถเขียนเป็นภาษาฝั่งเซิร์ฟเวอร์ใดก็ได้ เช่น PHP, Python, C# ฯลฯ</p> <p>บ่อยครั้งเกิดขึ้นที่หน้าปัจจุบันที่เขียนใน PHP เป็นตัวจัดการแบบฟอร์ม ในกรณีนี้ คุณสามารถระบุค่าว่างสำหรับแอตทริบิวต์ action หรือละเว้นค่าทั้งหมดก็ได้ ในกรณีที่ง่ายที่สุดคือแท็ก <form>ไม่มีแอตทริบิวต์ใดๆ และแสดงไว้ในตัวอย่างที่ 2</p> <p>ตัวอย่างที่ 2 แบบฟอร์มอย่างง่าย</p> <p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>แบบฟอร์ม</title> </head> <body> <form> <p><input name="a"> <input type="submit"></p> </form> <br> <br> </body> </html> </p><p>คุณยังสามารถระบุที่อยู่อีเมลเป็นค่าแอตทริบิวต์การดำเนินการได้ โดยเริ่มต้นด้วยคำสำคัญ mailto: เมื่อคุณส่งแบบฟอร์ม โปรแกรมอีเมลเริ่มต้นของคุณจะถูกเปิดใช้งาน ด้วยเหตุผลด้านความปลอดภัย เบราว์เซอร์ได้รับการตั้งค่าให้ป้องกันไม่ให้ข้อมูลที่ป้อนในแบบฟอร์มถูกส่งทางไปรษณีย์อย่างรอบคอบ หากต้องการตีความข้อมูลอย่างถูกต้อง ให้ใช้แอตทริบิวต์ enctype พร้อมค่าข้อความ/ธรรมดาในแท็ก <form>(ตัวอย่างที่ 3)</p> <p>ตัวอย่างที่ 3: การส่งแบบฟอร์มทางไปรษณีย์</p> <p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>แบบฟอร์ม</title> </head> <body> <form action="mailto:vlad@сайт" enctype="text/plain"> <p><input name="a"> <input type="submit"></p> </form> <br> <br> </body> </html> </p><p>เบราว์เซอร์มีปัญหาในการทำงานกับโค้ดนี้ Firefox จะเสนอรายการแอปพลิเคชันที่เหมาะสมสำหรับการส่งเมล (รูปที่ 1), Internet Explorer จะแสดงคำเตือน (รูปที่ 2) และพยายามเปิดโปรแกรมที่เกี่ยวข้องกับเมล Opera เช่น Firefox จะเสนอรายการตัวเลือกที่เหมาะสม สำหรับการส่งจดหมาย (รูปที่ 3)</p> <p>ข้าว. 1. เปิดแอปพลิเคชันใน Firefox</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/form/02.png' width="100%" loading=lazy loading=lazy></p> <p>ข้าว. 2. คำเตือนของ Internet Explorer</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/form/03.png' height="223" width="384" loading=lazy loading=lazy></p> <p>ข้าว. 3. การเลือกโปรแกรมใน Opera</p> <p>รูปแบบ HTML เป็นองค์ประกอบอินเทอร์เฟซที่ซับซ้อน ประกอบด้วยองค์ประกอบการทำงานที่แตกต่างกัน: ช่องป้อนข้อมูล <input>และ <textarea>, รายการ <select>เคล็ดลับ ฯลฯ รหัสแบบฟอร์มทั้งหมดมีอยู่ในองค์ประกอบ <form> .</p> <p>ข้อมูลแบบฟอร์มเว็บส่วนใหญ่จะถูกส่งโดยใช้องค์ประกอบ <input>. หากต้องการป้อนข้อความหนึ่งบรรทัด ให้ใช้องค์ประกอบ <input type="text">สำหรับหลายบรรทัด - องค์ประกอบ <textarea>. องค์ประกอบ <select>สร้างรายการแบบเลื่อนลง</p> <p>องค์ประกอบ <label>สร้างป้ายกำกับสำหรับช่องแบบฟอร์ม มีสองวิธีในการจัดกลุ่มป้ายกำกับและฟิลด์ หากฟิลด์นั้นอยู่ภายในองค์ประกอบ <label>ดังนั้นจึงไม่จำเป็นต้องระบุแอตทริบิวต์ for</p><p> <label for="lastname">นามสกุล</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">นามสกุล</label> <label>นามสกุล <input type="text" name="lastname"></label> </p><p>ฟิลด์ฟอร์มสามารถแบ่งออกเป็นบล็อกลอจิคัลโดยใช้องค์ประกอบ <fieldset>. แต่ละส่วนสามารถตั้งชื่อได้โดยใช้องค์ประกอบ <legend> .</p><p> <fieldset> <legend>ข้อมูลติดต่อ</legend> <label>ชื่อ <input type="text" required></label> <label>อีเมล <input type="email" required></label> </fieldset> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>ข้าว. 1. การจัดกลุ่มฟิลด์แบบฟอร์ม</p><p>เพื่อให้ผู้ใช้เข้าใจแบบฟอร์มได้มากขึ้น ข้อความจะถูกเพิ่มลงในเขตข้อมูลของแบบฟอร์มเพื่อแสดงตัวอย่างข้อมูลที่ป้อน ข้อความประเภทนี้เรียกว่าข้อความตัวแทนและสร้างขึ้นโดยใช้แอตทริบิวต์ตัวยึดตำแหน่ง</p> <p>ต้องเน้นช่องที่ต้องกรอกด้วย ก่อน HTML5 จะใช้เครื่องหมายดอกจัน * ถัดจากชื่อฟิลด์ ข้อกำหนดใหม่แนะนำคุณลักษณะพิเศษที่จำเป็น ซึ่งช่วยให้คุณสามารถทำเครื่องหมายฟิลด์ที่ต้องระบุในระดับมาร์กอัปได้ แอ็ตทริบิวต์นี้จะสั่งให้เบราว์เซอร์ (สมมติว่ารองรับ HTML5) ไม่ให้ส่งข้อมูลหลังจากที่ผู้ใช้คลิกส่งจนกว่าฟิลด์ที่ระบุจะเสร็จสมบูรณ์</p><p> <input type="text" required placeholder="ชื่อของคุณ"> </p><p>หากต้องการเปลี่ยนลักษณะที่ปรากฏของช่องข้อความเมื่อรับโฟกัส ให้ใช้คลาสหลอกโฟกัส ตัวอย่างเช่น คุณสามารถทำให้พื้นหลังของฟิลด์ปัจจุบันเข้มขึ้น หรือเพิ่มเส้นขอบสีเพื่อให้โดดเด่นจากส่วนที่เหลือ:</p><p>อินพุต:โฟกัส ( พื้นหลัง: #eaeaea; )</p><p>คุณลักษณะ HTML5 ที่มีประโยชน์อีกประการหนึ่งคือคุณลักษณะออโต้โฟกัส ช่วยให้คุณสามารถตั้งค่าโฟกัสไปที่ฟิลด์เริ่มต้นที่ต้องการสำหรับองค์ประกอบต่างๆ ได้โดยอัตโนมัติ <input>และ <textarea>(มีเพียงองค์ประกอบเดียวเท่านั้นในแต่ละรูปแบบ)</p> <h2>ตัวอย่างการสร้างแบบฟอร์มลงทะเบียน</h2> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>การลงทะเบียน</h1> </div> <form method="post" action="form.php"> <div> <label for="name">ชื่อ</label> <input type="text" name="name" required> </div> <div class="radio">พื้น <label> <input type="radio" name="sex" value="ชาย">ชาย <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="หญิง">หญิง <div class="radio-control female"></div> </label> </div> <div> <label for="email">อีเมล</label> <input type="email" name="email" required> </div> <div> <label for="country">ประเทศ</label> <select name="country"> <option>เลือกประเทศที่คุณพำนัก</option> <option value="รัสเซีย">รัสเซีย</option> <option value="ยูเครน">ยูเครน</option> <option value="เบลารุส">เบลารุส</option> </select> <div class="select-arrow"></div> </div> <button type="submit">ส่ง</button> </form> </div> <p><b>บันทึก</b><br>action="form.php" - ลิงก์ไปยังไฟล์ตัวจัดการแบบฟอร์ม สร้างไฟล์ด้วยการเข้ารหัส UTF-8 อัปโหลดไปยังเซิร์ฟเวอร์และแทนที่ action="form.php" ด้วยเส้นทางไปยังไฟล์บนเซิร์ฟเวอร์ของคุณ</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>ข้าว. 2. ลักษณะแบบฟอร์มเริ่มต้น <p>ดังที่คุณเห็นจากรูปภาพ แต่ละองค์ประกอบของฟอร์มมีสไตล์เบราว์เซอร์เริ่มต้น มาล้างสไตล์และจัดสไตล์องค์ประกอบของแบบฟอร์มกันดีกว่า</p><p> การตัดแบบฟอร์ม ( ความกว้าง: 550px; พื้นหลัง: #ffd500; รัศมีเส้นขอบ: 20px; ) .form-wrap *(การเปลี่ยนแปลง: .1s เชิงเส้น) .profile ( ความกว้าง: 240px; ลอย: ซ้าย; การจัดตำแหน่งข้อความ: กึ่งกลาง; ช่องว่างภายใน : 30px; ) รูปแบบ ( พื้นหลัง: สีขาว; ลอย: ซ้าย; ความกว้าง: calc(100% - 240px); การขยาย: 30px; รัศมีเส้นขอบ: 0 20px 20px 0; สี: #7b7b7b; ) .form-wrap:หลัง, แบบฟอร์ม div:หลัง ( เนื้อหา: ""; แสดง: ตาราง; ชัดเจน: ทั้งสอง; ) แบบฟอร์ม div ( ขอบด้านล่าง: 15px; ตำแหน่ง: ญาติ; ) h1 ( ขนาดตัวอักษร: 24px; น้ำหนักแบบอักษร: 400; ตำแหน่ง: ญาติ ; ขอบด้านบน: 50px; ) h1:หลัง (เนื้อหา: "\f138"; ขนาดตัวอักษร: 40px; ตระกูลแบบอักษร: FontAwesome; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50px; ซ้าย: 50%; แปลงร่าง: แปลX(-50 %); ) /********************** การกำหนดสไตล์ขององค์ประกอบแบบฟอร์ม ******************* * **/ label, span ( display: block; font-size: 14px; margin-bottom: 8px; ) อินพุต, อินพุต ( border-width: 0; เค้าร่าง: ไม่มี; ระยะขอบ: 0; ความกว้าง: 100%; การขยาย: 10px 15px; พื้นหลัง: #e6e6e6; ) อินพุต: โฟกัส, อินพุต: โฟกัส ( กล่องเงา: สิ่งที่ใส่เข้าไป 0 0 0 2px rgba (0,0,0,.2); ) .radio label ( ตำแหน่ง: สัมพันธ์; padding-left: 50px; เคอร์เซอร์: ตัวชี้; ความกว้าง: 50%; float: left; line-height: 40px; ) .radio อินพุต ( ตำแหน่ง: แน่นอน; ความทึบ: 0; ) .radio -control ( ตำแหน่ง: สัมบูรณ์; บน: 0; ซ้าย: 0; ความสูง: 40px; ความกว้าง: 40px; พื้นหลัง: #e6e6e6; รัศมีเส้นขอบ: 50%; การจัดตำแหน่งข้อความ: กึ่งกลาง; ) .male:before ( เนื้อหา: " \f222"; font-family: FontAwesome; font-weight:old; ) .หญิง:before ( content: "\f221"; font-family: FontAwesome; font-weight:old; ) .radio label:hover input ~ . การควบคุมด้วยวิทยุ, .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( color: สีแดง; ) เลือก ( ความกว้าง: 100%; เคอร์เซอร์: ตัวชี้; การขยาย: 10px 15px; โครงร่าง: 0; เส้นขอบ: 0; พื้นหลัง: #e6e6e6; สี: #7b7b7b; -webkit-appearance: ไม่มี; /* ยกเลิกการเลือก webkit -browsers */ -moz-appearance: none; /*uncheck ใน Mozilla Firefox*/ ) select::-ms-expand ( display: none; /*uncheck in IE*/ ) .select-arrow ( position: ABSOLUTE ; ด้านบน: 38px; ขวา: 15px; ความกว้าง: 0; ความสูง: 0; ตัวชี้เหตุการณ์: ไม่มี; /*เปิดใช้งานการแสดงรายการเมื่อคุณคลิกที่ลูกศร*/ border-style: solid; ความกว้างของเส้นขอบ: 8px 5px 0 5px; เส้นขอบสี: #7b7b7b โปร่งใส โปร่งใส โปร่งใส; ) ปุ่ม ( ช่องว่างภายใน: 10px 0; ความกว้างของเส้นขอบ: 0; จอแสดงผล: บล็อก; ความกว้าง: 120px; ระยะขอบ: 25px auto 0; พื้นหลัง: #60e6c5; สี: สีขาว; ขนาดตัวอักษร: 14px; เค้าร่าง: ไม่มี; แปลงข้อความ : ตัวพิมพ์ใหญ่; ) /********************** เพิ่มความสามารถในการปรับตัวให้เข้ากับรูปแบบ ****************** ** **/ @media (ความกว้างสูงสุด: 600px) ( .form-wrap (ระยะขอบ: 20px อัตโนมัติ; ความกว้างสูงสุด: 550px; ความกว้าง:100%;) .profile, รูปแบบ (ลอย: ไม่มี; ความกว้าง: 100% ;) h1 (ระยะขอบบน: อัตโนมัติ; ระยะขอบล่าง: 50px;) แบบฟอร์ม (รัศมีเส้นขอบ: 0 0 20px 20px;) )</p><p><b>ไฟล์ Form.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: your_email." "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! Empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo "ขอบคุณ! คุณลงทะเบียนสำเร็จแล้ว"; ) ?></p><p><b>บันทึก</b><br>ในตัวแปร $subject ให้ระบุข้อความที่จะแสดงเป็นชื่อเรื่องของตัวอักษร <br>Your_name - ที่นี่คุณสามารถระบุชื่อที่จะแสดงในฟิลด์ "จากใครเป็นจดหมายจาก" <br>แทนที่ your_site_url ด้วยที่อยู่ของเว็บไซต์ด้วยแบบฟอร์มลงทะเบียน <br>แทนที่ your_email ด้วยที่อยู่อีเมลของคุณ <br>$headers .= "สำเนาลับ: your_email" "\r\n"; ส่ง BCC ไปยังที่อยู่อีเมลของคุณ</p> <br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </article> <div class="post-bottom"> <div class="post-share"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir" data-counter=""></div> </div> </div> <div class='yarpp-related'> <div class="related-items"> <div class="headline">ไม่พบคำตอบสำหรับคำถามของคุณ? ดูที่นี่</div> <div class="items"> <div class="related-item"> <a class="related-item__title" href="https://appcube.ru/th/apparatnye-neispravnosti-kompyutera-tipichnye-polomki-pk-proverka.html"><img src="/uploads/121dcd97501640fb553e9eaceeb8446d.jpg" width="120" height="120" alt="พีซีทั่วไปพัง การตรวจสอบเมนบอร์ด" class="related-item__image" / loading=lazy loading=lazy>พีซีทั่วไปพัง การตรวจสอบเมนบอร์ด</a> <div class="related-item__comments"><span></span></div> </div> <div class="related-item"> <a class="related-item__title" href="https://appcube.ru/th/vliyanie-emkosti-kesh-pamyati-na-proizvoditelnost-core-i5.html"><img src="/uploads/42e2e0ab3fd7426e268740f473741070.jpg" width="120" height="120" alt="แคชโปรเซสเซอร์ส่งผลต่อ L1 L2 L3 อย่างไร เป็นไปได้หรือไม่ที่จะเพิ่มหน่วยความจำแคชของโปรเซสเซอร์" class="related-item__image" / loading=lazy loading=lazy>แคชโปรเซสเซอร์ส่งผลต่อ L1 L2 L3 อย่างไร เป็นไปได้หรือไม่ที่จะเพิ่มหน่วยความจำแคชของโปรเซสเซอร์</a> <div class="related-item__comments"><span></span></div> </div> <div class="related-item"> <a class="related-item__title" href="https://appcube.ru/th/chto-takoe-cifrovoi-vyhod-zvuka-spdif-out-na-materinskoi-plate-razmeshchenie.html"><img src="/uploads/62dace9857480474e4a23bc47c4d2346.jpg" width="120" height="120" alt="Spdif ออกบนเมนบอร์ด" class="related-item__image" / loading=lazy loading=lazy>Spdif ออกบนเมนบอร์ด</a> <div class="related-item__comments"><span></span></div> </div> </div> </div> </div> <div style="text-align: center; margin-top: 15px; margin-bottom: 15px; " id="vanna-1965575812"><div class="adsense"><script type="text/javascript">ga_1();</script></div></div> </main> <aside class="sidebar"> <div class="advices" data-theme="vannapedia_v.3"> <div class="headline"></div> <div class="advices-content"> <img src="/uploads/2e929bbf807c1c2e91559019b6c891f4.jpg" width="120" height="120" alt="การสร้างและทำงานกับแบบฟอร์มใน html" class="advices__image" / loading=lazy loading=lazy> <div class="advices__title" data-id="3334"><a href="https://appcube.ru/th/kak-sozdat-soobshchenie-bez-ispolzovaniya-standartnoi-formy-sozdanie-i.html">การสร้างและทำงานกับแบบฟอร์มใน html</a></div> </div> </div> <div class="vk-widget" id="text-3"> <div class="textwidget"><script type="text/javascript" src="//vk.com/js/api/openapi.js?130"></script> <div id="vk_groups"></div> </div> </div> <div class="sidebar-questions"> <div class="headline">ใหม่</div> <ul> <li><a href="https://appcube.ru/th/minimalnaya-moshchnost-bloka-pitaniya-dlya-kompyutera-kak-uznat.html" >วิธีค้นหาพลังงานของแหล่งจ่ายไฟบนคอมพิวเตอร์</a></li> <li><a href="https://appcube.ru/th/kalkulyator-elektropitaniya-kompyutera-kak-rasschitat-moshchnost-bloka.html" >วิธีการคำนวณกำลังของแหล่งจ่ายไฟของคอมพิวเตอร์</a></li> <li><a href="https://appcube.ru/th/kak-ispolzovat-cifrovuyu-kameru-kak-veb-kameru-kakim-obrazom.html" >วิธีเชื่อมต่อเว็บแคมเข้ากับคอมพิวเตอร์โดยไม่ต้องโทรหาช่างเทคนิคหรือเพื่อน</a></li> <li><a href="https://appcube.ru/th/kak-vkontakte-ubrat-cheloveka-iz-chernogo-spiska-kak-udalit-polzovatelya.html" >วิธีลบผู้ใช้ออกจากบัญชีดำใน Odnoklassniki</a></li> <li><a href="https://appcube.ru/th/kak-vytashchit-cheloveka-iz-chernogo-spiska-kak-ubrat-kontakt-iz-chernogo.html" >วิธีลบผู้ติดต่อออกจากบัญชีดำบน Android</a></li> <li><a href="https://appcube.ru/th/kak-otkryt-samsung-galaxy-a3-kak-otkryt-kryshku-na-samsung-galaksi-a3.html" >วิธีเปิดฝาบน Samsung Galaxy A3</a></li> </ul> </div> <div class="section"> <div id="macire1" style="height:500px;width:240px;" align="center"></div> </div> <div class="section"> <div class="headline">บทความยอดนิยม</div> <ul class="sidebar-posts"> <li><a href="https://appcube.ru/th/kak-otformatirovat-polnostyu-kompyuter-kak-vypolnit.html"><img src="/uploads/f74c11076f24be8ffc445671a5e5d3d3.jpg" width="80" height="80" alt="วิธีฟอร์แมตฮาร์ดไดรฟ์ของคุณ" / loading=lazy loading=lazy>วิธีฟอร์แมตฮาร์ดไดรฟ์ของคุณ</a></li> <li><a href="https://appcube.ru/th/udalit-vseh-iz-chernogo-spiska-vkontakte-kak-udalit-podpischikov-v.html"><img src="/uploads/ea73d8e6c5632c7fd0d783b0a34fd8fc.jpg" width="80" height="80" alt="วิธีลบสมาชิกในผู้ติดต่อโดยไม่ขึ้นบัญชีดำ" / loading=lazy loading=lazy>วิธีลบสมาชิกในผู้ติดต่อโดยไม่ขึ้นบัญชีดำ</a></li> <li><a href="https://appcube.ru/th/kak-kopirovat-tablicy-iz-interneta.html"><img src="/uploads/078b6b2f5e424162645996e596ee27e1.jpg" width="80" height="80" alt="วิธีคัดลอกตารางจากอินเทอร์เน็ต" / loading=lazy loading=lazy>วิธีคัดลอกตารางจากอินเทอร์เน็ต</a></li> </ul> </div> <div class="section"> <div class="headline">ใหม่บนเว็บไซต์</div> <ul class="sidebar-posts sidebar-photo"> <li><a href="https://appcube.ru/th/moi-mir-pochta-vhodyashchie-kak-uznat-svoi-adres-elektronnoi-pochty.html">วิธีค้นหาที่อยู่อีเมลของคุณ</a></li> <li><a href="https://appcube.ru/th/kak-aktivirovat-pult-ot-televizora-kak-nastroit-pult-na-drugoi.html">วิธีการตั้งค่ารีโมทคอนโทรลสำหรับทีวีเครื่องอื่น</a></li> <li><a href="https://appcube.ru/th/kak-mozhno-uvidet-udalennye-soobshcheniya-vk-vosstanovlenie-perepiski-vk.html">การกู้คืนการติดต่อ VK</a></li> <li><a href="https://appcube.ru/th/elektoralnaya-pochta-kak-uznat-svoi-adres-elektronnoi-pochty-chto-takoe.html">วิธีค้นหาที่อยู่อีเมลของคุณ</a></li> <li><a href="https://appcube.ru/th/css-kak-obrezat-izobrazhenie-s-izmeneniem-proporcii-kak-szhat-rastyanut.html">วิธีย่อ ยืด ครอบตัด แปลง และปรับขนาดรูปภาพด้วย CSS</a></li> </ul> </div> </aside> </div> <footer class="footer"> <nav class="footer__nav"><ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1219"><a href="https://appcube.ru/th/">ใหม่</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22167"><a href="https://appcube.ru/th/apparatnye-neispravnosti-kompyutera-tipichnye-polomki-pk-proverka.html">พีซีทั่วไปพัง การตรวจสอบเมนบอร์ด</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22165"><a href="https://appcube.ru/th/vliyanie-emkosti-kesh-pamyati-na-proizvoditelnost-core-i5.html">แคชโปรเซสเซอร์ส่งผลต่อ L1 L2 L3 อย่างไร เป็นไปได้หรือไม่ที่จะเพิ่มหน่วยความจำแคชของโปรเซสเซอร์</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22164"><a href="https://appcube.ru/th/chto-takoe-cifrovoi-vyhod-zvuka-spdif-out-na-materinskoi-plate-razmeshchenie.html">Spdif ออกบนเมนบอร์ด</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22163"><a href="https://appcube.ru/th/vybor-operativnoi-pamyati-po-platformam-kakuyu-pamyat-kupit-dlya-moego.html">ฉันควรซื้อหน่วยความจำใดสำหรับโปรเซสเซอร์ของฉัน</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1230"><a href="https://appcube.ru/th/">เป็นที่นิยม</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22162"><a href="https://appcube.ru/th/sozdanie-formy-s-pomoshchyu-html-sozdanie-i-rabota-s-formami-v-html-dopolnitelnye-elementy-i-atribut.html">การสร้างและทำงานกับแบบฟอร์มใน html</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22161"><a href="https://appcube.ru/th/kak-sozdat-soobshchenie-bez-ispolzovaniya-standartnoi-formy-sozdanie-i.html">การสร้างและทำงานกับแบบฟอร์มใน html</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22160"><a href="https://appcube.ru/th/minimalnaya-moshchnost-bloka-pitaniya-dlya-kompyutera-kak-uznat.html">วิธีค้นหาพลังงานของแหล่งจ่ายไฟบนคอมพิวเตอร์</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22159"><a href="https://appcube.ru/th/kalkulyator-elektropitaniya-kompyutera-kak-rasschitat-moshchnost-bloka.html">วิธีการคำนวณกำลังของแหล่งจ่ายไฟของคอมพิวเตอร์</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22158"><a href="https://appcube.ru/th/kak-ispolzovat-cifrovuyu-kameru-kak-veb-kameru-kakim-obrazom.html">วิธีเชื่อมต่อเว็บแคมเข้ากับคอมพิวเตอร์โดยไม่ต้องโทรหาช่างเทคนิคหรือเพื่อน</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22156"><a href="https://appcube.ru/th/kak-vkontakte-ubrat-cheloveka-iz-chernogo-spiska-kak-udalit-polzovatelya.html">วิธีลบผู้ใช้ออกจากบัญชีดำใน Odnoklassniki</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22155"><a href="https://appcube.ru/th/kak-vytashchit-cheloveka-iz-chernogo-spiska-kak-ubrat-kontakt-iz-chernogo.html">วิธีลบผู้ติดต่อออกจากบัญชีดำบน Android</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22154"><a href="https://appcube.ru/th/kak-otkryt-samsung-galaxy-a3-kak-otkryt-kryshku-na-samsung-galaksi-a3.html">วิธีเปิดฝาบน Samsung Galaxy A3</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1236"><a href="https://appcube.ru/th/">เราแนะนำ</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22153"><a href="https://appcube.ru/th/kak-otformatirovat-polnostyu-kompyuter-kak-vypolnit.html">วิธีฟอร์แมตฮาร์ดไดรฟ์ของคุณ</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22152"><a href="https://appcube.ru/th/udalit-vseh-iz-chernogo-spiska-vkontakte-kak-udalit-podpischikov-v.html">วิธีลบสมาชิกในผู้ติดต่อโดยไม่ขึ้นบัญชีดำ</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22151"><a href="https://appcube.ru/th/kak-kopirovat-tablicy-iz-interneta.html">วิธีคัดลอกตารางจากอินเทอร์เน็ต</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22149"><a href="https://appcube.ru/th/moi-mir-pochta-vhodyashchie-kak-uznat-svoi-adres-elektronnoi-pochty.html">วิธีค้นหาที่อยู่อีเมลของคุณ</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22148"><a href="https://appcube.ru/th/kak-aktivirovat-pult-ot-televizora-kak-nastroit-pult-na-drugoi.html">วิธีการตั้งค่ารีโมทคอนโทรลสำหรับทีวีเครื่องอื่น</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22147"><a href="https://appcube.ru/th/kak-mozhno-uvidet-udalennye-soobshcheniya-vk-vosstanovlenie-perepiski-vk.html">การกู้คืนการติดต่อ VK</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22146"><a href="https://appcube.ru/th/elektoralnaya-pochta-kak-uznat-svoi-adres-elektronnoi-pochty-chto-takoe.html">วิธีค้นหาที่อยู่อีเมลของคุณ</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22168"><a href="https://appcube.ru/th/css-kak-obrezat-izobrazhenie-s-izmeneniem-proporcii-kak-szhat-rastyanut.html">วิธีย่อ ยืด ครอบตัด แปลง และปรับขนาดรูปภาพด้วย CSS</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-6898"><a href="https://appcube.ru/th/">เกี่ยวกับเว็บไซต์</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6900"><a href="">เกี่ยวกับเว็บไซต์</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6901"><a href="">การโฆษณาบนเว็บไซต์</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6902"><a href="https://appcube.ru/th/feedback.html">รายชื่อผู้ติดต่อ</a></li> </ul> </li> </ul></nav> <div class="footer-bottom"> <div class="footer-left"> <div class="foot__logo"> <div class="footer__logo-sitename">appcube.ru <span>รุ</span></div> </div> <style> .foot__logo { min-height: 35px; margin: 0 0 11px -79px; padding: 9px 0 0 79px; text-decoration: none; } </style> <p>© 2023 สงวนลิขสิทธิ์</p> <p>เว็บไซต์เกี่ยวกับคอมพิวเตอร์</p> <ul class="footer-bottom__nav"> <li><a href="" >การโฆษณาในโครงการ</a></li> </ul> </div> <div class="footer-buttons"> </div> <ul class="footer__soc"> <li><a href="http://vk.com/" target="_blank" class="vk">ติดต่อกับ</a></li> <li><a href="http://ok.ru/" target="_blank" class="ok">เพื่อนร่วมชั้น</a></li> <li><a href="http://www.facebook.com/" target="_blank" class="fb">เฟสบุ๊ค</a></li> <li><a href="https://twitter.com/" target="_blank" class="twi">ทวิตเตอร์</a></li> </ul> <div class="footer-right"> <div class="footer__note"></div> <div class="footer__counters" id="text-2"> <div class="textwidget"></div> </div> </div> </div> </footer> </div> </div> <link rel='stylesheet' id='wp-lightbox-bank.css-css' href='/wp-content/plugins/wp-lightbox-bank/assets/css/wp-lightbox-bank.css?ver=4.8.3' type='text/css' media='all' /> <script type='text/javascript' src='https://appcube.ru/wp-content/themes/vannapedia_v.3/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.3'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://appcube.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-fixed", "margin_top" : 10, "margin_bottom" : 0, "stop_id" : "respond", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-4'] } ; </script> <script type='text/javascript' src='https://appcube.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://appcube.ru/wp-content/plugins/wp-lightbox-bank/assets/js/wp-lightbox-bank.js?ver=4.8.3'></script> <script type='text/javascript' src='https://appcube.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0'></script> <br> <br> </body> </html>