<form>
  <div><label for="thing1">Enter the name of thing one</label>
    <input type="text" name="thing1" id="thing1" required>
  </div>
  <div><label for="thing2">Enter the name of thing two</label>
    <input type="text" name="thing2" id="thing2" required>
  </div>
  <div><label for="thing3">Enter the name of thing three</label>
    <input type="text" name="thing3" id="thing3" required>

  </div>
</form>

body {
  font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  margin: 2em 3em;
  counter-reset: req-counter;
}

form label {
  display: block;
  margin: 1em 0 0.2em 0;
}

input {
  width: 20em;
  border: 2px solid rgba(23,145,255, .8);
  padding: .3em;
  font-size: inherit;
  font-family: inherit;
}

input:required:invalid {
  counter-increment: req-counter;
}

form::after {
  content: "Things left to name: " counter(req-counter);
  margin: 1em 0;
  display: block;
  border: 1px solid #999;
  padding: .2em;
  background-color: rgba(23,145,255, .3);
}