Foundation input box? Size
Using a grid column to set the size of the input box, such as .large-6 , .medium-6 , and so on.
More knowledge grid system, you can click on the grid system tutorial.
Examples
<Form>
<Div class = "row">
<Div class = "large-10 medium-7 columns">
<Label> large-10 medium- 7 (100% on small)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
</ Div>
<Div class = "row">
<Div class = "small-5 columns">
<Label> small-5
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
</ Div>
<Div class = "row">
<Div class = "medium-3 columns">
<Label> medium-3 (100 % on small)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
</ Div>
</ Form>
<Div class = "row">
<Div class = "large-10 medium-7 columns">
<Label> large-10 medium- 7 (100% on small)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
</ Div>
<Div class = "row">
<Div class = "small-5 columns">
<Label> small-5
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
</ Div>
<Div class = "row">
<Div class = "medium-3 columns">
<Label> medium-3 (100 % on small)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
</ Div>
</ Form>
try it"
Equal to the size of the column
The following illustrates examples of columns of equal size:
Examples
<Form>
<Div class = "row">
<Div class = "medium-4 columns">
<Label> medium-4 (100 % on small, stacked)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
<Div class = "medium-4 columns">
<Label> medium-4 (100 % on small, stacked)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
<Div class = "medium-4 columns">
<Label> medium-4 (100 % on small, stacked)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
</ Div>
</ Form>
<Div class = "row">
<Div class = "medium-4 columns">
<Label> medium-4 (100 % on small, stacked)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
<Div class = "medium-4 columns">
<Label> medium-4 (100 % on small, stacked)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
<Div class = "medium-4 columns">
<Label> medium-4 (100 % on small, stacked)
<Input type = "text" placeholder = "Name">
</ Label>
</ Div>
</ Div>
</ Form>
try it"
Inline tags
If you want your label content displayed on the left (not the top), you can tag element label on the box to the left input of different columns and use .inline class to set the vertical center:
Examples
<Form>
<Div class = "row">
<Div class = "small-8 ">
<Div class = "row">
<Div class = "small-3 columns">
<Label for = "name" class = "inline right"> Name </ label>
</ Div>
<Div class = "small-9 columns">
<Input type = "text" id = "name" placeholder = "First Name ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
<Div class = "row">
<Div class = "small-8 ">
<Div class = "row">
<Div class = "small-3 columns">
<Label for = "name" class = "inline right"> Name </ label>
</ Div>
<Div class = "small-9 columns">
<Input type = "text" id = "name" placeholder = "First Name ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
try it"
Front and rear label
You can <div class="row collapse"> > add front and rear tab element: < element class="postfix"> or < element class="prefix"> . You can use the grid system to set the size of the front and rear labels:
Examples
<Form>
<Div class = "row">
<Div class = "large-6 columns">
<Div class = "row collapse prefix -radius">
<Div class = "small-3 columns">
<Span class = "prefix"> Prefix </ span>
</ Div>
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 columns">
<Div class = "row collapse postfix -radius">
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
<Div class = "small-3 columns">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
<Div class = "row">
<Div class = "large-6 columns">
<Div class = "row collapse prefix -radius">
<Div class = "small-3 columns">
<Span class = "prefix"> Prefix </ span>
</ Div>
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 columns">
<Div class = "row collapse postfix -radius">
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
<Div class = "small-3 columns">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
try it"
Front and rear tab button
You can use <a> add elements .button class to set the front and rear buttons:
Front and rear label round buttons
Examples
<Form>
<Div class = "row">
<Div class = "large-6 columns">
<Div class = "row collapse prefix -radius">
<Div class = "small-3 columns">
<Span class = "prefix"> Prefix </ span>
</ Div>
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 columns">
<Div class = "row collapse postfix -radius">
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
<Div class = "small-3 columns">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Div class = "row">
<Div class = "large-6 columns">
<Div class = "row collapse prefix -round">
<Div class = "small-3 columns">
<A href = "#" class = "button prefix"> Go </ a>
</ Div>
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 columns">
<Div class = "row collapse postfix -round">
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
<Div class = "small-3 columns">
<A href = "#" class = "button postfix"> Go </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
<Div class = "row">
<Div class = "large-6 columns">
<Div class = "row collapse prefix -radius">
<Div class = "small-3 columns">
<Span class = "prefix"> Prefix </ span>
</ Div>
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 columns">
<Div class = "row collapse postfix -radius">
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
<Div class = "small-3 columns">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Div class = "row">
<Div class = "large-6 columns">
<Div class = "row collapse prefix -round">
<Div class = "small-3 columns">
<A href = "#" class = "button prefix"> Go </ a>
</ Div>
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 columns">
<Div class = "row collapse postfix -round">
<Div class = "small-9 columns">
<Input type = "text" placeholder = "Value">
</ Div>
<Div class = "small-3 columns">
<A href = "#" class = "button postfix"> Go </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
try it"