{{ enablePlugins('prettify') }} {% set title = "Base Form Elements" %} {% extends "layouts/application.html" %} {% block content %} {% include "shared/page-title.html" %}
Forms are the standard way to receive user inputted data. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.

Input Fields

<div class="input-field">
  <input id="input_text" type="text" class="validate" placeholder="Placeholder">
  <label for="input_text">Text Field</label>
</div>
<div class="input-field align-right">
  <input id="input_text_ra" type="text" class="validate">
  <label for="input_text_ra">Right Aligned</label>
</div>
<div class="input-field align-center">
  <input id="input_text_ca" type="text" class="validate">
  <label for="input_text_ca">Center Aligned</label>
</div>
<div class="input-field">
  <input id="input_disabled" type="text" class="validate" disabled>
  <label for="input_disabled">Disabled Text Field</label>
</div>
<div class="input-field">
  <input id="input_password" type="password" class="validate">
  <label for="input_password">Password</label>
</div>
<div class="input-field">
  <input id="input_email" type="email" class="validate">
  <label for="input_email">Email</label>
</div>
<div class="input-field">
  <textarea id="textarea1" class="materialize-textarea"></textarea>
  <label for="textarea1">Textarea</label>
</div>
<div class="input-field align-right">
  <textarea id="textarea_ra" class="materialize-textarea"></textarea>
  <label for="textarea_ra">Textarea Right Aligned</label>
</div>
<div class="input-field align-center">
  <textarea id="textarea_ra" class="materialize-textarea"></textarea>
  <label for="textarea_ra">Textarea Center Aligned</label>
</div>
<div class="input-field">
  <i class="mdi-action-thumb-up prefix"></i>
  <input id="input_text_icon" type="text" class="validate">
  <label for="input_text_icon">Text Field with Icon</label>
</div>
<div class="input-field">
  <i class="mdi-communication-chat prefix"></i>
  <textarea id="textarea_icon" class="materialize-textarea"></textarea>
  <label for="textarea_icon">Textarea with Icon</label>
</div>

Select Fields

<select>
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select class="browser-default">
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select class="browser-default align-right">
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select disabled>
  <option value="" selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select class="browser-default" disabled>
  <option value="" selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select multiple>
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select multiple>
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Radio Buttons

<p>
  <input name="radios1" type="radio" id="radios1-1" checked />
  <label for="radios1-1">One</label>
</p>
<p>
  <input name="radios1" type="radio" id="radios1-2" />
  <label for="radios1-2">Two</label>
</p>
<p>
  <input name="radios1" type="radio" id="radios1-3" disabled />
  <label for="radios1-3">Three</label>
</p>

Radio buttons with gap.

<p>
  <input class="with-gap" name="radios2" type="radio" id="radios2-1" checked />
  <label for="radios2-1">One</label>
</p>
<p>
  <input class="with-gap" name="radios2" type="radio" id="radios2-2" />
  <label for="radios2-2">Two</label>
</p>
<p>
  <input class="with-gap" name="radios2" type="radio" id="radios2-3" disabled />
  <label for="radios2-3">Three</label>
</p>

Checkboxes

<p>
  <input type="checkbox" id="checkbox1" />
  <label for="checkbox1">One</label>
</p>
<p>
  <input type="checkbox" id="checkbox2" checked="checked" />
  <label for="checkbox2">Two</label>
</p>
<p>
  <input type="checkbox" class="filled-in" id="checkbox3" checked="checked" />
  <label for="checkbox3">Filled In</label>
</p>
<p>
  <input type="checkbox" id="checkbox4" checked="checked" disabled="disabled" />
  <label for="checkbox4">Three</label>
</p>
<p>
  <input type="checkbox" id="checkbox5" disabled="disabled" />
  <label for="checkbox5">Four</label>
</p>

Switches

<p class="switch">
  <label>
    <input type="checkbox" />
    <span class="lever"></span>
    One
  </label>
</p>
<p class="switch">
  <label>
    <input type="checkbox" checked />
    <span class="lever"></span>
    Two
  </label>
</p>
<p class="switch">
  <label>
    <input type="checkbox" />
    <span class="lever"></span>
    Three
  </label>
</p>

Ratings


<!-- Ratings with Stars -->
<div class="rating">
  <input type="radio" id="rating-star-5" name="rating-star" value="5">
  <label for="rating-star-5"><i class="ion-star"></i></label>
  <input type="radio" id="rating-star-4" name="rating-star" value="4">
  <label for="rating-star-4"><i class="ion-star"></i></label>
  <input type="radio" id="rating-star-3" name="rating-star" value="3" checked>
  <label for="rating-star-3"><i class="ion-star"></i></label>
  <input type="radio" id="rating-star-2" name="rating-star" value="2">
  <label for="rating-star-2"><i class="ion-star"></i></label>
  <input type="radio" id="rating-star-1" name="rating-star" value="1">
  <label for="rating-star-1"><i class="ion-star"></i></label>
</div>
<!-- /Ratings with Stars -->

<br>
<!-- Ratings with Sun -->
<div class="rating">
  <input type="radio" id="rating-5" name="rating" value="5">
  <label for="rating-5"><i class="wi wi-day-sunny"></i></label>
  <input type="radio" id="rating-4" name="rating" value="4">
  <label for="rating-4"><i class="wi wi-day-sunny"></i></label>
  <input type="radio" id="rating-3" name="rating" value="3">
  <label for="rating-3"><i class="wi wi-day-sunny"></i></label>
  <input type="radio" id="rating-2" name="rating" value="2">
  <label for="rating-2"><i class="wi wi-day-sunny"></i></label>
  <input type="radio" id="rating-1" name="rating" value="1" checked>
  <label for="rating-1"><i class="wi wi-day-sunny"></i></label>
</div>
<!-- Ratings with Sun -->

File Input

File 
<div class="file-field input-field">
  <div class="btn">
    <span>File</span>
    <input type="file">
  </div>
  <div class="file-path-wrapper">
    <input class="file-path validate" type="text">
  </div>
</div>
{% endblock %}