5 #permalink Forms

HTML forms are used to collect user input.

select
A select list dropdown. 
  1. <form>
  2.  <div class="select__menu-wrap">
  3.   <select class="select__menu">
  4.     <option value="volvo">Volvo</option>
  5.     <option value="saab">Saab</option>
  6.     <option value="mercedes">Mercedes</option>
  7.     <option value="audi">Audi</option>
  8.   </select>
  9.   <span class="select__text"></span>
  10.   <span class="select__arrow"><i class="fa fa-caret-down"></i></span>
  11.  </div>
  12. </form>

5.1 #permalink Inputs

.u-full-width
A full width input.
.form__input
Basic form input.
.required
A required input field. 
  1. <form>
  2.   <div class="field__container col">
  3.     <label for="name">Text Input:</label>
  4.     <input class="[modifier class]" type="text"/>
  5.   </div>
  6. </form>

5.2 #permalink Input group

.form__input-group
Wrap inputs with this class to group them 
  1. <form>
  2.   <div class="segment__item--inline form__input-group">
  3.     <div class="form__input-group" style="padding-right: 12px;">
  4.       <label for="name">Text Input:</label>
  5.       <input class="u-full-width" type="text" name="name" id="name" />
  6.     </div>
  7.     <div class="form__input-group" style="padding-left: 12px;">
  8.       <label for="name">Required Text Input:</label>
  9.       <input class="required u-full-width" type="text" name="name" id="name" placeholder="XXXX XXXX XXXX XXXX"/>
  10.     </div>
  11.   </div>
  12. </form>

5.3 #permalink Submit button

type="submit"
A submit button 
  1. <form>
  2.   <input class="button" type="submit" value="Submit" />
  3. </form>

5.4 #permalink Checkbox

type="checkbox"
A checkbox input 
  1. <form>
  2.   <label for="checkbox">Checkbox:</label>
  3.   <input type="checkbox" name="checkbox" id="checkbox" />
  4. </form>

5.5 #permalink Textarea

textarea
A multi-line text input control. 
  1. <form>
  2.   <label for="textarea">Textarea:</label>
  3.   <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  4. </form>

5.6 #permalink Radion buttons

input type="radio"
An input to select one choice.
Male
Female
Other 
  1. <form>
  2.   <input type="radio" name="gender" value="male" checked> Male<br>
  3.   <input type="radio" name="gender" value="female"> Female<br>
  4.   <input type="radio" name="gender" value="other"> Other
  5. </form>

5.7 #permalink Password

input type="password"
Defines a password.
User name:

User password:
  1. <form>
  2.   User name:<br>
  3.   <input type="text" name="username"><br>
  4.   User password:<br>
  5.   <input type="password" name="psw">
  6. </form>

5.8 #permalink HTML 5 Inputs

input type="password"
Defines a password. 
  1. <form>
  2.   <div class="field__container col">
  3.     <label for="name">Email:</label>
  4.     <input class="[modifier class]" type="email"/>
  5.   </div>
  6.   <div class="field__container col">
  7.     <label for="name">Date:</label>
  8.     <input class="[modifier class]" type="date"/>
  9.   </div>
  10.   <div class="field__container col">
  11.     <label for="name">Month:</label>
  12.     <input class="[modifier class]" type="month"/>
  13.   </div>
  14.   <div class="field__container col">
  15.     <label for="name">Number:</label>
  16.     <input class="[modifier class]" type="number"/>
  17.   </div>
  18.   <div class="field__container col">
  19.     <label for="name">Search:</label>
  20.     <input class="[modifier class]" type="search"/>
  21.   </div>
  22.   <div class="field__container col">
  23.     <label for="name">Phone:</label>
  24.     <input class="[modifier class]" type="tel"/>
  25.   </div>
  26.   <div class="field__container col">
  27.     <label for="name">Url:</label>
  28.     <input class="[modifier class]" type="url"/>
  29.   </div>
  30. </form>

5.8.1 #permalink Color Input

input type="color"
Input a color.
Color: 
  1. <form>
  2.   Color:
  3.   <input type="color" name="favcolor">
  4. </form>

5.9 #permalink Form actions

form-actions
Wrap action buttons with form-actions class. 
  1. <div class="form-actions">
  2.   <button type="button" class="button button--success">Save changes</button>
  3.   <button type="button" class="button">Cancel</button>
  4. </div>