Body Fat Calculator

2. HTML

Join the Discussion

Questions? Comments?

More of this Feature

Introduction Javascript

To insert the body fat calculator into your page the first thing you need to do is to put the following HTML into the body of your page where you want the calculator to appear.

<form><table border="0" width="200" align="center" style="border:1px solid #000"><thead><tr><th colspan="2">Body Fat Calculator</th></tr></thead><tbody><tr><td  colspan="2" align="center"><label for="s1"><input type="radio" id = "s1" name="s" value="m" onclick="sex(this.form)" />Male </label> <label for="s2"> <input type="radio" id = "s2" name="s" value="f" onclick="sex(this.form)" />Female </label></td></tr><tr><td colspan="2" align="center"><label for="d1"><input type="radio" id = "d1"  name="d" value="1"/>Centimetres</label> <label for="d2"> <input type="radio" id = "d2" name="d" value="2.54" />Inches </label></td></tr><tr><td align="right"><label for="h">Height:</label></td><td align="left"><input type="text" id = "h" name="h" size="6" /></td></tr><tr><td align="right"><label for="n">Neck:</label></td><td align="left"><input type="text" id = "n" name="n" size="6" /></td></tr><tr><td align="right"><label for="w">Waist:</label></td><td align="left"><input type="text" id = "w" name="w" size="6" /></td></tr><tr><td align="right"><label for="r">Hips:</label></td><td align="left"><input type="text" id = "r" name="r" size="6" disabled="disabled" /></td></tr><tr><td  colspan="2" align="center"><input type="button" value="Calculate" onclick="calc(this.form);return false;" /></td></tr><tr><td align="right"><label for="f">Body Fat:</label></td><td align="left"><input type="text" id = "f" name="f" size="6" readonly="readonly" /></td></tr></tbody></table></form>

You also need to add a small piece of HTML into the head of your page that will link the Javascript (which we will get next) into the page so that the calculator will function.

All that remains now is to get the fat calculator Javascript that will do the actual calculations.

Guide since 2004

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

JavaScript