<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>&lt;input type="number"&gt; 示例</title>
  <style>
    div {
      margin-bottom: 10px;
      position: relative;
    }

    input[type="number"] {
      width: 100px;
    }

    input + span {
      padding-right: 30px;
    }

    input:invalid+span:after {
      position: absolute;
      content: '✖';
      padding-left: 5px;
    }

    input:valid+span:after {
      position: absolute;
      content: '✓';
      padding-left: 5px;
    }
  </style>
</head>

<body>
  <form>
    <div class="metersInputGroup">
      <label for="meters">输入你的身高（单位：米）：</label>
      <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="例如 1.78" required>
      <span class="validity"></span>
    </div>
    <div class="feetInputGroup" style="display: none;">
      <span>输入你的身高 - </span>
      <label for="feet">英尺：</label>
      <input id="feet" type="number" name="feet" min="0" step="1">
      <span class="validity"></span>
      <label for="inches">英寸：</label>
      <input id="inches" type="number" name="inches" min="0" max="11" step="1">
      <span class="validity"></span>
    </div>
    <div>
      <input type="button" class="meters" value="使用英制单位">
    </div>
    <div>
        <input type="submit" value="提交">
    </div>
  </form>
  <script>
    const metersInputGroup = document.querySelector('.metersInputGroup');
    const feetInputGroup = document.querySelector('.feetInputGroup');
    const metersInput = document.querySelector('#meters');
    const feetInput = document.querySelector('#feet');
    const inchesInput = document.querySelector('#inches');
    const switchBtn = document.querySelector('input[type="button"]');

    switchBtn.addEventListener('click', function() {
      if(switchBtn.getAttribute('class') === 'meters') {
        switchBtn.setAttribute('class', 'feet');
        switchBtn.value = '使用公制单位';

        metersInputGroup.style.display = 'none';
        feetInputGroup.style.display = 'block';

        feetInput.setAttribute('required', '');
        inchesInput.setAttribute('required', '');
        metersInput.removeAttribute('required');

        metersInput.value = '';
      } else {
        switchBtn.setAttribute('class', 'meters');
        switchBtn.value = '使用英制单位';

        metersInputGroup.style.display = 'block';
        feetInputGroup.style.display = 'none';

        feetInput.removeAttribute('required');
        inchesInput.removeAttribute('required');
        metersInput.setAttribute('required', '');

        feetInput.value = '';
        inchesInput.value = '';
      }
    });

  </script>
</body>
</html>