วิธีสร้างแบบฟอร์ม HTML:คู่มือ

แบบฟอร์ม HTML รวบรวมข้อมูลจากผู้ใช้ที่มีช่องข้อความ รายการแบบเลื่อนลง ช่องทำเครื่องหมาย และอื่นๆ แบบฟอร์มใน HTML อยู่ใน <form> แท็กและใช้ <input> แท็กเพื่อสร้างองค์ประกอบ

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

คุณจะสร้างแบบฟอร์มใน HTML ได้อย่างไร? นั่นคือคำถามที่เราจะตอบในบทช่วยสอนนี้

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

แบบฟอร์ม HTML

ใน HTML รูปแบบ ประกอบด้วยองค์ประกอบตั้งแต่หนึ่งองค์ประกอบขึ้นไป แบบฟอร์ม HTML สามารถรวมองค์ประกอบต่อไปนี้:

• ช่องข้อความบรรทัดเดียว
• กล่องข้อความ
• กล่องแบบเลื่อนลง
• ช่องทำเครื่องหมาย
• ปุ่ม
• ปุ่มตัวเลือก

องค์ประกอบเหล่านี้ นอกจากปุ่มและกล่องข้อความแล้ว ให้ใช้ <input> แท็กในโค้ด HTML

หลังจากที่ผู้ใช้ส่งแบบฟอร์ม เนื้อหาของแบบฟอร์มสามารถ:

• ถูกส่งไปยังเซิร์ฟเวอร์เพื่อดำเนินการต่อไปหรือ
• ถูกประมวลผลโดยเว็บเบราว์เซอร์

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

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

สำหรับบทช่วยสอนนี้ เราจะสร้างแบบฟอร์มสำหรับเว็บไซต์ของร้านกาแฟ สมมติว่า Three Brothers Coffee House ขอให้เราออกแบบแบบฟอร์มที่อนุญาตให้พวกเขายอมรับคำถามของลูกค้าผ่านทางเว็บไซต์ของพวกเขา

เราได้รับมอบหมายให้สร้างแบบฟอร์มที่ยอมรับข้อมูลสี่ส่วน เหล่านี้คือ:

• The ชื่อ ของผู้ใช้
• ที่อยู่อีเมลของผู้ใช้ .
• ว่าผู้ใช้เคย เยี่ยมชม .หรือไม่ ร้านกาแฟ
• ข้อความ ผู้ใช้ต้องการส่งไปที่ร้านกาแฟ

ซึ่งหมายความว่าแบบฟอร์มของเราจะต้องมีสี่องค์ประกอบ แบบฟอร์มของเราจะต้องมีปุ่มเดียวเพื่อให้ผู้ใช้ส่งแบบฟอร์มได้

HTML <form> แท็ก

แบบฟอร์มใน HTML อยู่ใน <form> แท็ก ต่อไปนี้คือตัวอย่างแบบฟอร์มใน HTML:

<form>
	// Elements
</form>

<form> แท็กใช้เพื่อกำหนดแบบฟอร์มใน HTML เมื่อกำหนดแล้ว <form> แท็กสามารถรวมองค์ประกอบของแบบฟอร์ม เช่น ช่องทำเครื่องหมายและช่องข้อความบรรทัดเดียว

องค์ประกอบแบบฟอร์มยอมรับสองแอตทริบิวต์:action และ method . เราจะพูดถึงคุณลักษณะเหล่านี้ในภายหลังในบทช่วยสอนนี้

<input> องค์ประกอบสำหรับแบบฟอร์ม HTML

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

วิธีการ <input> องค์ประกอบที่ปรากฏบนเว็บไซต์ขึ้นอยู่กับแอตทริบิวต์ประเภทที่ระบุ ตัวอย่างเช่น หากช่องป้อนข้อมูลเป็นกล่องข้อความ ก็จะปรากฏต่างจากปุ่มตัวเลือก

ไวยากรณ์สำหรับ <input> องค์ประกอบมีดังนี้:

<input type="type" id="elementId">

ในตัวอย่างนี้ <input> ยอมรับสองคุณลักษณะ แอตทริบิวต์แรกเรียกว่า type , คือประเภทของอินพุตที่ฟิลด์แบบฟอร์มจะยอมรับ type แอตทริบิวต์สามารถมีค่าได้หลายค่า แต่ค่าที่พบบ่อยที่สุดคือ:

• button
• checkbox
• email
• text
• number
• radio

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

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

เราสามารถรวบรวมข้อมูลเหล่านี้โดยใช้ <input> . สองอัน แท็ก:

<form>
	<label for="name">Name:</label><br/>
	<input type="text" id="name" name="name"><br /><br />
	<label for="email">Email:</label><br/>
	<input type="email" id="email" name="email">
</form>

คลิกที่ ในตัวแก้ไขด้านบนเพื่อเรียกใช้โค้ด

อย่างที่คุณเห็น เราได้สร้างแบบฟอร์มที่ยอมรับค่าสองค่า:ชื่อผู้ใช้และที่อยู่อีเมลของผู้ใช้ ในตัวอย่างนี้ เรายังใช้ <label> องค์ประกอบ. เราจะหารือเกี่ยวกับองค์ประกอบนี้ในไม่ช้า

ชื่อ name แอตทริบิวต์ในรูปแบบ HTML

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

ในตัวอย่างข้างต้น ฟิลด์ "ชื่อ" ของเรามี name แอตทริบิวต์ที่มีค่า name และช่อง "อีเมล" ของเรามี name แอตทริบิวต์ที่มีค่า email .

HTML <label> องค์ประกอบ

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

<label> แท็กยังช่วยให้เราสามารถกำหนดข้อความที่คอมพิวเตอร์จะอ่านให้กับผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอ เนื่องจากโปรแกรมอ่านหน้าจอจะอ่านป้ายกำกับเมื่อพบช่องป้อนข้อมูลบนหน้าเว็บ

นี่คือไวยากรณ์สำหรับป้ายกำกับ HTML:

<form>
	<label for="name">Name:</label><br/>
	<input type="text" id="name" name="name">
</form>

ในตัวอย่างข้างต้น เราได้สร้างแบบฟอร์มที่รวบรวมชื่อผู้ใช้ เราใช้ <label> แท็กเพื่อเพิ่มป้ายกำกับ Name: ไปที่แบบฟอร์ม สังเกตว่าเราได้ระบุแอตทริบิวต์ที่เรียกว่า for ใน <label> . ของเรา องค์ประกอบ. แอตทริบิวต์นี้ควรเท่ากับ id แอตทริบิวต์ที่ใช้โดย input องค์ประกอบที่เชื่อมโยงป้ายกำกับ เนื่องจากผูกแบบฟอร์มกับป้ายกำกับที่เกี่ยวข้อง

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

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

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

ปุ่มวิทยุ

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

ต่อไปนี้เป็นไวยากรณ์สำหรับปุ่มตัวเลือก:

<input type="radio" name="radio_button">

ในแบบฟอร์มของเรา เราต้องการถามผู้ใช้ว่าพวกเขาเป็นลูกค้าของ Three Brothers Coffee House หรือไม่ เราสามารถใช้ปุ่มตัวเลือกเพื่อทำงานนี้ให้สำเร็จ นี่คือรหัสที่เราจะใช้:

<form>
  <p>Are you a customer of the Three Brothers Coffee House?</p>
  <input type="radio" id="yes" name="customer" value="yes">
  <label for="yes">Yes</label><br />
  <input type="radio" id="no" name="customer" value="no">
  <label for="no">No</label><br />
</form>

คลิกที่ ในตัวแก้ไขด้านบนเพื่อเรียกใช้โค้ด

ผู้ใช้ของเราสามารถส่งค่าใดค่าหนึ่งจากสองค่า:yes หรือ no .

มาทำลายรหัสของเรากัน ขั้นแรก เรากำหนด <form> . จากนั้นเราก็ใช้ <p> แท็กเพื่อเพิ่มข้อความอธิบายสำหรับผู้ใช้

ในบรรทัดถัดไป เราสร้างปุ่มตัวเลือกที่มีค่า yes . จากนั้นเราสร้างป้ายกำกับสำหรับปุ่มนี้ซึ่งแสดงข้อความ "ใช่" ต่อไป เราสร้างปุ่มตัวเลือกที่มีค่า no และสร้างป้ายกำกับสำหรับปุ่มนั้น ซึ่งจะแสดงข้อความว่า “ไม่”

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

HTML <textarea> องค์ประกอบ

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

เราสามารถทำได้โดยใช้ <textarea> องค์ประกอบเช่นนี้:

<form>
	<label for="message">Message:</label><br />
	<textarea id="message" name="message">
	What message do you want to send to the Three Brothers Coffee 	House?
	</textarea>
</form>

ในโค้ดของเรา เราเริ่มต้นด้วยการกำหนด label ที่แสดงค่า “ข้อความ:”

จากนั้นเรากำหนดพื้นที่ข้อความโดยใช้ <textarea> แท็ก เราระบุแอตทริบิวต์สองรายการสำหรับพื้นที่ข้อความนี้:

1. id . ใช้เพื่ออ้างอิงเนื้อหาในแบบฟอร์มของเราหลังจากที่ผู้ใช้ส่งคำตอบแล้ว
2. name . สิ่งนี้จำเป็นสำหรับการส่งเนื้อหาในแบบฟอร์มของเรา

สุดท้ายเราเพิ่มข้อความ What message do you want to send to the Three Brothers Coffee House? ระหว่างการเปิดและปิดของเรา <textarea> แท็ก นี่คือข้อความเริ่มต้นที่ผู้ใช้จะเห็น

ผลลัพธ์ของรหัสของเรามีดังนี้:

คลิกที่ ในตัวแก้ไขด้านบนเพื่อเรียกใช้โค้ด

ตอนนี้เรามีฟิลด์พื้นที่ข้อความ ผู้ใช้สามารถใช้ช่องนี้เพื่อส่งข้อความถึงร้านกาแฟได้

HTML submit ปุ่ม

เมื่อกำหนดเนื้อหาของแบบฟอร์มแล้ว เราก็พร้อมที่จะเพิ่ม submit ปุ่ม. นี่คือไวยากรณ์สำหรับ submit ปุ่ม:

<input type="submit" value="Submit">

submit ปุ่มใช้เพื่อส่งเนื้อหาของแบบฟอร์มไปยังตัวจัดการแบบฟอร์ม (ตัวจัดการแบบฟอร์มมักจะเป็นหน้าบนเว็บเซิร์ฟเวอร์ที่สามารถประมวลผลเนื้อหาของแบบฟอร์มได้) submit ปุ่มลิงก์ไปยังตัวจัดการแบบฟอร์ม คุณต้องระบุตัวจัดการแบบฟอร์มโดยใช้ <form> แท็ก action คุณลักษณะ.

สมมติว่าเราต้องการเพิ่ม submit ปุ่มไปที่แบบฟอร์มเว็บสำหรับร้านกาแฟของเรา เราสามารถทำได้โดยใช้รหัสนี้:

<form action="/post.php">
    <label for="name">Name:</label>
    <br/>
    <input type="text" id="name" name="name">
    <br />
    <br />
    <label for="email">Email:</label>
    <br />
    <input type="email" id="email" name="email">
    <br />

    <p>Are you a customer of the Three Brothers Coffee House?</p>
    <input type="radio" id="yes" name="customer" value="yes">
    <label for="yes">Yes</label>
    <br />
    <input type="radio" id="no" name="customer" value="no">
    <label for="no">No</label>
    <br /><br />

    <label for="message">Message:</label><br />
    <textarea id="message" name="message">
    What message do you want to send to the Three Brothers Coffee House?
    </textarea>

    <input type="submit" value="Submit">
</form>

อย่างที่คุณเห็น เราได้เพิ่มปุ่มส่งในแบบฟอร์มของเรา นอกจากนี้เรายังระบุ action พารามิเตอร์ใน <form> แท็ก พารามิเตอร์นี้เชื่อมโยงแบบฟอร์มกับไฟล์ที่จะจัดการเนื้อหา

การส่งเว็บฟอร์ม

หลังจากที่คุณสร้างแบบฟอร์ม HTML แล้ว คุณต้องสร้างตัวจัดการที่จะประมวลผลข้อมูลที่ผู้ใช้ส่งผ่านแบบฟอร์มของคุณ <form> องค์ประกอบให้แอตทริบิวต์สองรายการที่ใช้ในการส่งข้อมูลแบบฟอร์มไปยังเซิร์ฟเวอร์:action และ method .

แบบฟอร์ม action คุณสมบัติ

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

ในตัวอย่างข้างต้นของเรา เมื่อส่งแบบฟอร์ม ข้อมูลจากแบบฟอร์มจะถูกส่งไปยังหน้า post.php ซึ่งรวมถึงโค้ดตัวจัดการแบบฟอร์มของเรา นี่คือตัวอย่างแบบฟอร์มที่มี action แอตทริบิวต์ที่กำหนด:

<form action="/post.php">
</form>

หากไม่มี action แอตทริบิวต์ที่ระบุ แบบฟอร์มถูกส่งไปยังหน้าปัจจุบัน

แบบฟอร์ม method คุณสมบัติ

method คุณลักษณะระบุวิธี HTTP ที่ควรใช้เมื่อส่งแบบฟอร์ม โดยค่าเริ่มต้น แบบฟอร์มจะใช้ GET เมธอด แต่คุณยังสามารถใช้วิธี HTTP อื่นได้ เช่น POST .

นี่คือตัวอย่างรูปแบบ method แอตทริบิวต์ในการดำเนินการ:

<form action="/post.php" method="POST">
</form>

เมื่อส่งแบบฟอร์มนี้ ข้อมูลที่รวบรวมจะถูกส่งไปยังเซิร์ฟเวอร์โดยใช้ HTTP POST กระบวนการ. (หรือถ้าเราต้องการส่ง GET ขอเราสามารถระบุ "GET" หรือปล่อยว่างไว้เพราะ GET เป็นวิธีการเริ่มต้น)

ในกรณีส่วนใหญ่ คุณควรใช้ HTTP POST วิธีการส่งข้อมูล นี่เป็นเพราะว่า GET วิธีทำให้ข้อมูลแบบฟอร์มปรากฏในช่องที่อยู่ของหน้า ดังนั้น หากเราส่งแบบฟอร์มไปที่ post.php ด้วยฟิลด์ชื่อ “name” ที่มีค่า “Pauline” ข้อมูลต่อไปนี้จะถูกส่งไปยังเว็บไซต์:

/post.php?name=Pauline

นี่เป็นวิธีการส่งข้อมูลที่ไม่ปลอดภัย GET ไม่ควรใช้วิธีการ หากคุณกำลังจัดการกับข้อมูลที่ละเอียดอ่อน

บทสรุป

แบบฟอร์มเป็นคุณลักษณะที่สำคัญของ HTML ที่ช่วยให้คุณสามารถรวบรวมและประมวลผลข้อมูลผู้ใช้ได้

ในบทช่วยสอนนี้ เราได้พูดคุยโดยใช้ตัวอย่าง พื้นฐานของแบบฟอร์มใน HTML และวิธีสร้างเว็บฟอร์มแรกของคุณ ตอนนี้คุณพร้อมที่จะเริ่มออกแบบและพัฒนาแบบฟอร์ม HTML ของคุณเองอย่างผู้เชี่ยวชาญแล้ว!