TACC UI Pattern Library

Form: Login

No notes defined.

<form action="" class=" ">
    <h3>
        <img src="https://www.tacc.utexas.edu/static/site_cms/img/org_logos/tacc-formal.svg" alt="TACC Logo" />
        <span>Log In</span>
    </h3>
    <p>to continue to the TACC User Portal</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="username">
            User Name
            <span class="">Required</span>
        </label>
        <input name="username" type="text" autocomplete="username" id="username" required>
    </div>
    <div class=" ">
        <label for="password">
            Password
            <span>Required</span>
        </label>
        <input name="password" type="password" autocomplete="current-password" id="password" required>
    </div>
    <footer>
        <a href="https://accounts.tacc.utexas.edu/register" rel="noreferrer" target="_blank">
            Create Account
        </a>
        <button type="submit">
            Log In
        </button>
    </footer>
    <nav>
        <p>Having trouble logging in?</p>
        <a href="https://example.com" rel="noreferrer" target="_blank">
            Reset Password
        </a>
        <a href="https://example.com" rel="noreferrer" target="_blank">
            Account Help
        </a>
    </nav>
</form>
<script type="module">
    import toggleFieldErrors from '../raw/c-form/toggle-field-errors.js';
    const form = document.querySelector('form');
    const selector = '';
    form.addEventListener('submit', event => {
        event.preventDefault();
        console.log({
            form,
            selector
        });
        toggleFieldErrors(form, selector);
    });
</script>
 
{
  "shouldSkipPattern": true,
  "bootstrap4Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap4.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"
    }
  ]
}