after.html

<div class="header-search">
  <form
    action="/en-US/search"
    class="search-widget"
    role="search"
    aria-haspopup="listbox"
    aria-owns="downshift-0-menu"
    aria-expanded="false"
    id="nav-main-search"
  >
    <label for="main-q" class="visually-hidden">Search MDN</label
    ><input
      id="main-q"
      aria-autocomplete="list"
      aria-controls="downshift-0-menu"
      aria-labelledby="downshift-0-label"
      autocomplete="off"
      type="search"
      class="search-input-field"
      name="q"
      placeholder='Site search... (Press "/" to focus)'
      value=""
    /><input
      type="submit"
      class="ghost search-button"
      aria-label="Search"
      value=""
    />
    <div
      id="downshift-0-menu"
      role="listbox"
      aria-labelledby="downshift-0-label"
    ></div>
  </form>
</div>

before.html

<div class="header-search">
  <form action="/en-US/search" class="search-form" role="search">
    <label for="main-q" class="visually-hidden">Search MDN</label
    ><input
      type="search"
      name="q"
      id="main-q"
      class="search-input-field"
      placeholder='Site search... (Press "/" to focus)'
      pattern="(.|\s)*\S(.|\s)*"
      required=""
      value=""
    /><input
      type="submit"
      class="ghost search-button"
      aria-label="Search"
      value=""
    />
  </form>
</div>