Creating Your First Form

<form> tag ใช้ในการสร้างฟอร์มทั่วไป หน้าตาจะเป็นแบบนี้

<form>
	Input elements
</form>

ฟอร์ม <form> ประกอบไปด้วยส่วนต่างๆที่เรียกว่า widget (ชุดคำสั่งควบคุมในการทำงานในแบบต่าง ๆ เช่น เป็นหน้าต่าง เล็ก ๆ : popup), control, หรือ field จริงๆแล้วคือสิ่งเดียวกันแต่มีหลายชนิด จริงๆแล้วควรเรียกว่า state ตัวอย่างต่อไปนี้จะเป็นการสร้างฟอร์มแบบง่ายๆ ที่มีกล่องกรอกข้อมูล 2 กล่องและปุ่มกดส่ง 1 ปุ่ม

<form>
	First name: <input type="text" name="firstname" /> <br />
	Surname: <input type="text" name="surname" /> <br />
	<input type="submit" value="Submit now" />
</form>

ดังทีเห็นในตัวอย่าง input field (กล่องกรอกข้อมูล) จะใช้ <input> element เป็นตัวกำหนดว่ากล่องข้อมูลที่ผู้ใช้สามารถเปลี่ยนแปลงข้อมูลได้ ตัวแปร type จะเป็นตัวกำหนดว่าเราจะใช้ input element ในลักษณะไหน ในที่นี้เราใช้ text element ธรรมดา ส่วนตัวแปร name เป็นการตั้งชื่อให้ input field

Button (ปุ่มกด) เราจะใช้ <input> element เช่นเดียวกันแต่จะใช้ ตัวแปร type “submit” แทน “text” เพื่อที่จะบอกว่านี่คือ ปุ่มกดส่ง ปุ่มกดส่งมีตัวแปรชื่อ value เพื่อที่จะกำหนดว่าจะแสดงข้อมูลอะไรบนปุ่ม ในที่นี้คือ “Submit now”
<input> element เป็น element แบบเปล่าๆ เพราะฉะนั้นมันจะ self-closing (ปิดตัวเอง) ได้ด้วยเครื่องหมาย / ท้ายประโยค

เคล็ดลับ!

เวลาเขียนโค้ดเราควรเขียนให้สั้นจะได้ไม่สับสน ถ้าเราต้องการใช้ text element ธรรมดาในฟอร์ม เราสามารถละตัวแปร type ออกได้ เบราเซอร์จะทำการแปล input field เองโดยอัตโนมัติ โดยที่ผลลัพธ์จะออกมาหน้าตาเหมือนกัน

<input type="text" />
<input />