Form JS Framework

A Classic Form Styling With Ease

Made with by Abdalla Arbab


Star

v 1.1.1

Download

Installation

Use formjs from the CDNjs or download the lastest release from github and also use jquery

https://cdnjs.cloudflare.com/ajax/libs/formjs/1.1.1/formjs.min.css
https://cdnjs.cloudflare.com/ajax/libs/formjs/1.1.1/formjs.min.js

No-js

If you didn't want to use jquery just use the formjs.css and forget about formjs.js file.

You can use this framework with or without jquery. But some components does require jquery so you shouldn't use these classes:

  • .disable class
  • .disableonfocus class
  • .formjs Checkboxes
  • .formjs Radios
  • .formjs select [not multiple select]

formjs.js will disable submit buttons when the page is loading to save forms from resubmition while the form is submited.

/* Remember to add your font */
	.formjs, .formjs-sm, .formjs-lg {
	font-family: "Quicksand", serif;
}

Documentation

Text inputs

<div>
	<label class="input-label-sm" for="Small">Small label</label>
	<input type="text" class="formjs-sm" id="Small">
</div>
<div>
	<label class="input-label" for="Medium">Medium label</label>
	<input type="text" class="formjs" id="Medium">
</div>
<div>
	<label class="input-label-lg" for="Large">Large label</label>
	<input type="text" class="formjs-lg" id="Large">
</div>

Textarea inputs

<div>
	<label class="input-label-sm" for="Small">Small label</label>
	<textarea class="formjs-sm" id="Small"></textarea>
</div>
<div>
	<label class="input-label" for="Medium">Medium label</label>
	<textarea class="formjs" id="Medium"></textarea>
</div>
<div>
	<label class="input-label-lg" for="Large">Large label</label>
	<textarea class="formjs-lg" id="Large"></textarea>
</div>

Disabled text input & textarea

<div>
	<input type="text" class="formjs" disabled>
</div>

<div>
	<textarea class="formjs" disabled></textarea>
</div>

<!-- Or you can just add class disabled [Require jQuery] -->
<div>
	<input type="text" class="formjs disabled">
</div>

<div>
	<textarea class="formjs disabled"></textarea>
</div>

Validation errors

<div>
	<label class="input-label" for="error1">This is label</label>
	<input type="text" class="formjs formjs-error" id="error1">
</div>

<div>
	<label class="input-label" for="error2">This is label</label>
	<input type="text" class="formjs formjs-error disableonfocus" id="error2">
</div>

Error messages

<div>
	<label class="input-label-sm" for="Small">Small label</label>
	<input type="text" class="formjs-sm formjs-error" id="Small">
	<label class="formjs-msg-sm" for="Small">This field is required</label>
</div>
<div>
	<label class="input-label" for="Medium">Medium label</label>
	<input type="text" class="formjs formjs-error" id="Medium">
	<label class="formjs-msg" for="Medium">This field is required</label>
</div>
<div>
	<label class="input-label-lg" for="Large">Large label</label>
	<input type="text" class="formjs-lg formjs-error" id="Large">
	<label class="formjs-msg-lg" for="Large">This field is required</label>
</div>

<div>
	<a href="#" class="formjs-link-sm">This is a small link</a>
</div>
<div>
	<a href="#" class="formjs-link">This is a medium link</a>
</div>
<div>
	<a href="#" class="formjs-link-lg">This is a large link</a>
</div>

Element float*

This will work in any element not just links*

pulled right
pulled left


<div>
	<a href="#" class="formjs-link formjs-right">pulled right</a>
</div>

<div>
	<a href="#" class="formjs-link formjs-left">pulled left</a>
</div>

Small checkboxes jquery

First checkbox Second checkbox Disabled checkbox Disabled & checked checkbox
<div class="checkbox-group">
	<input type="checkbox" class="formjs-sm">
	<span>First checkbox</span>

	<input type="checkbox" class="formjs-sm" checked>
	<span>Second checkbox</span>

	<input type="checkbox" class="formjs-sm" disabled>
	<span>Disabled checkbox</span>

	<input type="checkbox" class="formjs-sm" disabled checked>
	<span>Disabled & checked checkbox</span>
</div>

Normal checkboxes jquery

First checkbox Second checkbox Disabled checkbox Disabled & checked checkbox
<div class="checkbox-group">
	<input type="checkbox" class="formjs">
	<span>First checkbox</span>

	<input type="checkbox" class="formjs" checked>
	<span>Second checkbox</span>

	<input type="checkbox" class="formjs" disabled>
	<span>Disabled checkbox</span>

	<input type="checkbox" class="formjs" disabled checked>
	<span>Disabled & checked checkbox</span>
</div>

Large checkboxes jquery

First checkbox Second checkbox Disabled checkbox Disabled & checked checkbox
<div class="checkbox-group">
	<input type="checkbox" class="formjs-lg">
	<span>First checkbox</span>

	<input type="checkbox" class="formjs-lg" checked>
	<span>Second checkbox</span>

	<input type="checkbox" class="formjs-lg" disabled>
	<span>Disabled checkbox</span>

	<input type="checkbox" class="formjs-lg" disabled checked>
	<span>Disabled & checked checkbox</span>
</div>

Small radios jquery

First radio Second radio Disabled radio Disabled & checked radio
<div class="radio-group">
	<input type="radio" name="radio" class="formjs-sm">
	<span>First radio</span>

	<input type="radio" name="radio" class="formjs-sm" checked>
	<span>Second radio</span>

	<input type="radio" name="radio" class="formjs-sm" disabled>
	<span>Disabled radio</span>

	<input type="radio" name="radio" class="formjs-sm" disabled checked>
	<span>Disabled & checked radio</span>
</div>

Normal radios jquery

First radio Second radio Disabled radio Disabled & checked radio
<div class="radio-group">
	<input type="radio" name="radio1" class="formjs">
	<span>First radio</span>

	<input type="radio" name="radio1" class="formjs" checked>
	<span>Second radio</span>

	<input type="radio" name="radio1" class="formjs" disabled>
	<span>Disabled radio</span>

	<input type="radio" name="radio1" class="formjs" disabled checked>
	<span>Disabled & checked radio</span>
</div>

Large radios jquery

First radio Second radio Disabled radio Disabled & checked radio
<div class="radio-group">
	<input type="radio" name="radio2" class="formjs-lg">
	<span>First radio</span>

	<input type="radio" name="radio2" class="formjs-lg" checked>
	<span>Second radio</span>

	<input type="radio" name="radio2" class="formjs-lg" disabled>
	<span>Disabled radio</span>

	<input type="radio" name="radio2" class="formjs-lg" disabled checked>
	<span>Disabled & checked radio</span>
</div>

Inline checkboxes

First checkbox Second checkbox Third checkbox
First radio Second radio Third radio
<div class="checkbox-group inline-group">
	<input type="checkbox" class="formjs" checked>
	<span>First checkbox</span>

	<input type="checkbox" class="formjs">
	<span>Second checkbox</span>

	<input type="checkbox" class="formjs">
	<span>Third checkbox</span>
</div>

<div class="radio-group inline-group">
	<input type="radio" name="radio3" class="formjs" checked>
	<span>First radio</span>

	<input type="radio" name="radio3" class="formjs">
	<span>Second radio</span>

	<input type="radio" name="radio3" class="formjs">
	<span>Third radio</span>
</div>

Checkbox and radio label size

Small label Medium label large label
Small label Medium label large label
<div class="checkbox-group">
	<input type="checkbox" class="formjs" checked>
	<span class="label-sm">Small label</span>

	<input type="checkbox" class="formjs" checked>
	<span class="label-md">Medium label</span>

	<input type="checkbox" class="formjs" checked>
	<span class="label-lg">large label</span>
</div>

<div class="radio-group">
	<input type="radio" name="radio10" class="formjs" checked>
	<span class="label-sm">Small label</span>

	<input type="radio" name="radio10" class="formjs">
	<span class="label-md">Medium label</span>

	<input type="radio" name="radio10" class="formjs">
	<span class="label-lg">large label</span>
</div>

Selects jquery

<div class="select-group">
	<select class="formjs-sm">
		<option>small select</option>
		<option>First option</option>
		<option>Second option</option>
	</select>

	<select class="formjs">
		<option>Medium select</option>
		<option>First option</option>
		<option>Second option</option>
	</select>

	<select class="formjs-lg">
		<option>Large select</option>
		<option>First option</option>
		<option>Second option</option>
	</select>
</div>

Multiple selects

<div class="select-group">
	<select class="formjs" multiple>
		<option>Multiple select</option>
		<option>Second option</option>
		<option>Third option</option>
		<option>Fourth option</option>
		<option>Fifth option</option>
		<option>Sixth option</option>
		<option>Seventh option</option>
	</select>
</div>

Disabled selects

<div class="select-group">
	<select class="formjs-sm" disabled>
		<option>Disabled select</option>
		<option>First option</option>
		<option>Second option</option>
	</select>

	<select class="formjs" multiple disabled>
		<option>Disabled multiple select</option>
		<option>Second option</option>
		<option>Third option</option>
		<option>Fourth option</option>
		<option>Fifth option</option>
		<option>Sixth option</option>
		<option>Seventh option</option>
	</select>
</div>

Files inputs

<div>
	<label class="input-label-sm">Small file input</label>
	<input type="file" class="formjs-sm">
</div>

<div>
	<label class="input-label">Medium file input</label>
	<input type="file" class="formjs">
</div>

<div>
	<label class="input-label-lg">Large file input</label>
	<input type="file" class="formjs-lg">
</div>

Buttons

Link
<a class="formjs formjs-primary" href="#">Link</a>
<button class="formjs formjs-primary" type="submit">Button</button>
<input class="formjs formjs-primary" type="button" value="Input">
<input class="formjs formjs-primary" type="submit" value="Submit">

Buttons style

<input type="submit" class="formjs formjs-default" value="default">
<input type="submit" class="formjs formjs-success" value="success">
<input type="submit" class="formjs formjs-primary" value="primary">
<input type="submit" class="formjs formjs-info" value="info">
<input type="submit" class="formjs formjs-warning" value="warning">
<input type="submit" class="formjs formjs-danger" value="danger">

Buttons size

<input type="submit" class="formjs formjs-danger formjs-sm" value="Small button">
<input type="submit" class="formjs formjs-danger" value="Medium button">
<input type="submit" class="formjs formjs-danger formjs-lg" value="Large button">

Buttons block

<input type="submit" class="formjs formjs-success formjs-sm formjs-block" value="Small button">
<input type="submit" class="formjs formjs-primary formjs-block" value="Medium button">
<input type="submit" class="formjs formjs-warning formjs-lg formjs-block" value="Large button">