แบบฟอร์มการออกแบบ HTML

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

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

แท็ก

ใช้ใน HTML เพื่อสร้างแบบฟอร์มและรวมองค์ประกอบแบบฟอร์มต่างๆ เช่น อินพุต พื้นที่ข้อความ ฯลฯ ไว้ด้วย -

<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

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

ซีเนียร์	ประเภท &คำอธิบาย
1	ข้อความ ฟิลด์ข้อความรูปแบบอิสระ ไม่มีการขึ้นบรรทัดใหม่
2	รหัสผ่าน ฟิลด์ข้อความรูปแบบอิสระสำหรับข้อมูลที่ละเอียดอ่อน ไม่มีการขึ้นบรรทัดใหม่
3	ช่องทำเครื่องหมาย ชุดค่าศูนย์หรือมากกว่าจากรายการที่กำหนดไว้ล่วงหน้า
4	วิทยุ ค่าที่แจกแจง
5	ส่ง ปุ่มรูปแบบอิสระเริ่มต้นการส่งแบบฟอร์ม
6	ไฟล์ ไฟล์ที่กำหนดเองซึ่งมีประเภท MIME และสามารถเลือกชื่อไฟล์ได้
7	รูปภาพ พิกัดที่สัมพันธ์กับขนาดของรูปภาพหนึ่งๆ โดยมีความหมายพิเศษว่าต้องเป็นค่าสุดท้ายที่เลือกและเริ่มส่งแบบฟอร์ม
8	ซ่อนอยู่ สตริงที่กำหนดเองซึ่งปกติจะไม่แสดงให้ผู้ใช้เห็น
9	เลือก ค่าที่แจกแจง เหมือนกับประเภทวิทยุ
10	พื้นที่ข้อความ ฟิลด์ข้อความรูปแบบอิสระ ในนามไม่มีข้อจำกัดการแบ่งบรรทัด..
11	ปุ่ม ปุ่มรูปแบบอิสระที่สามารถเริ่มกิจกรรมใดๆ ที่เกี่ยวข้องกับปุ่มได้

อย่างไรก็ตาม HTML5 ได้แนะนำตัวเลือกเพิ่มเติมสำหรับองค์ประกอบ -

ซีเนียร์	ประเภท &คำอธิบาย
1	วันที่และเวลา วันที่และเวลา (ปี, เดือน, วัน, ชั่วโมง, นาที, วินาที, เศษส่วนของวินาที) ที่เข้ารหัสตาม ISO 8601 โดยตั้งเขตเวลาเป็น UTC
2	วันที่และเวลาท้องถิ่น วันที่และเวลา (ปี, เดือน, วัน, ชั่วโมง, นาที, วินาที, เศษส่วนของวินาที) ที่เข้ารหัสตาม ISO 8601 โดยไม่มีข้อมูลเขตเวลา
3	วันที่ วันที่ (ปี เดือน วัน) ที่เข้ารหัสตามมาตรฐาน ISO 8601
4	เดือน วันที่ประกอบด้วยปีและเดือนที่เข้ารหัสตามมาตรฐาน ISO 8601
5	สัปดาห์ วันที่ประกอบด้วยตัวเลขปีและสัปดาห์ที่เข้ารหัสตาม ISO 8601
6	เวลา เวลา (ชั่วโมง นาที วินาที วินาทีเศษส่วน) ที่เข้ารหัสตามมาตรฐาน ISO 8601
7	หมายเลข รับเฉพาะค่าตัวเลขเท่านั้น แอ็ตทริบิวต์ step ระบุความแม่นยำ โดยมีค่าเริ่มต้นเป็น 1
8	ช่วง ประเภทช่วงใช้สำหรับช่องป้อนข้อมูลที่ควรมีค่าจากช่วงของตัวเลข
9	อีเมล ยอมรับเฉพาะค่าอีเมล ประเภทนี้ใช้สำหรับช่องใส่ที่ควรมีที่อยู่อีเมล หากคุณพยายามส่งข้อความธรรมดา ระบบจะบังคับให้ป้อนเฉพาะที่อยู่อีเมลในรูปแบบ [email protected]
10	url ยอมรับเฉพาะค่า URL ประเภทนี้ใช้สำหรับช่องใส่ที่ควรมีที่อยู่ URL หากคุณพยายามส่งข้อความธรรมดา ระบบจะบังคับให้ป้อนเฉพาะที่อยู่ URL ในรูปแบบ https://www.example.com หรือในรูปแบบ https://example.com

ตัวอย่าง

มาดูตัวอย่างกันเพื่อสร้างแบบฟอร์ม −

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..."><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob"><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..."><br><br>
<button type="submit" value="Submit">Submit</button>
</form>
/body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

แบบฟอร์มการออกแบบ HTML

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

แบบฟอร์มการออกแบบ HTML