Form Elements ใน HTML5 เป็นชุดเครื่องมือที่ช่วยให้ผู้ใช้สามารถกรอกข้อมูลและส่งข้อมูลไปยังเซิร์ฟเวอร์ได้อย่างสะดวก HTML5 ได้เพิ่มความสามารถใหม่ๆ ให้กับฟอร์ม เช่น ชนิดของ input แบบใหม่ ที่ช่วยให้การป้อนข้อมูลมีความถูกต้องมากขึ้น เช่น email, url, date และอื่นๆ
ประเภทของ Form Elements ใน HTML5
1. <form>
ใช้ในการสร้างฟอร์มสำหรับรับข้อมูลจากผู้ใช้
- คุณสมบัติสำคัญ
action: ระบุ URL ที่ข้อมูลฟอร์มจะถูกส่งไปmethod: ระบุวิธีการส่งข้อมูล (GET หรือ POST)
<form action="/submit" method="post">
<input type="text" name="username" placeholder="Enter Username">
<input type="submit" value="Submit">
</form>2. <input>
ใช้สำหรับรับข้อมูลในรูปแบบต่างๆ จากผู้ใช้ มีชนิดย่อยที่สำคัญดังนี้
type="text": รับข้อมูลแบบข้อความtype="password": รับข้อมูลแบบรหัสผ่าน ข้อมูลจะถูกซ่อนtype="email": รับข้อมูลที่เป็นอีเมลและจะตรวจสอบรูปแบบของอีเมลtype="url": รับข้อมูล URL และจะตรวจสอบรูปแบบของ URLtype="number": รับข้อมูลตัวเลข สามารถระบุช่วงได้ด้วยminและmaxtype="date": รับข้อมูลวันที่type="radio": ใช้เลือกค่าที่เป็นตัวเลือกเดียวจากกลุ่มตัวเลือกtype="checkbox": ใช้เลือกค่าหลายค่าได้type="file": รับข้อมูลไฟล์- type=”submit”: ปุ่มสำหรับส่งข้อมูลฟอร์ม
ตัวอย่าง
<input type="text" name="fullname" placeholder="Enter Full Name">
<input type="password" name="password" placeholder="Enter Password">
<input type="email" name="email" placeholder="Enter Email">
<input type="url" name="website" placeholder="Enter Website URL">
<input type="number" name="age" min="1" max="100" placeholder="Enter Age">
<input type="date" name="birthdate">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="traveling"> Traveling
<input type="file" name="resume">
<input type="submit" value="Submit">3. <textarea>
- ใช้สำหรับรับข้อความหลายบรรทัด
<textarea name="comments" rows="4" cols="50" placeholder="Enter your comments"></textarea>4. <select> และ <option>
- ใช้ในการสร้างตัวเลือกแบบ drop-down
<select name="country">
<option value="thailand">Thailand</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
</select>5. <button>
- ใช้สร้างปุ่ม ซึ่งสามารถใช้แทน
<input type="submit">
<button type="submit">Submit Form</button>6. <label>
- ใช้เพื่อระบุป้ายชื่อสำหรับ input elements ทำให้การใช้งานง่ายขึ้น
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">7. <fieldset> และ <legend>
- ใช้ในการจัดกลุ่มของฟอร์มและใส่ชื่อกลุ่ม
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</fieldset>คุณสมบัติใหม่ใน HTML5
1. autofocus: ให้ element นั้น ๆ โฟกัสโดยอัตโนมัติเมื่อโหลดหน้าเว็บ
<input type="text" name="username" autofocus>2. placeholder: แสดงข้อความชั่วคราวใน input field
<input type="text" name="fullname" placeholder="Enter Full Name">3. required: บังคับให้ต้องกรอกข้อมูลก่อนส่งฟอร์ม
<input type="email" name="email" required>4. pattern: กำหนดรูปแบบข้อมูลที่ต้องการด้วย regular expression
<input type="text" name="phone" pattern="[0-9]{10}" placeholder="Enter 10-digit phone number">ตัวอย่างการประยุกต์ใช้งาน Form
<form action="/submit" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" placeholder="Enter Full Name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Email" required>
<br>
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate">
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="thailand">Thailand</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
</select>
<br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</fieldset>
<button type="submit">Submit</button>
</form>Form Elements เหล่านี้ช่วยเพิ่มความสะดวกในการสร้างฟอร์มที่มีความหลากหลายในการใช้งาน ทำให้สามารถรับข้อมูลที่ถูกต้องและสะดวกในการใช้งานมากยิ่งขึ้น
