Responsive Layout Framework PURE-CSS 5.0 Sample Chinese version-medium

8. Form form

Add the. Pure-form class to the Form tab to generate a single-line form (inline)

：

Code:

<form class= "Pure-form" >

<fieldset>

<legend>a Compact Inline form</legend>

<input type= "Email" placeholder= "Email" >

<input type= "password" placeholder= "password" >

<label for= "Remember" >

<input id= "Remember" type= "checkbox" > Remember Me

</label>

<button type= "Submit" class= "Pure-button pure-button-primary" >sign in</button>

</fieldset>

</form>

Add a. pure-form-stacked class in the Form tab to generate a stack-form

：

Code:

<form class= "Pure-form pure-form-stacked" >

<fieldset>

<legend>a Stacked Form</legend>

<label for= "Email" >Email</label>

<input id= "Email" type= "email" placeholder= "Email" >

<label for= "Password" >Password</label>

<input id= "password" type= "password" placeholder= "password" >

<label for= "state" >State</label>

<select id= "State" >

<option>AL</option>

<option>CA</option>

<option>IL</option>

</select>

<label for= "Remember" class= "Pure-checkbox" >

<input id= "Remember" type= "checkbox" > Remember Me

</label>

<button type= "Submit" class= "Pure-button pure-button-primary" >sign in</button>

</fieldset>

</form>

Add the. pure-form-aligned class to the Form tab to create a sort form

：

Code:

<form class= "Pure-form pure-form-aligned" >

<fieldset>

<div class= "Pure-control-group" >

<label for= "Name" >Username</label>

<input id= "name" type= "text" placeholder= "Username" >

</div>

<div class= "Pure-control-group" >

<label for= "Password" >Password</label>

<input id= "password" type= "password" placeholder= "password" >

</div>

<div class= "Pure-control-group" >

<label for= "Email" >email address</label>

<input id= "Email" type= "email" placeholder= "email Address" >

</div>

<div class= "Pure-control-group" >

<label for= "foo" >supercalifragilistic label</label>

<input id= "foo" type= "text" placeholder= "Enter something here ..." >

</div>

<div class= "Pure-controls" >

<label for= "CB" class= "Pure-checkbox" >

<input id= "CB" type= "checkbox" > I ' ve read the terms and conditions

</label>

<button type= "Submit" class= "Pure-button pure-button-primary" >Submit</button>

</div>

</fieldset>

</form>

By combining with a responsive grid (Responsive-grids), you can generate multiple list orders

：

Code:

<form class= "Pure-form pure-form-stacked" >

<fieldset>

<legend>Legend</legend>

<div class= "Pure-g" >

<div class= "Pure-u-1 pure-u-md-1-3" >

<label for= "First-name" >first name</label>

<input id= "First-name" type= "text" >

</div>

<div class= "Pure-u-1 pure-u-md-1-3" >

<label for= "Last-name" >last name</label>

<input id= "Last-name" type= "text" >

</div>

<div class= "Pure-u-1 pure-u-md-1-3" >

<label for= "Email" >E-Mail</label>

<input id= "Email" type= "email" required>

</div>

<div class= "Pure-u-1 pure-u-md-1-3" >

<label for= "City" >City</label>

<input id= "City" type= "text" >

</div>

<div class= "Pure-u-1 pure-u-md-1-3" >

<label for= "state" >State</label>

<select id= "state" class= "Pure-input-1-2" >

<option>AL</option>

<option>CA</option>

<option>IL</option>

</select>

</div>

</div>

<label for= "terms" class= "Pure-checkbox" >

<input id= "terms" type= "checkbox" > I ' ve read the terms and conditions

</label>

<button type= "Submit" class= "Pure-button pure-button-primary" >Submit</button>

</fieldset>

</form>

By adding to the fieldset. Pure-group class, you can group elements

：

Code:

<form class= "Pure-form" >

<fieldsetclass= "Pure-group" >

<input type= "text" class= "Pure-input-1-2" placeholder= "Username" >

<input type= "text" class= "Pure-input-1-2" placeholder= "Password" >

<input type= "Email" class= "pure-input-1-2" placeholder= "Email" >

</fieldset>

<fieldset class= "Pure-group" >

<input type= "text" class= "Pure-input-1-2" placeholder= "another Group" >

<input type= "text" class= "Pure-input-1-2" placeholder= "more Stuff" >

</fieldset>

<button type= "Submit" class= "Pure-button pure-input-1-2 pure-button-primary" >sign in</button>

</form>

Controls the size of the form element, which can be implemented by adding a. pure-input-* class, such as a pure-input-2-3 representing a width of 66.6%

Add the Required property to the input to have a required hint

<input type= "Email" placeholder= "Requires an email" required>

Increase the Disabled property for an entry so that it is not available

<input type= "text" placeholder= "Disabled input here ..." disabled>

Add the ReadOnly property to the entry to make it read-only

<input type= "text" value= "Readonly input here ..." readonly>

Add the Pure-input-rounded property to the entry to make it rounded

<input type= "text" class= "pure-input-rounded" >

check box (checkbox) and Radio Box (radio), Add. Pure-checkbox and. Pure-radio, keep their style neat

：

Code:

<form class= "Pure-form" >

<label for= "Option-one" class= "Pure-checkbox" >

<input id= "Option-one" type= "checkbox" Value= "" >

Here ' s option one.

</label>

<label for= "Option-two" class= "Pure-radio" >

<input id= "Option-two" type= "Radio" name= "Optionsradios" value= "Option1" checked>

Here ' s a radio button. You can choose this one.

</label>

<label for= "Option-three" class= "Pure-radio" >

<input id= "Option-three" type= "Radio" name= "Optionsradios" value= "Option2" >

.. Or this one!

</label>

</form>

9. Button

Add a class to the A or button label. Pure-button

<aclass= "Pure-button" href= "#" >a Pure button</a>

<buttonclass= "Pure-button" >a Pure button</button>

Disabled Buttons Disabled button

<a class= "Pure-button pure-button-disabled" href= "#" >a disabled button</a>

<button class= "Pure-button pure-button-disabled" >a disabled button</button>

Activated buttons active button, same pressed state

<a class= "Pure-button pure-button-active" href= "#" >an active button</a>

<button class= "Pure-button pure-button-active" >an active button</button>

Highlight button Primary buttons

<a class= "Pure-button pure-button-primary" href= "#" >a primary button</a>

<button class= "Pure-button pure-button-primary" >a primary button</button>

Custom Buttons

<div>

<style scoped>

. Button-success,

. Button-error,

. button-warning,

. button-secondary {

Color:white;

border-radius:4px;

text-shadow:0 1px 1px rgba (0, 0, 0, 0.2);

}

. button-success {

Background:rgb (28, 184, 65); /* This is a green */

}

. button-error {

BACKGROUND:RGB (202, 60, 60); /* This is a maroon */

}

. button-warning {

Background:rgb (223, 117, 20); /* This was an orange */

}

. button-secondary {

Background:rgb (66, 184, 221); /* This is a light blue */

}

</style>

<button class= "button-success Pure-button" >success button</button>

<button class= "Button-error Pure-button" >error button</button>

<button class= "button-warning Pure-button" >warning button</button>

<button class= "Button-secondary Pure-button" >secondary button</button>

</div>

Button size

<div>

<style scoped>

. button-xsmall {

font-size:70%;

}

. button-small {

font-size:85%;

}

. button-large {

font-size:110%;

}

. button-xlarge {

font-size:125%;

}

</style>

<button class= "Button-xsmall Pure-button" >extra Small button</button>

<button class= "Button-small Pure-button" >small button</button>

<button class= "Pure-button" >regular button</button>

<button class= "Button-large Pure-button" >large button</button>

<button class= "Button-xlarge Pure-button" >extra Large button</button>

</div>

icon button

To use the icon button, you need to add a CSS font file, such as Font-awesome

<button class= "Pure-button" >

<i class= "FA fa-cog" ></i>

Settings

</button>

<a class= "Pure-button" href= "#" >

<i class= "fa fa-shopping-cart fa-lg" ></i>

Checkout

</a>

Responsive Layout Framework PURE-CSS 5.0 Sample Chinese version-medium