Grouping with the fieldset tag

ถ้าเรามีข้อมูลเยอะๆ เราควรจะจัดกลุ่มหรือขอบเขตให้มันจะได้อ่านได้ง่าย เราใช้ <fieldset> element ชื่อกลุ่มเราจะใช้ <legend> element ซึ่งเป็น child element (element ลูก) ของ <fieldset> แล้วเรายังมี <label> เป็นชื่อหรือหัวข้อของแต่ละ element

ต่อไปนี้เป็นตัวอย่างการใช้ element ที่กล่าวข้างต้น

<form>
	<fieldset>
		<legend>Contact Details</legend>
			<label for="name">Name:</label>
			<input id="name"><br />

			<label for="telephone">Telephone:</label>
			<input id="telephone"><br />

			<label for="user-email">Email:</label>
			<input id="user-email">
	</fieldset>
	<fieldset>
		<legend>User info</legend>
			<label for="username">Username:</label>
			<input id="username"><br />

			<label for="password">Password:</label>
			<input id="password"><br />
	</fieldset>
	<input type="submit" value="Submit now" />
</form>

ทำไมเราถึงใช้ fieldset? ลองคิดดูว่าเราอยากจะสร้าง form มาอันนึงที่เกี่ยวกับอาหาร เราก็จะแบ่งชนิดของอาหารโดยการใช้ fieldset ในการจัดแบ่ง form เราเพิ่มตัวแปร id ให้ iput เข้าไปด้วยเพื่อกำหนดให้ element ไม่ซ้ำกับใคร เราใช้ id เมื่อเราใช้ label และเราเชื่อมต่อ 2 element (input element และ label element) นี้ด้วยตัวแปร for

เราได้เรียนถึง input field หลายๆชนิดที่เราสามารถใช้ใน webform เช่น กล่องข้อความ (text field) และปุ่มกด (button)
ปกติแล้ว text field จะมี 20 characters (ตัวอักษร) แต่ถ้าเราต้องการที่จะเพิ่มจำนวนตัวอักษร เราจะใช้ตัวแปร size

<input type="text" size="35" maxlength="140">

ดังตัวอย่างที่เห็น จะมีตัวแปรชื่อ maxlength ด้วย ซึ่งจะกำหนดว่าผู้ใช้สามารถพิมพ์ใน text field ได้กี่ตัว ในที่นี้ 140 ตัวอักษร ยกตัวอย่าง text field ของ twitter, คอมเมนต์ ของ blog