TACC UI Pattern Library

Form

No notes defined.

<form action="" method="POST" enctype="multipart/form-data" class="">

  <h3 >
    (Optional) Title of Form
  </h3>
  <p >
    (Optional) Description of the form.
  </p>

    <ul  style="display:none;">
      <li>
        Sample <strong>form</strong>
        error. <a href="https://example.com" target="_blank">Link.</a>
      </li>
    </ul>

  <div class=" ">

    <label for="name">
      Name
      <span 
        aria-label="(required)">*</span>
    </label>

    <input
      type="text"
      name="name"
      required=""
      placeholder="Your name"
      id="name"
    />

        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>

  </div>

  <div >

    <label for="favorite-fruit">Favorite Fruit</label>

    <select name="favorite-fruit" id="favorite-fruit">
      <option value="" selected="">
        Please select an option
      </option>
      <option value="Apple">Apple</option>
      <option value="Banana">Banana</option>
      <option value="Cherry">Cherry</option>
      <option value="Durian">Durian</option>
      <option value="Other">Other</option>
      <option value="Whatever">Whatever</option>
    </select>

        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>

  </div>

  <div >

    <label for="wake-up-time">Wake Up Time</label>

    <input
      type="time"
      name="wake-up-time"
      id="wake-up-time"
    />

        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>

  </div>

  <div >

    <label>Radio stations</label>


        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>

  </div>

  <div class=" ">

    <input
      type="checkbox"
      name="checking-out"
      id="checking-out"
    />

    <label for="checking-out">Checking Out?</label>

        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>

  </div>

  <div >

    <label for="">
      Which fish do you want?
    </label>


        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>
  </div>

  <div >

    <label for="hangry-time">Hangry Time</label>

    <select name="hangry-time" id="hangry-time">
      <option value="" selected="">
        Please select an option
      </option>
      <option value="Morning">Morning</option>
      <option value="Noon">Noon</option>
      <option value="Afternoon">Afternoon</option>
      <option value="Evening">Evening</option>
      <option value="Night">Night</option>
      <option value="Midnight">Midnight</option>
    </select>

        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>

  </div>

  <div >

    <label for="life-story">Life Story</label>

    <textarea
      name="life-story"
      cols="40"
      rows="10"
      id="life-story"
    ></textarea>

        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>

  </div>

  <div >

    <label for="what-day-is-it">What day is it?</label>

    <input
      type="date"
      name="what-day-is-it"
      id="what-day-is-it"
    />

        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>

  </div>

  <div >

    <label for="your-favorite-picture">Your favorite picture</label>

    <input
      type="file"
      name="your-favorite-picture"
      id="your-favorite-picture"
    />

        <ul  style="display:none;">
          <li>
            Sample <strong>field</strong>
            error. <a href="https://example.com" target="_blank">Link.</a>
          </li>
        </ul>

  </div>

  <div class="  ">
    <label for="recaptcha_g9y93gP8">
      Are you a robot?
      <span 
        aria-label="(required)">*</span>
    </label>

    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script type="text/javascript">
      // Submit function to be called, after reCAPTCHA was successful. var
      onSubmit_9e32f28ccb9545109ff6ae891f9af324 = function(token){" "}
      {console.log("reCAPTCHA validated for 'data-widget-uuid=\"9e32f28ccb9545109ff6ae891f9af324\"'")};
    </script>
    <div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" required="" id="recaptcha_g9y93gP8" data-widget-uuid="9e32f28ccb9545109ff6ae891f9af324" data-callback="onSubmit_9e32f28ccb9545109ff6ae891f9af324" data-size="normal"></div>
  </div>

  <fieldset class="  ">
    <legend>sample fields in a fieldset</legend>

    <div class=" ">

      <label for="name">
        Name
        <span 
          aria-label="(required)">*</span>
      </label>

      <input
        type="text"
        name="name"
        required=""
        placeholder="Your name"
        id="name"
      />

          <ul  style="display:none;">
            <li>
              Sample <strong>field</strong>
              error. <a href="https://example.com" target="_blank">Link.</a>
            </li>
          </ul>

    </div>

    <div >

      <label for="favorite-fruit">Favorite Fruit</label>

      <select name="favorite-fruit" id="favorite-fruit">
        <option value="" selected="">
          Please select an option
        </option>
        <option value="Apple">Apple</option>
        <option value="Banana">Banana</option>
        <option value="Cherry">Cherry</option>
        <option value="Durian">Durian</option>
        <option value="Other">Other</option>
        <option value="Whatever">Whatever</option>
      </select>

          <ul  style="display:none;">
            <li>
              Sample <strong>field</strong>
              error. <a href="https://example.com" target="_blank">Link.</a>
            </li>
          </ul>

    </div>

  </fieldset>

  <fieldset>
    <legend>sample buttons outside footer</legend>
    <button  type="submit">
      Submit
    </button>
    <button  type="button">
      Button
    </button>
    <button  type="reset">
      Reset
    </button>
  </fieldset>

  <footer >
    <button
      
      type="submit"
    >
      Submit
    </button>
    <button
      id="toggle-field-errors"
      
      type="button"
    >
      Toggle Field Errors
    </button>
    <button
      id="toggle-required-fields"
      
      type="button"
    >
      Toggle Required Fields
    </button>
    <button
      
      type="reset"
    >
      Reset Field Values
    </button>
  </footer>

</form>

<script type="module">
  import toggleFieldErrors from '../raw/c-form/toggle-field-errors.js';

  document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('toggle-field-errors');
    const form = document.querySelector('form');
    const selector = ''

    toggle.addEventListener('click', () => {
      toggleFieldErrors( form, selector );
    });
  });
</script>
<script type="module">
  import toggleRequiredFields from '../raw/c-form/toggle-required-fields.js';

  document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('toggle-required-fields');
    const form = toggle.closest('form');

    toggle.addEventListener('click', () => {
      toggleRequiredFields( form, {
        shouldScrollToFirst: true,
        classNames: { wrapRequired: '' },
        selectors: { wrap: '' }
      });
    });
  });
</script>
<script type="module">
  document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('form');

    form.addEventListener('submit', event => {
      event.preventDefault();

      /* TODO: Show success message on form */
      alert('Form was not submitted, because this is an incomplete demo.');
    });
  });
</script>
 
{
  "shouldSkipPattern": true,
  "bootstrap4Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap4.css"
    }
  ],
  "bootstrap5Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap5.css"
    }
  ],
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ]
}