top of page

การสร้างฟิลด์ข้อมูลเเบบ Email เเละ URL (HTML5)

การสร้างฟิลด์ข้อมูลเเบบ Email เเละ URL (HTML5)

ใน HTML5 ได้เพิ่มฟิลด์ข้อมูลใหม่ 2 ชนิด ได้เเก่ฟิลด์ข้อมูลเเบบ Eamil เเละ URL สำหรับการป้อนข้อมูลที่อยู่อีเมล (Email address) เเละที่อยู่ของเว็บ (Wad address)

ตามลำดับ ซึ่งข้อมูลทั้งสองเเบบนี้จะเป็นข้อมูลที่มีรูปเเบบเฉพาะ หากเบราว์เซอร์ใดไม่รับรอง HTML5 ฟิลด์ชนิดนี้ก็จะถูกมองเป็นฟิลด์เเบบ Taxt เเทน

รูปเเบบ <input type = “email”>

<input type = “url”>

โดยที่

   type = “email” เป้นการกำหนดให้รับข้อมูลในเเบบที่อยู่อีเมล ซึ่งมีรูปเเบบคือ ชื่อ@ที่อยู่ เช่น sitt999@gmali.com

   type = “url” เป็นการกำหนดให้รับข้อมูลในเเบบที่อยู่เว็บไซต์ url หมายถึง Uniform Resource Locator ซึ่งเป็นรูปเเบบมาตรฐานอ้างถึงเว็บไซต์ที่ต้องการ โดยเขียนในรูปเเบบ โพรโทคอล:/ชื่อเว็บไซต์.ชนิด ตัวอย่างเช่น http/www.softpooressbook.com

หากต้องการเเสดงรุปเเบบของข้อมูลตัวอย่างเพื่อให้ผู้ใช้ป้อนได้ถูกต้อง ให้เพิ่มคำสั่ง placeholder = “ตัวอย่างข้อมูล” เช่น <input type = “email” placeholder = “name@address”>

ข้อดีของการใช้ฟิลด์ข้อมูลเเบบ Email เเละ URL เเทนที่จะใช้ข้อมุลเเบบข้อความ (text)

ก็คือ เว็บเบราว์เซอร์จะมีการตรวจสอบข้อมูลที่ถูกป้อนให้ว่าอยู่ในรูปเเบบของ Email หรือ URL หรือไม่ ถ้าไม่ ก็จะเเสดงข้อความเตือนให้ผู้ป้อนได้ทราบ เช่น

ตัวอย่างการสร้างฟิลด์ข้อมูล Email address เเละ Wed adderss

<body>

<form>

Email: <input type = “email”placeholder = “name@adderss” ><br><br>

Web site : <input type = “url”>

</form>

</body>

ผลที่ได้บนเบราว์เซอร์

bottom of page