Testing HTML5 forms

by vintharas

HTML

<form class="create-character" action="/persons" method="POST">
    <fieldset>
        <label for="name">Name </label>
        <input name="name" id="name" type="text" placeholder="name..." autofocus> 
    </fieldset>
    <fieldset>
        <label for="isNewbie">
            <input type="checkbox" name="isNewbie" id="isNewbie"> is my first character
        </label>
     </fieldset>
     <fieldset>
         <label>Race</label>
         <label for="race-human">
             <input type="radio" name="race" id="race-human" value="human"> Human
         </label>
         <label for="race-elf">
             <input type="radio" name="race" id="race-elf" value="elf"> Elf
         </label>
         <label for="race-dwarf">
             <input type="radio" name="race" id="race-dwarf" value="dwarf"> Dwarf
         </label>
     </fieldset>
     <fieldset>
         <label for="class">Class</label>
         <select id="class" name="class">
             <option value="warrior">Warrior</option>
             <option value="rogue">Rogue</option>
             <option value="wizard">Wizard</option>
         </select>
     </fieldset>
     <fieldset>
         <label for="alignment">Alignment</label>
         <select id="alignment" name="alignment" multiple>
             <option value="chaotic">Chaotic</option>
             <option value="neutral">Neutral</option>
             <option value="good">Good</option>
         </select>
     </fieldset>
            <fieldset>
            <label for="strength">Strength</label>
            <input type="number" name="strength" id="strength"
       min="0"
       max="10"
       step="2"
       value="6">
            </fieldset>
        <fieldset>
            <label for="dexterity">Dexterity</label>
            <input type="range" id="dexterity" name="dexterity"
       min="0"
       max="10"
       step="2"
       value="6">
                </fieldset>
        <fieldset>
            <label for="dateofbirth">Date of Birth</label>
           ...

CSS

form{
    font-family: helvetica, arial, sans-serif;
    margin-bottom: 20px;
}

fieldset{
    border:none;
}

fieldset > label{
    margin-right: 10px;
}

input {
    font-weight: 400;
}
label{
    font-weight:400;
}
label:not(:first-of-type),
label:only-child{
    font-weight: 100;
}



pre {
    background-color: lightgrey;
    min-height: 100px;
    word-wrap: break-word;
    padding: 20px;
}

JavaScript

$(function(){
   console.log('loading stuff');
   $(".serialize").on("click", function(){
       var serializedForm = $(".create-character").serialize();
        console.log("serialized form: ", serializedForm);
       $("pre").html(serializedForm);
   });
    
   $(".serializeArray").on("click", function(){
       var serializedForm = $(".create-character").serializeArray();
        console.log("serialized form: ", serializedForm);
       $("pre").html(JSON.stringify(serializedForm, null, 2));
   });
});