Untitled

dabblet.css

form { width:300px;text-align:center;border:solid 1px;}
form > label:nth-child(1n) {width:48%;margin:0;}
form  > label:nth-child(n+4) ,label, a {width:98%;display:inline-block;text-align:left;}
form > input , form >label > input  {display:block;clear:both;width:97%;;margin:auto;}
form a:link {border:1px solid;color:#333;text-decoration:none;}
form a:not(:link) {position:fixed;left:-9999px;}
fieldset {border:none;height:2.8em;overflow:hidden;padding:0;margin:0;text-align:left;}
:target + fieldset {height:30em;transition:1s;overflow:auto;}
a:before {content:'\2713';float:right;border-radius:1em;
background:#6DCC0C;color:white;width:1.25em;text-align:center;font-size:0.8em;margin:0.2em 0.15em 0}

dabblet.html

<form name="messageForm" action="" method="post" validate="true">
<input type="hidden" name="lang" value="fr"/>

	   <label for="prenom">Prénom *<input type="text" name="prenom" value="" id="prenom" required/></label> 
	   <label for="nom">Nom  * <input type="text" name="nom" value="" id="nom" required/></label>
	   <label for="mail">Adresse de courriel *</label> <input type="text" name="mail" value="" id="mail" required/>
	   <label for="phone">Numéro de téléphone *</label> <input type="text" name="phone" value="" id="phone" required/>	   
<a id="#loc">-</a>
<fieldset ><legend>Emplacements de travail préférés *</legend>
<a href="#loc">Choisir les emplacements</a>
	<label for="loc1" ><input id="loc1" name="loc1" type="checkbox" value="200000200" />Barrie</label>
    <label for="loc2" ><input id="loc2" name="loc2" type="checkbox" value="50308">Calgary</label>
    <label for="loc3" ><input id="loc3" name="loc3" type="checkbox" value="50313">Edmonton</label>
    <label for="loc4" ><input id="loc4" name="loc4" type="checkbox" value="50315">Fort McMurray</label>
    <label for="loc5" ><input id="loc5" name="loc5" type="checkbox" value="50399">Hamilton</label>
    <label for="loc6" ><input id="loc6" name="loc6" type="checkbox" value="etc">Etc ...</label>
 </fieldset>
   
<a id="#pref">-</a>
<fieldset ><legend>Types de travail préférés *</legend>
<a href="#pref">Choisir les types d'emplois</a>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox" value="100">Administration</label>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox"  value="2260130090">Communications</label>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox" value="150">Service client</label>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox" value="300">Finances</label>
    <label for="pref1" ><input id="pref1" name="pref1" type="checkbox" value="160130090">Solutions en santé<</label>
 </fieldset>
 					                
<p>Etc ..</p>

<input type="submit">

</form>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}