รูปแบบคืออะไร?
แบบฟอร์มใน HTML เป็นวิธีที่สำคัญสำหรับหน้า HTML ในการโต้ตอบกับเบราว์เซอร์ การใช้แบบฟอร์มเซิร์ฟเวอร์สามารถรวบรวมข้อมูลที่เกี่ยวข้องที่ส่งโดยเบราว์เซอร์ไคลเอนต์เช่นรหัสผ่านที่ป้อน ฯลฯ เมื่อเรียกดูเว็บไซต์เรามักจะพบกับฟอร์ม พวกเขาเป็นส่วนสำคัญของฟังก์ชั่นการโต้ตอบระหว่างเซิร์ฟเวอร์และเบราว์เซอร์ การโต้ตอบที่นี่หมายถึงกระบวนการแลกเปลี่ยนข้อมูลซึ่งกันและกันเช่นการส่งรหัสผ่านที่เราป้อนในเครื่องไปยังเซิร์ฟเวอร์ ไม่ว่าเว็บไซต์จะใช้ภาษาแบบใดในการใช้ฟังก์ชั่นการโต้ตอบของเว็บไซต์เช่น ASP, PHP, JSP ฯลฯ ตอนนี้แบบฟอร์มได้กลายเป็นวิธีการรวบรวมข้อมูลแบบครบวงจร
ฟังก์ชั่นหลักของแบบฟอร์มคือการรวบรวมข้อมูลโดยเฉพาะข้อมูลของผู้ชม ตัวอย่างเช่นหากคุณสมัครอีเมลออนไลน์คุณต้องกรอกข้อมูลในหน้าแบบฟอร์มที่จัดทำโดยเว็บไซต์ตามที่ต้องการซึ่งส่วนใหญ่มีข้อมูลส่วนบุคคลเช่นชื่ออายุข้อมูลการติดต่อ ฯลฯ ตัวอย่างเช่นหากคุณต้องการพูดในฟอรัมคุณต้องสมัครคุณสมบัติก่อนพูดและคุณต้องกรอกหน้าฟอร์ม แน่นอนว่าแบบฟอร์มนั้นมองไม่เห็นโดยไม่ต้องดูซอร์สโค้ดและผู้ใช้ไม่สามารถรู้สึกได้ว่ารูปแบบนั้นมีอยู่
แบบฟอร์มสามารถใช้สำหรับการสำรวจการสั่งซื้อการค้นหาและฟังก์ชั่นอื่น ๆ โดยทั่วไปรูปแบบประกอบด้วยสองส่วน หนึ่งคือซอร์สโค้ด HTML ที่อธิบายองค์ประกอบของฟอร์ม ในเบราว์เซอร์เราสามารถค้นหาส่วนนี้ผ่านซอร์สโค้ด ประการที่สองคือสคริปต์ไคลเอนต์หรือโปรแกรมที่ใช้โดยเซิร์ฟเวอร์เพื่อประมวลผลการเติมของผู้ใช้ ที่นี่ส่วนใหญ่จะประมวลผลข้อมูลที่รวบรวม ตัวอย่างเช่นรหัสผ่านที่ได้รับในตัวอย่างข้างต้นจะต้องส่งไปยังเซิร์ฟเวอร์เพื่อตรวจสอบว่ารหัสผ่านถูกต้องหรือไม่ หากถูกต้องมันจะเข้าและหากปราศจากข้อผิดพลาดจะไม่เข้าสู่ระบบนี่เป็นกระบวนการประมวลผล ใน HTML เราสามารถกำหนดรูปแบบและร่วมมือกับตัวจัดการแบบฟอร์มในภาษาสคริปต์ฝั่งเซิร์ฟเวอร์เช่น ASP และ PHP กระบวนการประมวลผลข้อมูลฟอร์มคือ: เมื่อเราคลิกปุ่มที่ส่งในแบบฟอร์มข้อมูลที่ป้อนในแบบฟอร์มจะถูกถ่ายโอนไปยังเซิร์ฟเวอร์แล้วประมวลผลโดยแอปพลิเคชันที่เกี่ยวข้องของเซิร์ฟเวอร์ หลังจากการประมวลผลไม่ว่าจะจัดเก็บข้อมูลที่ส่งโดยผู้ใช้ในฐานข้อมูลเซิร์ฟเวอร์หรือส่งคืนข้อมูลที่เกี่ยวข้องไปยังเบราว์เซอร์ของลูกค้า มาดูจุดความรู้ต่าง ๆ ของแบบฟอร์มให้ละเอียดยิ่งขึ้น
1. แท็กฟอร์ม <form>
แบบฟอร์มอยู่ในพื้นที่เฉพาะบนหน้าเว็บที่กำหนดและระบุโดยแท็ก <ฟอร์ม> คู่ แท็ก <Form> มีสองฟังก์ชั่นหลักในหน้าเว็บ
ก่อนอื่นคุณสามารถกำหนดขอบเขตของการทำงานของรูปแบบและเครื่องหมายวัตถุแบบฟอร์มอื่น ๆ จะต้องแทรกลงในรูปแบบ ตัวอย่างเช่นเมื่อเราคลิกปุ่มส่งเราจะส่งเนื้อหาภายในขอบเขตของแบบฟอร์มและเนื้อหานอกแบบฟอร์มจะไม่ถูกส่ง
ประการที่สองมันมีข้อมูลที่เกี่ยวข้องของแบบฟอร์มเองเช่นที่ตั้งของโปรแกรมสคริปต์ที่ประมวลผลแบบฟอร์มวิธีการส่งแบบฟอร์ม ฯลฯ ไวยากรณ์พื้นฐานและไวยากรณ์ของแบบฟอร์มจะอธิบายดังนี้
ไวยากรณ์พื้นฐาน:
<form name = form_name method = method action = url enctype = value target = target_win> ............ </form>
คำอธิบายไวยากรณ์มีดังนี้:
คุณสมบัติ | อธิบาย |
ชื่อ | ชื่อของแบบฟอร์ม |
วิธี | กำหนดวิธีการถ่ายโอนแบบฟอร์มจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์โดยทั่วไปใช้สองวิธี: รับและโพสต์ |
การกระทำ | กำหนดตำแหน่งของตัวจัดการแบบฟอร์มมีสองประเภท: เส้นทางสัมบูรณ์และเส้นทางสัมพัทธ์ |
Enctype | ตั้งค่าวิธีการเข้ารหัสของแบบฟอร์ม |
เป้า | ตั้งค่าวิธีการแสดงผลข้อมูลการส่งคืน |
ในบรรดาคุณลักษณะด้านบนชื่อวิธีและการกระทำนั้นเป็นสิ่งที่ใช้กันมากที่สุดและยังเป็นพื้นฐานสำหรับการวิเคราะห์โปรแกรมสคริปต์ พวกเขาได้รับการอธิบายและอธิบายรายละเอียดด้านล่าง 1. The basic syntax of the Name attribute of the <FORM> tag is: <FORM name=form_name> ……………………… <FORM> Through the form name, you can control the relationship between the form and the server handler, and use the name to determine the identifier of the program processing in the server.
2. ไวยากรณ์พื้นฐานของแอตทริบิวต์การกระทำของแท็ก <form> คือ: <form action = url> ……………………… <form> ผ่านแอตทริบิวต์การกระทำของแบบฟอร์มที่อยู่ของการส่งข้อมูลในแบบฟอร์มถูกกำหนด ที่อยู่นี้อาจเป็นเส้นทางที่แน่นอนเส้นทางสัมพัทธ์หรือที่อยู่อีเมล
ตัวอย่างเช่น: <form name = mailAction = mailto: [email protected]>
3. ไวยากรณ์พื้นฐานของแอตทริบิวต์ MTHOD ของแท็ก <Form> คือ: <Form MTHOD = วิธีการ> ……………… <Form> มีสองวิธีให้เลือกจาก MTHOD หนึ่งได้รับและอื่น ๆ คือโพสต์ เมื่อส่งข้อมูลผ่านวิธีการรับเนื้อหาทั้งหมดในแบบฟอร์มจะถูกผนวกเข้ากับที่อยู่ URL ซึ่งคั่นด้วยเครื่องหมายคำถาม รูปแบบของข้อมูลที่ผ่านคือชื่อ = ค่า ชื่อคือชื่อของข้อมูลที่จะผ่านและค่าคือค่าที่จะผ่าน เมื่อมีหลายค่าที่จะส่งผ่านค่าหลายค่าสามารถคั่นด้วยสัญลักษณ์ & ตัวอย่างเช่น http: //localhost/haha/haha.asp? name1 = value1 & name2 = value2 เนื่องจากข้อมูลนี้อยู่เบื้องหลังที่อยู่ URL ความยาวของข้อมูลที่ส่งจึงมี จำกัด และต้องไม่เกิน 8192 อักขระ วิธีที่ใช้กันมากที่สุดคือวิธีการโพสต์ วิธีนี้มีข้อมูลที่ผู้ใช้กรอกไว้ในตัวแบบฟอร์มและส่งผ่านไปยังตัวจัดการเซิร์ฟเวอร์ด้วยกัน ดังนั้นจึงไม่มีการ จำกัด ขนาดสำหรับวิธีนี้ เมื่อไม่ได้ระบุวิธีการใดค่าเริ่มต้นคือวิธีการรับ หลังจากกำหนดแท็กฟอร์ม <form> คุณสามารถเพิ่มแท็กสำหรับรหัสที่ทำฟังก์ชั่นเฉพาะให้เสร็จสมบูรณ์ มีแท็ก 4 แท็กที่สามารถรวมอยู่ในแบบฟอร์มดังแสดงในตารางต่อไปนี้
เครื่องหมาย | อธิบาย |
<put> | แท็กอินพุตแบบฟอร์ม |
<Select> | เมนูและแท็กรายการ |
<pontion> | เมนูและรายการแท็กรายการ |
<Textarea> | เครื่องหมายโดเมนข้อความ |
ในรหัส HTML องค์กรของพวกเขามีดังนี้
<form> <put> …………… </put> <pertarea> …………… </textarea> <elect> <petion> ………… </petion> </select> </form>
สำหรับแท็กข้างต้นเทคโนโลยีการแฮ็คสคริปต์ที่พบบ่อยที่สุดสองรายการควรเป็น <put> และ <textarea> มาอธิบายรายละเอียดทั้งสองแท็กด้านล่าง 2. แท็กอินพุต <อินพุตแท็ก> อินพุตแท็ก <อินพุต> เป็นหนึ่งในแท็กที่ใช้กันมากที่สุดในรูปแบบ มีการใช้ฟิลด์ข้อความและปุ่มที่เราใช้ในหน้าเว็บ ไวยากรณ์พื้นฐานมีดังนี้:
<form> <อินพุตชื่อ = field_name type = type_name> </form>
ชื่อคือชื่อของโดเมนและประเภทคือประเภทของโดเมน อาจมีค่าคุณสมบัติมากมายในคุณสมบัติประเภท ในหมู่พวกเขาสิ่งที่ใช้กันทั่วไปและเกี่ยวข้องอย่างใกล้ชิดกับเทคโนโลยีการแฮ็กคือ: ข้อความ, รหัสผ่าน, ไฟล์, ปุ่ม, ส่ง, ส่ง, รีเซ็ต, ซ่อน 1. ข้อความโดเมนข้อความ
ค่าแอตทริบิวต์ข้อความใช้เพื่อตั้งค่าพื้นที่ข้อความของแบบฟอร์มและป้อนข้อความหมายเลขและตัวอักษรทุกประเภท ข้อมูลอินพุตจะแสดงในบรรทัดเดียว อาจเป็นเรื่องยากสำหรับทุกคนที่จะเข้าใจสิ่งนี้ ฉันจะยกตัวอย่างให้คุณอธิบายในภายหลัง ก่อนอื่นให้ดูคำอธิบายไวยากรณ์และไวยากรณ์พื้นฐาน ไวยากรณ์พื้นฐาน: <อินพุตประเภท = ชื่อข้อความ = field_name maxLength = size value = value value = field_value> การตีความไวยากรณ์: คำอธิบายเหล่านี้แสดงในตารางต่อไปนี้
คุณลักษณะโดเมนข้อความ | อธิบาย |
ชื่อ | ชื่อฟิลด์ข้อความ |
ความยาวสูงสุด | จำนวนสูงสุดของอักขระอินพุตในฟิลด์ข้อความ |
ขนาด | ความกว้างของฟิลด์ข้อความ (เป็นอักขระ) |
ค่า | ค่าเริ่มต้นสำหรับฟิลด์ข้อความ |
นี่คือความรู้พื้นฐานของโดเมนข้อความ เพื่อนหลายคนอาจยังไม่เข้าใจ มาเขียนตัวอย่างเพื่อแสดงรหัสด้านล่าง:
<html> <head> <title> แทรกโดเมนข้อความ </title> </head> <body> การสำรวจผู้ใช้ <ฟอร์มแอ็คชั่น = mailto: [email protected] วิธี = รับชื่อ = ฮ่าฮ่า> <!-การเขียนแบบฟอร์มเพื่อเชื่อมต่อเป็นที่อยู่อีเมล 20-> เว็บไซต์: <ประเภทอินพุต = ชื่อข้อความ = url size = 20 maxLength = 50 value = http: /// <!-การเขียนโดเมนข้อความด้วย URL ชื่อความกว้างคือ 20 และความยาวอินพุตสูงสุดคือ 50 ค่าเริ่มต้นคือ http: //->
หลังจากเขียนรหัสแล้วเราเปลี่ยนชื่อต่อท้ายเป็น HTML และดำเนินการ ดังแสดงใน (รูปที่ 1) สำหรับภาพดังกล่าวฉันเชื่อว่าเพื่อนทุกคนที่สามารถท่องอินเทอร์เน็ตควรได้เห็นพวกเขา
(รูปที่ 1)
2. รหัสผ่านรหัสผ่านโดเมนเมื่อเราออนไลน์ตัวอย่างเช่นหากเราเข้าสู่ที่อยู่อีเมลเราต้องป้อนรหัสผ่าน กล่องอินพุตสำหรับการป้อนรหัสผ่านเรียกว่าโดเมนรหัสผ่านซึ่งเป็นอีกรูปแบบหนึ่งของโดเมนข้อความ ฟังก์ชั่นของมันคือบทความทั้งหมดที่ป้อนลงในฟิลด์ข้อความจะแสดงด้วยเครื่องหมายดอกจัน* หรือจุด ไวยากรณ์พื้นฐานคล้ายกับฟิลด์ข้อความด้านบน ความแตกต่างคือคุณเพียงแค่ต้องเปลี่ยนข้อความในประเภทเป็นรหัสผ่าน ขึ้นอยู่กับตัวอย่างของฟิลด์ข้อความด้านบนให้เพิ่มรหัสผ่านรหัสระหว่างแท็ก <form>: <inpyt type = ชื่อรหัสผ่าน = ขนาดรหัสผ่าน = 20 maxlength = 30> หลังจากบันทึกแล้วเปิดไฟล์และป้อนอักขระใด ๆ ในกล่องป้อนรหัสผ่านเพื่อดูมันเป็นจุด
(รูปที่ 2)
3. ไฟล์โดเมนไฟล์
โดเมนไฟล์ช่วยให้เราสามารถกรอกไฟล์ในคอมพิวเตอร์ท้องถิ่นของเราภายในโดเมนและในที่สุดก็อัปโหลดผ่านแบบฟอร์ม นี่คือฟังก์ชั่นพื้นฐานของโดเมนไฟล์ สิ่งที่ใช้มากที่สุดควรอัปโหลด ในแง่ของลักษณะที่ปรากฏฟิลด์ไฟล์เป็นกล่องข้อความและปุ่มเรียกดู เราสามารถกรอกข้อมูลโดยตรงในเส้นทางของไฟล์ที่จะอัปโหลดไปยังเว็บไซต์ในกล่องข้อความหรือคลิกปุ่มท่องเว็บเพื่อค้นหาไฟล์ที่จะอัปโหลดบนคอมพิวเตอร์ของเรา
ไวยากรณ์พื้นฐานคือ
<input type = file name = field_name> ประเภทคือไฟล์ชื่อคือชื่อของฟิลด์ไฟล์นี้ มาเขียนฟิลด์ไฟล์รหัสมีดังนี้:
<html> <head> <title> ฟิลด์ข้อความ </title> </head> <body> <body> <form> โปรดอัปโหลดรูปภาพของคุณ: <อินพุตประเภท = ชื่อไฟล์ = ไฟล์> </form> </body> </html>
หลังจากบันทึกแล้วเปิดและคุณสามารถเห็นใบหน้าที่แท้จริงของฟิลด์ข้อความดังแสดงใน (รูปที่ 3) ฉันเชื่อว่าทุกคนได้เห็นภาพที่อัปโหลดเช่นนี้
(รูปที่ 3)
4. ปุ่มในรูปแบบปุ่มมีบทบาทสำคัญ ปุ่มสามารถมีฟังก์ชั่นในการส่งข้อมูลทั้งหมดของแบบฟอร์มไปยังเซิร์ฟเวอร์และสามารถกู้คืนแบบฟอร์มไปยังสถานะเริ่มต้นเมื่อผู้ใช้ต้องการแก้ไขแบบฟอร์มและยังสามารถเล่นบทบาทอื่นได้ตามความต้องการของโปรแกรม ปุ่มโดยทั่วไปแบ่งออกเป็นสามประเภท: ปุ่ม (ปุ่มปกติ), ส่ง (ส่งปุ่ม) และรีเซ็ต (ปุ่มรีเซ็ต) ไวยากรณ์ของปุ่มปุ่มปกติคือ <อินพุตประเภท = ปุ่มชื่อ = ค่า field_name = button_text> โดยที่ค่าของค่าแสดงข้อความที่แสดงบนปุ่ม จุดประสงค์ในการส่งปุ่มส่งคือการส่งข้อมูลทั้งหมดในแบบฟอร์มไปยังตัวจัดการเซิร์ฟเวอร์หลังจากคลิกปุ่มนี้ ไวยากรณ์พื้นฐานคือ <อินพุต type = subment name = field_name value = button_text> โดยที่ค่าของค่าแสดงข้อความที่แสดงบนปุ่ม รีเซ็ตปุ่มรีเซ็ตหมายความว่าหลังจากคลิกปุ่มข้อมูลทั้งหมดที่เราเพิ่มลงในแบบฟอร์มจะถูกล้างและกู้คืนไปยังการตั้งค่าเนื้อหาฟอร์มเริ่มต้น ไวยากรณ์พื้นฐานคือ <อินพุต type = reset name = field_name value = button_text>, อีกครั้ง: ในภาษา HTML ขนาดจะแยกไม่ออก มาเขียนตัวอย่างสั้น ๆ เพื่อฝึกฝนผลกระทบของปุ่มรหัสมีดังนี้
<html> <head> <title> การสาธิตแบบฟอร์ม </title> </head> <body> การลงทะเบียนผู้ใช้ <ฟอร์มแอ็คชั่น = mailto: [email protected] วิธี = รับชื่อ = ฮ่าฮ่า> ชื่อ: <อินพุตประเภท = ชื่อข้อความ = ขนาดผู้ใช้ = 20> <br> รหัสผ่าน value = http://> <br> <ประเภทอินพุต = ชื่อปุ่ม = field_name value = ปุ่มปกติ> <อินพุตประเภท = ส่งชื่อ = ค่า field_name = ส่งปุ่ม> <อินพุต type = reset name = field_name value = ปุ่มรีเซ็ต> </จาก> </body>
หลังจากบันทึกแล้วให้เปิดไฟล์และดูดังแสดงใน (รูปที่ 4) ฉันคิดว่าคุณได้เห็นภาพที่คล้ายกันและมีการใช้ภาพที่พบบ่อยที่สุดเมื่อลงทะเบียนผู้ใช้
(รูปที่ 4)
5. ซ่อนโดเมนที่ซ่อนอยู่
โดเมนที่ซ่อนอยู่นั้นไม่สามารถมองเห็นได้สำหรับผู้ใช้ในหน้าเนื่องจากซ่อนอยู่ วัตถุประสงค์ของการแทรกโดเมนที่ซ่อนอยู่ในแบบฟอร์มคือการรวบรวมหรือส่งข้อมูล เมื่อเราคลิกปุ่มส่งเพื่อส่งข้อมูลแบบฟอร์มข้อมูลโดเมนที่ซ่อนอยู่จะถูกส่งไปยังเซิร์ฟเวอร์ ไวยากรณ์พื้นฐานของเขาคือ <อินพุต type = field_name value = value> เหตุผลที่ฉันอธิบายให้คุณฟังก็คือหลาย ๆ โปรแกรมกำลังเขียนโปรแกรมที่คิดว่าสิ่งนี้ซ่อนอยู่และคิดว่าผู้ใช้ไม่สามารถมองเห็นได้ ดังนั้นในหลายกรณีไม่มีพารามิเตอร์โดเมนที่ซ่อนอยู่สำหรับการตรวจจับและการกรองอุบัติเหตุความปลอดภัยจำนวนมากจึงเกิดขึ้น3. แท็กฟิลด์ข้อความ <Textarea>
แท็กนี้มักจะใช้เพื่อสร้างฟิลด์ข้อความหลายบรรทัดในหน้าเว็บเพื่อให้สามารถป้อนข้อความเพิ่มเติมได้และที่ใช้มากที่สุดคือความคิดเห็นของบทความ
ไวยากรณ์พื้นฐานคือ:
<textarea name = rows name = value cols = value value = value> </textarea>
คุณสมบัติที่แสดงไว้ในตารางต่อไปนี้
คุณสมบัติแท็กฟิลด์ข้อความ | อธิบาย |
ชื่อ | ชื่อฟิลด์ข้อความ |
แถว | จำนวนบรรทัดในฟิลด์ข้อความ |
cols | จำนวนคอลัมน์ในฟิลด์ข้อความ |
ค่า | ค่าเริ่มต้นสำหรับฟิลด์ข้อความ |
ต่อไปนี้เป็นตัวอย่างที่จะอธิบายอย่างละเอียดเพื่อให้ทุกคนสามารถเข้าใจจากการฝึกฝนว่านี่ไม่ใช่เรื่องยากมาก รหัสเฉพาะมีดังนี้:
<html> <head> <title> การสาธิตฟังก์ชั่นโดเมนข้อความ </title> </head> <body> การสำรวจผู้ใช้ <การกระทำแบบฟอร์ม = mailto: [email protected] วิธี = รับชื่อ = ฮ่าฮ่า> กระดานข้อความ: <br> <textarea name = rows = 5 cols = 40> </textarea> </body> </html>
บันทึกรหัสและเปลี่ยนชื่อคำต่อท้ายและเปิดเพื่อดูว่ามันเหมือนกับบอร์ดข้อความบนอินเทอร์เน็ตดังที่แสดงใน (รูปที่ 5)
(รูปที่ 5)