SIA Web Design Library

Search form

No notes defined.

<div class='c-search-form'>
    <form class='c-search-form' method="GET" action="#">
        <div class='form-row'>
            <div class='form-group'>
                <label class='form-input form-input--search'>
                    <span class='form-field__label'>Keywords</span>
                    <input type='text' class='form-input form-input__email' name="s" value="my keywords for something" placeholder='To search, type and press enter' />
                </label>
            </div>
            <div class='form-group form-actions'>
                <button class='c-button c-button--with-icon c-button--search' type='submit'><span>Search</span></button>
            </div>
        </div>
    </form>
</div>
 
<div class='{{ get_component_class( 'search-form', display ) }}'>
    <form class='c-search-form' method="{{ method }}" action="{{ action }}">
        <div class='form-row'>
            <div class='form-group'>
                <label class='form-input form-input--search'>
                    <span class='form-field__label'>{{ 'Keywords'|t }}</span>
                    <input type='text' class='form-input form-input__email' name="{{ name }}" value="{{ keyword }}" placeholder='{{ "To search, type and press enter"|t }}' />
                </label>
            </div>
            <div class='form-group form-actions'>
                <button class='c-button c-button--with-icon c-button--search' type='submit'><span>{{ 'Search'|t }}</span></button>
            </div>
        </div>
    </form>
</div>
 
{
  "bodyclass": "t-theme--awareness",
  "method": "GET",
  "action": "#",
  "keyword": "my keywords for something",
  "name": "s"
}