Accept height in feet, inches, or centimeters

Accept a height in feet, inches, or centimeters in one HTML field and submit a consistent centimeter value.

JavaScript (browser)Last tested Download and run ↓
On this page

Working example

HTML + form.js

Run the example

Download HTML

height-form.html

Replace YOUR_PUBLIC_API_KEY in the downloaded file with your public key. Add localhost to that key's allowed domains. In a terminal in the download folder, run:

Terminal · Python 3
python3 -m http.server 8000

Open localhost:8000/height-form.html. When publishing, add your website's hostname to the key. Keep secret keys on your server.

Need a key? Set up this example

Keep the field familiar

Let someone enter 5 ft 11 in or 180 cm in one height field. Your form keeps their text and receives a consistent centimeter amount beside it: 5 ft 11 in becomes 180.34.

Include form.js once, mark the input, and choose a fixed target with data-parse-to.

HTML
<script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" data-parse-version="2.0.0" defer></script>
<form onsubmit="event.preventDefault()">
  <label for="height">Height</label>
  <input id="height" name="height" data-parse="measure" data-parse-to="cm"
         placeholder="5 ft 11 in or 180 cm" aria-describedby="height-help">
  <p id="height-help" class="hint">Include the unit you use.</p>
  <div class="converted">
    <label for="height-cm">Height in centimeters</label>
    <input id="height-cm" name="height_cm" data-parse-from="height"
           data-parse-fill="amount" readonly placeholder="—">
    <input type="hidden" name="height_unit" data-parse-from="height" data-parse-fill="unit">
  </div>
</form>

Submit a consistent value

The read-only centimeter field uses data-parse-fill="amount". Its value is a decimal string, so 180.34 remains exactly the displayed text when your form submits. The hidden field retains the returned unit. For 5 ft 11 in, the download submits height=5 ft 11 in, height_cm=180.34, and height_unit=cm. Keep all three together.

The script requests a measurement after the person edits the input. It does not look up anything on page load. Editing or clearing the height clears the previous generated result. Your form still owns submission and the server should validate the submitted values.

Ask when the unit is missing

180 does not say whether the person meant centimeters, inches, or another unit. The result stays empty and the field asks for an unambiguous measurement. Request failures also leave the derived value empty while the original input stays editable.

For a source with a known number format, add a fixed data-parse-locale="de-DE", for example. data-parse-system="us" or imperial selects the intended meaning of shared unit names. Neither setting comes from the visitor's location or the form's presentation language.

See the Measure API reference for reasons, unit choices, and the supported unit catalog. To clean an existing file, use the measurement CSV example.

Complete example

One HTML file with your fields, styles, and the form.js include. Replace YOUR_PUBLIC_API_KEY with your public key, then run it on a domain you have added to that key.

View and copy the complete source
height-form.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A flexible height field</title>
  <style>
    :root { color-scheme: light dark; --bg:#fff; --ink:#152029; --muted:#5e6b75; --line:#d9e2e7; --field:#f6f9fa; --accent:#007c91; --error:#b42335; }
    @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --bg:#0b1015; --ink:#eff7fa; --muted:#94a6b2; --line:#2c3942; --field:#121b23; --accent:#67e8f9; --error:#fda4af; } }
    :root[data-theme="dark"] { color-scheme:dark; --bg:#0b1015; --ink:#eff7fa; --muted:#94a6b2; --line:#2c3942; --field:#121b23; --accent:#67e8f9; --error:#fda4af; }
    :root[data-theme="light"] { color-scheme:light; }
    * { box-sizing:border-box; }
    body { margin:0; padding:24px; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,sans-serif; }
    main { max-width:540px; margin:auto; }
    label { display:block; margin:0 0 8px; font-size:14px; font-weight:600; }
    input { width:100%; min-height:44px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--field); font:inherit; font-size:16px; }
    input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
    input::placeholder { color:var(--muted); }
    input[readonly] { color:var(--accent); background:transparent; }
    input[type="hidden"] { display:none; }
    .converted { margin-top:24px; }
    .hint,.parse-hint { color:var(--muted); font-size:13px; margin:8px 0 0; overflow-wrap:anywhere; }
    .parse-hint[data-parse-status="invalid"] { color:var(--error); }
    @media(max-width:380px) { body { padding:18px; } }
  </style>
</head>
<body>
  <main>
    <!-- example:form -->
    <script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" data-parse-version="2.0.0" defer></script>
    <form onsubmit="event.preventDefault()">
      <label for="height">Height</label>
      <input id="height" name="height" data-parse="measure" data-parse-to="cm"
             placeholder="5 ft 11 in or 180 cm" aria-describedby="height-help">
      <p id="height-help" class="hint">Include the unit you use.</p>
      <div class="converted">
        <label for="height-cm">Height in centimeters</label>
        <input id="height-cm" name="height_cm" data-parse-from="height"
               data-parse-fill="amount" readonly placeholder="—">
        <input type="hidden" name="height_unit" data-parse-from="height" data-parse-fill="unit">
      </div>
    </form>
    <!-- /example:form -->
  </main>
</body>
</html>

Need a key? Set up this browser example. For every field and parameter, see Measure API reference.

Build something else

All tutorials →