Методы создания панели поиска в HTML с атрибутом aria-label

Чтобы создать панель поиска в HTML с атрибутом aria-label, вы можете использовать различные методы. Вот несколько подходов:

Метод 1: HTML-элемент

с элементом :

<form action="/search" method="get">
  <label for="search-input">Search:</label>
  <input type="text" id="search-input" name="q" aria-label="Search" />
  <button type="submit">Submit</button>
</form>

Метод 2: HTML-элемент с атрибутом role="search":

<div role="search">
  <label for="search-input">Search:</label>
  <input type="text" id="search-input" name="q" aria-label="Search" />
  <button type="submit">Submit</button>
</div>

Метод 3: элемент HTML5 с для предложений:

<label for="search-input">Search:</label>
<input type="text" id="search-input" name="q" list="search-suggestions" aria-label="Search" />
<datalist id="search-suggestions">
  <option value="Option 1">
  <option value="Option 2">
  <option value="Option 3">
</datalist>
<button type="submit">Submit</button>

Метод 4: HTML-элемент с обработкой событий JavaScript:

<label for="search-input">Search:</label>
<input type="text" id="search-input" name="q" aria-label="Search" />
<button type="button" onclick="performSearch()">Submit</button>
<script>
  function performSearch() {
    var searchQuery = document.getElementById('search-input').value;
    // Perform search logic here
    console.log('Search query:', searchQuery);
  }
</script>