html input-sm,CSS - Form | Amaze UI

Form

Easily create nicely looking forms with different styles and layouts.

Usage

Radio and Checkbox

with checkbox、radio type is slightly different from other elements：Add .am-checkbox、.am-radio class to container when display in block

Add .am-checkbox-inline、.am-radio-inline class to container when display inline.

Select

We can hardly define cross-browser styles for select simply with CSS, so keep its default style can probably the best solution.(This is what they did in Pure CSS). Amaze UI provide some styles for Webkit browsers to replace the default arrows.

File Selector

is another problem CSS can't handle. If you don't like the default style, you can just set its opacity to 0. and cover other elements with it.

Upload File

Upload File

Upload File

---

Upload File

The problem is the selected files won't be shown. Please use it JS.

Upload File

Upload File

$('#doc-form-file').on('change', function(){

var fileNames = '';

$.each(this.files, function(){

fileNames += '' + this.name + ' ';

});

$('#file-list').html(fileNames);

});

});

Example

The styles defined in Amaze UI will be applied to elements only if .am-form class is added to container.

Title

Email

password

Default file upload zone

Please select files to upload...

Amaze UI file upload zone

Upload File

Checkbox

Radio - option 1

Radio - option 2

select meor select meor me

every minuteevery secondis nice

selectoption 1...option 2.....option 3........

checkbox12345

text

submit

Title

Email

password

Default file upload zone

Please select files to upload...

Amaze UI file upload zone

Upload File

---

Checkbox

Radio - option 1

Radio - option 2

select me

or select me

or me

every minute

every second

is nice

select

option 1...

option 2.....

option 3........

checkbox

1

2

3

4

5

textbox

submit

Form Shape

Form Status

Set different status for form.

Disable Single Element

Add the disabled to to disable form elements.

Disable Elements in Field

Add the disabled to

to disable all child elements.

Disabled textbox

Disabled SelectDisabled

Disabled checkboxSubmit

Disabled textbox

Disabled Select

Disabled

Disabled checkbox

Submit

Disable Link

Add the .am-disabled class to element to disable link.

Disabled

Layout

Vertical Layout

Add the .am-form-horizontal class to

and use with Grid.

Email

Password

remember me

Submit

Email

Password

remember me

Submit

Inline Layout

Add the .am-form-inline class to the container. Attention: Right margin is not set for inline elements. Default margin is same as inline-block. Compressing HTML will cause the right margin to disappear.

Remember me  Login

Remember me

Login

Form Icon

Add the .am-form-icon to group elements. Need icon component.

Verification Status

Example

Successful Verification

Warning Verification

Error Verification

Successful Verification

Warning Verification

Error Verification

Verification with Icons

Add .am-form-icon and .am-form-feedback。

Attention: Styles of icon is written for single line .am-form-group. Problems may occur when using muli-line .am-form-group.

Style is adjusted in v2.3.1. Now form with label is also supported.

水平排列：

电子邮件

电子邮件

Size of Form

Size of Single Element

Add following classes to elements:am-input-lg

am-input-sm

Attention:This is only for forms without .

Select with .am-input-lg

Default select

Select with .am-input-sm

Select with .am-input-lg

Default select

Select with .am-input-sm

Size of Group

Size of form can also be adjusted by adding following classes to .am-form-group:.am-form-group-sm

.am-form-group-lg

Attention: **The .am-form-field class should be added to input element instead of classes like .am-input-sm.

Email

Password

Remember me

Submit

Email

Password

Remember me

Submit

Input Set

Use .am-form-set to group elements to be a set.

Register

Register

Reference