​
Contact us

Getting input from our users; form elements

Textual input

Search field

HTML code snippet

<label for="input-search">Label text</label> <input id="input-search" placeholder="Placeholder text" 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 text</label> <input id="input-email" placeholder="hello@domainname.tld" type="email" />

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" />

Required input

HTML code snippet

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

Text area

HTML code snippet

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

Buttons

HTML code snippet

<button>Button text</button>

HTML code snippet

<button class="button--small">Button text</button>

HTML code snippet

<input class="button--cta" type="submit" value="Button text" />
Link as button

HTML code snippet

<a class="button" href="#">Link text</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="semi-sg-input-multirange">Label for multi-range slider</label> <input id="semi-sg-input-multirange" type="range" multiple value="25,75" />