ที่นี่เราจะแนะนำความรู้เกี่ยวกับองค์ประกอบแบบฟอร์มและการส่งแบบฟอร์ม
รูปแบบองค์ประกอบ อินเตอร์เฟส DOM ขององค์ประกอบฟอร์มคือ HTMLFormElement ซึ่งสืบทอดมาจาก HTMLElement ดังนั้นจึงมีแอตทริบิวต์เริ่มต้นเช่นเดียวกับองค์ประกอบ HTML อื่น ๆ แต่มีคุณลักษณะและวิธีการที่ไม่ซ้ำกันหลายประการ: มันเอง: มันเอง:
| ค่าแอตทริบิวต์ | อธิบาย |
|---|---|
| ยอมรับการชาร์จ | ชุดอักขระที่เซิร์ฟเวอร์สามารถจัดการได้ชุดอักขระหลายชุดจะถูกหารด้วยช่องว่าง |
| การกระทำ | URL ที่ยอมรับการร้องขอค่านี้สามารถครอบคลุมได้โดยคุณสมบัติการสร้างขององค์ประกอบอินพุตหรือปุ่มในองค์ประกอบฟอร์ม |
| องค์ประกอบ | ชุดควบคุมทั้งหมดในรูปแบบ (HTMLCOLLECTION) |
| Enctype | ประเภทการเข้ารหัสที่ร้องขอค่านี้สามารถครอบคลุมได้โดยคุณสมบัติ formenctype ขององค์ประกอบอินพุตหรือปุ่มในองค์ประกอบฟอร์ม |
| ความยาว | จำนวนการควบคุมในแบบฟอร์ม |
| วิธี | ประเภทคำขอ HTTP ที่จะส่งมักจะได้รับหรือโพสต์ |
| ชื่อ | ชื่อของแบบฟอร์ม |
| รีเซ็ต () | รีเซ็ตโดเมนแบบฟอร์มทั้งหมดเป็นค่าเริ่มต้น |
| ส่ง () | ส่งแบบฟอร์ม |
| เป้า | ชื่อหน้าต่างสำหรับการส่งคำขอและรับการตอบกลับค่านี้สามารถครอบคลุมได้ด้วยคุณสมบัติ formtarget ของอินพุตหรือองค์ประกอบปุ่มในองค์ประกอบแบบฟอร์ม |
| การกรองอัตโนมัติ | ไม่ว่าจะทำตามองค์ประกอบของตารางโดยอัตโนมัติ |
องค์ประกอบอินพุตเป็นองค์ประกอบรูปแบบที่ใช้กันอย่างแพร่หลาย
อินพุตข้อความ <อินพุตประเภท = ชื่อข้อความ =>
ส่งอินพุต <อินพุตประเภท = ส่ง>
อินพุตปุ่มปุ่มเดียว <อินพุตประเภท = ชื่อวิทยุ = ต้องมีค่าชื่อเดียวกัน = ค่าของการเติมนั้นดีที่สุดที่จะสอดคล้อง>
ป้อน <อินพุต type = ชื่อช่องชื่อ = ค่าชื่อเดียวกัน = ค่าที่สอดคล้องกันที่แตกต่างกัน>
อินพุตดิจิตอล <อินพุตประเภท = number min = max => กล่องอินพุตสามารถป้อนหมายเลขเท่านั้นและสามารถตั้งค่าสูงสุดและค่าต่ำสุด
อินพุตช่วง <อินพุตประเภท = ช่วง min = max => คล้ายกับตัวเลข แต่จะแสดงแถบเลื่อนแทนกล่องอินพุต
อินพุตสี <อินพุตประเภท = สี> จะปรากฏตัวเลือกสี
อินพุตวันที่ <อินพุตประเภท = วันที่> จะปรากฏตัวเลือกวันที่
อินพุตอีเมล <อินพุตประเภท = อีเมล> จะปรากฏเป็นกล่องป้อนข้อความและแป้นพิมพ์ที่กำหนดเองจะปรากฏขึ้น
อินพุตโทร <อินพุตประเภท = โทร> คล้ายกับอินพุตอีเมล
อินพุต URL <อินพุตประเภท = url> คล้ายกับอินพุตอีเมลแป้นพิมพ์ที่กำหนดเองจะปรากฏขึ้น
องค์ประกอบ Textarea สามารถสร้างพื้นที่ข้อความหลายบรรทัด
<textarea name = id = color = 30 rows = 10> </textarea>
ค่าแอตทริบิวต์ของ Cols และแถวแสดงถึงความกว้างและความสูงของพื้นที่ข้อความ
เลือกองค์ประกอบและองค์ประกอบตัวเลือกสามารถใช้เพื่อสร้างเมนูดรอปดาวน์
<เลือกชื่อ = id => <ค่าตัวเลือก => </ตัวเลือก> <ตัวเลือกค่า => </ตัวเลือก> <ตัวเลือกค่า => </plct>
วิทยุจะจัดกลุ่มได้อย่างไร?
ตัวอย่าง:
<อินพุต type = ชื่อวิทยุ = ค่าที่ชื่นชอบ = เล่นเกม> เล่นเกม
<อินพุตประเภท = ชื่อวิทยุ = ค่าที่ชื่นชอบ = รหัสการเขียน> รหัสเขียน
<ประเภทอินพุต = ชื่อวิทยุ = ค่าเพศ = ผู้ชาย> ชาย
<ประเภทอินพุต = ชื่อวิทยุ = ค่าทางเพศ = ผู้หญิง> หญิงหญิง
นี่คือวิทยุสองกลุ่ม
ผู้ถือครองตำแหน่งให้ข้อมูลแจ้ง (คำแนะนำ) ที่สามารถอธิบายค่าที่คาดหวังของฟิลด์อินพุต
พรอมต์จะปรากฏขึ้นเมื่อฟิลด์อินพุตว่างเปล่าและมันจะหายไปเมื่อฟิลด์ได้รับโฟกัส
type = hiddenกำหนดอินพุตที่ซ่อนอยู่ ผู้ใช้ไม่สามารถมองเห็นฟิลด์ที่ซ่อนอยู่ได้ ฟิลด์ที่ซ่อนอยู่มักจะเก็บค่าเริ่มต้นและค่าของพวกเขายังสามารถแก้ไขได้โดย JavaScript
ตัวอย่างเช่นเพื่อความปลอดภัยชื่อและค่าของค่าที่ผู้ใช้ไม่สามารถมองเห็นได้ในพื้นหลังสามารถใช้เพื่อตรวจสอบพื้นหลังเพื่อตรวจสอบและป้องกันหน้าปลอม
ปุ่มส่งเพิ่มปุ่มส่งเพื่อฟอร์มเพื่อให้ผู้ใช้สามารถส่งแบบฟอร์ม
ปุ่มสามปุ่มต่อไปนี้สามารถทริกเกอร์เหตุการณ์การส่งของแบบฟอร์มเมื่อคลิก:
<ประเภทอินพุต = submit /> <button type = submit> </ button> <input type = image />
ค่าเริ่มต้นประเภทขององค์ประกอบปุ่มในข้อกำหนดคือการส่ง แต่ค่าการทำสมาธิคือปุ่มภายใต้ IE678 ดังนั้นจึงจำเป็นต้องเพิ่มประเภท = ส่งคุณสมบัติด้วยตนเองไปยังองค์ประกอบปุ่มจากความเข้ากันได้
ส่งเหตุการณ์บุคคลเริ่มต้นอาจคิดว่าการส่งแบบฟอร์มจะถูกเรียกใช้โดยเหตุการณ์คลิกของปุ่มส่ง
form.addeventListener ('ส่ง', ฟังก์ชั่น (e) {ถ้า (ถูกต้อง ()) {... } e.preventDefault ()}) เมื่อไม่มีหนึ่งในสามปุ่มที่กล่าวถึงข้างต้นในองค์ประกอบแบบฟอร์มผู้ใช้จะไม่สามารถส่งแบบฟอร์มได้ (ปุ่ม ENTER นั้นไม่ถูกต้อง submit() . การดำเนินการตรวจสอบแบบฟอร์มควรเป็นก่อนที่จะเรียกวิธี submit()
if (value ()) {form.submit ()} การส่งแบบฟอร์มและประสบการณ์การใช้งานจากเทคโนโลยี Ajax+Cross -domain Post (CORS) ที่เป็นที่นิยมในปัจจุบันเรามีแนวโน้มที่จะไม่ใช้องค์ประกอบฟอร์มเพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์โดยตรง แม้ว่าจะเป็นไปได้ แต่ก็มีปรากฏการณ์การย่อยสลายในกรณีส่วนใหญ่
การตรวจสอบแบบฟอร์ม JavaScriptJavaScript สามารถใช้เพื่อตรวจสอบข้อมูลอินพุตเหล่านี้ในรูปแบบ HTML ก่อนที่ข้อมูลจะถูกส่งไปยังเซิร์ฟเวอร์
ข้อมูลฟอร์มทั่วไปเหล่านี้ตรวจสอบโดย JavaScript คือ:
ผู้ใช้กรอกรายการที่จำเป็นในแบบฟอร์มหรือไม่?
ที่อยู่อีเมลถูกป้อนโดยผู้ใช้ถูกกฎหมายหรือไม่?
ผู้ใช้ป้อนวันที่ถูกกฎหมายหรือไม่?
ผู้ใช้ป้อนข้อความในฟิลด์ตัวเลขหรือไม่?
ต้องเติม (หรือต้องเลือก) โครงการฟังก์ชั่นต่อไปนี้ใช้เพื่อตรวจสอบว่าผู้ใช้กรอกรายการที่ต้องการ (หรือจำเป็น) ในแบบฟอร์มหรือไม่ หากต้องกรอกหรือตัวเลือกว่างเปล่ากล่องเตือนจะปรากฏขึ้นและค่าการส่งคืนของฟังก์ชั่นเป็นเท็จมิฉะนั้นค่าส่งคืนของฟังก์ชันจะเป็นจริง (หมายความว่าข้อมูลไม่มีปัญหา):
function value_required (ฟิลด์, alerttxt) {ด้วย (ฟิลด์) {ถ้า (ค่า == null || value ==) {Alerttxt);ด้านล่างคือรหัสที่มีแบบฟอร์ม HTML:
<html> <head> <script type = text/javascript> function value_required (ฟิลด์, alerttxt) {ด้วย (ฟิลด์) {ถ้า (value == null || value ==) {Alert (Alert lerttxt); {return true}} function value_form (this) {ด้วย (this) {ถ้า (value_required (อีเมล, อีเมลต้องกรอก!) {email.foc us (); return false}}} </script> </head> <body> <form action = submitpage.htm onsubmit = return validate_form (นี้) วิธี = โพสต์> อีเมล: <อินพุตประเภท = ชื่อข้อความ = 30> <ประเภทอินพุต = ส่งค่า = ส่ง> </form> </body> < /html> การตรวจสอบอีเมลฟังก์ชั่นต่อไปนี้ตรวจสอบว่าข้อมูลอินพุตสอดคล้องกับไวยากรณ์พื้นฐานของที่อยู่อีเมลหรือไม่
ซึ่งหมายความว่าข้อมูลอินพุตจะต้องมีสัญลักษณ์@ และหมายเลขจุด (.) ในเวลาเดียวกัน@ ไม่ใช่อักขระแรกของที่อยู่อีเมลและอย่างน้อยหนึ่งหมายเลขจุดหลังจาก@ 同时:
ฟังก์ชั่น Value_Email (ฟิลด์, AlertTxt) {ด้วย (ฟิลด์) {apos = value.indexof (@) dotpos = value.lastindexof (.) ถ้า (APOS <1 || dotpos-Apos <2) Lert (Alerttxt); else {return true}}}ด้านล่างนี้เป็นรหัสที่สมบูรณ์พร้อมแบบฟอร์ม HTML:
<html> <head> <script type = text/javascript> function value_email (ฟิลด์, AlertTxt) {ด้วย (ฟิลด์) {apos = value.indexof (@) dotpos = value .lastindexof (.) ถ้า (apos <1 || DOTPOS-APOS <2) {Alert (AlertTxt); = false) {email.focus (); ชื่อข้อความ = ขนาดอีเมล = 30> <อินพุตประเภท = ส่งค่า = ส่ง> </form> </body> </html> การส่งคีย์ทางลัดในกรณีที่ไม่มีแพ็คเกจองค์ประกอบแบบฟอร์มแม้ว่าโฟกัสของหน้าปัจจุบันจะอยู่ในองค์ประกอบฟอร์มกดปุ่ม Enter จะไม่เรียกฟอร์มของแบบฟอร์ม ทำลายการไหลดั้งเดิมดั้งเดิม ทางออกที่ง่ายที่สุดคือห่อด้วยองค์ประกอบแบบฟอร์มบนชั้นนอกและพิจารณาว่ามีปุ่มส่งอย่างน้อยในองค์ประกอบฟอร์ม ในเวลานี้เมื่อโดเมนอินพุตในแบบฟอร์มมุ่งเน้นผู้ใช้จะกดปุ่ม Enter เพื่อทริกเกอร์การส่ง
เบราว์เซอร์จดจำรหัสผ่านบัญชีเมื่อส่งแบบฟอร์มเบราว์เซอร์ระดับสูงรวมถึงเบราว์เซอร์มือถือจะถามผู้ใช้ว่าคุณต้องการจดจำรหัสผ่านบัญชีผู้ใช้สำหรับผู้ใช้ทั่วไปหรือไม่ ในกรณีที่ไม่มีองค์ประกอบแบบฟอร์มเบราว์เซอร์จะไม่ปรากฏขึ้นในหน้าต่างสอบถาม
สรุปเมื่อเราพัฒนาแอปพลิเคชันแบบฟอร์มเราไม่ควรพยายามลบองค์ประกอบฟอร์มและส่งโดยตรง การประมวลผลเหตุการณ์ที่ส่งในเหตุการณ์ส่งองค์ประกอบของแบบฟอร์มไม่ใช่เหตุการณ์คลิกของปุ่มส่ง
อ้างถึง:
องค์ประกอบแบบฟอร์มและการส่งแบบฟอร์ม