Form

Form function

if you put .acms-form to the form input tag will be decorated

if forcused, its color is changed to blue

Basic HTML

<form class="acms-form">
	<input type="email" id="email" placeholder="ex) info@hoge.com">
</form>

Block

.acms-form-group

<div class="acms-form-group">
	<label for="email">mail address</label>
	<input type="email" id="email" placeholder="ex) info@example.com">
</div>

upload jpeg, gif and ping

blocking the label

.acms-form-block

if block the label, input will be below the label

<div class="acms-form-group">
	<label for="email" class="acms-form-block">mail address</label>
	<input type="email" id="email" placeholder="ex) info@example.com">
</div>

inline(parallel)

invalidate

"disabled" attribution

<input type="email" id="email" disabled>

<select disabled>
	<option value="">---</option>
	<option value="...">...</option>
</select>

error

.acms-text-error

text color will be red

enter the name

<p class="acms-text-error">enter the name</p>

.acms-form-error

input color will be red

<input type="email" id="email" placeholder="ex) info@example.com" class="acms-form-error">

form size

.acms-form-large

large

.acms-form-small

small

<input type="email" id="email" placeholder="ex) info@example.com" class="acms-form-large">

<input type="email" id="email" placeholder="ex) info@example.com" class="acms-form-small">

length of the form

<input type="email" id="email" class="acms-form-width-large">

<input type="email" id="email" class="acms-form-width-medium">

<input type="email" id="email" class="acms-form-width-small">

<input type="email" id="email" class="acms-form-width-mini">

<input type="email" id="email" class="acms-form-width-full">

<input type="email" id="email" class="acms-form-width-3quarters">

<input type="email" id="email" class="acms-form-width-half">

<input type="email" id="email" class="acms-form-width-quarter">

change the design of the check boxes and radio buttons.

you can use it with Internet Explorer,as long as its version is above 11

check box(icon on the left)

<label class="acms-form-checkbox">
	<input checked="checked" type="checkbox"><i class="acms-ico-checkbox"></i>apple
</label>

checkbox(button)

<input type="checkbox" id="checkbox-1-1" class="acms-btn-checkbox" /><label for="checkbox-1-1">apple</label>

radio button(icon on the left)

<label class="acms-form-radio">
	<input name="custom-radio" checked="checked" type="radio"><i class="acms-ico-radio"></i>うどん
</label>

radio button(button)

<input type="radio" id="radio-1-2" name="radio-1-set" class="acms-btn-radio" /><label for="radio-1-2">そば</label>