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

บทนำ

ใช้ <input type="search"> สำหรับช่องค้นหา คล้าย text แต่มี UI เฉพาะ (มีปุ่ม Clear × ในบางเบราว์เซอร์)

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

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input Search</title>
  </head>
  <body>
    <form action="" method="get">
      ค้นหา<br>
      <input type="search" name="search"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

ความแตกต่างจาก type="text"

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

• placeholder - "ค้นหา..."
• autosave - บันทึกประวัติ (Safari)
• results - จำนวนประวัติที่แสดง (Safari)
• incremental - ส่ง event input ทุกครั้งที่พิมพ์ (Safari)

CSS สำหรับปุ่ม Clear

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 16px; width: 16px;
  background: url(close-icon.svg) no-repeat center;
  background-size: contain;
}