เมื่อส่งแบบฟอร์ม จะใช้ประเภทเริ่มต้น แบบฟอร์มในรูปแบบ HTML ชื่อกลุ่มองค์ประกอบแบบฟอร์ม

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

1) สร้างแบบฟอร์มง่ายๆ

แท็ก

แบบฟอร์ม html นี้มีองค์ประกอบ เรียกดูซึ่งจะเปิดกล่องโต้ตอบสำหรับเลือกไฟล์ที่จะอัปโหลดไปยังเซิร์ฟเวอร์ เมื่อคุณกดปุ่ม “โอนไฟล์”ไฟล์จะถูกส่งผ่านไปยังสคริปต์ตัวจัดการ

จากนั้นคุณจะต้องเขียนสคริปต์ตัวจัดการ การกระทำ.php- ก่อนที่จะเขียนตัวจัดการ เราต้องตัดสินใจว่าจะคัดลอกไฟล์ไปที่ไดเร็กทอรีใด:

ถ้า(isset($_FILES [ "myfile" ])) // หากมีไฟล์อยู่
{
$แค็ตตาล็อก = "../image/" ; // แคตตาล็อกของเรา
ถ้า (is_dir($แค็ตตาล็อก)) // หากมีไดเร็กทอรีดังกล่าวอยู่
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // ไฟล์ชั่วคราว
$myfile_name = $_FILES [ "myfile" ][ "ชื่อ" ]; //ชื่อไฟล์
if(! copy ($myfile, $catalog)) เสียงก้อง "ข้อผิดพลาดในการคัดลอกไฟล์"- $myfile_name // หากการคัดลอกไฟล์ล้มเหลว
}
อื่น mkdir ("../image/" ); // หากไม่มีไดเร็กทอรีดังกล่าว เราจะสร้างมันขึ้นมา
}
?>

ความคิดเห็น

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

ตัวอย่างนี้สาธิตการสร้างไดเร็กทอรีและการคัดลอกไฟล์ลงในไดเร็กทอรีนั้นไปยังเซิร์ฟเวอร์

ฉันอยากจะสาธิตตัวอย่างกับองค์ประกอบด้วย ช่องทำเครื่องหมาย- องค์ประกอบนี้จะแตกต่างจากองค์ประกอบอื่นๆ เล็กน้อยหากไม่ใช่องค์ประกอบใดองค์ประกอบหนึ่ง ช่องทำเครื่องหมาย’a ไม่ได้ถูกเลือก ดังนั้นจะเป็นตัวแปร superglobal $_โพสต์จะส่งกลับค่าว่าง:

ถ้า (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // หากเลือกอย่างน้อย 1 องค์ประกอบ
อย่างอื่นสะท้อน "เลือกค่า";
?>

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

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

ลองดูตัวอย่างการใช้งาน:

ในตัวอย่างนี้ เรา:

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

ในเบราว์เซอร์ ตัวเลือกทั้งสอง (วิธีการ) สำหรับการใช้ป้ายกำกับข้อความจะมีลักษณะเหมือนกัน:

เคล็ดลับเครื่องมือสำหรับช่องป้อนข้อมูล

ลองดูตัวอย่างการใช้งาน:

ใน ในตัวอย่างนี้เราระบุไว้สำหรับองค์ประกอบ ด้วยข้อความประเภท (ช่องข้อความบรรทัดเดียว) และประเภทรหัสผ่าน (ช่องรหัสผ่าน) คำใบ้ข้อความสำหรับผู้ใช้ (แอตทริบิวต์ตัวยึดตำแหน่ง) ที่อธิบายค่าที่คาดหวังสำหรับการป้อนข้อมูล

ผลลัพธ์ของตัวอย่างของเรา:

คำถามและงานในหัวข้อ

ก่อนที่จะไปยังหัวข้อถัดไป ให้ฝึกปฏิบัติให้เสร็จสิ้น:

• ใช้ความรู้ที่คุณได้รับ สร้างแบบฟอร์มการสั่งซื้อต่อไปนี้:

คำเตือน: ในช่องที่คาดว่าจะเลือก ควรสามารถเลือกได้โดยคลิกที่ข้อความ ไม่ใช่เฉพาะองค์ประกอบเท่านั้น

หลังจากที่คุณทำแบบฝึกหัดเสร็จแล้ว ให้ตรวจสอบโค้ดของหน้าโดยการเปิดตัวอย่างในหน้าต่างแยกต่างหากเพื่อให้แน่ใจว่าคุณทำทุกอย่างถูกต้อง

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

แท็ก

คำอธิบายแบบฟอร์มอยู่ระหว่างแท็กที่จับคู่ ... - สามารถวางแบบฟอร์มหลายรายการบนหน้าพร้อมกันได้ แต่ไม่สามารถซ้อนกันภายในอีกหน้าหนึ่งได้

คุณสมบัติของแท็ก

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

เครื่องหมายคำถาม (?)

ข้อมูลจะถูกส่งแยกกัน

name ชื่อของแบบฟอร์ม ตั้งค่าให้ JavaScript สามารถเข้าถึงแบบฟอร์มตามชื่อแทนที่จะเป็นตัวเลข

แท็ก novalidate การมีอยู่ของแอตทริบิวต์นี้หมายความว่าข้อมูลในแบบฟอร์มไม่ควรได้รับการตรวจสอบ

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

แท็ก

target Frame ที่จะส่งข้อมูลที่ได้รับ (กำหนดไว้ในเอกสารที่มีเฟรม)

ตัวอย่าง

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

แท็ก

แท็ก คอนเทนเนอร์

แท็ก

แท็ก ไม่มีอยู่ด้วยตัวของมันเอง ข้อมูลที่ส่งมีอยู่ในองค์ประกอบแบบฟอร์มพิเศษ - การควบคุม ผู้ใช้โต้ตอบด้วยการป้อนข้อมูลกับพวกเขา

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

แท็ก ปุ่ม

ตั้งค่าปุ่มประเภทใดก็ได้

แท็ก

กลุ่มองค์ประกอบแบบฟอร์ม

.

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

แท็ก เป็นเซ็นเซอร์และใช้ในการส่งออกค่าภายในช่วงที่กำหนด

ตัวบ่งชี้

แท็ก เป็นเครื่องบ่งชี้ความก้าวหน้าของงาน

กลุ่มของรายการ

แท็ก ช่วยให้คุณสามารถจัดกลุ่มรายการได้ .

รายการ

แท็ก กำหนดรายการเดียว

.

พื้นที่ส่งออกข้อมูล

แท็ก

กำหนดพื้นที่เอาท์พุตของผลการคำนวณ

รายการ

แท็ก

ได้รับการออกแบบมาเพื่อสร้างรายการที่แนะนำซึ่งผู้ใช้สามารถเลือกได้ตั้งแต่หนึ่งรายการขึ้นไป

พื้นที่ข้อความ </h3> <p>แท็ก <b><textarea> </b>กำหนดพื้นที่สำหรับการป้อนข้อมูลข้อความหลายบรรทัด</p> <p>เราเคยเห็นหน้าเว็บที่ขอให้เราป้อนข้อมูลบางอย่างลงในช่องป้อนข้อมูลมากกว่าหนึ่งครั้ง HTML มีกลไกในการรับข้อมูลจากผู้ใช้ โดยปกติแล้ว ข้อมูลนี้ยังต้องได้รับการประมวลผล แต่พวกเขากำลังดำเนินการอยู่ <a href="https://royalprice.ru/th/different/pochemu-ne-pokazyvaet-skaip-pochemu-perestala-rabotat-vstroennaya/">โปรแกรมพิเศษ</a>- พิจารณากลไกของการโต้ตอบกับเว็บเพจ</p> <p>ดังนั้นผู้ใช้จึงดาวน์โหลดเว็บเพจซึ่งมีส่วนควบคุมการป้อนข้อมูลอยู่ ทั้งหมดรวมกันเป็นมวลรวมที่เรียกว่า <i>รูปร่าง.</i>แต่ละแบบฟอร์มจะมีปุ่มเมื่อคลิกข้อมูลที่ผู้ใช้ป้อนจะถูกถ่ายโอนไปยังโปรแกรมประมวลผล โปรแกรมนี้โฮสต์อยู่บนเว็บเซิร์ฟเวอร์ซึ่งให้บริการ <a href="https://royalprice.ru/th/office/pechat-veb-stranicy-v-pdf-varianty-sohraneniya-dannyh-veb-stranicy/">หน้านี้</a>- โปรแกรมดังกล่าวสามารถสร้างขึ้นได้โดยใช้เทคโนโลยีการเขียนโปรแกรมที่หลากหลาย พวกเขาจะรวมกันเพียงขั้นตอนเดียวในการรับข้อมูลจากเว็บเพจ ข้อมูลจะถูกส่งโดยใช้อินเทอร์เฟซเกตเวย์ CGI (Common Gateway Interface) ดังนั้นโปรแกรมประมวลผลจึงมักเรียกว่าแอปพลิเคชัน CGI หรือสคริปต์ CGI</p><p>ดังนั้นแอปพลิเคชันจะได้รับข้อมูลและประมวลผล ก็สามารถส่งได้บ้าง <a href="https://royalprice.ru/th/reviews/videourok-elektronnaya-pochta-otlozhennaya-otpravka-pisma-kak/">อีเมล</a>หรือดำเนินการบางอย่างในฐานข้อมูลหรือถ่ายโอนเว็บเพจใหม่ให้กับผู้ใช้ การกระทำที่เป็นไปได้จะถูกจำกัดโดยคุณสมบัติของเทคโนโลยีและจินตนาการของโปรแกรมเมอร์เท่านั้น ด้วยความช่วยเหลือของโปรแกรมดังกล่าว ระบบการลงทะเบียน ระบบตอบรับ สมุดเยี่ยมชม ฟอรั่ม และการแชททุกประเภทจึงทำงานได้ ด้วยความช่วยเหลือของพวกเขาแตกแขนงมากขึ้นและ <a href="https://royalprice.ru/th/setting/klassifikaciya-korporativnyh-sistem-rezervnogo-kopirovaniya/">ระบบที่ซับซ้อน</a>เช่น ร้านค้าออนไลน์</p><p>ในการสร้างแอปพลิเคชันดังกล่าว คุณยังคงต้องสามารถเขียนโปรแกรมและรู้กฎที่เกี่ยวข้องสำหรับการสร้างแอปพลิเคชัน CGI <a href="https://royalprice.ru/th/reviews/toshiba-satellite-c670-recovery-from-hidden-partition-toshiba-notebook-data-recovery/">จนกว่าเราจะรู้วิธีการทำเช่นนี้ เราจะต้องใช้สคริปต์ CGI ที่เปิดเผยต่อสาธารณะอีกครั้ง แต่ถึงแม้ว่าเราจะได้รับแอปพลิเคชันเหล่านี้แล้ว แบบฟอร์มสำหรับการป้อนข้อมูลของผู้ใช้ก็ยังต้องถูกสร้างขึ้นอย่างอิสระ</a>ใน</p><p>แบบฟอร์มถูกจำกัดด้วยแท็ก <i> <form> </i>และ <i> </form> </i>- ระหว่างแท็กเหล่านี้ มีแท็กที่สร้างหน่วยงานป้อนข้อมูลและแท็กสำหรับสร้างเนื้อหาตามปกติของเว็บเพจ กล่าวคือ สามารถวางหน่วยงานป้อนข้อมูลลงในตารางได้ ซึ่งจะอยู่ในแบบฟอร์มโดยสมบูรณ์ แท็ก <i><form> </i>ไม่สร้างโครงสร้างที่สามารถแสดงผลได้ มันค่อนข้างมีไว้สำหรับการจัดกลุ่มวัตถุภายใน</p><p>แท็ก <form>โดยปกติแล้ว จะมีพารามิเตอร์จำนวนหนึ่งที่กำหนดคุณสมบัติ <a href="https://royalprice.ru/th/reviews/krasivaya-forma-avtorizacii-css3-sozdaem-formu-registracii-knopka/">แบบฟอร์มที่สร้างขึ้น</a>- ลองดูที่พารามิเตอร์เหล่านี้</p> <ul><li>พารามิเตอร์ <i>การกระทำ</i>เป็นสิ่งจำเป็น</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>วิธี</i>พารามิเตอร์ <i>enctype="หลายส่วน/แบบฟอร์มข้อมูล"</i>มีวัตถุประสงค์เพื่อระบุลักษณะการถ่ายโอนข้อมูลไปยังแอปพลิเคชันการประมวลผล <i>(ค่าเริ่มต้น</i>คำหลักที่กำหนดไว้ล่วงหน้าหนึ่งในสองคำถูกใช้เป็นค่าพารามิเตอร์: <i>หรือ</i></li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>- ตอนนี้เราไม่จำเป็นต้องค้นหาว่ามีการใช้กลไกใดโดยใช้วิธีนี้หรือวิธีการนั้น ไม่ทางใดก็ทางหนึ่งเอกสารประกอบสำหรับแอปพลิเคชัน CGI ระบุว่าควรใช้วิธีการถ่ายโอนข้อมูลแบบใด</i>ไอคอนเริ่มต้นคือ <i>รับ.</i>เข้ารหัส</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>ใช้เพื่อระบุประเภทของข้อมูลที่จะส่งจากแบบฟอร์ม มักจะไม่จำเป็นต้องใช้มันเนื่องจากคุณค่า</i> application/x-www-form-urlencoded <a href="https://royalprice.ru/th/internet/trushin-a-n-arutyunyan-m-g-organizaciya-soedineniya-i-obmen-dannymi-po/">ซึ่งเป็นค่าเริ่มต้น เหมาะสำหรับแอปพลิเคชัน CGI ส่วนใหญ่</a>ยอมรับชุดอักขระ <i>ใช้ในกรณีที่ผู้ใช้ไม่เพียงโอนข้อมูลเท่านั้น แต่ยังรวมถึงไฟล์จากแบบฟอร์มไปยังแอปพลิเคชันด้วย ในกรณีนี้ เราสามารถระบุการเข้ารหัสของไฟล์ที่ถ่ายโอนได้อย่างชัดเจน เป็นค่านิยม</i>พารามิเตอร์นี้</li> <li>พารามิเตอร์ <i>สตริงข้อความถูกใช้ในการเขียนชื่อการเข้ารหัสตั้งแต่หนึ่งชื่อขึ้นไป</i>หากใช้การเข้ารหัสหลายรายการ ชื่อจะถูกคั่นด้วยช่องว่างหรือเครื่องหมายจุลภาค ค่าเริ่มต้นคือ</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>ไม่ทราบ</i>ซึ่งบอกเซิร์ฟเวอร์ว่าต้องทราบการเข้ารหัสที่ใช้</li> </ul><p>แท็ก <i><form> </i>ยอมรับ <i> </form> </i>ระบุประเภทของไฟล์ที่จะถ่ายโอน โดยปกติแล้วจะไม่ได้ใช้ เนื่องจากเซิร์ฟเวอร์สามารถรับรู้ประเภทของไฟล์ที่ได้รับได้อย่างเพียงพอ <i><input> </i>- มาสาธิตสิ่งนี้ด้วยตัวอย่างเล็ก ๆ (รูปที่ 1.32)</p> <p>รายการ 1.33</p> <p><i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br>"http://www.w3.org/TR/html4/strict.dtd"> <br> <html> <head><br> <title></title> </head> <body><br> <form action="http://www.maysite.com/cgi-bin/test.exe" method="post"><br> <р>ช่องสำหรับป้อนบรรทัดข้อความ< input type="text"> </p> <br> <input type="submit" value="ส่ง"> </form><br> </body><br> </html> </i></p><p><img src='https://i0.wp.com/tepka.ru/html4b/32.jpg' height="381" width="376" loading=lazy loading=lazy></p> <p>ข้าว. 1.32. <i>หน้าต่าง Browser แสดงผลลัพธ์ของไฟล์ดังรายการ 1.33</i></p> <p>ดังนั้นในภาพประกอบคุณจะเห็นว่าเราสามารถสร้างช่องป้อนข้อความและปุ่มได้ เมื่อคลิก ข้อมูลที่ผู้ใช้ป้อนจะถูกส่งไปยังแอปพลิเคชัน CGI เพื่อประมวลผล และถ้าเราดูที่ List Code เราจะเห็นว่าทั้งปุ่มและช่องอินพุตถูกสร้างขึ้นโดยใช้แท็กเดียวกัน <i><input> </i>- คุณสมบัติของแท็กนี้ได้รับการปรับโดยใช้พารามิเตอร์จำนวนมาก ซึ่งเราจะพิจารณาในตอนนี้</p> <ul><li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>พิมพ์</i>อาจเป็นพารามิเตอร์หลัก ด้วยการใช้ค่าของมัน เราสามารถกำหนดประเภทของการควบคุมที่ถูกสร้างขึ้นได้ ค่าเป็นหนึ่งในค่าต่อไปนี้ <a href="https://royalprice.ru/th/game-console/podbor-klyuchevyh-slov-dlya-kanala-yutub-podbor-klyuchevyh-slov-youtube-s-pomoshchyu/">คำหลัก</a>:<i>ข้อความ, รหัสผ่าน, ช่องทำเครื่องหมาย, วิทยุ, ส่ง, รีเซ็ต, ไฟล์, ซ่อนเร้น,</i> <i>รูปภาพ, ปุ่ม</i>ค่าเริ่มต้นคือ <i>ข้อความ.</i>เราจะดูรายละเอียดประเภทเหล่านี้เพิ่มเติมในภายหลัง</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>ไม่ทราบ</i>ออกแบบมาเพื่อตั้งชื่อที่ไม่ซ้ำกันสำหรับการควบคุมแต่ละรายการ แม้ว่าพารามิเตอร์นี้จะเป็นทางเลือก แต่ก็ขอแนะนำอย่างยิ่ง</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>เอกสารประกอบสำหรับแอปพลิเคชัน CGI จะต้องระบุว่าควรตั้งชื่อหน่วยงานป้อนข้อมูลที่เกี่ยวข้องอย่างไร</i>ค่า <i>เอกสารประกอบสำหรับแอปพลิเคชัน CGI จะต้องระบุว่าควรตั้งชื่อหน่วยงานป้อนข้อมูลที่เกี่ยวข้องอย่างไร</i>ใช้เพื่อระบุค่าการแสดงผลเริ่มต้นสำหรับปุ่มและช่องป้อนข้อความ</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>หากเราใช้ปุ่มตัวเลือกแล้วค่าพารามิเตอร์</i>จะไม่ปรากฏแก่ผู้ใช้ แต่นี่คือค่าที่แอปพลิเคชันประมวลผล CGI จะได้รับหากผู้ใช้เลือกปุ่มตัวเลือกที่เหมาะสม<<i>ตรวจสอบแล้ว</i>ใช้สำหรับสวิตช์อิสระและปุ่มตัวเลือกเท่านั้น มันกำหนดสถานะเริ่มต้นของพวกเขา หากป้อนพารามิเตอร์นี้ลงในแท็ก</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>อินพุต></i>สวิตช์จะเปลี่ยนเป็นสถานะเปิด พารามิเตอร์ถูกใช้โดยไม่มีค่า</li> <li>พารามิเตอร์ <i>พิการ</i>ทำให้การควบคุมไม่พร้อมใช้งานโดยผู้ใช้ พารามิเตอร์ถูกใช้โดยไม่มีค่า</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>อ่านอย่างเดียว</i>ใช้กับเนื้อหาการป้อนประเภทรหัสผ่านแบบข้อความเท่านั้น การใช้ตัวเลือกนี้หมายความว่าข้อมูลที่แสดงในฟิลด์เหล่านี้ไม่สามารถเปลี่ยนแปลงได้</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>ขนาด</i>ช่วยให้คุณกำหนดจำนวนอักขระสูงสุดที่เป็นไปได้ที่ผู้ใช้สามารถป้อนลงในช่องป้อนข้อความ ค่าพารามิเตอร์เป็นจำนวนเต็มบวก</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>src</i>ใช้ในกรณีที่เราสร้างการควบคุมอินพุตที่เกี่ยวข้องกับกราฟิก ค่าของพารามิเตอร์นี้คือ URL <a href="https://royalprice.ru/th/security/samye-rasprostranennye-formaty-izobrazhenii-na-web-stranicah-grafika-na/">ไฟล์กราฟิก</a>ซึ่งมีรูปภาพที่แสดงอยู่</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>ทางเลือกอื่น</i>ช่วยให้คุณสร้างคำอธิบายสั้น ๆ เกี่ยวกับอำนาจการป้อนข้อมูลที่ถูกสร้างขึ้น คำอธิบายนี้สามารถแสดงเป็นคำแนะนำเล็กๆ น้อยๆ เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบอินพุตนี้</li> <li>พารามิเตอร์ <i>tabindex</i>ระบุจำนวนของตัวควบคุมตามลำดับของวัตถุทั้งหมด โฟกัสอินพุตจะถูกย้ายระหว่างวัตถุเหล่านั้นโดยการกดปุ่ม Tab ต่อเนื่องกัน</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>คีย์การเข้าถึง</i>ให้คุณตั้งค่า " <a href="https://royalprice.ru/th/mobile-os/1s-cikl-perehod-k-sleduyushchei-iteracii-preryvaniya-cikla/">ปุ่มลัด</a>" เมื่อผู้ใช้คลิก โฟกัสอินพุตจะย้ายไปยังตัวควบคุมนี้</li> </ul><p>ดังนั้นเราจึงดูที่พารามิเตอร์ที่ใช้ในแท็ก <input>- แต่เรารู้อยู่แล้วว่าการใช้แท็กนี้เราสามารถสร้างวัตถุแบบฟอร์มได้หลากหลาย ถึงเวลาดูรายละเอียดแล้ว</p><p>ออบเจ็กต์ที่รวมอยู่ในแบบฟอร์มแบ่งออกเป็นสองประเภท - เนื้อหาการป้อนข้อมูลและปุ่มที่เริ่มต้นการดำเนินการต่างๆ ขั้นแรกเรามาดูกันว่าเราจะสร้างอวัยวะรับข้อมูลได้อย่างไร</p><p>หนึ่งในออบเจ็กต์แบบฟอร์มที่พบบ่อยที่สุดคือฟิลด์อินพุตบรรทัดเดียว ในรายการ 1.33 เราเห็นว่ามันถูกสร้างโดยใช้พารามิเตอร์ type พร้อมด้วยข้อความค่า ในเวลาเดียวกัน บ่อยครั้งที่เราต้องกำหนดข้อจำกัดเกี่ยวกับจำนวนอักขระสูงสุดที่เป็นไปได้ที่ผู้ใช้สามารถป้อนลงในฟิลด์นี้ได้ ข้อจำกัดนี้ถูกนำมาใช้โดยใช้พารามิเตอร์ความยาวสูงสุด</p><p>มีการปรับเปลี่ยนช่องป้อนข้อความบรรทัดเดียวซึ่งมีไว้เพื่อการป้อนโดยเฉพาะ <a href="https://royalprice.ru/th/overview-windows/vybor-topologii-seti-dlya-obrabotki-sekretnoi-informacii-vybor/">ข้อมูลลับ</a>เช่น รหัสผ่าน พวกเขาแสดงข้อความที่ป้อนและแทนที่ด้วยเครื่องหมายดอกจัน ช่องป้อนข้อมูลดังกล่าวถูกสร้างขึ้นโดยใช้โครงสร้างต่อไปนี้:</p> <p><i> <input type="password"> </i></p><p>โดยใช้ชนิด <i>ช่องทำเครื่องหมาย</i>ช่วยให้คุณสร้างสวิตช์อิสระ เป็นสี่เหลี่ยมจัตุรัสที่คุ้นเคยซึ่งเราสามารถทำเครื่องหมายและยกเลิกการทำเครื่องหมายในช่องได้ด้วยการคลิกเมาส์ ในกรณีนี้ จะใช้พารามิเตอร์ค่า ค่าของพารามิเตอร์นี้จะถูกส่งไปยังแอปพลิเคชัน CGI หากผู้ใช้ทำเครื่องหมายที่ช่องทำเครื่องหมายนี้</p><p>เรายังสามารถสร้างกลุ่มสวิตช์ ซึ่งมักเรียกว่าปุ่มตัวเลือก ในกลุ่มนี้ผู้ใช้สามารถเลือกและตรวจสอบปุ่มตัวเลือกได้เพียงปุ่มเดียวเท่านั้น สวิตช์แต่ละตัวถูกสร้างขึ้นโดยใช้แท็ก <i><lnput> </i>พร้อมพารามิเตอร์ <i>พิมพ์,</i>ซึ่งกำหนดค่าวิทยุไว้ เพื่อให้เบราว์เซอร์เข้าใจว่าปุ่มตัวเลือกหลายปุ่มอยู่ในกลุ่มเดียวกัน ค่าพารามิเตอร์ชื่อจะต้องเหมือนกัน แต่ในขณะเดียวกันก็ต้องมีค่าที่แตกต่างกันสำหรับพารามิเตอร์ค่า</p><p>ลองดูตัวอย่างกฎสำหรับการสร้างและแสดงอวัยวะอินพุตข้อมูลที่พิจารณา</p> <p>รายการ 1.34</p> <p><i>- DOCTYPE HTML สาธารณะ "-//W3C//DTD HTML 4.01//EN" <br>http://www.w3.Qrg/TR/html4/strict.dtd"> <br> <html> <head> , <title></head><br> <form action="http://www.mysite.com/.cgi-bin/test.exe" method="post"> <br> <р>ช่องสำหรับป้อนบรรทัดข้อความ <input type="text"> </p> <br> <р>ช่องรหัสผ่าน <input type="password"> </p><br> <р>สวิตช์อิสระ <input type="checkbox" value="ตรวจสอบแล้ว"> </p><br> <р>สลับกลุ่ม</р><br> <р>ทางเลือกที่ 1 <input type="radio" name="groupl" value="ตรวจสอบ"> </p><br> <р>ทางเลือกที่ 2 <input type»"^adio" name="groupl" value="ตรวจสอบแล้ว></p><br><р>Alternative 3 <input type=!}"radio" name="groupl" value="ตรวจสอบ 3"> </p><br> <input type="submit" value="ส่ง"> </form> <br> </body> </html> </i></p><p>ภาพประกอบด้านล่าง (รูปที่ 1.33) แสดงวิธีการแสดงข้อความที่ป้อนในช่องป้อนข้อมูลปกติและในช่องป้อนข้อมูลที่เป็นความลับ</p><p>และรายการ 1.34 แสดงให้เห็นอย่างชัดเจนว่าเราสามารถสร้างปุ่มตัวเลือกอิสระและกลุ่มของปุ่มตัวเลือกได้อย่างไร ในเวลาเดียวกัน เราเริ่มตั้งค่าสถานะเริ่มต้นสำหรับสวิตช์ตัวที่สองในกลุ่ม แต่แน่นอนว่าผู้ใช้สามารถเลือกตัวเลือกที่ต้องการได้ด้วยตนเอง <i>การใช้พารามิเตอร์</i>พิมพ์ <i>ด้วยค่าที่กำหนดที่ซ่อนอยู่เราสามารถสร้างฟิลด์ที่ซ่อนอยู่ได้ ฟิลด์นี้ไม่เพียงแต่ไม่อนุญาตให้ผู้ใช้ป้อนข้อมูลใดๆ เท่านั้น แต่ยังจะไม่ปรากฏในวิวพอร์ตอีกด้วย ฟิลด์ประเภทนี้มักจะใช้เพื่อวัตถุประสงค์อย่างเป็นทางการโดยนักพัฒนา และใช้คุณค่า</i>ไฟล์</p><p>เราสามารถสร้างฟิลด์อินพุตชื่อไฟล์ได้ ในกรณีนี้ ถัดจากฟิลด์ป้อนข้อความ ปุ่มที่เรียกว่าเรียกดูจะถูกสร้างขึ้นโดยอัตโนมัติ เมื่อคลิก กล่องโต้ตอบการเลือกไฟล์มาตรฐานจะเปิดขึ้น</p> <p><img src='https://i1.wp.com/tepka.ru/html4b/33.jpg' height="478" width="427" loading=lazy loading=lazy></p> <p>นอกจากอวัยวะป้อนข้อมูลแล้ว เรายังวางส่วนควบคุมได้อีกด้วย <i>หน้าต่างเบราว์เซอร์พร้อมผลลัพธ์ของการแสดงไฟล์ที่แสดงในรายการ 1.34</i></p> <p>ปุ่มประเภท "ส่ง" ถูกสร้างขึ้นโดยใช้โครงสร้างต่อไปนี้:</p> <p><i><input type="submit" vа1uе="Подтвердить"> </i></p> <p>อย่างที่คุณเห็น ปุ่มถูกสร้างขึ้นโดยใช้พารามิเตอร์ <i>พิมพ์</i>และคำจารึกบนนั้นถูกระบุโดยค่าของพารามิเตอร์ <i>เอกสารประกอบสำหรับแอปพลิเคชัน CGI จะต้องระบุว่าควรตั้งชื่อหน่วยงานป้อนข้อมูลที่เกี่ยวข้องอย่างไร</i>- หากเราจำเป็นต้องสร้างปุ่มเพื่อล้างช่องป้อนข้อมูล เราสามารถใช้โค้ดต่อไปนี้:</p> <p><i> <input type="reset" value="ชัดเจน"> </i></p><p>และสำหรับปุ่มง่ายๆ เราใช้โครงสร้างดังต่อไปนี้:</p> <p><i> <input type-"button" value="ปุ่ม"> </i></p><p>เราได้กล่าวไปแล้วว่าแทนที่จะใช้ปุ่ม "ส่ง" ปกติ เราสามารถใช้รูปภาพกราฟิกใดก็ได้ ในการดำเนินการนี้ เราใช้โค้ดต่อไปนี้:</p> <p><i> <input type="invage" src="http://www.mysite.com/image/pict.gif"> </i></p><p>ในกรณีนี้ไม่จำเป็นต้องใช้พารามิเตอร์ <i>เอกสารประกอบสำหรับแอปพลิเคชัน CGI จะต้องระบุว่าควรตั้งชื่อหน่วยงานป้อนข้อมูลที่เกี่ยวข้องอย่างไร</i>เนื่องจากไม่จำเป็นต้องตั้งป้ายกำกับบนปุ่ม แต่คุณจำเป็นต้องใช้พารามิเตอร์ <i>src</i>ซึ่งค่าคือ URL ของไฟล์กราฟิกที่กำลังใช้งาน</p><p>แต่นอกเหนือจากเนื้อหาอินพุตข้อมูลที่เราพิจารณาแล้ว ยังมีเนื้อหาเพิ่มเติมที่ไม่ได้ใช้งานโดยใช้แท็ก <i><input> </i>- ซึ่งรวมถึงรายการแบบเลื่อนลงและช่องป้อนข้อความหลายบรรทัด</p><p>รายการแบบเลื่อนลงถูกนำมาใช้โดยใช้แท็ก <i><select> </i>- ในกรณีนี้ โดยปกติจะใช้คู่ปิดด้วย <i> </select>. </i>ระหว่างแท็กเหล่านี้ เราประกาศองค์ประกอบรายการโดยใช้แท็ก <i><option>. </i>แท็ก <i><select> </i>โดยธรรมชาติแล้วจะมีคุณสมบัติบางอย่างที่สามารถปรับเปลี่ยนได้โดยใช้พารามิเตอร์</p> <ul><li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>ไม่ทราบ</i>ตามปกติจะระบุชื่อเฉพาะของช่องป้อนข้อมูลที่กำหนด เช่น รายการแบบเลื่อนลง</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>อ่านอย่างเดียว</i>กำหนดจำนวนแถวที่มองเห็นได้เมื่อขยายรายการ โดยปกติแล้ว อาจมีองค์ประกอบในรายการมากกว่าเส้นที่แสดง แต่ในกรณีนี้จะแสดงเฉพาะแถบเลื่อนแนวตั้งเท่านั้น ค่าพารามิเตอร์เป็นจำนวนเต็มบวก</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>หลายรายการ</i>ใช้ถ้าเราต้องการให้ผู้ใช้เลือกหลายค่าจากรายการพร้อมกัน</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>ปิดการใช้งาน</i>ทำให้เบราว์เซอร์แสดงรายการแบบเลื่อนลงที่กำหนด แต่ผู้ใช้จะไม่สามารถเปิดใช้งานและเลือกค่าใดๆ ได้</li> <li>พารามิเตอร์ <i>tabindex</i>ดังที่เราทราบแล้ว ตั้งค่าหมายเลขซีเรียลขององค์ประกอบอินพุตข้อมูลตามลำดับของออบเจ็กต์ ซึ่งโฟกัสอินพุตระหว่างนั้นจะเปลี่ยนโดยใช้ปุ่มแท็บ</li> </ul><p>และองค์ประกอบรายการแบบเลื่อนลงนั้นถูกสร้างขึ้นโดยใช้แท็ก <option>- แท็กเหล่านี้มีคุณสมบัติของตัวเองด้วย แต่มีไม่มาก</p> <ul><li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>เลือกแล้ว</i>ใช้สำหรับองค์ประกอบเหล่านั้นที่จะถูกเน้นโดยค่าเริ่มต้นเมื่อเปิดใช้งานรายการแบบเลื่อนลง</li> <li>พารามิเตอร์ <i>ค่า</i>ระบุค่าที่จะส่งผ่านไปยังแอปพลิเคชันการประมวลผล CGI หากผู้ใช้เลือกรายการแบบเลื่อนลงนี้โดยเฉพาะ</li> </ul><p>ตอนนี้เรามาดูขั้นตอนง่าย ๆ สำหรับการสร้างรายการแบบหล่นลงในแบบฟอร์มเอกสาร HTML (รูปที่ 1.34)</p> <p>รายการ 1.35</p> <p><i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br>"http://www.w3.org/TR/htm!4/Strict.dtd"> <br> <html><br> <head><title></title><br> <body><br> <form action="http: //www.mysite.com/cgi-bin/test.exe<br> <select name=""menu"> <br> <option value="ขาย">1 คะแนน</option><br> <option value="เซล2" selected>2 จุด</option><br> <option value="เซล3">3 จุด</option> </select><br> <input type="submit" value"Отправить"> </form><br> </body>/html></i></p><p><img src='https://i2.wp.com/tepka.ru/html4b/34.jpg' width="100%" loading=lazy loading=lazy></p> <p>ข้าว. 1.34. <i>หน้าต่าง Browser แสดงผลไฟล์ดังรายการ 1.35</i></p> <p>เหลือองค์ประกอบการป้อนข้อมูลเพียงรายการเดียวที่ต้องพิจารณา นี่คือช่องป้อนข้อความแบบหลายบรรทัด มีการใช้งานโดยใช้แท็ก <i>พื้นที่ข้อความ</i>แท็กนี้สร้างพื้นที่ป้อนข้อมูลที่ค่อนข้างกว้าง และมักจะใช้เพื่อป้อนข้อมูลข้อความจำนวนปานกลางถึงมาก แท็กไม่สามารถทำได้หากไม่มีพารามิเตอร์ และเราจะพิจารณาพวกเขาอย่างแน่นอน</p> <ul><li>พารามิเตอร์ <i>ชื่อ</i>ช่วยให้คุณสามารถตั้งชื่อที่ไม่ซ้ำสำหรับองค์ประกอบการป้อนข้อมูลที่กำหนด</li> <li>พารามิเตอร์ <i>แถว</i>ระบุจำนวนบรรทัดที่จะแสดงสำหรับช่องป้อนข้อมูลที่สร้างขึ้น โดยพื้นฐานแล้ว นี่คือความสูง แต่ระบุไว้เป็นเส้น จำเป็นต้องมีพารามิเตอร์ ค่าเป็นจำนวนเต็มบวก</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>คอลัมน์</i>ระบุความกว้างเป็นอักขระของช่องป้อนข้อความที่สร้างขึ้น จำเป็นต้องมีพารามิเตอร์ด้วย</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>อินพุต></i>ใช้หากจำเป็นต้องทำให้ฟิลด์ใช้งานไม่ได้</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>อ่านอย่างเดียว</i>ใช้เพื่อสร้างฟิลด์ที่มีข้อความที่ไม่สามารถแก้ไขได้ ข้อความในช่องป้อนข้อมูลดังกล่าวสามารถแสดงได้เท่านั้น แต่ผู้ใช้จะไม่สามารถเปลี่ยนแปลงได้</li> <li>พารามิเตอร์ <i>tabindex</i>ตั้งค่าหมายเลขซีเรียลขององค์ประกอบอินพุตข้อมูลและลำดับของออบเจ็กต์ โฟกัสอินพุตระหว่างนั้นจะเปลี่ยนโดยใช้ปุ่มแท็บ</li> <li>ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้ <i>คีย์การเข้าถึง</i>ช่วยให้คุณสามารถระบุคีย์ได้ เมื่อกดแล้ว โฟกัสอินพุตจะถูกถ่ายโอนไปยังฟิลด์อินพุตนี้โดยอัตโนมัติ</li> </ul><p>ตอนนี้เรามาดูกันว่าช่องป้อนข้อมูลดังกล่าวถูกสร้างขึ้นอย่างไร (รูปที่ 1.35)</p> <p>รายการ 1.36</p> <p><i> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br>"http://www.w3.org/TR/html4/strict.dtd"> <br> <html> <head><br> <title></title> </head><br> <body><br> <form action=»"http://www.mysite.com/cgi-bin/test.exe" method="post"><br> <textarea rows=5 cols=2><br>ข้อความที่จะแสดงในช่องป้อนข้อมูลหลายบรรทัด

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

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

ข้าว. 1 .35. หน้าต่าง Browser แสดงผลไฟล์ดังรายการ 1.36

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

สวิตช์อิสระ
ประเภทอินพุต = "ช่องทำเครื่องหมาย" name = "ตรวจสอบ" value = "checked" id="checkl"> !}

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

วัตถุประสงค์ของแบบฟอร์ม

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

ไวยากรณ์ของแบบฟอร์ม

เอกสาร HTML ใช้แท็กเพื่อกำหนดแบบฟอร์ม

…

,เอกสารสามารถมีได้หลายรูปแบบ แต่ไม่สามารถซ้อนกันได้ โดยรูปแบบหนึ่งอยู่ภายในอีกรูปแบบหนึ่ง

แท็ก

มีพารามิเตอร์ action, method และ enctype เบราว์เซอร์บางตัว (Netscape, Internet Explorer) รองรับพารามิเตอร์เพิ่มเติม เช่น คลาส ชื่อ สไตล์ ฯลฯ

โดยทั่วไปจะมีการกำหนดแบบฟอร์มดังนี้

form_content

พารามิเตอร์การกระทำเป็นเพียงพารามิเตอร์ที่จำเป็นเท่านั้น ค่าของมันคือ URL ของโปรแกรม CGI ที่จะประมวลผลข้อมูลที่ดึงมาจากแบบฟอร์มนี้

ปฏิสัมพันธ์ระหว่างเบราว์เซอร์และเว็บเซิร์ฟเวอร์

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

ประเภทไมม์

การใช้อินเทอร์เน็ตครั้งแรกอย่างหนึ่งคืออีเมล ซึ่งเน้นไปที่การส่งข้อความ บ่อยครั้งมีความจำเป็นต้องส่งข้อมูลในรูปแบบที่ไม่ใช่ข้อความพร้อมกับข้อความ เช่น ไฟล์ zip ที่แพ็ก รูปภาพในรูปแบบ GIF, JPEG เป็นต้น เพื่อที่จะส่งไฟล์ดังกล่าวทางอีเมลโดยไม่มีการบิดเบือน ไฟล์เหล่านั้นจะถูกเข้ารหัส ตามมาตรฐานบางประการ มาตรฐาน MIME (ส่วนขยายจดหมายทางอินเทอร์เน็ตอเนกประสงค์) กำหนดชุดของประเภท MIME ที่สอดคล้องกับข้อมูลประเภทต่างๆ และกฎสำหรับการส่งผ่านทางอีเมล เพื่อแสดงถึงประเภท MIME จะใช้สัญลักษณ์ของประเภทแบบฟอร์ม/ประเภทย่อย โดยที่ประเภทจะระบุประเภทข้อมูลทั่วไป เช่น ข้อความ รูปภาพ แอปพลิเคชัน (ประเภทแอปพลิเคชันหมายถึงรูปแบบข้อมูลภายในเฉพาะที่บางโปรแกรมใช้) และ ประเภทย่อยระบุรูปแบบเฉพาะภายในประเภทข้อมูล เช่น application/zip , image/gif , text/html

ประเภท MIME ถูกใช้บนเว็บ ซึ่งเรียกอีกอย่างว่าประเภทสื่อ เพื่อระบุรูปแบบของเอกสารที่ส่งผ่านโปรโตคอล HTTP ในรูปแบบ HTML พารามิเตอร์ enctype ระบุประเภทสื่อที่ใช้สำหรับการเข้ารหัสและการส่งต่อ ชนิดข้อมูลพิเศษ- เนื้อหาแบบฟอร์ม

ค่าของพารามิเตอร์ enctype คือประเภทสื่อ ซึ่งกำหนดรูปแบบสำหรับการเข้ารหัสข้อมูลเมื่อส่งข้อมูลจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์ เบราว์เซอร์เข้ารหัสข้อมูลเพื่อป้องกันไม่ให้เกิดความเสียหายระหว่างการส่งข้อมูล มีสองค่าที่เป็นไปได้สำหรับพารามิเตอร์นี้: (ค่าเริ่มต้น) และ multipart/form-data

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

การเข้ารหัส URL

รูปแบบการเข้ารหัส application/x-www-form-urlencodedจะเหมือนกันสำหรับวิธีการโอนทั้งสองวิธี (GET และ POST) และมีดังต่อไปนี้ สำหรับแต่ละองค์ประกอบของแบบฟอร์มที่มีชื่อที่ระบุโดยพารามิเตอร์ name จะมีการสร้างคู่ "name=value" โดยที่ value คือค่าขององค์ประกอบที่ผู้ใช้ป้อนหรือกำหนดตามค่าเริ่มต้น หากไม่มีค่า คู่ที่เกี่ยวข้องคือ "name=" สำหรับปุ่มตัวเลือกและปุ่มตัวเลือกจะใช้เฉพาะค่าของรายการที่เลือกเท่านั้น หากเลือกองค์ประกอบและไม่ได้กำหนดพารามิเตอร์ค่า ค่าเริ่มต้นคือ "on"

คู่ทั้งหมดจะรวมกันเป็นสตริง โดยใช้อักขระ "&" ​​เป็นตัวคั่น เนื่องจากชื่อและค่าเป็นข้อความธรรมดา จึงอาจมีอักขระที่ไม่ได้รับอนุญาตให้เป็นส่วนหนึ่งของ URL (วิธี GET ส่งข้อมูลเป็นส่วนหนึ่งของ URL) อักขระดังกล่าวจะถูกแทนที่ด้วยลำดับที่ประกอบด้วยอักขระ % และรหัส ASCII ที่เป็นเลขฐานสิบหก อักขระเว้นวรรคสามารถแทนที่ได้ไม่เพียงแต่ด้วยรหัส %20 เท่านั้น แต่ยังสามารถเปลี่ยนได้ด้วยเครื่องหมาย + (บวก) อีกด้วย พบจุดยุติบรรทัดในสนาม พื้นที่ข้อความถูกแทนที่ด้วยรหัส %0D%0A การเข้ารหัสนี้เรียกว่าการเข้ารหัส URL

วิธีการถ่ายโอนข้อมูล

ข้อมูลที่เข้ารหัสจะถูกส่งไปยังเซิร์ฟเวอร์โดยใช้วิธี GET หรือ POST วิธีใดวิธีหนึ่ง ข้อแตกต่างที่สำคัญคือวิธีการส่งข้อมูลไปยังโปรแกรม CGI

เมื่อใช้วิธีการ GET ข้อมูลแบบฟอร์มจะถูกส่งเป็นส่วนหนึ่งของคำขอ URL ซึ่งจะต่อท้ายหลังเครื่องหมาย "?"

เป็นชุดคู่

ตัวแปร = ค่า

คั่นด้วยอักขระ "&" ในกรณีนี้ บรรทัดแรกของแบบสอบถามอาจมีลักษณะดังนี้:

รับ /cgi-bin/cgi-program.pl?name=Ivan&surname=Ivanov HTTP/1.1 ส่วนของ URL หลัง "?" เรียกว่าสตริงการสืบค้น เว็บเซิร์ฟเวอร์จะได้รับคำขอเมื่อได้รับมอบหมายตัวแปรสภาพแวดล้อม

QUERY_STRING ค่าของสตริงการสืบค้นและจะเรียกโปรแกรม CGI ที่ระบุไว้ในส่วนแรกของ URL ก่อนเครื่องหมาย "?" -.

เมื่อใช้วิธีการ POST ข้อมูลแบบฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์ในเนื้อความของคำขอหลังจากนั้นเซิร์ฟเวอร์จะถ่ายโอนไปยังโปรแกรม CGI ผ่านทาง อินพุตมาตรฐาน.

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

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

.

แท็ก

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

ประเภท = "ข้อความ"

สร้างองค์ประกอบสำหรับการป้อนสตริงข้อความ

ตัวเลือกเพิ่มเติม:

• maxlength="n" - กำหนดจำนวนอักขระสูงสุดที่อนุญาตในช่องข้อความ ตามค่าเริ่มต้น - ไม่จำกัด
• size="n" - จำนวนอักขระสูงสุดที่แสดง
• ค่า = "initial_value" !}- ค่าเริ่มต้นของช่องข้อความ

ประเภท = "รหัสผ่าน"

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

ประเภท = "ไฟล์"

สร้างฟิลด์สำหรับป้อนชื่อไฟล์ในเครื่อง พร้อมด้วยปุ่มเรียกดู ไฟล์ที่เลือกจะถูกผนวกเข้ากับเนื้อหาแบบฟอร์มเมื่อส่งไปยังเซิร์ฟเวอร์ คุณสามารถป้อนชื่อไฟล์ได้โดยตรงหรือเลือกจากกล่องโต้ตอบ หากต้องการถ่ายโอนไฟล์แนบอย่างถูกต้อง คุณควรตั้งค่าพารามิเตอร์ของฟอร์มเป็น enctype="multipart/form-data" และ method="post" มิฉะนั้นสตริงที่ป้อนจะถูกส่งซึ่งก็คือชื่อเส้นทางของไฟล์ ไม่ใช่เนื้อหา พารามิเตอร์เพิ่มเติม ความยาวสูงสุด และขนาดมีความหมายเหมือนกับองค์ประกอบของประเภทข้อความและรหัสผ่าน

ประเภท = "ช่องทำเครื่องหมาย"

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

ตัวเลือกเพิ่มเติม:

• ค่า="string" . Значение, которое будет передано серверу, если данная кнопка выбрана. Если кнопка не выбрана, значение не передается. Обязательный параметр. Если флажки образуют группу, то передаваемым значением является строка разделенных запятыми значений параметра value всех установленных флажков.!}
• ตรวจสอบแล้ว หากระบุไว้ องค์ประกอบจะถูกเลือกตามค่าเริ่มต้น

ประเภท = "วิทยุ"

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

ปรากฏเป็นปุ่มกลม ตัวเลือกเพิ่มเติม:

• ค่า="string" . Обязательный параметр, значение которого передается серверу при выборе данной кнопки. Должен иметь уникальное значение для каждого члена группы .!}
• ตรวจสอบแล้ว ตั้งค่าองค์ประกอบที่จะเลือกเป็นค่าเริ่มต้น องค์ประกอบเดียวเท่านั้นในกลุ่มต้องมีตัวเลือกนี้

ประเภท = "ส่ง"

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

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

หากมีพารามิเตอร์ชื่อและค่าอยู่ เช่น

,

จากนั้นพารามิเตอร์ send_button="ok" จะรวมอยู่ในรายการพารามิเตอร์แบบฟอร์มที่ส่งไปยังเซิร์ฟเวอร์ สามารถมีปุ่มส่งได้หลายปุ่มภายในแบบฟอร์ม

ประเภท = "รีเซ็ต"

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

ค่า="button_name"!}

ค่าของปุ่มรีเซ็ตจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ ดังนั้นจึงไม่มีพารามิเตอร์ชื่อ

ประเภท = "รูปภาพ"

สร้างองค์ประกอบกราฟิกที่ทำงานคล้ายกับปุ่มส่ง ตัวเลือกเพิ่มเติม:

• src="url_images"- ระบุ URL ไปยังไฟล์ที่มีภาพกราฟิกขององค์ประกอบ
• align="align_type"- ระบุประเภทการจัดตำแหน่งของรูปภาพโดยสัมพันธ์กับบรรทัดข้อความปัจจุบัน

หากคุณคลิกที่รูปภาพขององค์ประกอบ พิกัดของตัวชี้เมาส์ในรูปแบบ name.x=n&name.y=m จะถูกรวมโดยเบราว์เซอร์ในรายการพารามิเตอร์ของแบบฟอร์มที่ส่งไปยังเซิร์ฟเวอร์