You can download the latest /dist code directly from our GitHub repository v0.0.4-alpha (latest).

Don't forget to give us a ⭐ if you think FormaJS is worthwhile and we should continue improving on it.

User-defined Support

Add additional form elements support is easy. All you need to do is pass the element tag with its type (e.g input[type="number"]). The support setting must be passed as an array.

Send

CSS

Using a custom CSS stylesheet build on top of the forma-boilerplate.css template. Take a look at the code on our GitHub repository.

HTML

<form class="forma forma-register">
  <input data-label="Email Address" type="email" name="email-address" 
    pattern="(\S+@\S+\.\S+)"
    title="Email address must contain digits, letters, and @_. characters." required />
  <input data-label="Full Name" type="text" name="first-name" pattern="[a-zA-Z]{3,32}"
    title="Full name must contain letters only and cannot exceed 32 characters." required />
  <input data-label="Username" type="text" name="username" 
    pattern="[a-z]{3,32}" 
    title="Username must be lowercase between 3 and 32 characters." required />
  <input data-label="Password" type="password" name="password" 
    pattern="(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}" 
  title="Password must have minimum 8 characters, at least one letter and one number." />
  <input data-label="Age" type="number" name="age" min="12" max="100" step="1" />
  <input data-label="Website" type="url" required />
  <input data-label="When were you born?" type="date" />
  <input data-label="Phone number" type="tel" pattern="[0-9-/]" />
  <button type="submit">Send</button>
</form>

JavaScript

forma({ 
  auto: true,
  support: [
	'input[type="number"]', 
	'input[type="tel"]', 
	'input[type="url"]', 
	'input[type="date"]'
  ]});