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

แบบฟอร์มจะอยู่ภายใน องค์ประกอบ HTML<form> <form> องค์ประกอบ HTML นี้ระบุจุดสิ้นสุดการสื่อสารที่ควรส่งข้อมูลที่ป้อนลงในแบบฟอร์มไป และวิธีการส่งข้อมูลGETหรือPOST<form>

แบบฟอร์มสามารถสร้างขึ้นจากองค์ประกอบ ส่วนติดต่อผู้ใช้แบบกราฟิก มาตรฐานได้:

• <button>— ปุ่มที่สามารถเชื่อมโยงกับการกระทำต่างๆ เช่น การส่งแบบฟอร์ม การรีเซ็ตแบบฟอร์ม หรือการเรียกใช้ฟังก์ชัน JavaScript
• <input>— องค์ประกอบสำหรับป้อนข้อมูลจากผู้ใช้ องค์ประกอบนี้จะแตกต่างกันไปตามค่าของtypeแอตทริบิวต์
• <textarea>— คล้ายกับ <text>ช่องป้อนข้อมูล แต่ <textarea>สามารถแสดงและป้อนข้อมูลได้หลายแถว
• <select>— รายการแบบดรอปดาวน์ที่แสดงรายการต่างๆ ให้ผู้ใช้สามารถเลือกได้

องค์ประกอบอินพุตสามารถมีประเภทดังต่อไปนี้:

• text— ช่องข้อความธรรมดาที่อนุญาตให้ป้อนข้อความได้เพียงบรรทัดเดียว
• email- ประเภท<text>ที่ต้องใช้ที่อยู่อีเมลที่ผ่านการตรวจสอบความถูกต้องบางส่วน
• number- ประเภท<text>ที่ต้องใช้ตัวเลข
• password— คล้ายกับ<text>ใช้เพื่อวัตถุประสงค์ด้านความปลอดภัย โดยที่ตัวอักษรที่พิมพ์จะมองไม่เห็นหรือถูกแทนที่ด้วยสัญลักษณ์ เช่น *
• tel— หมายเลขโทรศัพท์
• radio— ปุ่มวิทยุ
• file— ตัวควบคุม การเลือกไฟล์สำหรับการอัปโหลดไฟล์
• reset— ปุ่มรีเซ็ตซึ่งเมื่อกดแล้ว จะสั่งให้เบราว์เซอร์คืนค่าของแบบฟอร์มปัจจุบันกลับไปเป็นค่าเริ่มต้น
• submit— ปุ่มที่สั่งให้เบราว์เซอร์ดำเนินการกับแบบฟอร์ม (โดยทั่วไปคือการส่งข้อมูลไปยังเซิร์ฟเวอร์)

ภาพตัวอย่างทางด้านขวามือแสดงองค์ประกอบส่วนใหญ่เหล่านี้:

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

องค์ประกอบพื้นฐานเหล่านี้เป็นองค์ประกอบ ส่วนติดต่อผู้ใช้แบบกราฟิก (GUI) ที่พบได้บ่อยที่สุดแต่ไม่ใช่ทั้งหมด ตัวอย่างเช่น ไม่มีองค์ประกอบใดเทียบเท่ากับมุมมองแบบต้นไม้หรือ มุม มอง แบบตาราง

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

HTML 4 ได้แนะนำ<label>แท็ก ซึ่งมีจุดประสงค์เพื่อแสดงคำบรรยายในส่วนติดต่อผู้ใช้ และสามารถเชื่อมโยงกับการควบคุมแบบฟอร์มเฉพาะได้โดยการระบุidแอตทริบิวต์for ของการควบคุมใน แอตทริบิวต์ของแท็ก label ^{[ 1 ]}วิธีนี้ช่วยให้ป้ายกำกับยังคงอยู่กับองค์ประกอบเมื่อปรับขนาดหน้าต่าง และช่วยให้มีฟังก์ชันการทำงานที่คล้ายกับเดสก์ท็อปมากขึ้น (เช่น การคลิกปุ่มวิทยุหรือป้ายกำกับของช่องทำเครื่องหมายจะเปิดใช้งานองค์ประกอบอินพุตที่เกี่ยวข้อง)

HTML 5 แนะนำประเภทอินพุตหลายประเภทที่สามารถแสดงได้ด้วยองค์ประกอบอินเทอร์เฟซอื่นๆ บางประเภทใช้ฟิลด์ป้อนข้อความและมีจุดประสงค์เพื่อป้อนและตรวจสอบข้อมูลทั่วไปเฉพาะ เช่นemailการป้อนที่อยู่อีเมลtelหมายเลขโทรศัพท์ และnumberค่าตัวเลข นอกจากนี้ยังมีแอตทริบิวต์เพิ่มเติมเพื่อระบุฟิลด์ที่จำเป็น ฟิลด์ที่ควรได้รับโฟกัส จากแป้นพิมพ์ เมื่อโหลดเว็บเพจที่มีแบบฟอร์ม และข้อความตัวอย่างที่แสดงภายในฟิลด์แต่ไม่ใช่ข้อมูลที่ผู้ใช้ป้อน (เช่น ข้อความ 'ค้นหา' ที่แสดงในช่องป้อนข้อมูลการค้นหาหลายช่องก่อนที่จะป้อนคำค้นหา) งานเหล่านี้เคยจัดการด้วยJavaScriptแต่เนื่องจากเป็นเรื่องปกติมาก จึงได้เพิ่มการสนับสนุนลงในมาตรฐานdateประเภทอินพุตแสดงปฏิทินที่ผู้ใช้สามารถเลือกวันที่หรือช่วงวันที่ได้^{[ 2 ] [ 3 ]}และcolorประเภทอินพุตสามารถแสดงเป็นข้อความป้อนที่ตรวจสอบเพียงว่าค่าที่ป้อนเป็นการ แสดงสีในรูปแบบเลข ฐานสิบหก ที่ถูกต้อง ตามข้อกำหนด^{[ 4 ]}หรือวิดเจ็ตเลือกสี (ซึ่งเป็นวิธีแก้ปัญหาที่ใช้ในเบราว์เซอร์ส่วนใหญ่ที่รองรับแอตทริบิวต์นี้)

เมื่อข้อมูลที่ป้อนลงในแบบฟอร์ม HTML ถูกส่ง ชื่อและค่าในองค์ประกอบแบบฟอร์มจะถูกเข้ารหัสและส่งไปยังเซิร์ฟเวอร์ในข้อความคำขอHTTP โดยใช้ GETหรือPOSTในอดีตมีการใช้การขนส่งทางอีเมล ด้วย ^{[ 5 ]} ประเภท MIME เริ่มต้น(internet media type) application /x-www-form-urlencodedนั้นอิงตามเวอร์ชันแรกสุดของ กฎ การเข้ารหัสเปอร์เซ็นต์ URI ทั่วไป โดยมีการแก้ไขหลายอย่าง เช่น การทำให้เป็นมาตรฐาน ของบรรทัดใหม่และการแทนที่ช่องว่างด้วย " " +แทนที่จะเป็น " %20" การเข้ารหัสที่เป็นไปได้อีกแบบหนึ่งคือ Internet media type multipart/form-dataก็มีให้ใช้งานและเป็นที่นิยมสำหรับการส่งไฟล์แบบ POST

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

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

ภาษา เขียนโปรแกรมฝั่งไคลเอ็นต์ที่ใช้กันอย่างแพร่หลาย สำหรับเว็บไซต์คือJavaScriptการใช้ JavaScript บนDocument Object Model (DOM) นำไปสู่วิธีการDynamic HTMLซึ่งช่วยให้สามารถสร้างและแก้ไขหน้าเว็บแบบไดนามิกภายในเบราว์เซอร์ได้

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

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

ภาษาโปรแกรมแบบตีความ (interpreted languages)ที่นิยมใช้ในการออกแบบแบบฟอร์มเชิงโต้ตอบในการพัฒนาเว็บ ได้แก่PHP , Python , Ruby , Perl , JSP , Adobe ColdFusionและภาษาโปรแกรมแบบคอมไพล์ (compiled languages) ที่นิยมใช้ ได้แก่JavaและC#ร่วม กับASP.NET

PHPเป็นภาษาที่ใช้กันอย่างแพร่หลายสำหรับการ "เขียนโปรแกรม" ฝั่งเซิร์ฟเวอร์ และเป็นหนึ่งในไม่กี่ภาษาที่สร้างขึ้นมาโดยเฉพาะสำหรับ การ เขียนโปรแกรมเว็บ^{[ 6 ] [ 7 ]}

ในการใช้ PHP กับฟอร์ม HTML นั้น URL ของสคริปต์ PHP จะถูกระบุไว้ในactionแอตทริบิวต์ `<form>` ของแท็ก `<form>` จากนั้นไฟล์ PHP เป้าหมายจะเข้าถึงข้อมูลที่ส่งมาจากฟอร์มผ่านทางตัวแปร PHP $_POSTขึ้น$_GETอยู่กับค่าของmethodแอตทริบิวต์ที่ใช้ในฟอร์ม ต่อไปนี้คือสคริปต์ PHP สำหรับจัดการฟอร์มพื้นฐานที่จะแสดงเนื้อหาของฟอร์มชื่อจริงช่องป้อนข้อมูลบนหน้าเว็บ:

ฟอร์ม.html

< ! DOCTYPE html > < html lang = " en " > <head> <title> แบบฟอร์ม</title> </head> <body> < form action = " form_handler.php " > <p> <label> ชื่อ : < input name = " first_name " / > </label> </p> <p> < button type = " submit " >ส่ง</button> </p> </form> </body> </html>​​​​​​​​​​

ฟอร์ม_แฮนด์เลอร์.php

<!DOCTYPE html> <?php // ร้องขอค่าของตัวแปรภายนอก "first_name" และกรองค่า$firstName = filter_input ( INPUT_GET , "first_name" , FILTER_SANITIZE_STRING ); ?> < html lang = "en" > < head > < title >ผลลัพธ์</ title > </ head > < body > < p > <?php echo "สวัสดี, { $firstName } !" ; /* แสดงค่า */ ?> </ p > </ body > </ html >

โค้ดตัวอย่างด้านบนใช้ฟังก์ชันของ PHP ในการตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อนก่อนที่จะนำไปแสดงบนหน้าเว็บ การพิมพ์ (echo) ข้อมูลที่ผู้ใช้ป้อนไปยังเบราว์เซอร์โดยไม่ตรวจสอบก่อนนั้นเป็นสิ่งที่ควรหลีกเลี่ยงในตัวประมวลผลแบบฟอร์มที่ปลอดภัย: หากผู้ใช้ป้อนโค้ด JavaScript ลงใน...filter_input()<script>alert(1)</script>ชื่อจริงฟิลด์นั้น เบราว์เซอร์จะเรียกใช้สคริปต์บนฟิลด์นั้นฟอร์ม_แฮนด์เลอร์.phpหน้าเว็บนั้น เหมือนกับว่าถูกเขียนโค้ดโดยนักพัฒนาซอฟต์แวร์ โค้ดที่เป็นอันตรายสามารถถูกเรียกใช้งานได้ด้วยวิธีนี้ ฟังก์ชันนี้ถูกนำมาใช้ใน PHP 5.2 ผู้ใช้ PHP เวอร์ชันก่อนหน้าสามารถใช้ฟังก์ชันนี้ หรือนิพจน์ปกติ (regular expressions)เพื่อตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อนก่อนที่จะดำเนินการใดๆ กับข้อมูลนั้น filter_input()htmlspecialchars()

Perlเป็นอีกภาษาหนึ่งที่มักใช้ในการพัฒนาเว็บสคริปต์ Perl มักใช้เป็น แอปพลิเคชัน Common Gateway Interface (CGI) อันที่จริง Perl เป็นวิธีการเขียน CGI ที่พบได้บ่อยมากจนมักทำให้คนสับสนระหว่างสองสิ่งนี้ CGI อาจเขียนด้วยภาษาอื่นที่ไม่ใช่ Perl (ความเข้ากันได้กับหลายภาษาเป็นเป้าหมายการออกแบบของโปรโตคอล CGI) และยังมีวิธีอื่น ๆ ในการทำให้สคริปต์ Perl ทำงานร่วมกับเว็บเซิร์ฟเวอร์ ได้ นอกเหนือจากการใช้ CGI (เช่นFastCGI , Plackหรือmod_perlของApache )

การเขียนเว็บแอป พลิเคชันโดยใช้ Perl CGI นั้นเคยเป็นที่นิยมมาก อย่างไรก็ตาม ปัจจุบันผู้ให้บริการเว็บโฮสติ้งหลายรายรองรับเฉพาะ PHP เท่านั้น และนักพัฒนาเว็บแอปพลิเคชันมักมองหาความเข้ากันได้กับ PHP

ตัวอย่าง CGI สมัยใหม่ที่เขียนด้วย Perl 5 โดยใช้โมดูล CGI ในรูปแบบที่คล้ายกับตัวอย่างข้างต้น อาจมีลักษณะดังนี้:

ฟอร์ม_แฮนด์เลอร์.pl

#!/usr/bin/env perl use strict ; use CGI qw(:standard) ;my $name = param ( "first_name" ); print header ; print html ( body ( p ( "Hello, $name!" ), ), );

หนึ่งในประเภทของสคริปต์ฝั่งเซิร์ฟเวอร์ที่ง่ายที่สุดและจำเป็นที่สุดก็คือสคริปต์ที่ส่งอีเมลเนื้อหาของแบบฟอร์มที่ส่งเข้ามา อย่างไรก็ตาม สคริปต์ประเภทนี้มักถูกใช้โดยผู้ส่งสแปมและสคริปต์ส่งแบบฟอร์มเป็นอีเมลยอดนิยมหลายตัวก็มีความเสี่ยงที่จะถูกแฮ็กเพื่อใช้ในการส่งอีเมลสแปม หนึ่งในสคริปต์ยอดนิยมประเภทนี้คือ"FormMail.pl"ที่สร้างโดยMatt's Script Archiveปัจจุบันสคริปต์นี้ไม่ค่อยได้ใช้ในการพัฒนาใหม่ๆ แล้ว เนื่องจากขาดการอัปเดต ปัญหาด้านความปลอดภัย และความยากในการกำหนดค่า

บางบริษัทเสนอบริการฟอร์มแบบโฮสต์โดยปกติแล้ว บริษัทเหล่านี้จะจัดหาโปรแกรมแก้ไขภาพ เครื่องมือรายงาน และโครงสร้างพื้นฐานเพื่อสร้างและโฮสต์ฟอร์ม ซึ่งสามารถฝังลงในเว็บเพจได้^{[ 8 ]} บริษัท เว็บโฮสติ้งจะจัดหาเทมเพลตให้กับลูกค้าเป็นบริการเสริม บริการโฮสต์ฟอร์มอื่นๆ เสนอฟอร์มติดต่อฟรีที่ผู้ใช้สามารถติดตั้งบนเว็บไซต์ของตนเองได้โดยการวางโค้ดของบริการลงใน HTML ของเว็บไซต์

เมื่อTim Berners-LeeพัฒนาHTMLในปี 1991 และเผยแพร่สู่สาธารณะในภายหลังในปี 1993 ^{[ 9 ] [ 10 ]}มันมีแท็ก 18 แท็ก^{[ 10 ]}องค์ประกอบฟอร์มและฟิลด์ฟอร์มไม่ได้รวมอยู่ในเวอร์ชันแรกนี้

ในความเป็นจริง "แบบฟอร์ม HTML" อย่างที่เรารู้จักกันนั้นไม่ได้ถูกคิดค้นขึ้นในชั่วพริบตาเดียวหรือโดยบุคคลเพียงคนเดียว หลายคน องค์กร และเบราว์เซอร์หลายตัวมีส่วนร่วมในการพัฒนาแบบฟอร์ม HTML และทำให้แท็กแบบฟอร์มกลายเป็นมาตรฐานใน HTML 2.0 ^{[ 11 ] [ 12 ]}

ประการแรกHTML+ได้รับการพัฒนาโดยDave Raggettในช่วงเวลาเดียวกันนั้น ฟอร์ม HTML ได้ถูกนำมาใช้ครั้งแรกในเบราว์เซอร์Viola ^{[ 13 ]}แต่แรงผลักดันที่สำคัญที่สุดคือเบราว์เซอร์ Mosaicโดยเฉพาะอย่างยิ่ง NCSA Mosaic สำหรับ X 2.0 เนื่องจากฟอร์มไม่สามารถใช้งานได้ใน Mosaic เวอร์ชันแรกในเดือนเมษายน พ.ศ. 2536 ^{[ 11 ]}

ด้วย Mosaic 2.0 แบบฟอร์มจึงเข้าถึงได้ง่ายขึ้น และในไม่ช้าธุรกิจทุกแห่งก็ต้องการแบบฟอร์มติดต่อ ในช่วงเวลานี้ แท็กแบบฟอร์มยังไม่ใช่แท็ก HTML อย่างเป็นทางการ แต่เบราว์เซอร์ก็รองรับแท็กเหล่านั้น การเปลี่ยนแปลงเกิดขึ้นในภายหลังในปี 1995 ด้วย HTML 2.0 โดยมีการเพิ่มแท็ก FORM, INPUT, SELECT และ TEXTAREA ลงใน HTML ^{[ 12 ]}

• CAPTCHA
• โพสต์แบ็ก
• เอ็กซ์ฟอร์มส์
• เอชแอล

• แบบฟอร์มในเอกสาร HTML หน้า ข้อมูลจำเพาะของ W3Cสำหรับแบบฟอร์มใน HTML 4
• ข้อกำหนดแบบฟอร์ม HTML5
• วิกิบุ๊ก: ภาษา HyperText Markup/แบบฟอร์ม
• ลองใช้คุณสมบัติ HTML ดู