2017-08-08 17:41:40 -04:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< meta name = "description" content = "Default form control styles." >
< link rel = "icon" href = "../source/img/favicon.png" >
2017-08-09 11:22:09 -04:00
< link rel = "stylesheet" href = "../dist/shoelace.css" >
2017-08-08 17:41:40 -04:00
< link rel = "stylesheet" href = "../source/css/_docs.css" >
< link rel = "stylesheet" href = "https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css" >
< title > Forms< / title >
< / head >
< body >
< header id = "head" class = "text-center" >
< h1 >
< a href = "../index.html" >
< img src = "../source/img/wordmark.svg" alt = "Shoelace logo" >
< / a >
< / h1 >
2017-08-13 15:41:38 -04:00
< p class = "text-secondary text-small" >
2017-08-08 17:41:40 -04:00
A back to the basics CSS starter kit. For when you don’
< / p >
< / header >
< main id = "wrap" >
< nav id = "nav" >
< a href = "installing.html" > Installing< / a >
< a href = "customizing.html" > Customizing< / a >
< a href = "content.html" > Content< / a >
< a href = "alerts.html" > Alerts< / a >
< a href = "badges.html" > Badges< / a >
< a href = "buttons.html" > Buttons< / a >
< a href = "dropdowns.html" > Dropdowns< / a >
< a href = "forms.html" > Forms< / a >
< a href = "loaders.html" > Loaders< / a >
2017-08-11 16:12:13 -04:00
< a href = "progress-bars.html" > Progress Bars< / a >
2017-08-08 17:41:40 -04:00
< a href = "switches.html" > Switches< / a >
< a href = "tabs.html" > Tabs< / a >
< a href = "tables.html" > Tables< / a >
< a href = "utilities.html" > Utilities< / a >
< a href = "grid-system.html" > Grid System< / a >
< a href = "icons.html" > Icons< / a >
< a href = "browser-support.html" > Browser Support< / a >
< a href = "attribution.html" > Attribution< / a >
< / nav >
< div id = "content" >
< h2 id = "forms" > Forms< / h2 >
< p > Shoelace gives you beautiful forms without hassle. Most form controls don’ < / p >
< h3 id = "form-controls" > Form Controls< / h3 >
< p > Form controls are styled at 100% of the width of their parent element.< / p >
< table class = "table table-bordered" >
< thead >
< tr >
< th > Input Type< / th >
< th > Example< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > < input type=" checkbox" > < / code > < / td >
< td >
< label > < input type = "checkbox" checked > Checkbox 1< / label > < br >
< label > < input type = "checkbox" > Checkbox 2< / label >
< / td >
< / tr >
< tr >
< td > < code > < input type=" color" > < / code > < / td >
< td > < input type = "color" value = "#0099dd" > < / td >
< / tr >
< tr >
< td > < code > < input type=" date" > < / code > < / td >
< td > < input type = "date" > < / td >
< / tr >
< tr >
< td > < code > < input type=" email" > < / code > < / td >
< td > < input type = "email" > < / td >
< / tr >
< tr >
< td >
< code > < input type=" file" > < / code >
< br >
2017-08-13 15:41:38 -04:00
< span class = "text-small text-secondary" >
2017-08-12 17:53:57 +02:00
File inputs aren’ < a href = "buttons.html#file-buttons" > file button< / a > instead.
2017-08-08 17:41:40 -04:00
< / span >
< / td >
< td >
< label class = "button button-block" > Select File < input type = "file" > < / label >
< / td >
< / tr >
< tr >
< td > < code > < input type=" number" > < / code > < / td >
< td > < input type = "number" > < / td >
< / tr >
< tr >
< td > < code > < input type=" password" > < / code > < / td >
< td > < input type = "password" > < / td >
< / tr >
< tr >
< td > < code > < input type=" radio" > < / code > < / td >
< td >
< label > < input type = "Radio" name = "radio" checked > Radio 1< / label > < br >
< label > < input type = "Radio" name = "radio" > Radio 2< / label >
< / td >
< / tr >
< tr >
< td > < code > < input type=" range" > < / code > < / td >
< td > < input type = "range" > < / td >
< / tr >
< tr >
< td > < code > < input type=" search" > < / code > < / td >
< td > < input type = "search" > < / td >
< / tr >
< tr >
< td > < code > < input type=" text" > < / code > < / td >
< td > < input type = "text" > < / td >
< / tr >
< tr >
< td > < code > < input type=" time" > < / code > < / td >
< td > < input type = "time" > < / td >
< / tr >
< tr >
< td > < code > < select> < / code > < / td >
< td >
< select >
< option > Item 1< / option >
< option > Item 2< / option >
< option > Item 3< / option >
< / select >
< / td >
< / tr >
< tr >
< td > < code > < textarea> < / code > < / td >
< td > < textarea rows = "4" > < / textarea > < / td >
< / tr >
< / tbody >
< / table >
< p > You can change the size of most form controls with the < code > input-small< / code > and < code > input-big< / code > modifiers.< / p >
< pre > < code class = "lang-html" > < input type=" text" class=" input-small" placeholder=" Small" >
< input type=" text" placeholder=" Default" >
< input type=" text" class=" input-big" placeholder=" Big" >
< select class=" input-small" > < option> Item< /option> < /select>
< select> < option> Item< /option> < /select>
< select class=" input-big" > < option> Item< /option> < /select>
< / code > < / pre >
< div class = "two-column" >
< p > < input type = "text" class = "input-small" placeholder = "Small" > < / p >
< p > < input type = "text" placeholder = "Default" > < / p >
< p > < input type = "text" class = "input-big" placeholder = "Big" > < / p >
< p > < select class = "input-small" > < option > Item< / option > < / select > < / p >
< p > < select > < option > Item< / option > < / select > < / p >
< p > < select class = "input-big" > < option > Item< / option > < / select > < / p >
< / div >
< p > Disabled form controls look like this:< / p >
< div class = "input-single" >
< input type = "text" placeholder = "Input" disabled >
< / div >
< div class = "input-single" >
< label > < input type = "checkbox" disabled > Checkbox< / label >
< label > < input type = "radio" disabled > Radio< / label >
< / div >
< p > Read-only form controls look like this:< / p >
< div class = "input-single" >
< input type = "text" readonly value = "This is read-only" >
< / div >
< h3 id = "form-control-spacing" > Form Control Spacing< / h3 >
< p > For proper spacing of individual form controls, wrap them in < code > input-single< / code > containers.< / p >
< pre > < code class = "lang-html" > < div class=" input-single" >
< label> Name< /label>
< input type=" text" >
< /div>
< div class=" input-single" >
< label> Password< /label>
< input type=" password" >
< /div>
< div class=" input-single" >
< label> < input type=" checkbox" > Remember me< /label>
< /div>
< / code > < / pre >
< div class = "input-single" >
< label > Username< / label >
< input type = "text" >
< / div >
< div class = "input-single" >
< label > Password< / label >
< input type = "password" >
< / div >
< div class = "input-single" >
< label > < input type = "checkbox" > Remember me< / label >
< / div >
< h3 id = "input-groups" > Input Groups< / h3 >
< p > Form controls and buttons can be grouped by wrapping them in < code > input-group< / code > containers.< / p >
< pre > < code class = "lang-html" > < div class=" input-group" >
< input type=" text" >
< button type=" button" class=" button" > Submit< /button>
< /div>
< div class=" input-group" >
< button type=" button" class=" button" > Submit< /button>
< input type=" text" >
< /div>
< div class=" input-group" >
< input type=" text" placeholder=" First" >
< input type=" text" placeholder=" Middle" >
< input type=" text" placeholder=" Last" >
< button type=" button" class=" button" > Submit< /button>
< /div>
< div class=" input-group" >
< button type=" button" class=" button" > Option 1< /button>
< button type=" button" class=" button" > Option 2< /button>
< button type=" button" class=" button" > Option 3< /button>
< /div>
< / code > < / pre >
2017-08-13 15:41:38 -04:00
< div class = "input-group" >
< input type = "text" >
< button type = "button" > Submit< / button >
2017-08-08 17:41:40 -04:00
< / div >
2017-08-13 15:41:38 -04:00
< div class = "input-group" >
< button type = "button" > Submit< / button >
< input type = "text" >
2017-08-08 17:41:40 -04:00
< / div >
2017-08-13 15:41:38 -04:00
< div class = "input-group" >
< input type = "text" placeholder = "First" >
< input type = "text" placeholder = "Middle" >
< input type = "text" placeholder = "Last" >
< button type = "button" > Submit< / button >
2017-08-08 17:41:40 -04:00
< / div >
2017-08-13 15:41:38 -04:00
< div class = "input-group" >
< button type = "button" > Option 1< / button >
< button type = "button" > Option 2< / button >
< button type = "button" > Option 3< / button >
2017-08-08 17:41:40 -04:00
< / div >
< h3 id = "input-addons" > Input Addons< / h3 >
< p > To create an input addon, use < code > < span class=" input-addon" > < / code > . Addons can appear anywhere inside an input group. Use the < code > input-addon-small< / code > and < code > input-addon-big< / code > modifiers to change the size to match adjacent form controls.< / p >
< pre > < code class = "lang-html" > < div class=" input-group" >
< span class=" input-addon input-addon-small" > $< /span>
< input type=" text" class=" input-small" >
< span class=" input-addon input-addon-small" > .00< /span>
< /div>
< div class=" input-group" >
< span class=" input-addon" > $< /span>
< input type=" text" >
< span class=" input-addon" > .00< /span>
< /div>
< div class=" input-group" >
< span class=" input-addon input-addon-big" > $< /span>
< input type=" text" class=" input-big" >
< span class=" input-addon input-addon-big" > .00< /span>
< /div>
< / code > < / pre >
< div class = "input-single" >
< div class = "input-group" >
< span class = "input-addon input-addon-small" > $< / span >
< input type = "text" class = "input-small" >
< span class = "input-addon input-addon-small" > .00< / span >
< / div >
< / div >
< div class = "input-single" >
< div class = "input-group" >
< span class = "input-addon" > $< / span >
< input type = "text" >
< span class = "input-addon" > .00< / span >
< / div >
< / div >
< div class = "input-single" >
< div class = "input-group" >
< span class = "input-addon input-addon-big" > $< / span >
< input type = "text" class = "input-big" >
< span class = "input-addon input-addon-big" > .00< / span >
< / div >
< / div >
< h3 id = "form-groups" > Form Groups< / h3 >
< p > Related form controls can be grouped in a < code > < fieldset> < / code > . An optional < code > < legend> < / code > can be used to display a name for the group.< / p >
< pre > < code class = "lang-html" > < fieldset>
< legend> User< /legend>
...
< /fieldset>
< / code > < / pre >
< fieldset >
< legend > Login< / legend >
< div class = "input-single" >
< label > Username< / label >
< input type = "text" >
< / div >
< div class = "input-single" >
< label > Password< / label >
< input type = "password" >
< / div >
< div class = "input-single" >
< label >
< input type = "checkbox" > Remember me
< / label >
< / div >
< div class = "input-single" >
< button type = "button" > Login< / button >
< / div >
< / fieldset >
< h3 id = "validation" > Validation< / h3 >
< p > Form controls can be made valid or invalid using the < code > input-valid< / code > and < code > input-invalid< / code > modifiers. It’ < code > input-single< / code > so labels will be styled as well, but modifiers can be applied directly to form controls as needed.< / p >
< pre > < code class = "lang-html" > < div class=" input-single input-valid" >
< label> Valid< /label>
< input type=" text" >
< /div>
< div class=" input-single input-invalid" >
< label> Invalid< /label>
< input type=" text" >
< /div>
< / code > < / pre >
< div class = "two-column" >
< div class = "input-single input-valid" >
< label > Valid< / label >
< input type = "text" >
< / div >
< div class = "input-single input-invalid" >
< label > Invalid< / label >
< input type = "text" >
< / div >
< / div >
< / div >
< / main >
< footer id = "foot" >
< a href = "../index.html" >
< img src = "../source/img/wordmark.svg" alt = "Shoelace logo" >
< / a >
2017-08-13 15:41:38 -04:00
< p class = "text-small text-secondary" >
2017-08-15 10:36:12 -04:00
Shoelace.css 1.0.0-beta16 ·
2017-08-08 17:41:40 -04:00
© A Beautiful Site, LLC
< / p >
< p class = "margin-y-small text-center" >
< a class = "github-button" href = "https://github.com/claviska/shoelace-css/fork" data-size = "large" aria-label = "Fork claviska/shoelace-css on GitHub" > Fork< / a >
< a class = "github-button" href = "https://github.com/claviska/shoelace-css/releases" data-icon = "octicon-cloud-download" data-size = "large" aria-label = "Download claviska/shoelace-css on GitHub" > Download< / a >
< a class = "github-button" href = "https://github.com/claviska/shoelace-css/issues" data-icon = "octicon-issue-opened" data-size = "large" aria-label = "Issue claviska/shoelace-css on GitHub" > Report a Bug< / a >
< a class = "github-button" href = "https://github.com/claviska/shoelace-css" data-icon = "octicon-star" data-size = "large" data-show-count = "true" aria-label = "Star claviska/shoelace-css on GitHub" > Star< / a >
< / p >
< p >
2017-08-13 15:57:30 -04:00
< a href = "https://twitter.com/shoelacecss" class = "button button-info" style = "margin-bottom: 1.2rem;" > Follow< / a >
< a href = "https://paypal.me/claviska" class = "button button-success" style = "margin-bottom: 1.2rem;" > Donate< / a >
2017-08-08 17:41:40 -04:00
< / p >
< / footer >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js" > < / script >
2017-08-09 11:22:09 -04:00
< script src = "../dist/shoelace.js" > < / script >
2017-08-08 17:41:40 -04:00
< script >
$(function() {
// Highlight current nav item
$('#nav a').each(function() {
if(this.pathname === location.pathname) {
$(this).addClass('current');
}
});
});
< / script >
< script async defer src = "https://buttons.github.io/buttons.js" > < / script >
< / body >
< / html >
