XingFramework/xing-frontend-utils

View on GitHub
src/xing-frontend-utils/app/exampleForm/example-form.tpl.js

Summary

Maintainability
A
0 mins
Test Coverage
var template = `<h1>Example Form</h1>
<h2>Still To-Do:</h2>
<ul>
  <li>Large Textarea</li>
  <li>Date</li>
  <li>Time</li>
</ul>

<form id='example-form'>
    <div class='xng-form-row'>
      <label for="username">Username:</label>
      <input name="username" placeholder="e.g. CoolDev" required />
      <span class='messages'></span>
    </div>

    <div class='xng-form-row'>
      <label for="password">Password:</label>
      <input type="password" name="password" placeholder="Password" required />
      <span class='messages'></span>
    </div>

    <div class='xng-form-row with-errors'>
      <label for="invalid-data">Field With Errors:</label>
      <input type="invalid-data" name="invalid-data" value='Invalid Entry' placeholder="Password" required />
      <span class='messages error'>Invalid format!</span>
    </div>

    <div class='xng-form-row with-errors'>
      <label for="valid-data">Valid Entry:</label>
      <input name="valid-data" value='Valid Entry'/>
      <span class='messages success'>Name is available!</span>
    </div>

    <div class='xng-form-row'>
      <label for="favorite_color">Favorite Color:</label>
      <select name='favorite_color' id='favorite_color'>
        <option>Red</option>
        <option>Orange</option>
        <option>Yellow</option>
        <option>Green</option>
        <option>Blue</option>
        <option>Indigo</option>
        <option>Violet</option>
        <option>White</option>
        <option>Black</option>
      </select>
      <span class='messages'></span>
    </div>

    <div class='xng-form-row'>
      <label>Radio Station:</label>
      <div class='option-group'>
        <label><input type='radio' name='radio_station' />KPCC</label>
        <label><input type='radio' name='radio_station' />KROQ</label>
        <label><input type='radio' name='radio_station' />KLOS</label>
        <label><input type='radio' name='radio_station' />KQED</label>
      </div>
    </div>

    <div class='xng-form-row'>
      <label>Artists You Like:</label>
      <div class='option-group'>
        <label><input type='checkbox' name='artists' />Kandinsky</label>
        <label><input type='checkbox' name='artists' />Renoir</label>
        <label><input type='checkbox' name='artists' />De Kooning</label>
        <label><input type='checkbox' name='artists' />Pollock</label>
      </div>
    </div>

    <div class='xng-form-row'>
      <label>Favorite Animal:</label>
      <div class='option-group inline'>
        <label><input type='radio' name='animal' />Cat</label>
        <label><input type='radio' name='animal' />Dog</label>
        <label><input type='radio' name='animal' />Other</label>
      </div>
    </div>

    <div class='xng-form-row'>
      <label for='message'>Message:</label>
      <textarea name='message' id='message' />
    </div>

    <div class='xng-form-row'>
      <button type="submit" ng-click="sessionSubmit()" class="call-to-action">Submit</button>
    </div>

    <div class='xng-form-row'>
      <div ng-if="passwordShow" class='input-like'>
        <a ui-sref='root.inner.passwordsRequest'>Forgot your password?</a>
      </div>
    </div>
</form>
`;
 export default template;