Pattern Lab

Date

Valitse päivämäärä. Oletuspäivämäärän voit asettaa antamalla value-kentälle arvoksi esim. 25.6.2014 tai 25/6/2014

HTML

									
										<div class="form-element date-element">
	<!-- Works like this: javascript created pikadate is used if browser doesn't support input type=date. If javascript is turned off, only the input type="date" is shown. If the browser doesn't support input type date adn javascript is turned off, it simply can't be helped. -->
	<label for="date-picker">Valitse päivämäärä. <span class="is-vishidden"> Oletuspäivämäärän voit asettaa antamalla value-kentälle arvoksi esim. 25.6.2014 tai 25/6/2014</span></label>
	<input type="date" value="2014-04-25">
	<input type="text" class="datepicker js-show" value="24.5.2014">
</div>

Field Text

Kirjoita tekstiä

HTML

									
										<div class="form-element text-el">
	<label for="text-field">Kirjoita tekstiä</label>
	<input type="text" id="text-field" placeholder="Kirjoita tähän...">
</div>

Field Js Text

Tekstialue

HTML

									
										<div class="form-element">
	<label for="input">Tekstialue</label>
	<input type="text" class="js-word-count" maxlength="100" placeholder="Esimerkkikenttä">
</div>

Slider

HTML

									
										<div class="form-element" style="margin: 30px; width: 50%;">
	<input class="slider" data-rangeslider type="range">
	<output id="js-output"></output>
</div>