home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธาใช้ Input Type URL ใน HTML

บทนำ

ใช้ <input type="url"> สำหรับกรอก URL เบราว์เซอร์จะ Validate รูปแบบอัตโนมัติ (ต้องมีโปรโตคอล https:// หรือ https://)

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input URL</title>
  </head>
  <body>
    <form action="" method="get">
      รายละเอียด:<br><br>
      ชื่อนักเรียน<br>
      <input type="text" name="sname"><br>
      เว็บไซต์<br>
      <input type="url" name="website"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

การตรวจสอบ (Validation)

  • ต้องมี Scheme (https://, https://, ftp://, etc.)
  • รูปแบบที่ผิดจะแสดง Error: "Please enter a URL"
  • ใช้ pattern สำหรับ validate เพิ่มเติม (เช่น บังคับ https)

แอตทริบิวต์เสริม

  • placeholder - ใส่ "https://example.com"
  • list - เชื่อม datalist สำหรับ URL แนะนำ
  • required, readonly, disabled

ตัวอย่าง Pattern บังคับ HTTPS

<input type="url" name="website" pattern="https://.*" title="ต้องใช้ HTTPS" required>