typestar

Showing a value back in HTML

Three elements for numbers the user reads rather than types.

<form>
  <input type="range" id="a" name="a" value="40">
  <output name="total" for="a">40</output>
</form>

<label for="upload">Uploading</label>
<progress id="upload" value="0.6">60%</progress>

<label for="disk">Disk used</label>
<meter id="disk" value="0.82" low="0.5" high="0.8" optimum="0.2">
  82%
</meter>

How it works

  1. <output> is a calculated result, and for names the inputs behind it.
  2. <progress> is how far along a task is; leave value off for unknown.
  3. <meter> is a measurement in a known range, with optional danger zones.

The run, in numbers

Lines
12
Characters to type
307
Tokens
95
Three-star pace
70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 81 seconds.

Type this snippet

Step 4 of 4 in Numbers, dates & files, step 18 of 25 in Forms & inputs.

← Previous Next →

Showing a value back in other languages