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,
  "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"
    }
  ]
}