Form - Search with a Placeholder

This simple form example demonstrates how to code a search input with a placeholder in it.

SearchWithPlaceholderAndCallback.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's HTML: Simple Search Example</title>
    <script>
      function SearchSite(sQuery, qEvent) {
        // The value 13 is the key code for "Enter"
        if (qEvent.keyCode == 13) {
          document.getElementById("idSearch").value = "We are searching for \'" + sQuery + "\'";
        }
      }
    </script>
  </head>
  <body>
    <input type="search"
      id="idSearch"
      name="query"
      size="40"
      placeholder="Search the entire site..."
      onkeyup="SearchSite(this.value, event)"/>
  </body>
</html>

Core HTML

Form - Search with a Placeholder

SearchWithPlaceholderAndCallback.html

Output