สำหรับ form ใน html5 นั้นมีเพิ่มใหม่มาบางคำสั่งเท่านั้นครับ
ซึ่งข้อเสียเพียงอย่างเดียวของมันคือ ตอนนี้มันยังไม่ได้รับรองทุก Browser ครับ
แต่คิดว่าต่อไปก็น่าจะเป็นมาตรฐานให้ทุก browser ต้องมีกัน ... ก็ว่ากันไป แบ่งเป็น 3 ส่วนสำหรับ form นะครับ
เอาเฉพาะจำเป็นนะครับ ส่วนแรกคือ
HTML5 Input type
ส่วนของ input type มีแท็กที่เพิ่มขึ้นมาทั้งหมดคือ
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week
input type color
เราสามารถกำหนดค่าสี แล้วจึงกดปุ่ม submit ได้ (ของเดิมทำได้ แต่ไม่ง่ายแบบนี้) ซึ่งค่าที่ได้จะเป็นรหัสสี 6 หลัก มี # นำหน้าครับ เช่น
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
เลือกสีที่ต้องการสั่งซื้อ: <input type="color" name="pickcolor"><br>
<input type="submit" value="เลือก">
</form>
</body>
</html>
ปล. คำสั่ง color นี้ใช้ได้กับ browser 3 browser ได้แก่ chrome opera firefox
input type date
ทำให้ user สามารถเลือกวัน ได้ง่ายๆ โดยระบุ หรือกดตามปฏิทินได้เลย ไม่ต้องสร้าง ปฏิทินให้เหนื่อยเองอีกแล้วครับ
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
วันเกิด: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
ปล.ใช้ใน firefox กับ ie ไม่ได้
input type email
เป็นช่องที่ทำไว้ให้ ยูสเซอร์กรอกเมลล์โดยเฉพาะครับ ถ้ากรอกผิดจะเตือนเองอัตโนมัติ ไม่ต้องเขียนโค๊ดกรองคำยาวๆ เหมือนเช่นเคย
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
E-mail: <input type="email" name="email">
<input type="submit">
</form>
</body>
</html>
ปล.ใช้ใน safari ไม่ได้
input type range
เป็นเส้น ช่วงให้ยูสเซอร์กรอก ซึ่งค่าที่ได้จะเป็นตัวเลขครับ
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=a.value">0
<input type="range" id="a" value="50"> 100
<output name="x"></output>
</form>
</body>
</html>
โดยจากโค๊ดตัวอย่าง จะมีคำสั่ง form ใหม่ใน html5 คือ output,oninput คำสั่งนี้จะเป็นคำสั่ง แสดงผลเอาท์พุทของฟอร์ม input ซึ่งในตัวอย่างนี้ ตัว out put จะแสดงผลของ input ที่ชื่อ a ซึ่งจะแสดงตรงบรรทัดที่เราใส่ <output></output> ไป ซึ่งสั่งการโดยคำสั่ง oninput ด้านบนนั่นเองครับ
ปล.ใช้ใน ie รุ่นเก่าไม่ได้
