Add an example for for

live-examples/html-examples/form-attributes/attribute-for.html

@@ -0,0 +1,12 @@
+<p>
+  <label>First Name (no "for" attribute):</label>
+  <input id="first" type="text" value="Jane" />
+</p>
+<p>
+  <label for="last">Last Name (w/ "for" attribute):</label>
+  <input id="last" type="text" value="Doe" />
+</p>
+<p id="result">
+  <strong id="result-label">Full Name:</strong>
+  <output for="first last" aria-labelledby="result-label" id="output"></output>
+</p>

live-examples/html-examples/form-attributes/css/attribute-for.css

@@ -0,0 +1,16 @@
+label[for='paragraph'] {
+  color: rebbeccapurple;
+}
+
+#result {
+  text-align: center;
+}
+
+#result-label {
+  font-size: 16pt;
+}
+
+#result-label,
+#output {
+  display: block;
+}

live-examples/html-examples/form-attributes/js/attribute-for.js

@@ -0,0 +1,12 @@
+const firstNameEl = document.getElementById('first');
+const lastNameEl = document.getElementById('last');
+const outputEl = document.getElementById('output');
+
+function updateOutput() {
+  const value = `${firstNameEl.value} ${lastNameEl.value}`;
+  outputEl.innerText = value;
+}
+
+updateOutput();
+firstNameEl.addEventListener('input', updateOutput);
+lastNameEl.addEventListener('input', updateOutput);

live-examples/html-examples/form-attributes/meta.json

@@ -32,6 +32,17 @@
       "type": "tabbed",
       "height": "tabbed-standard"
     },
+    "for": {
+      "exampleCode": "./live-examples/html-examples/form-attributes/attribute-for.html",
+      "cssExampleSrc": "./live-examples/html-examples/form-attributes/css/attribute-for.css",
+      "jsExampleSrc": "./live-examples/html-examples/form-attributes/js/attribute-for.js",
+      "fileName": "attribute-for.html",
+      "title": "HTML Demo: for",
+      "type": "tabbed",
+      "defaultTab": "html",
+      "tabs": "html,css,js",
+      "height": "tabbed-shorter"
+    },
     "max": {
       "exampleCode": "./live-examples/html-examples/form-attributes/attribute-max.html",
       "cssExampleSrc": "./live-examples/html-examples/form-attributes/css/attribute-max.css",