To style when mostly raw Form elements are sufficient.
<form action="" class="s-form s-form--login">
<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=" has-required">
<label for="username">
User Name
<span class="">Required</span>
</label>
<input name="username" type="text" autocomplete="username" id="username" required>
</div>
<div class=" has-required">
<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 = ':where(.s-form > ul), :where(.s-form > div > ul)';
form.addEventListener('submit', event => {
event.preventDefault();
console.log({
form,
selector
});
toggleFieldErrors(form, selector);
});
</script>
<hr />
<form action="" class="s-form s-form--login">
<h3>
<figure>
<img src="https://www.tacc.utexas.edu/static/site_cms/img/org_logos/ut-primary.svg" alt="UT Logo" />
<img src="https://www.tacc.utexas.edu/static/site_cms/img/org_logos/tacc-formal.svg" alt="TACC Logo" />
</figure>
<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=" has-required">
<label for="username">
User Name
<span class="">Required</span>
</label>
<input name="username" type="text" autocomplete="username" id="username" required>
</div>
<div class=" has-required">
<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 = ':where(.s-form > ul), :where(.s-form > div > ul)';
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"
}
],
"subdir": "trumps",
"helpTextTag": "small",
"inputListTag": "menu",
"selectors": {
"errorList": ":where(.s-form > ul), :where(.s-form > div > ul)",
"wrap": ":where(.s-form > div)"
},
"classNames": {
"root": "s-form",
"has_required": "has-required",
"has_checkbox": "has-type-check",
"has_spam_filter": "has-spam-check",
"modifier": "s-form--login"
},
"shouldLoadPortal": true,
"supportStyles": [
"../../assets/trumps/s-form--login.css"
]
}