Simple in-field input labels for forms, dynamically created by classes.
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
simple-dynamic-labels.html
simple.dynamic-labels.css
simple.dynamic-labels.js

README.md

Synopsis

Dynamic in-field labels for forms. Simple lightweight using CSS and jQuery. Backwards compatible, for degrads to default layout of input field with a label if no javascript is loaded or browser doesn't have javascript enabled.

Markup

  1. Create a form with a class .sdl-form:
<form class="sdl-form">
	-- form content will go here --
</div>
  1. Create a wrapper for each label and input:
<p>
    <label for="name" class="sdl-label">Full name</label>
    <input type="text" name="name" class="required" />
</p>
  1. Give the label a class of .sdl-label.

  2. Inlude CSS provide, or edit to your liking.

JS

  1. Include the Javascript funciton after your jQuery call

  2. Enable the function in you projects JS:

$('.sdl-form').simple_dynamic_labels();

Demo

See the basic functionality here,