Search
HTML
<form action="#" method="post" class="inline-form search-form">
<legend class="is-vishidden">Search</legend>
<div id="pnlQuickSearch" class="form-element" title="Hae palvelun sisältöjä Googlella" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnQuickSearch')">
<label for="tbQuickSearch" class="is-vishidden">Search</label>
<input type="hidden" name="ctl00$ajxWatermarkQuickSearch_ClientState" id="ajxWatermarkQuickSearch_ClientState">
<input name="ctl00$tbQuickSearch" type="text" maxlength="300" id="tbQuickSearch" tabindex="10" class="text-quicksearch search-field ctl-text ellipsis" autocomplete="off">
<input type="submit" name="ctl00$btnQuickSearch" value="" id="btnQuickSearch" tabindex="11" class="button-quicksearch">
<i class="icon-search"></i>
</div>
</form>
Basic Fields
HTML
<form role="form half-form">
<h3>Salasanakenttä</h3>
<div class="form-element password-el">
<label for="password">Salasana</label>
<input type="password" id="password" placeholder="Salasanasi...">
</div>
<h3>Sähköpostikenttä</h3>
<div class="form-element email-el">
<label for="email">Sähköpostiosoite</label>
<input type="email" id="email" placeholder="esim. sahkoposti@osoite.fi"><span class="icon-ok valid-color is-hidden">OK</span>
<span class="error-text error-color icon-error is-hidden">Virhe</span>
</div>
<h3>Verkko-osoitekenttä</h3>
<div class="form-element url-el">
<label for="url">Kirjoita linkki</label>
<input type="url" maxlength="200" id="url" placeholder="www.esimerkki.fi">
</div>
<h3>Tekstialue</h3>
<div class="form-element">
<label for="textarea">Tekstialue</label>
<textarea class="js-dynamic" maxlength="400"></textarea>
</div>
<h3>Päivämäärävalitsin</h3>
<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></form>
Attachment
HTML
<!-- Attachment state: expecting file -->
<form action="" class="attachment-form">
<div class="form-element attachment-container">
<label for="upload-file" class="upload-file-button">Lisää tiedosto</label>
<input type="file" id="upload-file">
</div>
</form>
<!-- Attachment state: expecting meta and save command -->
<form action="" class="attachment-form">
<div class="form-element attachment-save">
<textarea name="attachment-meta" maxlength="8" placeholder="Kuvaile lyhyesti liitettä"></textarea>
<input type="submit" class="btn save-attachment" value="Tallenna">
</div>
</form>
<!-- Attachment state: shows uploaded file and options -->
<form action="" class="attachment-form">
<div class="form-element attachment-edit">
<label class="edit-file-button">muokkaa</label>
<div class="mime-container">
<i class="fa fa-file-o"></i>
</div>
<a class="file-title">Otsikko</a>
<p>tiedostonimi...jpg</p>
</div>
</form>