<input>

تجربة مختلف أنواع عنصر الإدخال

HTML

<section></section>

<textarea id="code" class="playable-code">
  <input id="input1" type="text">
  <input id="input2" type="text">
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
</div>

CSS

textarea {
  height: 80px;
  background-color: #F4F7F8;
  border: none;
  border-left: 6px solid #558ABB;
  color: #4D4E53;
  width: 90%;
  max-width: 700px;
  padding: 10px 10px 0px;
}
.playable-buttons {
  text-align: right;
  width: 90%;
  max-width: 700px;
  padding: 5px 10px 5px 26px;
}
section {
  width: 90%;
  max-width: 700px;
  border: 1px solid #4D4E53;
  border-radius: 2px;
  padding: 10px 14px 10px 10px;
  margin-bottom: 10px;
}
section input {
  display: block;
  margin: 5px;
}

JavaScript

var section = document.querySelector('section');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function fillSection() {
  while (section.firstChild) {
      section.removeChild(section.firstChild);
  }
  section.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  fillSection();
});

textarea.addEventListener('input', fillSection);
window.addEventListener('load', fillSection);