Skip to content

Commit

Permalink
fix(forms): Inputs have labels
Browse files Browse the repository at this point in the history
  • Loading branch information
Dominick Reinhold and Kenny Wang committed Aug 15, 2015
1 parent 8c0ee53 commit 2ad8ed7
Showing 1 changed file with 47 additions and 24 deletions.
71 changes: 47 additions & 24 deletions src/pivotal-ui/components/forms/forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,11 +194,12 @@ An input with the label right aligned (N.B., control-label class provides the ri
</form>
```
An unstyled inputs that doesn't have any of the default input styles
An unstyled input that doesn't have any of the default input styles
```html_example
<form role="form">
<input class="unstyled" placeholder="This is a text input"></input>
<label for="unstyledInput">Text Input</label>
<input class="unstyled" id="unstyledInput" placeholder="This is a text input"></input>
</form>
```
*/
Expand Down Expand Up @@ -226,47 +227,53 @@ all HTML5 types: `text`, `password`, `datetime`, `datetime-local`,
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" placeholder="Text input" type="text"></input>
<label for="html5TextInput">Text Input</label>
<input class="form-control" id="html5TextInput" placeholder="Text input" type="text"></input>
</form>
```
Password field
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" placeholder="Password" type="password"></input>
<label for="html5PasswordInput">Password Input</label>
<input class="form-control" id="html5PasswordInput" placeholder="Password" type="password"></input>
</form>
```
Date
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" placeholder="Date" type="date"></input>
<label for="html5DateInput">Date Input</label>
<input class="form-control" id="html5DateInput" placeholder="Date" type="date"></input>
</form>
```
Number
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" placeholder="Number" type="number"></input>
<label for="html5NumberInput">Number Input</label>
<input class="form-control" id="html5NumberInput" placeholder="Number" type="number"></input>
</form>
```
With a min/max and default starting value
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" placeholder="Number" type="number" min=0 max=2 value=1></input>
<label for="html5MinMaxInput">Min/Max Input</label>
<input class="form-control" id="html5MinMaxInput" placeholder="Number" type="number" min=0 max=2 value=1></input>
</form>
```
With a different increment value
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" placeholder="Number" type="number" step=5></input>
<label for="html5StepInput">Step Input</label>
<input class="form-control" id="html5StepInput" placeholder="Number" type="number" step=5></input>
</form>
```
Expand All @@ -276,7 +283,8 @@ Use this with fields that require email addresses to pop up the correct keyboard
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" placeholder="Email" type="email"></input>
<label for="html5EmailInput">Email Input</label>
<input class="form-control" id="html5EmailInput" placeholder="Email" type="email"></input>
</form>
```
Expand All @@ -286,7 +294,8 @@ Use this with fields that require urls to pop up the correct keyboard on mobile
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" placeholder="URL" type="url"></input>
<label for="html5URLInput">URL Input</label>
<input class="form-control" id="html5URLInput" placeholder="URL" type="url"></input>
</form>
```
Expand All @@ -296,7 +305,8 @@ Use this with fields that require telephone numbers to pop up the dialpad on mob
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" placeholder="Telephone" type="tel"></input>
<label for="html5PhoneInput">Phone Input</label>
<input class="form-control" id="html5PhoneInput" placeholder="Telephone" type="tel"></input>
</form>
```
*/
Expand All @@ -312,11 +322,14 @@ Set heights using the form control classes `.input-lg` and `.input-sm`.
Create larger or smaller form controls that match button sizes.
```html_example_table
<input class="form-control input-lg" placeholder=".input-lg" type="text">
<label for="LargeInput">Large Input</label>
<input class="form-control input-lg" id="LargeInput" placeholder=".input-lg" type="text">
<input class="form-control" placeholder="Default Input" type="text">
<label for="DefaultInput">Default Input</label>
<input class="form-control" id="DefaultInput" placeholder="Default Input" type="text">
<input class="form-control input-sm" placeholder=".input-sm" type="text">
<label for="SmallInput">Small Input</label>
<input class="form-control input-sm" id="SmallInput" placeholder=".input-sm" type="text">
```
Set widths using grid column classes like `.col-lg-*`.
Expand All @@ -326,13 +339,16 @@ Wrap selects in grid columns, or any custom parent element, to easily enforce de
<form class="styleguide-form" role="form">
<div class="row">
<div class="col-md-4">
<input class="form-control" placeholder=".col-xs-2" type="text"></input>
<label for="Small2WidthInput">Small 2 Width Input</label>
<input class="form-control" id="Small2WidthInput" placeholder=".col-xs-2" type="text"></input>
</div>
<div class="col-md-6">
<input class="form-control" placeholder=".col-xs-3" type="text"></input>
<label for="Small3WidthInput">Small 3 Width Input</label>
<input class="form-control" id="Small3WidthInput" placeholder=".col-xs-3" type="text"></input>
</div>
<div class="col-md-8">
<input class="form-control" placeholder=".col-xs-4" type="text"></input>
<label for="Small4WidthInput">Small 4 Width Input</label>
<input class="form-control" id="Small4WidthInput" placeholder=".col-xs-4" type="text"></input>
</div>
</div>
</form>
Expand Down Expand Up @@ -474,7 +490,8 @@ Use this input when creating a search component.
```html_example
<div class="form-group form-group-search">
<input class="form-control" placeholder="This is a searchbox">
<label for="searchInput">Search</label>
<input class="form-control" id="searchInput" placeholder="This is a searchbox">
<i class="fa fa-search"></i>
</div>
```
Expand Down Expand Up @@ -505,7 +522,8 @@ parent: form_inputs
Add the `readonly` boolean attribute on an input to prevent user input and style the input as disabled.
```html_example
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
<label for="ReadOnlyInput">ReadOnly</label>
<input class="form-control" type="text" id="ReadOnlyInput" placeholder="Readonly input here..." readonly>
```
*/
Expand Down Expand Up @@ -603,13 +621,16 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
<form class="styleguide-form" role="form">
<div class="row">
<div class="col-md-4">
<input class="form-control" placeholder=".col-xs-2" type="text"></input>
<label for="Small2WidthInput2">Small 2 Width Input</label>
<input class="form-control" id="Small2WidthInput2" placeholder=".col-xs-2" type="text"></input>
</div>
<div class="col-md-6">
<input class="form-control" placeholder=".col-xs-3" type="text"></input>
<label for="Small3WidthInput2">Small 3 Width Input</label>
<input class="form-control" id="Small3WidthInput2" placeholder=".col-xs-3" type="text"></input>
</div>
<div class="col-md-8">
<input class="form-control" placeholder=".col-xs-4" type="text"></input>
<label for="Small4WidthInput2">Small 4 Width Input</label>
<input class="form-control" id="Small4WidthInput2" placeholder=".col-xs-4" type="text"></input>
</div>
</div>
</form>
Expand Down Expand Up @@ -886,7 +907,8 @@ Block level help text for form controls.
```html_example
<form class="styleguide-form" role="form">
<input class="form-control" type="text"></input>
<label for="demohelp"/>
<input class="form-control" id="demohelp" type="text"></input>
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
```
Expand Down Expand Up @@ -1116,7 +1138,8 @@ categories:
This form is used to show information that a user may wish to copy and paste somewhere.
```html_example
<input class="auto-select form-control" data-behavior="AutoSelect" readonly="readonly" value="This should auto highlight"></input>
<label for="readonlyautoselect"></label>
<input class="auto-select form-control" id="readonlyautoselect" data-behavior="AutoSelect" readonly="readonly" value="This should auto highlight"></input>
```
*/
Expand Down

0 comments on commit 2ad8ed7

Please sign in to comment.