First draft of my Final Fantasy RPG 4th Edition Revised. first ever sheet, need tips.

So I've recently finished up my first ever character sheet after trying to play FFRPG without one didn't work, using the roll20 wiki I managed to make this much despite never having touched HTML and with some help from the macro forum and a bit of googling this is what I have so far. Functionally this is complete and usable but if anyone could help/teach me to improve its looks or add in some macros I'd really appreciate it and would love to get my first ever sheet published in the future. <div class='3colrow'> <div class='col'> <!-- Put the content for the first column here --> Name <input type="text" name="attr_character_name" /> <br/> Group <input type="text" name="attr_groupname" /> <br/> Main Job           <input type="text" name="attr_Mainjob" style="width: 8em" /> <br/>  Secondary Job <input type="text" name="attr_Secjob" style="width: 8em" /> <br/> Level <input type="number" name="attr_level" value="(@{EarthLevel}+@{AirLevel}+@{FireLevel}+@{WaterLevel})" disabled="true" /> XP Points <Input type="number" name="attr_Exp" style="width: 5em" value="200" /> <br/><br/><br/> <Label>STATS</Label>     EARTH <Input type="number" name="attr_EarthLevel" Value="floor(@{EarthV}/10)" disabled="true" /> <Input type="number" name="attr_EarthV" /> <Input type="number" name="attr_EarthXP" style="width:5em" /> <br/>     AIR       <Input type="number" name="attr_AirLevel" Value="floor(@{AirV}/10)" disabled="true" /> <Input type="number" name="attr_AirV" /> <Input type="number" name="attr_AirXP" style="width:5em" /> <br/>     FIRE     <Input type="number" name="attr_FireLevel" Value="floor(@{FireV}/10)" disabled="true" /> <Input type="number" name="attr_FireV" /> <Input type="number" name="attr_FireXP" style="width:5em" /> <br/>     WATER <Input type="number" name="attr_WaterLevel" Value="floor(@{WaterV}/10)" disabled="true" /> <Input type="number" name="attr_WaterV" /> <Input type="number" name="attr_WaterXP" style="width:5em" /> <br/> <br/>                  HP <input type="number" name="attr_HP" min="0" Max="@{MaxHP}" style="width 5em" Value="0" />                           MP <input type="number" name="attr_MP" min="0" Max="@{MaxMP}" style="width 5em" Value="0" /> <br/>     Max HP <input type="number" name="attr_MaxHP" style="width: 5em" value="(@{level}*@{HPmod}+@{EarthV})" disabled="true" />          Max MP <input type="number" name="attr_MaxMP" style="width: 5em" value="(@{level}*@{MPmod}+@{WaterV})" disabled="true" /> <br/> <br/>         HP Modifier <input type="number" name="attr_HPmod" Value="0" />              MP Modifier <input type="number" name="attr_MPmod" Value="0" /> <br/>      <hg>Actions</hg>     <fieldset class="repeating_Actions">         <input type="text" name="attr_actionname" />         <select name="attr_ACT_Type" style="width: 5em">                 <option value="0">None</option>                 <option value="@{EarthV}">Earth</option>                 <option value="@{AirV}">Air</option>                 <option value="@{FireV}">Fire</option>                 <option value="@{WaterV}">Water</option>                              </select>             VS             <select name="attr_ACT_VSType" style="width: 5em">                 <option value="None">None</option>                 <option value="earth">Earth</option>                 <option value="Air">Air</option>                 <option value="Fire">Fire</option>                 <option value="Water">Water</option>             </select>              <br/>             Dif <input type="number" name="attr_ACTDif" />              DMG x<input type="number" name="attr_ACTDMGMOD"             />             <select name="attr_ACTModEle" style="width: 5em">                 <option value="0">None</option>                 <option value="@{EarthLevel}">Earth</option>                 <option value="@{AirLevel}">Air</option>                 <option value="@{FireLevel}">Fire</option>                 <option value="@{WaterLevel}">Water</option>                 <option value="@{level}">Level</option>             </select>             <br/>             Effects <input type="text" name="attr_SpellEffect" style="width: 13em" />             <button type="roll" value="&{template:default} {{name=@{actionname}}} {{attack=[[1d100+@{ACT_Type}-@{ACTDif}]]}} {{damage=[[floor(@{ACTMODEle})*@{ACTDMGMOD}]]}}" />             <br/> <br/> <br/>     </fieldset>     <br/> <br/> <hg>Proficiencies</hg>     <fieldset class="repeating_proficiencies">         <select name="attr_proftype" Class="Proftype" style="width: 5em">             <option value="WPN">WPN</option>             <option value="ARM">ARM</option>         </select>         <input type="text" name="attr_profname" style="width: 14em" />         <br/>     </fieldset> </div> <div class='col'> <!-- Second column --> <label>SKILLS</label>     <label>Earth</label>         Strength <input type="number" name="attr_Skill_Strength" Value="0" />          Climbing <input type="number" name="attr_Skill_Climbing" Value="0" /> <br/>         Swimming <input type="number" name="attr_Skill_Swimming" Value="0" />          Intimidation <input type="number" name="attr_Skill_Intimidation" Value="0" /> <br/>         Tolerance <input type="number" name="attr_Skill_Tolerance" Value="0" />          Jumping <input type="number" name="attr_Skill_Jumping" Value="0" /> <br/>     <label>Air</label>         Running <input type="number" name="attr_Skill_Running" Value="0" />          Stealth <input type="number" name="attr_Skill_Stealth" Value="0" /> <br/>         Piloting <input type="number" name="attr_Skill_Piloting" Value="0" />          Riding <input type="number" name="attr_Skill_Riding" Value="0" /> <br/>         Theivery <input type="number" name="attr_Skill_Thievery" Value="0" />          Acrobatics <input type="number" name="attr_Skill_Acrobatics" Value="0" /> <br/>     <label>Fire</label>         Infiltration <input type="number" name="attr_Skill_Infiltration" Value="0" />          Perception <input type="number" name="attr_Skill_Perception" Value="0" /> <br/>         Medicine <input type="number" name="attr_Skill_Medicine" Value="0" />         Survival <input type="number" name="attr_Skill_Survival" Value="0" /> <br/>         Technology <input type="number" name="attr_Skill_Technology" Value="0" />         Wisdsom <input type="number" name="attr_Skill_Wisdom" Value="0" /> <br/>     <label>Water</label>         Willpower <input type="number" name="attr_Skill_Willpower" Value="0" />          Bluff <input type="number" name="attr_Skill_Bluff" Value="0" /> <br/>         Animal Handling <input type="number" name="attr_Skill_Animal_Handling" Value="0" />          Charisma <input type="number" name="attr_Skill_Charisma" Value="0" /> <br/>         Performance <input type="number" name="attr_Skill_Performance" Value="0" />         Magic <input type="number" name="attr_Skill_Magic" Value="0" /> <br/>          <br/><br/><br/> <h3>Traits & Quirks</h3>     <fieldset class="repeating_Traits">         <input type="text" name="attr_Traitname" style="width: 10em" />         <Select name="attr_Trait_Type" class="Trait_Type" style="width: 6em">             <option value="Trait">Trait</option>             <option value="Quirk">Quirk</option>         </Select>     </fieldset>          </div> <div class='col'> <!-- Third column --> <label>SPELLS AND EQUIPMENT</label>     <h3>Weapons</h3>         <fieldset class="repeating_Weapons">             Name <input type="text" name="attr_weaponname" style="width: 9em" />             DMG x <input type="number" name="attr_weaponmod" />             <br/>             Effects <input type="text" name="attr_weaponeffects" style="width: 13em" />              <button type="roll" Value="&{template:default} {{name=!Attack}} {{attack=[[1d100+@{EarthV}-40]]}} {{damage=[[@{EarthLevel}*@{weaponmod}]]}}"             />             <br/> <br/>         </fieldset>              <br/>     <h3>Armor</h3>         Name <Input type="text" name="attr_armorname" style="width: 12em" /> <br/>           ARM <input type="number" name="attr_ARM" />   MARM <input type="number" name="attr_MARM" /> <br/>         effects <input type="text" name="attr_armeffect" />          <br/> <br/> <h3>Abilities</h3>         <fieldset class="repeating_abilities">             <input Type="text" name="attr_ABL" />         </fieldset>              <br/> <br/> <h3>Spells</h3>         <fieldset class="repeating_Spells">             Name <input type="text" name="attr_spellname" style="width: 10em" />             MP <input type="number" name="attr_SpellMP" />             <select name="attr_Spell_Type" style="width: 5em">                 <option value="0">None</option>                 <option value="@{EarthV}">Earth</option>                 <option value="@{AirV}">Air</option>                 <option value="@{FireV}">Fire</option>                 <option value="@{WaterV}">Water</option>                              </select>             VS             <select name="attr_Spell_VSType" style="width: 5em">                 <option value="None">None</option>                 <option value="earth">Earth</option>                 <option value="Air">Air</option>                 <option value="Fire">Fire</option>                 <option value="Water">Water</option>             </select>              <br/>             Dif <input type="number" name="attr_SpellDif" />              DMG x<input type="number" name="attr_SpellDMGMOD" />                          <select name="attr_SpellDMGEle" style="width: 5em">                 <option value="0">None</option>                 <option value="@{EarthLevel}">Earth</option>                 <option value="@{AirLevel}">Air</option>                 <option value="@{FireLevel}">Fire</option>                 <option value="@{WaterLevel}">Water</option>                 <option value="@{level}">Level</option>             </select>             <br/>             Effects <input type="text" name="attr_SpellEffect" style="width: 13em" />             <button type="roll" value="&{template:default} {{name=@{spellname}}} {{attack=[[1d100+@{Spell_Type}-@{SpellDif}]]}} {{damage=[[floor(@{SpellDMGEle}*@{SpellDMGMOD}]]}}" />             <br/> <br/> <br/>         </fieldset>              <br/> <br/> <h3>Inventory</h3>         <fieldset class="repeating_INV">             <input type="text"name="attr_INV_NAME" style="width: 13em" /> Qnt <input type="number" name="attr_INVQnt" />         </fieldset>         <br/>         GIL <input type="number" name="attr_GIL" Style="width: 5em" value="200" </div> </div>

It looks pretty good, especially for a first attempt. Do you use any CSS with the sheet?  I notice a few style calls that could be offloaded into css. I dont really have much to say at this point, not having tried the sheet, but here are some very minor sugegstions (not requirements, just ease of use suggestions): if you are planning to submit it to roll20 at some point, it's a good idea to change all your attribute names to lower case. It's part of their style guidelines,, though there are good reasons for it if you ever go into more advanced stuff like sheet workers. Also, I wouldn't recommend using abbreviated names like, say, attr_INVQnt when you can just as easily use attr_inventory_quantity. It's easier for others to understand if they want to upgrade the sheet later on, and its easier for users to remember the names if they want to use them in their own macros. Also, since spaces don't matter in html, you'll find it easier to read and edit if you rearrange sections like this EARTH <Input type="number" name="attr_EarthLevel" Value="floor(@{EarthV}/10)" disabled="true" /> <Input type="number" name="attr_EarthV" /> <Input type="number" name="attr_EarthXP" style="width:5em" /> <br/> with EARTH <Input type="number" name="attr_EarthLevel" Value="floor(@{EarthV}/10)" disabled="true" /> <Input type="number" name="attr_EarthV" /> <Input type="number" name="attr_EarthXP" style="width:5em" /> <br/> Basically have each element on its own line.

Thanks for the advice, I'll make the changes as soon as I can.

I know next to nothing about HTML and little about roll20 Macros, but this spreadsheet may help you (especially the formula to calculate Stat value and Stat levels) : <a href="https://docs.google.com/spreadsheets/d/1p77Fn28E_OoRKbGlKhgROVNCiJQwfUyY05NZoc4UNW0/edit#gid=0" rel="nofollow">https://docs.google.com/spreadsheets/d/1p77Fn28E_OoRKbGlKhgROVNCiJQwfUyY05NZoc4UNW0/edit#gid=0</a>