Accept height in feet, inches, or centimeters

Let people enter a height naturally and keep a consistent centimeter value for your form.

JavaScript (browser)Last tested Get the complete example ↓
On this page

Working example

HTML + form.js
Use this example

Keep the field familiar

Someone enters 5 ft 11 in. Your form keeps their text and receives 180.34 centimeters alongside it. A value such as 180 cm works in the same field. There is no need to make people switch between separate feet, inches, and metric controls.

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" 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>

Replace YOUR_PUBLIC_API_KEY with a public key allowed on your site's hostname. Serve the downloaded file over HTTP; add localhost to the key's allowed domains for local use.

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 separate hidden field retains the returned unit. Keep both beside the original height.

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.

Download HTML
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" 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 →