Getting input from our users; form elements

Textual input

Search field

HTML code snippet

<label for="input-search">Label for input type="search"</label>
<input id="input-search" placeholder="Search the SeMI site" type="search" />

Regular text input

HTML code snippet

<label for="input-text">Label text</label>
<input id="input-text" placeholder="Placeholder text" type="text" />

Email address input

HTML code snippet

<label for="input-email">Label for input type="email"</label>
<input id="input-email" placeholder="hello@semi.technology" type="email" />
<input class="button--small" type="submit" value="Check address" />

Number input

HTML code snippet

<label for="input-number">Label text</label>
<input id="input-number" type="number" />

Password field

HTML code snippet

<label for="input-password">Label text</label>
<input id="input-password" placeholder="••••••••••••" type="password" />

Telephone number input

HTML code snippet

<label for="input-tel">Label text</label>
<input id="input-tel" pattern="[0-9\-\(\) +]{0,20}" placeholder="×××–××× ×× ××" title="Only use numbers (0–9), a plus (+), and/or dashes (-)" type="tel" />

Web address input

HTML code snippet

<label for="input-url">Label text</label>
<input id="input-url" placeholder="https://domain.com/" type="url" />
<input class="button--small" type="submit" value="Check URL" />

Required input

HTML code snippet

<label for="input-req">Label text</label>
<input id="input-req" placeholder="Placeholder text" required="required" type="text" />
<input class="button--small" type="submit" value="Check input" />

Text area

HTML code snippet

<label for="textarea">Label text</label>
<textarea id="textarea">
    Placeholder text
</textarea>

Buttons

HTML code snippet

<button>Button</button>

HTML code snippet

<button class="button--small">Small button</button>

HTML code snippet

<input class="button--cta" type="submit" value="Call-to-action button" />
Link as button

HTML code snippet

<a class="button" href="#">Link as button</a>

Select menu

HTML code snippet

<label for="select">Label for select menu</label>
<section>
    <select id="select">
        <option>Option one</option>
        <option>Option two</option>
        <option>Option three</option>
        <option>Option four</option>
        <option>Option five</option>
    </select>
</section>

Select menu with grouping

HTML code snippet

<label for="select-group">Label for select menu</label>
<section>
    <select id="select-group">
        <optgroup label="Option group one">
            <option>Option group one, option one</option>
            <option>Option group one, option  two</option>
            <option>Option group one, option  three</option>
            <option>Option group one, option  four</option>
            <option>Option group one, option  five</option>
        </optgroup>
        <optgroup label="Option group two">
            <option>Option group two, option one</option>
            <option>Option group two, option  two</option>
            <option>Option group two, option  three</option>
            <option>Option group two, option  four</option>
            <option>Option group two, option  five</option>
        </optgroup>
    </select>
</section>

Select menu with multiple selections

HTML code snippet

<label for="select-multiple">Label for select menu</label>
<section>
    <select id="select-multiple" multiple="multiple">
        <option>Option one</option>
        <option>Option two</option>
        <option>Option three</option>
        <option>Option four</option>
        <option>Option five</option>
    </select>
</section>

Search form

HTML code snippet

<form action="/search.html?query=" class="search">
    <section class="search-meta">
        <label for="search-form">Label text</label>
        <input autosave="save-search-form" id="search-form" name="search" results="15" type="search" />
        <input class="button" type="submit" value="Search" />
    </section>
</form>

Inline form

HTML code snippet

<section class="form-inline">
    <form action="/search.html?query=" class="search">
        <section class="search-meta">
            <label for="search-form-inline">Label text</label>
            <input autosave="save-search-form-inline" id="search-form-inline" name="search" results="15" type="search" />
            <input class="button" type="submit" value="Search" />
        </section>
    </form>
</section>

Range slider

HTML code snippet

<label for="input-range">Label text</label>
<input id="input-range" type="range" />

Multi-handle slider

HTML code snippet

<label for="input-multirange">Label for multi-range slider</label>
<input id="input-multirange" type="range" multiple value="25,75" />