README documentation links
Main index and README content updates
Update footer details and links
Normform: A tiny CSS plugin to make your web forms beautiful again Form plugin (6KB)
normform.min.css
(or normform.css
if you wish to customize)<link rel="stylesheet" href="path-to-norform-folder/normform.min.css">
normform
class to your form elementMost structuring questions can be answered by simply taking a look at the included index.html
file for the proper way to build your form(s) for the best results.
It is completely optional to use fieldset
and/or legend
, but to do so is very simple:
<fieldset>
<legend>This is a legend</legend>
{inner form content goes here}
</fieldset>
The text, email, password, and number inputs all follow the structure of label
> input
.
Example:
<label for="text-input">Text Input:</label>
<input type="text" id="text-input" value="" placeholder="Text input content...">
Default browser select styling is reset and Normform uses a custom div
to represent the dropdown contents:
<label for="select-choice-2">Dropdown Select Choice:</label>
<div class="select-dropdown">
<select name="select-choice-2" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
Radio and checkbox elements follow the structure of input
> label
. The default browser radios and checkboxes are hidden and replaced with custom elements.
<input type="radio" name="radio-choice" id="radio-choice-1" tabindex="6" value="choice-1" checked>
<label for="radio-choice-1">Choice 1</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-1">Checkbox 1</label>
Straightforward:
<label for="textarea">Textarea:</label>
<textarea rows="8" name="textarea" id="textarea"></textarea>
Inputs set with a default type of submit
or reset
will be automatically styled. If you wish to have both buttons inline with each other, simply group them inside an inline-buttons
parent element:
<div class="inline-buttons">
<input type="reset" value="Cancel">
<input type="submit" value="Sign up">
</div>
Adding input validation is as simple as including the required
attribute but if you wish to include additonal error descriptor you need to also include the requirements
element and place all values inside a parent div
:
<div>
<label for="password-input">Password Input:</label>
<input type="password" id="password-input" required value="" tabindex="3" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" placeholder="Secure password">
<div class="requirements">Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.</div>
</div>
That's it! Enjoy!