5 #permalink Forms
HTML forms are used to collect user input.
select
A select list dropdown.
<form>
<div class="select__menu-wrap">
<select class="select__menu">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<span class="select__text"></span>
<span class="select__arrow"><i class="fa fa-caret-down"></i></span>
</div>
</form>
.u-full-width
A full width input.
.form__input
Basic form input.
.required
A required input field.
<form>
<div class="field__container col">
<label for="name">Text Input:</label>
<input class="[modifier class]" type="text"/>
</div>
</form>
.form__input-group
Wrap inputs with this class to group them
<form>
<div class="segment__item--inline form__input-group">
<div class="form__input-group" style="padding-right: 12px;">
<label for="name">Text Input:</label>
<input class="u-full-width" type="text" name="name" id="name" />
</div>
<div class="form__input-group" style="padding-left: 12px;">
<label for="name">Required Text Input:</label>
<input class="required u-full-width" type="text" name="name" id="name" placeholder="XXXX XXXX XXXX XXXX"/>
</div>
</div>
</form>
type="submit"
A submit button
<form>
<input class="button" type="submit" value="Submit" />
</form>
type="checkbox"
A checkbox input
<form>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox" id="checkbox" />
</form>
textarea
A multi-line text input control.
<form>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</form>
input type="radio"
An input to select one choice.
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
input type="password"
Defines a password.
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
input type="password"
Defines a password.
<form>
<div class="field__container col">
<label for="name">Email:</label>
<input class="[modifier class]" type="email"/>
</div>
<div class="field__container col">
<label for="name">Date:</label>
<input class="[modifier class]" type="date"/>
</div>
<div class="field__container col">
<label for="name">Month:</label>
<input class="[modifier class]" type="month"/>
</div>
<div class="field__container col">
<label for="name">Number:</label>
<input class="[modifier class]" type="number"/>
</div>
<div class="field__container col">
<label for="name">Search:</label>
<input class="[modifier class]" type="search"/>
</div>
<div class="field__container col">
<label for="name">Phone:</label>
<input class="[modifier class]" type="tel"/>
</div>
<div class="field__container col">
<label for="name">Url:</label>
<input class="[modifier class]" type="url"/>
</div>
</form>
input type="color"
Input a color.
<form>
Color:
<input type="color" name="favcolor">
</form>
form-actions
Wrap action buttons with
form-actions class.
<div class="form-actions">
<button type="button" class="button button--success">Save changes</button>
<button type="button" class="button">Cancel</button>
</div>