<search> 태크

과거 아래와 같이 처리 했었죠.

<form role="search" method="get" action="/search">
  <input type="search" name="search-text" />
  <button>Search</button>
</form>

이제는 아래와 같이 처리 가능 해졌음.

<search>
  <form method="get" action="/search">
    <input type="search" name="search-text" />
    <button>Search</button>
  </form>
</search>

모든 브라우저에 호환시키기에는 아직 시간이 좀 걸릴걸같음.

Unfortunately, as <search> is new to the standard, it may be a while before all the browsers, screen readers, and other tools catch up

아래와 같은 사용 방법도 있으니 참고하면 좋을것 같다.

<search>
  <h2>Filter results</h2>

  <form>
    <label for="cartype">Car type</label>
    <select id="cartype">
      <option value="coupe">Coupe</option>
      <option value="sedan">Sedan</option>
    </select>

    <label for="electric">Electric?</label>
    <input type="checkbox" id="electric" />
  </form>
</search>

더 정확한 정보는 https://www.scottohara.me/blog/2023/03/24/search-element.html

를 참고바란다.

내저장소 바로가기 luxury515