Form Template in Tab Set
This template may be used when a form appears inside of a tabbed set.
Usage
See the Introduction to Forms for guidance on layout principles and best practices for designing forms.
Required Elements
- Form pages may contain any combination of form input controls, such as text input fields, selects, radio buttons, checkboxes and sliders.
- Primary call-to-action button. When the button takes action on the form elements within a single tab only, the button should appear inside that tab. When the user is able to complete form fields across a series of tabs, and the button performs an action across all tabs, the button should appear outside the tabs.
- Tabs. If tabs are not needed, use the Default Form Template.
Optional Elements
Validation and Error Messages
When possible, display validation messages in real-time as the user performs an action (client-side) rather than waiting until after the user submits information (server-side).
There are four types of messages:
- Error
- Warning
- Success
- Informational
Each may appear at the page level, container level and/or field level. See Messages for more information.
Developer Notes
Example
<a class="spark-skip-nav" href="#mainContent">Skip Navigation</a>
<div class="spark-content__wrapper--sticky-footer">
<header class="spark-header">
<nav class="spark-header__nav" role="navigation">
<button class="spark-menu__toggle spark-header__toggle" aria-label="View Navigation" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm">Sabre</i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" aria-label="Hide Navigation" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">First Level A</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a tabindex="0" class="spark-menu__list-link">First Level B</a>
<a tabindex="0" class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level a</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">Second Level b</a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item I</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item II</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item III</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item IV</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level c</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level d</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Sample Single Panel Form Page with Tab Panel</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">First Level D</a>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level aa</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level bb</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level cc</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Menu Option 2</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i aria-hidden="true" class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
</li>
<li class="spark-header__list-cta">
<a href="#" class="spark-header__list-cta-link">View All Analyses</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 8</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 9</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 10</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 11</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 12</a>
</li>
</ul>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Search">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Account Settings">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a tabindex="0" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a tabindex="0" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-mar-t-1">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-mar-t-1">
<a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>
<main class="spark-main--sticky-footer" id="mainContent">
<div class="container">
<div class="row spark-mar-b-2 spark-mar-t-2">
<div class="col-xs-12">
<h1>Page Title</h1>
</div>
<div class="col-xs-12">
<div class="spark-tabs">
<nav class="spark-tabs__nav" role="menubar">
<div class="spark-tabs__scroll">
<ul class="spark-tabs__list" role="tablist">
<li class="spark-tabs__tab active" role="tab"><a href="#">Tab title 1</a></li>
<li class="spark-tabs__tab" role="tab"><a href="#">Tab title 2</a></li>
<li class="spark-tabs__tab" role="tab"><a href="#">Tab title 3</a></li>
</ul>
</div>
<div class="spark-tabs__btns">
<button aria-label="Scroll Tabs to the beginning" class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
<button aria-label="Scroll Tabs to the end" class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
</div>
</nav>
<div class="spark-tabs__panels white-bg">
<div role="tabpanel" class="spark-tabs__panel">
<div class="row">
<div class="col-xs-12">
<form>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<fieldset class="row spark-mar-b-1">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-3 spark-mar-b-1--xs">
<label class="spark-input">
<input class="spark-input__field" name="example1" placeholder="Helper text..." role="textbox">
<span class="spark-label">Input Label 1</span>
</label>
</div>
<div class="col-xs-12 col-sm-4 col-lg-3 spark-mar-b-1--xs spark-pad-l-0--gte-sm">
<label class="spark-input">
<input class="spark-input__field" name="example1" placeholder="Helper text..." role="textbox">
<span class="spark-label">Input Label 2</span>
</label>
</div>
<div class="col-xs-12 col-sm-3 col-lg-2 spark-pad-l-0--gte-sm">
<label class="spark-select">
<select class="spark-select__input"> <!-- This has to be before .spark-label! -->
<option></option>
<option>8:00am</option>
<option>9:00am</option>
<option>10:00am</option>
</select>
<span class="spark-label">Time</span>
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="row spark-pad-b-1">
<label class="col-xs-12 spark-radio">
<input class="spark-radio__input" type="radio" name="test-radio"> <!-- This has to be before .spark-radio__box! -->
<span class="spark-radio__box"></span>
<span class="spark-label">Radio button with a really really really long label that demonstrates how text will wrap...</span>
</label>
<label class="col-xs-12 spark-radio">
<input class="spark-radio__input" type="radio" name="test-radio"> <!-- This has to be before .spark-radio__box! -->
<span class="spark-radio__box"></span>
<span class="spark-label">Radio two...</span>
</label>
<label class="col-xs-12 spark-radio">
<input class="spark-radio__input" type="radio" name="test-radio" disabled> <!-- This has to be before .spark-radio__box! -->
<span class="spark-radio__box"></span>
<span class="spark-label">Radio three...</span>
</label>
</fieldset>
<nav class="spark-btn-group spark-mar-t-2">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-btn-group-secondary spark-btn--block-xs">Secondary</button>
<button class="spark-btn spark-btn--md spark-btn-group-primary spark-btn--block-xs">Primary</button>
</nav>
</form>
</div>
</div>
</div>
<div role="tabpanel" class="spark-tabs__panel">
<div class="row">
<div class="col-xs-12">
<form>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="row spark-toggle-group spark-mar-b-2">
<label class="col-xs-6 col-sm-3 col-md-2 spark-toggle">
<input class="spark-toggle__input" type="radio" name="test-toggle-c" checked="checked">
<span class="spark-label">Toggle A</span>
</label>
<label class="col-xs-6 col-sm-3 col-md-2 spark-toggle">
<input class="spark-toggle__input" type="radio" name="test-toggle-c">
<span class="spark-label">Toggle B</span>
</label>
</div>
<fieldset class="row spark-pad-b-1">
<label class="col-xs-12 spark-radio">
<input class="spark-radio__input" type="radio" name="test-radio"> <!-- This has to be before .spark-radio__box! -->
<span class="spark-radio__box"></span>
<span class="spark-label">Radio button with a really really really long label that demonstrates how text will wrap...</span>
</label>
<label class="col-xs-12 spark-radio">
<input class="spark-radio__input" type="radio" name="test-radio"> <!-- This has to be before .spark-radio__box! -->
<span class="spark-radio__box"></span>
<span class="spark-label">Radio two...</span>
</label>
<label class="col-xs-12 spark-radio">
<input class="spark-radio__input" type="radio" name="test-radio" disabled> <!-- This has to be before .spark-radio__box! -->
<span class="spark-radio__box"></span>
<span class="spark-label">Radio three...</span>
</label>
</fieldset>
<nav class="spark-btn-group spark-mar-t-2">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-btn-group-secondary spark-btn--block-xs">Secondary</button>
<button class="spark-btn spark-btn--md spark-btn-group-primary spark-btn--block-xs |">Primary</button>
</nav>
</form>
</div>
</div>
</div>
<div role="tabpanel" class="spark-tabs__panel">
<div class="row">
<div class="col-xs-12">
<form>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="row">
<fieldset class="spark-mar-b-1 col-xs-12 col-lg-9">
<label class="spark-input">
<input class="spark-input__field" name="example1" placeholder="Helper text..." role="textbox">
<span class="spark-label">Group 1 Input Label 1</span>
</label>
<div class="row">
<div class="col-xs-12 col-sm-5 spark-mar-b-1--xs">
<label class="spark-input spark-date example-simple-calendar">
<input class="spark-input__field" type="date" role="textbox">
<span class="spark-label">Date</span>
<a tabindex="0" class="spark-input__addon spark-date__calendar-toggle" aria-label="Show Calendar. Only available dates are displayed." title="Show Calendar"><i class="spark-icon-calendar spark-icon--md"></i></a>
</label>
</div>
<div class="col-xs-12 col-sm-4 spark-pad-l-0--gte-sm">
<label class="spark-select">
<select class="spark-select__input"> <!-- This has to be before .spark-label! -->
<option></option>
<option>8:00am</option>
<option>9:00am</option>
<option>10:00am</option>
</select>
<span class="spark-label">Time</span>
</label>
</div>
<div class="col-xs-12 col-sm-3 spark-pad-l-0--gte-sm">
<label class="spark-select">
<select class="spark-select__input"> <!-- This has to be before .spark-label! -->
<option></option>
<option>Don't pick this one.</option>
<option>A decent choice.</option>
<option>The best option.</option>
</select>
<span class="spark-label">Related Label</span>
</label>
</div>
</div>
</fieldset>
</div>
<nav class="spark-btn-group spark-mar-t-2">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-btn-group-secondary spark-btn--block-xs">Secondary</button>
<button class="spark-btn spark-btn--md spark-btn-group-primary spark-btn--block-xs |">Primary</button>
</nav>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="spark-footer">
<div class="container">
<a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
<div class="spark-footer__content">
<div class="spark-footer__copyright">
© 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
</div>
<ul class="spark-footer__list">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Legal Policy
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Contact Us
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Support
</a>
</li>
</ul>
</div>
<ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
</div>
<style type="text/css">
.white-bg {
background-color: #ffffff;
}
</style>
<style type="text/css">
</style>For details on implementing tabs, refer to the Tabs developer documentation. For details on implementing forms, refer to the Default Form Template documentation as a guide.