UI Schema

Forms

Validation

<!-- Validate the form and do not submit empty fields -->
<form action="/search" method="post" data-schema-validate>

<!-- Only submit the form when some fields have been changed -->
<form action="/articles/1212.5605/edit" method="post" data-schema-validate="changed">

<!-- Only allow to submit the form once -->
<form action="/auth/login" method="post" data-schema-validate="once">

Rating

<form>
  <input type="hidden" name="score" data-schema-rating>
  <a class="ui-text-padding" data-schema-icons="star-o,star" role="button">
    <i data-schema-icon="star-o"></i>
    <i data-schema-icon="star-o"></i>
    <i data-schema-icon="star-o"></i>
    <i data-schema-icon="star-o"></i>
    <i data-schema-icon="star-o"></i>
 </a>
</form>

<form>
  <input type="hidden" name="score" value="3.6" data-schema-rating>
  <a class="ui-text-padding" data-schema-icons="star-o,star-half-empty,star" role="button">
    <i data-schema-icon="star"></i>
    <i data-schema-icon="star"></i>
    <i data-schema-icon="star"></i>
    <i data-schema-icon="star-half-empty"></i>
    <i data-schema-icon="star-o"></i>
  </a>
</form>

Tagging

<form>
  <input type="hidden" name="browsers" value="chrome,firefox" data-schema-tagging data-schema-required>
  <input type="text" list="browsers">
  <output class="ui-text-list">
    <span class="ui-text-label ui-label-primary">
      <i class="ui-zoom-small ui-cursor-pointer" data-schema-icon="cross-thin"></i>
    </span>
  </output>
  <datalist id="browsers">
    <option value="chrome">Google Chrome</option>
    <option value="edge">Microsoft Edge</option>
    <option value="firefox">Mozilla Firefox</option>
    <option value="ie">Internet Explorer</option>
    <option value="opera">Opera</option>
    <option value="safari">Safari</option>
  </datalist>
</form>

<form>
  <input type="hidden" name="browsers" data-schema-tagging>
  <select>
    <option value="chrome">Google Chrome</option>
    <option value="edge">Microsoft Edge</option>
    <option value="firefox">Mozilla Firefox</option>
    <option value="ie">Internet Explorer</option>
    <option value="opera">Opera</option>
    <option value="safari">Safari</option>
    <option value="any" data-schema-empty>Any Browser</option>
  </select>
  <output class="ui-text-list">
    <span class="ui-text-badge ui-label-info" draggable="true">
      <i class="ui-zoom-small ui-cursor-pointer" data-schema-icon="cross-thin"></i>
    </span>
  </output>
</form>