วิธีสร้างข้อความโดยไม่ต้องใช้แบบฟอร์มมาตรฐาน การสร้างและทำงานกับแบบฟอร์มใน html ตัวอย่าง: แบบฟอร์ม HTML อย่างง่าย

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

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

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

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

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

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

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

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

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

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

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

ใส่ชื่อของคุณ:



ใส่นามสกุล:

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

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

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

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

โครงสร้างรายการ:

<
ข้อความ
ข้อความ

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

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

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

ข้อความ

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

ข้อความ

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

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

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

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

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

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

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

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

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

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

ขณะสำรวจเว็บไซต์ ผู้ใช้ส่วนใหญ่เพียงแค่คลิกเท่านั้น ลิงค์เพื่อนำทางหน้าเว็บ

แต่ก็ชัดเจนว่าบางครั้งผู้ใช้จำเป็นต้องจัดเตรียมข้อมูลของตนเอง ช่องป้อนข้อมูล. การโต้ตอบประเภทนี้ได้แก่:

• การลงทะเบียนและเข้าสู่ระบบบนเว็บไซต์
• การป้อนข้อมูลส่วนบุคคล (ชื่อ ที่อยู่ ข้อมูลบัตรเครดิต ฯลฯ)
• การกรองเนื้อหา (โดยใช้รายการแบบเลื่อนลง ช่องทำเครื่องหมาย ฯลฯ)
• ทำการค้นหา
• กำลังดาวน์โหลดไฟล์

เพื่อรองรับความต้องการเหล่านี้ HTML จึงเสนอการโต้ตอบ การควบคุมแบบฟอร์ม:

• ช่องข้อความ (สำหรับหนึ่งบรรทัดขึ้นไป)
• สวิตช์;
• ช่องทำเครื่องหมาย;
• รายการแบบหล่นลง
• วิดเจ็ตสำหรับการดาวน์โหลด
• ปุ่มส่ง

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

องค์ประกอบ

เป็นองค์ประกอบบล็อกที่กำหนด เชิงโต้ตอบส่วนหนึ่งของหน้าเว็บ เป็นผลให้การควบคุมทั้งหมด (เช่น , หรือ <button>) จะต้องเป็น <i>ข้างใน</i>องค์ประกอบ <form> .</p><p>แอตทริบิวต์ HTML สองรายการ <b>จำเป็น</b>:</p><ul><li>การดำเนินการประกอบด้วยที่อยู่ที่กำหนด <i>ที่ไหน</i>ข้อมูลแบบฟอร์มจะถูกส่งไป</li><li>วิธีการอาจเป็น GET หรือ POST และกำหนดว่า <i>ยังไง</i>ข้อมูลแบบฟอร์มจะถูกส่งไป</li> </ul><p>โดยปกติแล้วข้อมูลแบบฟอร์มจะถูกส่งไปยัง <b>เซิร์ฟเวอร์</b>. <i>ยังไง</i>ข้อมูลนี้จะถูกประมวลผลนอกเหนือขอบเขตของคู่มือนี้</p><p>คิดว่าฟอร์มเป็นคอลเลกชันของการควบคุมที่ทำงานร่วมกันเพื่อให้บรรลุผลสำเร็จ <b>หนึ่ง</b>การดำเนินการ. หากคุณเขียนแบบฟอร์มเข้าสู่ระบบไซต์ คุณอาจมี <b>สาม</b>ฟิลด์:</p><ul><li>ช่องอีเมล <input type="email"> </li><li>ช่องรหัสผ่าน <input type="password"> </li><li>ปุ่มส่ง <input type="submit"> </li> </ul><p>องค์ประกอบ HTML ทั้งสามนี้จะรวมอยู่ในรูปแบบเดียว <span><form action="/login" method="POST"> </span>.</p><p>ในทำนองเดียวกัน คุณสามารถเพิ่มแบบฟอร์มลงทะเบียนบนหน้า HTML เดียวกันในองค์ประกอบแยกต่างหากได้ <form> .</p><h2>ช่องข้อความ</h2><p>ต้องการเกือบทุกรูปแบบ <b>ข้อความ</b>อินพุตจากผู้ใช้เพื่อป้อนชื่อ ที่อยู่อีเมล รหัสผ่าน ที่อยู่ ฯลฯ ช่องข้อความของแบบฟอร์มมีหลายรูปแบบ</p><p>แม้ว่าฟิลด์เหล่านี้จะคล้ายกันมากและอนุญาตให้ผู้ใช้ป้อนข้อความประเภทใดก็ได้ (แม้จะไม่ถูกต้องก็ตาม) ประเภทของพวกเขาก็มีข้อมูลเฉพาะเจาะจง <b>ความหมาย</b>สำหรับการป้อนข้อมูลเพื่อกำหนดว่าข้อมูลใดในฟิลด์ <b>ต้อง</b>บรรจุ.</p><p>เบราว์เซอร์อาจเปลี่ยนอินเทอร์เฟซของการควบคุมเล็กน้อยในภายหลังเพื่อปรับปรุง <i>การโต้ตอบ</i>หรือแนะนำเนื้อหาที่คาดหวัง</p><p>ตัวอย่างเช่น ช่องรหัสผ่านจะแสดงจุดแทนสัญลักษณ์ และช่องตัวเลขช่วยให้คุณเพิ่ม/ลดค่าได้โดยใช้ปุ่มขึ้นและลง</p><h2>ตัวยึดตำแหน่ง</h2><p>ช่องข้อความสามารถแสดงได้ <b>มีการชี้นำ</b>ข้อความที่จะหายไปทันทีที่ป้อนข้อความบางส่วน</p><p> <input type="text" placeholder="ใส่ชื่อของคุณ"> </p><p>หากคุณเริ่มพิมพ์อะไรบางอย่าง คุณจะเห็นข้อความ “ป้อนชื่อของคุณ” หายไป</p><h2><label></h2><p>เนื่องจากองค์ประกอบของแบบฟอร์มนั้นไม่ได้อธิบายมากนัก จึงมักจะนำหน้าด้วยข้อความ <b>ฉลาก</b>.</p><p> <label>อีเมล</label> <input type="email"> </p><p>แม้ว่าตัวยึดตำแหน่งจะให้คำแนะนำบางอย่างเกี่ยวกับเนื้อหาที่คาดหวังแล้ว แต่ป้ายกำกับมีข้อดีคือยังคงมองเห็นได้ตลอดเวลา และสามารถใช้ร่วมกับองค์ประกอบของแบบฟอร์มประเภทอื่นๆ เช่น ช่องทำเครื่องหมายหรือปุ่มตัวเลือก</p><p>แม้ว่าคุณจะสามารถใช้ย่อหน้าสั้น ๆ เพื่ออธิบายองค์ประกอบของแบบฟอร์มได้โดยใช้ <label>มีความหมายถูกต้องมากกว่าเนื่องจากมีอยู่ในรูปแบบเท่านั้น <label>ยังสามารถเชื่อมโยงกับองค์ประกอบแบบฟอร์มเฉพาะโดยใช้แอตทริบิวต์ for ที่สอดคล้องกับค่า ID ของฟิลด์</p><p> <label for="first_name">ชื่อ</label> <input id="first_name" type="text"> </p><p>เมื่อคุณคลิกที่ป้าย โฟกัสจะไปที่ช่องข้อความและวางเคอร์เซอร์ไว้ข้างใน จนถึงตอนนี้ชุดรวมนี้ดูเหมือนไร้ประโยชน์ แต่จะมีประโยชน์กับช่องทำเครื่องหมายและสวิตช์</p><h2>ช่องทำเครื่องหมาย</h2><p><b>ช่องทำเครื่องหมาย</b>- องค์ประกอบเหล่านี้เป็นองค์ประกอบของฟอร์มที่มีเพียงสองสถานะ: เปิดหรือปิด โดยทั่วไปแล้วจะอนุญาตให้ผู้ใช้พูดว่า "ใช่" หรือ "ไม่" กับบางสิ่ง</p><p> <input type="checkbox">จดจำฉัน</p><p>เนื่องจากการคลิกช่องทำเครื่องหมายเล็กๆ อาจเป็นเรื่องยาก ขอแนะนำให้วางช่องทำเครื่องหมายและคำอธิบายไว้ด้านใน <label> .</p><p> <label> <input type="checkbox">ฉันเห็นด้วยกับเงื่อนไข</label> </p><p>คุณสามารถคลิกข้อความ "ฉันยอมรับข้อกำหนด" เพื่อสลับช่องทำเครื่องหมาย</p><p>ตามค่าเริ่มต้น ช่องทำเครื่องหมายจะถูกปิดใช้งาน คุณสามารถทำเครื่องหมายว่าเปิดใช้งานได้ง่ายๆ โดยใช้แอตทริบิวต์ที่เลือก</p><p> <label> <input type="checkbox" checked>ใช้ที่อยู่สำหรับการเรียกเก็บเงินของฉัน</label> </p><h2>สวิตช์</h2><p>คุณสามารถให้ผู้ใช้ <b>รายการตัวเลือก</b>สามารถเลือกได้โดยใช้สวิตช์</p><p>เพื่อให้องค์ประกอบของแบบฟอร์มนี้ทำงานได้ โค้ด HTML ของคุณต้อง <b>กลุ่ม</b>รายการปุ่มตัวเลือกพร้อมกัน ซึ่งทำได้โดยใช้ค่าเดียวกันสำหรับแอตทริบิวต์ชื่อ:</p><p> <label>สถานะครอบครัว</label> <label> <input type="radio" name="status">เดี่ยว</label> <label> <input type="radio" name="status">แต่งงานแล้ว</label> <label> <input type="radio" name="status">หย่าร้าง</label> <label> <input type="radio" name="status">พ่อม่าย</label> </p><p>เนื่องจากปุ่มตัวเลือกทั้งหมดใช้ค่าเดียวกันสำหรับแอตทริบิวต์ name (ในกรณีนี้คือค่าของ status ) การเลือกหนึ่งตัวเลือกจะแทนที่ตัวเลือกอื่นๆ ทั้งหมด สวิตช์คือ <b>ยกเว้นซึ่งกันและกัน</b>.</p><h3>ความแตกต่างระหว่างปุ่มตัวเลือกและช่องทำเครื่องหมาย</h3><p>แม้ว่าจะมีช่องทำเครื่องหมายอยู่ก็ตาม <b>ด้วยตัวเอง</b>สวิตช์จะปรากฏเฉพาะในรูปแบบเท่านั้น <b>รายการ</b>(ซึ่งหมายถึงอย่างน้อยสองตัวเลือก)</p><p>นอกจากนี้การคลิกช่องทำเครื่องหมายคือ <b>โดยพลการ</b>ขณะที่เลือกปุ่มตัวเลือกปุ่มใดปุ่มหนึ่งอยู่ <b>ภาคบังคับ</b>. ด้วยเหตุนี้จึงไม่สามารถปิดสวิตช์ได้หากคุณเลือกตัวเลือกที่ใกล้เคียงที่สุด ในท้ายที่สุดจะมีการเลือกสวิตช์ตัวใดตัวหนึ่งเสมอ</p><h2>เมนูแบบเลื่อนลง</h2><p>หากจำนวนตัวเลือกที่เลือกใช้พื้นที่มากเกินไป คุณสามารถใช้เมนูแบบเลื่อนลงได้ <select> .</p><p>ทำงานคล้ายกับสวิตช์ มีเพียงเค้าโครงเท่านั้นที่แตกต่างกัน</p><p> <select> <option>มกราคม</option> <option>กุมภาพันธ์</option> <option>มีนาคม</option> <option>เมษายน</option> <option>อาจ</option> <option>มิถุนายน</option> <option>กรกฎาคม</option> <option>สิงหาคม</option> <option>กันยายน</option> <option>ตุลาคม</option> <option>พฤศจิกายน</option> <option>ธันวาคม</option> </select> </p><h3>การเลือกหลายรายการจากเมนูแบบเลื่อนลง</h3><p>หากคุณเพิ่มแอตทริบิวต์หลายรายการ คุณสามารถระบุความสามารถในการเลือกตัวเลือกหลายรายการได้</p><p> <label>คุณใช้เบราว์เซอร์อะไร?</label> <select multiple> <option>Google Chrome</option> <option>อินเทอร์เน็ตเอ็กซ์พลอเรอร์</option> <option>มอซซิลา ไฟร์ฟอกซ์</option> <option>โอเปร่า</option> <option>ซาฟารี</option> </select> </p><p>เลือกหลายตัวเลือกโดยกด Ctrl (หรือ ⌘) ค้างไว้แล้วคลิก นี่อาจเป็นทางเลือกที่ดีในการใช้ช่องทำเครื่องหมายหลายช่องต่อบรรทัด</p><h2>ตัวอย่าง: แบบฟอร์มลงทะเบียนแบบเต็ม</h2> <form action="/signup" method="POST"> <p> <label>อุทธรณ์</label> <label> <input type="radio" name="title" value="นาย">นาย.</label> <label> <input type="radio" name="title" value="นาง">นาง.</label> </p> <p> <label>ชื่อ</label> <input type="text" name="first_name"> </p> <p> <label>นามสกุล</label> <input type="text" name="last_name"> </p> <p> <label>อีเมล</label> <input type="email" name="email"> </p> <p> <label>โทรศัพท์</label> <input type="tel" name="phone"> </p> <p> <label>รหัสผ่าน</label> <input type="password" name="password"> </p> <p> <label>ยืนยันรหัสผ่าน</label> <input type="password" name="password_confirm"> </p> <p> <label>ประเทศ</label> <select name="country"> <option>แคนาดา</option> <option>ฝรั่งเศส</option> <option>เยอรมนี</option> <option>อิตาลี</option> <option>ญี่ปุ่น</option> <option>รัสเซีย</option> <option>บริเตนใหญ่</option> <option>สหรัฐอเมริกา</option> </select> </p> <p> <label> <input type="checkbox" name="terms">ผมเห็นด้วยกับข้อกำหนดการใช้งาน</label> </p> <p> <button>ลงทะเบียน</button> </p> </form> <p>มีองค์ประกอบแบบฟอร์มอื่นๆ ให้เลือกด้วย แต่เราได้ดูองค์ประกอบที่ใช้มากที่สุดแล้ว</p> <p>ฉันแน่ใจอย่างยิ่งว่าในขณะที่ใช้งานอินเทอร์เน็ต คุณได้พบกับแบบฟอร์มต่างๆ เช่น แบบฟอร์มลงทะเบียน แบบฟอร์มเข้าสู่ระบบ แบบฟอร์มตอบรับ และอื่นๆ อีกมากมาย <b>แบบฟอร์ม HTML</b>.</p><p>จริงๆ แล้ว แบบฟอร์มประกอบด้วยองค์ประกอบอินพุตต่างๆ: ช่องข้อความ พื้นที่ข้อความ ปุ่มตัวเลือก ปุ่มตัวเลือก ปุ่ม และอื่นๆ</p><p>และในบทความนี้คุณจะได้เรียนรู้วิธีสร้างไฟล์ .</p><p>ขั้นแรกให้สร้างแบบง่ายๆ <b>หน้า HTML</b>ซึ่งเพิ่มคอนเทนเนอร์ (tag <b><div> </b>) จัดเนื้อหาให้อยู่ตรงกลาง ฉันหวังว่าคุณจะสามารถรับมือกับเรื่องนี้ได้โดยไม่ยาก</p><p>ทีนี้มาดูฟอร์มกันดีกว่า แบบฟอร์มเริ่มต้นด้วยแท็ก <b><form> </b>จึงลงท้ายด้วยแท็กปิด <b></form> </b>. แท็กนี้มีคุณสมบัติหลายอย่างที่เป็นที่ต้องการอย่างมากในการกรอก แต่ก่อนอื่น เรามาสร้างแบบฟอร์มง่ายๆ พร้อมแอตทริบิวต์ของแท็กกันก่อน <b><form> </b>เพื่อให้ท่านเข้าใจจุดประสงค์ของแต่ละรายการได้ชัดเจนยิ่งขึ้น:</p><p> <form name = "form1" action = "script/request.php" method = "post"><br></form> </p><p>ที่นี่เราจะเริ่มต้นคำอธิบายของแบบฟอร์มซึ่งมีคุณลักษณะดังต่อไปนี้:</p><p>1) คุณสมบัติ " <b>ชื่อ</b>" ค่าของคุณลักษณะนี้หมายถึงชื่อ <b>แบบฟอร์ม HTML</b>. เกิดคำถามว่าเหตุใดจึงจำเป็น? คำตอบนั้นง่ายมาก: หากคุณไม่ได้ใช้แบบฟอร์มเดียว แต่มีหลายรูปแบบเพื่อที่จะแยกแบบฟอร์มหนึ่งออกจากอีกรูปแบบหนึ่งคุณต้องตั้งชื่อที่แตกต่างกัน และจำเป็นต้องมีชื่อเพื่อเข้าถึงแบบฟอร์มเช่นผ่าน <b>จาวาสคริปต์</b>. ฉันจะบอกความลับเล็กน้อยแก่คุณซึ่งฉันไม่แนะนำให้คุณใช้ แต่เพื่อความซื่อสัตย์ฉันจะบอกคุณเกี่ยวกับเรื่องนี้ ที่จริงแล้ว แบบฟอร์มสามารถแยกแยะได้ง่ายโดยไม่ต้องใช้ชื่อ ดังนั้น โดยทั่วไปแล้ว ชื่อแบบฟอร์มจึงไม่จำเป็นเลย แต่ฉัน <b>อย่างยิ่ง</b>ฉันแนะนำให้ตั้งชื่อแบบฟอร์มต่างๆ เนื่องจากจะทำให้คุณเข้าใจได้ง่ายขึ้นว่าแต่ละแบบฟอร์มมีหน้าที่รับผิดชอบอย่างไร</p><p>2) คุณสมบัติ " <b>การกระทำ</b>" ค่าของแอตทริบิวต์นี้มีหน้าที่รับผิดชอบเส้นทางไปยังไฟล์สคริปต์ที่จะประมวลผลแบบฟอร์ม กล่าวคือ การป้อนข้อมูลลงในแบบฟอร์มไม่เพียงพอ แต่ยังต้องประมวลผลตามนั้น และนี่คือเส้นทางที่แน่นอน สำหรับสิ่งนี้ <i>ไฟล์ตัวจัดการ</i>และพบได้ในค่าแอตทริบิวต์ " <b>การกระทำ</b>".</p><p>3) คุณสมบัติ " <b>วิธี</b>" สามารถมีหนึ่งในสองความหมายที่นิยมมาก: " <b>โพสต์</b>" และ " <b>รับ</b>" คุณลักษณะนี้กำหนดวิธีการส่ง ฉันจะไม่ลงรายละเอียดฉันจะบอกว่าวิธีแรกคือการส่งข้อมูลที่ซ่อนอยู่และวิธีที่สองคือการเปิด เพื่อให้ชัดเจนยิ่งขึ้นเรามาดูสองวิธีกัน ที่อยู่การเปลี่ยนแปลง:</p><p>ก) <b>http://mysite.ru/scipt/request.php</b></p><p>ข) <b>http://mysite.ru/script/request.php?a=7&b=ไมเคิล</b></p><p>ในกรณีแรกผู้ใช้จะไม่เห็นสิ่งที่เขาส่ง (วิธีการ " <b>โพสต์</b>") และในวินาทีที่เขาเห็นชื่อของตัวแปรและค่าของมันจริง ๆ (วิธีการ " <b>รับ</b>") ในตอนท้ายของบทความ คุณสามารถลองส่งแบบฟอร์มโดยใช้สองวิธีที่แตกต่างกันและตรวจสอบให้แน่ใจว่าแตกต่างกัน แต่สำหรับตอนนี้ ฉันจะบอกว่า <b>มาก</b>วิธีนี้ใช้บ่อยกว่า <b>โพสต์</b>"นั่นคือการส่งที่ซ่อนเร้น</p><p>นี่เป็นคำอธิบายของแบบฟอร์ม และตอนนี้คุณสามารถเริ่มเพิ่มองค์ประกอบลงในแบบฟอร์มได้แล้ว</p><p>สิ่งแรกที่เราจะเพิ่มคือช่องข้อความ การเพิ่มช่องข้อความโดยใช้แท็ก <b><input> </b>หรือใช้แอตทริบิวต์ของแท็กนี้ " <b>พิมพ์</b>"อย่างมีความหมาย" <b>ข้อความ</b>" นอกจากนี้ ก่อนที่จะสร้างฟิลด์ข้อความ ขอแนะนำให้เขียนว่าเป็นฟิลด์ประเภทใด เช่น " <i>ชื่อของคุณ</i>". ภายในแท็ก <b><form> </b>เขียนบรรทัดนี้:</p><p>ชื่อของคุณ: <input type = "text" name = "firstname" value = "ชื่อของคุณอยู่ที่นี่"> </p><p>เรามาแจกแจงคุณลักษณะอีกครั้ง:</p><p>1) คุณสมบัติ " <b>พิมพ์</b>" รับผิดชอบประเภทขององค์ประกอบอินพุต ในกรณีนี้ เราระบุว่านี่คือช่องข้อความปกติ ในองค์ประกอบต่อไปนี้ เราจะเปลี่ยนค่าของแอตทริบิวต์นี้</p><p>2) คุณสมบัติ " <b>ชื่อ</b>" มีหน้าที่รับผิดชอบชื่อขององค์ประกอบ ในที่นี้ เราระบุว่าชื่อของฟิลด์นี้ <b>ชื่อจริง</b>.</p><p>3) คุณสมบัติ " <b>ค่า</b>" รับผิดชอบค่าเริ่มต้นของฟิลด์นี้</p><p>อย่างที่เขาว่ากันว่า เห็นครั้งเดียวดีกว่าได้ยินร้อยครั้ง ดังนั้นคุณควรโทรออก ( <b>ยิ่งกว่านั้นเพียงพิมพ์และอย่าคัดลอก!</b>) ข้อความนี้ในตัวแก้ไข จากนั้นดูผลลัพธ์ในเบราว์เซอร์</p><p>ทีนี้มาสร้างฟิลด์อื่นที่คล้ายกัน แต่ไม่ใช่สำหรับการป้อนอักขระปกติ แต่สำหรับการป้อนรหัสผ่าน นั่นคือทุกอย่างควรจะเหมือนกัน แต่ควรซ่อนเฉพาะข้อความไว้ด้านหลังเท่านั้น <i>เครื่องหมายดอกจัน</i>. จึงย้ายไปบรรทัดถัดไป (tag <b><br> </b>) มาเขียนโค้ดต่อไปนี้:</p><p>รหัสผ่านของคุณ: <input type = "password" name = "pass" value = "นี่คือรหัสผ่านของคุณ"> </p><p>อย่างที่คุณเห็นตอนนี้ค่าของแอตทริบิวต์ " <b>พิมพ์"</b>เป็น " <b>รหัสผ่าน</b>" คุณลักษณะที่เหลือจะเหมือนกับช่องข้อความปกติ</p><p>องค์ประกอบถัดไปคือรายการแบบเลื่อนลง มันถูกสร้างขึ้นซับซ้อนกว่าเล็กน้อยเนื่องจากที่นี่ไม่เพียงจำเป็นต้องประกาศการสร้างรายการแบบเลื่อนลงเท่านั้น แต่ยังต้องเพิ่มองค์ประกอบลงในรายการนี้ด้วย มาเขียนกันที่บรรทัดถัดไป (ฉันจะไม่พูดถึงเรื่องนี้เพิ่มเติม) ต่อไปนี้ <b>รหัส HTML</b>.</p><p>เลือกตัวเลือก: <br><select name = "choice"><br> <option value = "1">ตัวเลือกที่ 1 <br> <option value = "2">ตัวเลือกที่ 2 <br> <option value = "3">ตัวเลือกที่ 3 <br></select> </p><p>แท็ก <b><select> </b>หมายถึงจุดเริ่มต้นของรายการแบบเลื่อนลง รายการลงท้ายด้วยแท็ก <b></select> </b>. คุณลักษณะ " <b>ชื่อ</b>" ชัดเจนเพราะผมอธิบายไปหลายรอบแล้ว รายการถูกสร้างขึ้นโดยใช้แท็ก <b><option> </b>. ค่าแอตทริบิวต์ " <b>ค่า</b>" หมายถึงค่าที่ตัวแปรจะมี <b>ทางเลือก</b>(เช่น ใน <b>จาวาสคริปต์</b>) นั่นคืออย่างใดอย่างหนึ่ง <b>ตัวเลือก = 1</b>, หรือ <b>ตัวเลือก = 2</b>, หรือ <b>ตัวเลือก = 3</b>. ทันทีหลังจากสิ้นสุดคำอธิบายแท็ก <b><option> </b>สิ่งที่ผู้ใช้เห็นในรายการแบบเลื่อนลงจะถูกใส่ไว้ เป็นการดีกว่าที่จะดูในเบราว์เซอร์อีกครั้งและทุกอย่างจะชัดเจนสำหรับคุณทันที</p><p>ตอนนี้เรามาเพิ่มพื้นที่ข้อความโดยใช้แท็ก <b><textarea> </b>:</p><p>เขียนอะไรบางอย่าง: <br><br><br><textarea name = "message" rows = "10" cols = "15">ข้อความ

ที่นี่เรากำลังสร้างพื้นที่ข้อความที่มีความสูง 10 สตริง (ค่าแอตทริบิวต์ " แถว") และความกว้างของ 15 ตัวอักษร (ค่าแอตทริบิวต์ " คอลัมน์").

ภายในแท็กที่จับคู่นี้ ข้อความในพื้นที่ข้อความเริ่มต้นจะถูกระบุ จริงๆแล้วไม่มีอะไรจะพูดเพิ่มเติมที่นี่ เดินหน้าต่อไป

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

เลือกมาหนึ่งอย่าง:
ตัวเลือกที่ 1
ตัวเลือกที่ 2
ตัวเลือกที่ 3

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

องค์ประกอบอื่นของแบบฟอร์มคือสวิตช์ ( ช่องทำเครื่องหมาย). สร้างขึ้นอีกครั้งโดยใช้แท็ก . มาเขียนบรรทัดต่อไปนี้:

คุณยอมรับกฎของเรา:

ฉันคิดว่าทุกอย่างโปร่งใสที่นี่ ดังนั้นฉันจะไม่อธิบาย ฉันแนะนำให้คุณดูว่ามันมีลักษณะอย่างไรในเบราว์เซอร์ และฉันจะบอกว่าหากทำเครื่องหมายในช่องแล้วค่าของตัวแปร " เงื่อนไข" จะ " ใช่" หากไม่ยืน ค่าของตัวแปรนี้จะเป็น "" นั่นคือสตริงว่าง

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

เลือกไฟล์ที่จะดาวน์โหลด:

รูปแบบ HTML เป็นองค์ประกอบอินเทอร์เฟซที่ซับซ้อน ประกอบด้วยองค์ประกอบการทำงานที่แตกต่างกัน: ช่องป้อนข้อมูล และ , รายการ <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://i0.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://i0.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; /*ยกเลิกการทำเครื่องหมายที่ช่องใน Mozilla Firefox*/ ) select::-ms-expand ( display: none; /*ยกเลิกการทำเครื่องหมายที่ช่องใน IE*/ ) .select-arrow ( ตำแหน่ง: สัมบูรณ์ ; ด้านบน: 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> <p>เราได้รวบรวมรายชื่อแบบฟอร์มเข้าสู่ระบบฟรี 60 แบบฟอร์มที่คุณสามารถใช้บนเว็บไซต์ บล็อก ฟอรัม ฯลฯ ของ WordPress ได้ แต่ละแบบฟอร์มได้รับการทดสอบอย่างละเอียดเพื่อให้แน่ใจว่าใช้งานได้และมีซอร์สโค้ดพร้อมใช้งาน</p> <h2>เครื่องมือปรับแต่งการเข้าสู่ระบบ WordPress</h2> <p>แบบฟอร์มในรายการนี้สร้างขึ้นโดยใช้ HTML/CSS แต่ในกรณีนี้ เรากำลังพูดถึงปลั๊กอินที่ดีที่สุดในการปรับแต่ง WordPress UI มาพร้อมกับเทมเพลตหลายแบบที่สามารถปรับแต่งเพิ่มเติมเพื่อให้เหมาะกับการออกแบบเว็บไซต์ของคุณ ด้วยปลั๊กอินนี้ คุณสามารถกำจัดหน้าเข้าสู่ระบบ WordPress ที่น่าเบื่อได้</p> <h2>แบบฟอร์มเข้าสู่ระบบที่สร้างสรรค์</h2> <p>แบบฟอร์มเข้าสู่ระบบที่เรียบง่ายแต่สร้างสรรค์ที่สร้างขึ้นโดยใช้ HTML และ CSS3 นอกจากนี้ยังสามารถใช้เป็นแบบฟอร์มลงทะเบียนได้อีกด้วย นี่คือเทมเพลตที่เราชื่นชอบจากรายการนี้</p> <p>เราค้นหาแบบฟอร์มการอนุญาตที่ยอดเยี่ยมในอินเทอร์เน็ต แต่การค้นหาแบบฟอร์มเหล่านี้กลับกลายเป็นเรื่องยาก นั่นเป็นเหตุผลที่เราตัดสินใจนำเสนอของเราเองให้กับคุณ นี่คือแบบฟอร์มเข้าสู่ระบบ 20 รูปแบบที่ออกแบบโดยทีมงานของเรา</p> <h2>แบบฟอร์มการอนุญาตหมายเลข 1</h2> <p>แบบฟอร์มเข้าสู่ระบบที่เรียบง่าย สร้างสรรค์ และมีชีวิตชีวาพร้อมพื้นหลังแบบไล่ระดับสี คุณสามารถใช้เพื่อวัตถุประสงค์ใดก็ได้ เช่น การอนุญาตในบริการบนเว็บ แอปพลิเคชันมือถือหรือเดสก์ท็อป</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตหมายเลข 2</h2> <p>แบบฟอร์มเข้าสู่ระบบที่เรียบง่ายและซับซ้อนพร้อมปุ่ม การเติมแบบไล่ระดับสี แอนิเมชั่น และโลโก้ ใช้โดยการเปลี่ยนองค์ประกอบที่จำเป็น</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตหมายเลข 3</h2> <p>หน้าล็อกอินพร้อมภาพพื้นหลัง เงา และเอฟเฟ็กต์โฮเวอร์สำหรับปุ่มล็อกอิน</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตหมายเลข 4</h2> <p>คุณสามารถดาวน์โหลดเว็บฟอร์มนี้และใช้งานได้ตามที่คุณต้องการ มันเป็นการปรับตัวอย่างสมบูรณ์</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตหมายเลข 5</h2> <p>แบบฟอร์มที่สวยงามและทันสมัยพร้อมตัวเลือกในการเข้าสู่ระบบผ่าน Facebook หรือ Google ปุ่มมีเอฟเฟกต์โฮเวอร์ที่สวยงามเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ยอดเยี่ยม</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 6</h2> <p>หากหน้าเว็บเรียบร้อยและสวยงาม แบบฟอร์มเข้าสู่ระบบก็ไม่ควรแตกต่างจากดีไซน์ นี่คือฟอร์มที่จะตอบสนองความคาดหวังของคุณอย่างแน่นอน</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 7</h2> <p>แบบฟอร์มที่มีสามตัวเลือกในการเข้าสู่บัญชีของคุณ: Facebook, Twitter หรืออีเมล และหากผู้ใช้ยังไม่มีบัญชี คุณสามารถเชื่อมโยงแบบฟอร์มไปยังหน้าลงทะเบียนได้</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 8</h2> <p>อีกหนึ่งรูปแบบการเข้าสู่ระบบที่ทันสมัย ​​ทันสมัย ​​และสวยงาม มันดูดีเป็นพิเศษบนอุปกรณ์มือถือ</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 9</h2> <p>หากคุณต้องการหลีกหนีจากดีไซน์สีขาวบริสุทธิ์หรือสีเดียว คุณควรใส่ใจกับรูปทรงนี้ รองรับการเพิ่มภาพพื้นหลังหรือการซ้อนทับแบบไล่ระดับสี นอกจากนี้ยังมีตัวเลือกในการเข้าสู่ระบบผ่าน Facebook หรือ Google</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 10</h2> <p>นี่เป็นสิ่งที่ตรงกันข้ามกับตัวเลือกก่อนหน้าทุกประการ มันดูเรียบง่าย แต่ในขณะเดียวกันก็เรียบร้อยมาก</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 11</h2> <p>แทนที่จะสร้างแบบฟอร์มตั้งแต่ต้น คุณสามารถใช้เทมเพลตที่พร้อมใช้งานที่ยอดเยี่ยมเช่นนี้ได้</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 12</h2> <p>ภาพพื้นหลังที่มีการซ้อนทับเงาสีน้ำเงิน ชื่อที่มีรูปประจำตัว และช่องป้อนข้อมูลคือแบบฟอร์มการอนุญาตหมายเลข 12 เพิ่มเอฟเฟกต์โฮเวอร์ให้กับปุ่มเข้าสู่ระบบ</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 13</h2> <p>เทมเพลตแบบแยกหน้าจอ โดยครึ่งหนึ่งมีไว้สำหรับรูปภาพ และอีกครึ่งหนึ่งมีไว้สำหรับรูปร่าง</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 14</h2> <p>คอลเลกชันนี้มีทั้งแบบฟอร์มเข้าสู่ระบบแบบง่ายและซับซ้อนมากขึ้น และเทมเพลตหมายเลข 14 ก็เป็นหนึ่งในเทมเพลตมินิมอล</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 15</h2> <p>ค่อนข้างเป็นรูปทรงมินิมอล แต่คุณสามารถเพิ่มแบนเนอร์ที่ด้านบนได้ ด้วยตัวเลือกเล็กๆ นี้ คุณจึงสามารถทำให้แบบฟอร์มดูน่าดึงดูดยิ่งขึ้นได้</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 16</h2> <p>นี่คือแบบฟอร์มเข้าสู่ระบบที่มีรูปภาพเต็มหน้าจอ ซึ่งด้านบนเป็นช่องสำหรับป้อนข้อมูลเข้าสู่ระบบและรหัสผ่านของคุณ รวมถึงปุ่มที่มีเอฟเฟกต์โฮเวอร์</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มอนุญาตเลขที่ 17</h2> <p>หากต้องการทำให้แบบฟอร์มของคุณเป็นแบบส่วนตัวมากขึ้น คุณสามารถใช้เทมเพลตนี้ได้ มีรูปภาพด้านข้างด้วย</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 18</h2> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มอนุญาตเลขที่ 19</h2> <p>มีชีวิตชีวา มีพลัง และน่าตื่นเต้น นั่นคือสิ่งที่เกี่ยวกับแบบฟอร์มการสมัครนี้ มีการตอบสนองอย่างเต็มที่ ปรับให้เหมาะกับมือถือ และเข้ากันได้กับเว็บเบราว์เซอร์หลักๆ ทั้งหมด</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มการอนุญาตเลขที่ 20</h2> <p>พื้นหลังไล่ระดับสี ปุ่มสีดำพร้อมเอฟเฟกต์โฮเวอร์ ช่องสำหรับเข้าสู่ระบบและรหัสผ่าน รวมถึงส่วน “ลืมรหัสผ่าน?” ทั้งหมดนี้อยู่ในแบบฟอร์มอนุญาตหมายเลข 20</p> <p>ดาวน์โหลด</p> <p>ดูตัวอย่าง</p> <h2>แบบฟอร์มเข้าสู่ระบบแบบเลื่อนลง</h2> <p>ดาวน์โหลด</p> <h2>แบบฟอร์มลงทะเบียนแบบลอยตัว</h2> <p>ออกแบบมาสำหรับแบบฟอร์มสมัครสมาชิกโดยใช้แท็บและป้ายกำกับ</p> <p>ดาวน์โหลด</p> <h2>แบบฟอร์มการอนุญาตอย่างง่าย</h2> <p>สิ่งที่เคยหยุดผู้คนเมื่อพวกเขาต้องการเข้าสู่ระบบไซต์ WordPress คือมันดูเรียบง่ายเกินไป รูปทรงนี้ยังคงดีไซน์ยอดนิยมแต่เพิ่มสีสันลงไป</p> <p>ดาวน์โหลด</p> <h2>เข้าสู่ระบบแบบเรียบ – แบบฟอร์มลงทะเบียน</h2> <p>เมื่อคุณคลิกปุ่ม "คลิกฉัน" ที่มุมขวาบน แบบฟอร์มเข้าสู่ระบบจะถูกแปลงเป็นแบบฟอร์มลงทะเบียนผ่านแอนิเมชั่น</p> <p>ดาวน์โหลด</p> <h2>เข้าสู่ระบบด้วยแบบฟอร์ม SCSS ที่มีอยู่ในตัวเอง</h2> <p>นี่คือแบบฟอร์มที่สร้างขึ้นโดยใช้ SCSS ส่วนขยาย CSS ที่เพิ่มฟังก์ชันการทำงานใหม่และความสง่างามให้กับภาษาพื้นฐาน ช่วยให้คุณสามารถใช้ตัวแปร กฎแบบซ้อน การนำเข้าแบบอินไลน์ และอื่นๆ อีกมากมาย</p> <p>ดาวน์โหลด</p> <h2>แบบฟอร์มเข้าสู่ระบบแบบเคลื่อนไหว</h2> <p>นี่คือแบบฟอร์มเข้าสู่ระบบแบบเคลื่อนไหว และส่วนบนสุด “สวัสดีคุณ เข้าสู่ระบบแล้ว” จะแปลงเป็นรูปแบบเมื่อคุณคลิกปุ่ม</p> <p>ดาวน์โหลด</p> <h2>แบบฟอร์มเข้าสู่ระบบโดยใช้ CSS3 และ HTML5</h2> <p>ตัวอย่างวิธีสร้างแบบฟอร์มเข้าสู่ระบบอย่างง่ายโดยใช้ HTML5 และ CSS3 ใช้องค์ประกอบหลอก (:หลัง และ :ก่อน) เพื่อสร้างเอฟเฟกต์ของหลายหน้า แบบฟอร์มนี้ใช้ HTML5 เพื่อลดความซับซ้อนในการตรวจสอบข้อมูลและการนำเสนอ</p> <p>ดาวน์โหลด</p> <h2>เข้าสู่ระบบด้วย Shake Effect</h2> <p>หากคุณป้อนรหัสผ่านผิด คุณจะได้รับการแจ้งเตือนด้วยเอฟเฟกต์การสั่นที่สวยงาม วิธีแก้ปัญหาที่ง่ายและมีประสิทธิภาพ</p> <p>ดาวน์โหลด</p> <h2>แบบฟอร์มเข้าสู่ระบบ Boxy</h2> <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>