@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "forms-base", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Base Form Elements", "crumbs": "
  • Dashboard
  • Forms
  • Base Elements
    • " })
    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">
  <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">
  <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 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>

    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">
  <input class="file-path validate" type="text"/>
  <div class="btn">
    <span>File</span>
    <input type="file" />
  </div>
</div>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })