<input>【汎用入力コントロール (Form control)】

各種外観は、コントロールの種類 参照

<script>
function funcCopy() {
  // 通常入力
  var text = document.getElementById("input-1").value;
  document.getElementById("input-2").value = text;
  // チェックボックス
  var check = document.getElementById("checkbox-1").checked;
  document.getElementById("checkbox-2").checked = check;
  // ラジオボタン
  var value = "";
  var listA = document.getElementsByName("radio_1");
  for (var i = 0; i < listA.length; i++) {
    if (listA[i].checked) {
      value = listA[i].value;
      break;
    }
  }
  var listB = document.getElementsByName("radio_2");
  for (var i = 0; i < listB.length; i++) {
    if (listB[i].value == value) {
      listB[i].checked = true;
      break;
    }
  }
  // カラー選択
  var color = document.getElementById("color-1").value;
  document.getElementById("color-2").value = color;
  // 日付
  var date = document.getElementById("date-1").valueAsDate;
  document.getElementById("date-2").valueAsDate = date;
  // 数値
  var num = document.getElementById("number-1").valueAsNumber;
  if (0 < num) { // 未サポート対応
    document.getElementById("number-2").valueAsNumber = num;
  }
  // スライダー
  var range = document.getElementById("range-1").valueAsNumber;
  document.getElementById("range-2").valueAsNumber = range;
}

function funcDisable() {
  var disabled = (document.getElementById("input-2").disabled) ? false : true;
  document.getElementById("input-2").disabled = disabled;
  document.getElementById("checkbox-2").disabled = disabled;
  document.getElementById("fieldset-2").disabled = disabled;
  document.getElementById("color-2").disabled = disabled;
  document.getElementById("date-2").disabled = disabled;
  document.getElementById("number-2").disabled = disabled;
  document.getElementById("range-2").disabled = disabled;
}
</script>

<p>
<input id="input-1" value="入力データ">
<label><input id="checkbox-1" type="checkbox" checked>チェックボックス１</label>
</p>
<fieldset style="width:150px;">
  <legend>ラジオボタン</legend>
  <label><input name="radio_1" type="radio" value="A" checked>A</label>
  <label><input name="radio_1" type="radio" value="B">B</label>
  <label><input name="radio_1" type="radio" value="C">C</label>
</fieldset>
<input id="color-1" type="color" value="#FF0000">
<input id="date-1" type="date" value="2001-02-03">
<input id="number-1" type="number" value="123456">
<input id="range-1" type="range" value="50">

<p><input type="button" onclick="funcCopy();" value="入力値を下にコピー">
<input type="button" onclick="funcDisable();" value="無効 / 有効 切替"></p>

<p>
<input id="input-2" placeholder="ここにコピー">
<label><input id="checkbox-2" type="checkbox">チェックボックス２</label>
</p>
<fieldset id="fieldset-2" style="width:150px;">
  <legend>ラジオボタン</legend>
  <label><input name="radio_2" type="radio" value="A">A</label>
  <label><input name="radio_2" type="radio" value="B">B</label>
  <label><input name="radio_2" type="radio" value="C" checked>C</label>
</fieldset>
<input id="color-2" type="color" value="#00FF00">
<input id="date-2" type="date">
<input id="number-2" type="number" value="0">
<input id="range-2" type="range" value="0">

チェックボックス１

ラジオボタン

A B C

チェックボックス２

ラジオボタン

A B C