diff --git a/live-examples/css-examples/pseudo-class/autofill.html b/live-examples/css-examples/pseudo-class/autofill.html
index b0bbb9cb6..d533a41ab 100644
--- a/live-examples/css-examples/pseudo-class/autofill.html
+++ b/live-examples/css-examples/pseudo-class/autofill.html
@@ -2,11 +2,11 @@
   <p>Click on the text box and choose any option suggested by your browser.</p>
 
   <label for="name">Name</label>
-  <input name="name" type="text" autocomplete="name" />
+  <input id="name" name="name" type="text" autocomplete="name" />
 
   <label for="email">Email Address</label>
-  <input name="email" type="email" autocomplete="email" />
+  <input id="email" name="email" type="email" autocomplete="email" />
 
   <label for="country">Country</label>
-  <input name="country" type="text" autocomplete="country-name" />
+  <input id="country" name="country" type="text" autocomplete="country-name" />
 </form>
diff --git a/live-examples/css-examples/pseudo-class/disabled.html b/live-examples/css-examples/pseudo-class/disabled.html
index fe5a76eec..e1639e024 100644
--- a/live-examples/css-examples/pseudo-class/disabled.html
+++ b/live-examples/css-examples/pseudo-class/disabled.html
@@ -1,16 +1,16 @@
 <form>
   <label for="name">Name:</label>
-  <input name="name" type="text" />
+  <input id="name" name="name" type="text" />
 
   <label for="emp">Employed:</label>
-  <select name="emp" disabled>
+  <select id="emp" name="emp" disabled>
     <option>No</option>
     <option>Yes</option>
   </select>
 
   <label for="empDate">Employment Date:</label>
-  <input name="empDate" type="date" disabled />
+  <input id="empDate" name="empDate" type="date" disabled />
 
   <label for="resume">Resume:</label>
-  <input name="resume" type="file" />
+  <input id="resume" name="resume" type="file" />
 </form>
diff --git a/live-examples/css-examples/pseudo-class/enabled.html b/live-examples/css-examples/pseudo-class/enabled.html
index fe5a76eec..e1639e024 100644
--- a/live-examples/css-examples/pseudo-class/enabled.html
+++ b/live-examples/css-examples/pseudo-class/enabled.html
@@ -1,16 +1,16 @@
 <form>
   <label for="name">Name:</label>
-  <input name="name" type="text" />
+  <input id="name" name="name" type="text" />
 
   <label for="emp">Employed:</label>
-  <select name="emp" disabled>
+  <select id="emp" name="emp" disabled>
     <option>No</option>
     <option>Yes</option>
   </select>
 
   <label for="empDate">Employment Date:</label>
-  <input name="empDate" type="date" disabled />
+  <input id="empDate" name="empDate" type="date" disabled />
 
   <label for="resume">Resume:</label>
-  <input name="resume" type="file" />
+  <input id="resume" name="resume" type="file" />
 </form>
diff --git a/live-examples/css-examples/pseudo-class/in-range.html b/live-examples/css-examples/pseudo-class/in-range.html
index 2a70b5e42..ca51d3831 100644
--- a/live-examples/css-examples/pseudo-class/in-range.html
+++ b/live-examples/css-examples/pseudo-class/in-range.html
@@ -1,10 +1,10 @@
 <form>
   <label for="amount">How many tickets? (You can buy 2-6 tickets)</label>
-  <input name="amount" type="number" min="2" max="6" value="4" />
+  <input id="amount" name="amount" type="number" min="2" max="6" value="4" />
 
   <label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>
-  <input name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />
+  <input id="dep" name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />
 
   <label for="ret">Return Date: (Whole year 2022 is acceptable)</label>
-  <input name="ret" type="date" min="2022-01-01" max="2022-12-31" />
+  <input id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
 </form>
diff --git a/live-examples/css-examples/pseudo-class/invalid.html b/live-examples/css-examples/pseudo-class/invalid.html
index b934fe391..2c78b4295 100644
--- a/live-examples/css-examples/pseudo-class/invalid.html
+++ b/live-examples/css-examples/pseudo-class/invalid.html
@@ -1,12 +1,12 @@
 <form>
   <label for="email">Email Address:</label>
-  <input name="email" type="email" value="na@me@example.com" />
+  <input id="email" name="email" type="email" value="na@me@example.com" />
 
   <label for="secret">Secret Code: (lower case letters)</label>
-  <input name="secret" type="text" value="test" pattern="[a-z]+" />
+  <input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
 
   <label for="age">Your age: (18+)</label>
-  <input name="age" type="number" value="5" min="18" />
+  <input id="age" name="age" type="number" value="5" min="18" />
 
   <label><input name="tos" type="checkbox" required checked /> - Do you agree to ToS?</label>
 </form>
diff --git a/live-examples/css-examples/pseudo-class/optional.html b/live-examples/css-examples/pseudo-class/optional.html
index 768dbfd62..d0d54f137 100644
--- a/live-examples/css-examples/pseudo-class/optional.html
+++ b/live-examples/css-examples/pseudo-class/optional.html
@@ -1,12 +1,12 @@
 <form>
   <label for="name">Name: <span class="req">*</span></label>
-  <input name="name" type="text" required />
+  <input id="name" name="name" type="text" required />
 
   <label for="birth">Date of Birth:</label>
-  <input name="birth" type="date" />
+  <input id="birth" name="birth" type="date" />
 
   <label for="origin">How did you find out about us? <span class="req">*</span></label>
-  <select name="origin" required>
+  <select id="origin" name="origin" required>
     <option>Google</option>
     <option>Facebook</option>
     <option>Advertisement</option>
diff --git a/live-examples/css-examples/pseudo-class/out-of-range.html b/live-examples/css-examples/pseudo-class/out-of-range.html
index 2a70b5e42..ca51d3831 100644
--- a/live-examples/css-examples/pseudo-class/out-of-range.html
+++ b/live-examples/css-examples/pseudo-class/out-of-range.html
@@ -1,10 +1,10 @@
 <form>
   <label for="amount">How many tickets? (You can buy 2-6 tickets)</label>
-  <input name="amount" type="number" min="2" max="6" value="4" />
+  <input id="amount" name="amount" type="number" min="2" max="6" value="4" />
 
   <label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>
-  <input name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />
+  <input id="dep" name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />
 
   <label for="ret">Return Date: (Whole year 2022 is acceptable)</label>
-  <input name="ret" type="date" min="2022-01-01" max="2022-12-31" />
+  <input id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
 </form>
diff --git a/live-examples/css-examples/pseudo-class/placeholder-shown.html b/live-examples/css-examples/pseudo-class/placeholder-shown.html
index c76866b1b..0ed8f5630 100644
--- a/live-examples/css-examples/pseudo-class/placeholder-shown.html
+++ b/live-examples/css-examples/pseudo-class/placeholder-shown.html
@@ -1,10 +1,10 @@
 <form>
   <label for="name">Full Name:</label>
-  <input name="name" type="text" />
+  <input id="name" name="name" type="text" />
 
   <label for="email">Email Address:</label>
-  <input name="email" type="email" placeholder="name@example.com" />
+  <input id="email" name="email" type="email" placeholder="name@example.com" />
 
   <label for="age">Your age:</label>
-  <input name="age" type="number" value="18" placeholder="You must be 18+" />
+  <input id="age" name="age" type="number" value="18" placeholder="You must be 18+" />
 </form>
diff --git a/live-examples/css-examples/pseudo-class/read-only.html b/live-examples/css-examples/pseudo-class/read-only.html
index c8f97715a..9f677f657 100644
--- a/live-examples/css-examples/pseudo-class/read-only.html
+++ b/live-examples/css-examples/pseudo-class/read-only.html
@@ -2,13 +2,13 @@
 
 <form>
   <label for="email">Email Address:</label>
-  <input name="email" type="email" value="test@example.com" />
+  <input id="email" name="email" type="email" value="test@example.com" />
 
   <label for="note">Short note about yourself:</label>
-  <textarea name="note">Don't be shy</textarea>
+  <textarea id="note" name="note">Don't be shy</textarea>
 
   <label for="pic">Your picture:</label>
-  <input name="pic" type="file" />
+  <input id="pic" name="pic" type="file" />
 
   <input type="submit" value="Submit form" />
 </form>
diff --git a/live-examples/css-examples/pseudo-class/read-write.html b/live-examples/css-examples/pseudo-class/read-write.html
index 50db91ab5..3c5b87150 100644
--- a/live-examples/css-examples/pseudo-class/read-write.html
+++ b/live-examples/css-examples/pseudo-class/read-write.html
@@ -2,13 +2,13 @@
 
 <form>
   <label for="email">Email Address:</label>
-  <input name="email" type="email" value="test@example.com" />
+  <input id="email" name="email" type="email" value="test@example.com" />
 
   <label for="note">Short note about yourself:</label>
-  <textarea name="note">Don't be shy</textarea>
+  <textarea id="note" name="note">Don't be shy</textarea>
 
   <label for="pic">Your picture:</label>
-  <input name="pic" type="file" />
+  <input id="pic" name="pic" type="file" />
 
   <input type="submit" value="Submit form" />
 </form>
diff --git a/live-examples/css-examples/pseudo-class/required.html b/live-examples/css-examples/pseudo-class/required.html
index 768dbfd62..d0d54f137 100644
--- a/live-examples/css-examples/pseudo-class/required.html
+++ b/live-examples/css-examples/pseudo-class/required.html
@@ -1,12 +1,12 @@
 <form>
   <label for="name">Name: <span class="req">*</span></label>
-  <input name="name" type="text" required />
+  <input id="name" name="name" type="text" required />
 
   <label for="birth">Date of Birth:</label>
-  <input name="birth" type="date" />
+  <input id="birth" name="birth" type="date" />
 
   <label for="origin">How did you find out about us? <span class="req">*</span></label>
-  <select name="origin" required>
+  <select id="origin" name="origin" required>
     <option>Google</option>
     <option>Facebook</option>
     <option>Advertisement</option>
diff --git a/live-examples/css-examples/pseudo-class/valid.html b/live-examples/css-examples/pseudo-class/valid.html
index b934fe391..2c78b4295 100644
--- a/live-examples/css-examples/pseudo-class/valid.html
+++ b/live-examples/css-examples/pseudo-class/valid.html
@@ -1,12 +1,12 @@
 <form>
   <label for="email">Email Address:</label>
-  <input name="email" type="email" value="na@me@example.com" />
+  <input id="email" name="email" type="email" value="na@me@example.com" />
 
   <label for="secret">Secret Code: (lower case letters)</label>
-  <input name="secret" type="text" value="test" pattern="[a-z]+" />
+  <input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
 
   <label for="age">Your age: (18+)</label>
-  <input name="age" type="number" value="5" min="18" />
+  <input id="age" name="age" type="number" value="5" min="18" />
 
   <label><input name="tos" type="checkbox" required checked /> - Do you agree to ToS?</label>
 </form>
diff --git a/live-examples/css-examples/pseudo-element/file-selector-button.html b/live-examples/css-examples/pseudo-element/file-selector-button.html
index 60c3be048..84ac7df8c 100644
--- a/live-examples/css-examples/pseudo-element/file-selector-button.html
+++ b/live-examples/css-examples/pseudo-element/file-selector-button.html
@@ -1,3 +1,3 @@
 <label for="avatar">Choose a profile picture:</label><br />
 
-<input type="file" name="avatar" accept="image/png, image/jpeg" />
+<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />
diff --git a/live-examples/css-examples/pseudo-element/placeholder.html b/live-examples/css-examples/pseudo-element/placeholder.html
index f71c37651..af3c977c9 100644
--- a/live-examples/css-examples/pseudo-element/placeholder.html
+++ b/live-examples/css-examples/pseudo-element/placeholder.html
@@ -1,3 +1,3 @@
 <label for="first-name">Your phone number:</label><br />
 
-<input type="tel" name="phone" minlength="9" maxlength="9" placeholder="It must be 9 digits" />
+<input id="first-name" type="tel" name="phone" minlength="9" maxlength="9" placeholder="It must be 9 digits" />
diff --git a/live-examples/html-examples/form-attributes/attribute-accept.html b/live-examples/html-examples/form-attributes/attribute-accept.html
index 4d5de2732..0f7a2d194 100644
--- a/live-examples/html-examples/form-attributes/attribute-accept.html
+++ b/live-examples/html-examples/form-attributes/attribute-accept.html
@@ -1,7 +1,7 @@
 <label for="movie">Choose a movie to upload:</label>
 
-<input type="file" name="movie" accept="video/*" />
+<input type="file" id="movie" name="movie" accept="video/*" />
 
 <label for="poster">Choose a poster:</label>
 
-<input type="file" name="poster" accept="image/png, image/jpeg" />
+<input type="file" id="poster" name="poster" accept="image/png, image/jpeg" />
diff --git a/live-examples/html-examples/form-attributes/attribute-disabled.html b/live-examples/html-examples/form-attributes/attribute-disabled.html
index fe5a76eec..e1639e024 100644
--- a/live-examples/html-examples/form-attributes/attribute-disabled.html
+++ b/live-examples/html-examples/form-attributes/attribute-disabled.html
@@ -1,16 +1,16 @@
 <form>
   <label for="name">Name:</label>
-  <input name="name" type="text" />
+  <input id="name" name="name" type="text" />
 
   <label for="emp">Employed:</label>
-  <select name="emp" disabled>
+  <select id="emp" name="emp" disabled>
     <option>No</option>
     <option>Yes</option>
   </select>
 
   <label for="empDate">Employment Date:</label>
-  <input name="empDate" type="date" disabled />
+  <input id="empDate" name="empDate" type="date" disabled />
 
   <label for="resume">Resume:</label>
-  <input name="resume" type="file" />
+  <input id="resume" name="resume" type="file" />
 </form>
diff --git a/live-examples/html-examples/form-attributes/attribute-max.html b/live-examples/html-examples/form-attributes/attribute-max.html
index d160b8395..4d96ad647 100644
--- a/live-examples/html-examples/form-attributes/attribute-max.html
+++ b/live-examples/html-examples/form-attributes/attribute-max.html
@@ -1,5 +1,5 @@
 <label for="bet">How much would you like to bet? (0-100)</label>
-<input name="bet" type="number" min="0" max="100" value="25" />
+<input id="bet" name="bet" type="number" min="0" max="100" value="25" />
 
 <label for="color">Which color do you choose?</label>
 <input id="color" name="color" type="range" min="0" max="360" />
diff --git a/live-examples/html-examples/form-attributes/attribute-maxlength.html b/live-examples/html-examples/form-attributes/attribute-maxlength.html
index cc2567dc3..4cefb54b4 100644
--- a/live-examples/html-examples/form-attributes/attribute-maxlength.html
+++ b/live-examples/html-examples/form-attributes/attribute-maxlength.html
@@ -1,5 +1,5 @@
 <label for="name">Product name:</label>
-<input name="name" type="text" value="Shampoo" minlength="3" maxlength="20" required />
+<input id="name" name="name" type="text" value="Shampoo" minlength="3" maxlength="20" required />
 
 <label for="description">Product description:</label>
-<textarea name="description" minlength="10" maxlength="40" required></textarea>
+<textarea id="description" name="description" minlength="10" maxlength="40" required></textarea>
diff --git a/live-examples/html-examples/form-attributes/attribute-min.html b/live-examples/html-examples/form-attributes/attribute-min.html
index d160b8395..43d7e367a 100644
--- a/live-examples/html-examples/form-attributes/attribute-min.html
+++ b/live-examples/html-examples/form-attributes/attribute-min.html
@@ -1,8 +1,8 @@
 <label for="bet">How much would you like to bet? (0-100)</label>
-<input name="bet" type="number" min="0" max="100" value="25" />
+<input id="bet" name="bet" type="number" min="0" max="100" value="25" />
 
 <label for="color">Which color do you choose?</label>
 <input id="color" name="color" type="range" min="0" max="360" />
 
 <label>Progress of the game:</label>
-<progress min="10" max="50" value="30"></progress>
+<progress max="50" value="30"></progress>
diff --git a/live-examples/html-examples/form-attributes/attribute-minlength.html b/live-examples/html-examples/form-attributes/attribute-minlength.html
index cc2567dc3..4cefb54b4 100644
--- a/live-examples/html-examples/form-attributes/attribute-minlength.html
+++ b/live-examples/html-examples/form-attributes/attribute-minlength.html
@@ -1,5 +1,5 @@
 <label for="name">Product name:</label>
-<input name="name" type="text" value="Shampoo" minlength="3" maxlength="20" required />
+<input id="name" name="name" type="text" value="Shampoo" minlength="3" maxlength="20" required />
 
 <label for="description">Product description:</label>
-<textarea name="description" minlength="10" maxlength="40" required></textarea>
+<textarea id="description" name="description" minlength="10" maxlength="40" required></textarea>
diff --git a/live-examples/html-examples/form-attributes/attribute-multiple.html b/live-examples/html-examples/form-attributes/attribute-multiple.html
index e06aa905a..91fe89451 100644
--- a/live-examples/html-examples/form-attributes/attribute-multiple.html
+++ b/live-examples/html-examples/form-attributes/attribute-multiple.html
@@ -1,15 +1,15 @@
 <label for="recipients">Where should we send the receipt?</label>
-<input name="recipients" type="email" multiple />
+<input id="recipients" name="recipients" type="email" multiple />
 
 <label for="shakes">Which shakes would you like to order?</label>
-<select name="shakes" multiple>
+<select id="shakes" name="shakes" multiple>
   <option>Vanilla Shake</option>
   <option>Strawberry Shake</option>
   <option>Chocolate Shake</option>
 </select>
 
 <label for="payment">How would you like to pay?</label>
-<select name="payment">
+<select id="payment" name="payment">
   <option>Credit card</option>
   <option>Bank Transfer</option>
 </select>
diff --git a/live-examples/html-examples/form-attributes/attribute-pattern.html b/live-examples/html-examples/form-attributes/attribute-pattern.html
index 3c34113c4..aa78b06ec 100644
--- a/live-examples/html-examples/form-attributes/attribute-pattern.html
+++ b/live-examples/html-examples/form-attributes/attribute-pattern.html
@@ -1,5 +1,5 @@
 <label for="username">Username: (3-16 characters)</label>
-<input name="username" type="text" value="Sasha" pattern="\w{3,16}" required />
+<input id="username" name="username" type="text" value="Sasha" pattern="\w{3,16}" required />
 
 <label for="pin">PIN: (4 digits)</label>
-<input name="pin" type="password" pattern="\d{4,4}" required />
+<input id="pin" name="pin" type="password" pattern="\d{4,4}" required />
diff --git a/live-examples/html-examples/form-attributes/attribute-readonly.html b/live-examples/html-examples/form-attributes/attribute-readonly.html
index 66765c6df..58b6f02b7 100644
--- a/live-examples/html-examples/form-attributes/attribute-readonly.html
+++ b/live-examples/html-examples/form-attributes/attribute-readonly.html
@@ -1,8 +1,8 @@
 <label for="firstName">First Name:</label>
-<input name="firstName" type="text" value="Adam" />
+<input id="firstName" name="firstName" type="text" value="Adam" />
 
 <label for="age">Age:</label>
-<input name="age" type="number" value="42" readonly />
+<input id="age" name="age" type="number" value="42" readonly />
 
 <label for="hobbies">Hobbies:</label>
-<textarea name="hobbies" readonly>Baseball</textarea>
+<textarea id="hobbies" name="hobbies" readonly>Baseball</textarea>
diff --git a/live-examples/html-examples/form-attributes/attribute-size.html b/live-examples/html-examples/form-attributes/attribute-size.html
index 567cbb9ae..8f835c530 100644
--- a/live-examples/html-examples/form-attributes/attribute-size.html
+++ b/live-examples/html-examples/form-attributes/attribute-size.html
@@ -1,11 +1,11 @@
 <label for="firstName">First Name:</label>
-<input name="firstName" type="text" size="10" />
+<input id="firstName" name="firstName" type="text" size="10" />
 
 <label for="lastName">Last Name:</label>
-<input name="lastName" type="text" size="20" />
+<input id="lastName" name="lastName" type="text" size="20" />
 
 <label for="fruit">Favourite fruit:</label>
-<select name="fruit" size="2">
+<select id="fruit" name="fruit" size="2">
   <option>Orange</option>
   <option>Banana</option>
   <option>Apple</option>
diff --git a/live-examples/html-examples/form-attributes/attribute-step.html b/live-examples/html-examples/form-attributes/attribute-step.html
index 29e8ccc47..b3ce3dfd3 100644
--- a/live-examples/html-examples/form-attributes/attribute-step.html
+++ b/live-examples/html-examples/form-attributes/attribute-step.html
@@ -1,8 +1,8 @@
 <label for="bet">How many copies do you need? (We sell in batches of 10)</label>
-<input name="bet" type="number" value="0" step="10" />
+<input id="bet" name="bet" type="number" value="0" step="10" />
 
 <label for="color">Which color would like to get?</label>
 <input id="color" name="color" type="range" min="0" max="360" step="60" />
 
 <label for="date">When would you like to come? (We work every second day)</label>
-<input name="date" type="date" step="2" />
+<input id="date" name="date" type="date" step="2" />
diff --git a/live-examples/html-examples/input/week.html b/live-examples/html-examples/input/week.html
index 955f07a2f..187660eab 100644
--- a/live-examples/html-examples/input/week.html
+++ b/live-examples/html-examples/input/week.html
@@ -1,3 +1,3 @@
-<label for="week">Choose a week in May or June:</label>
+<label for="camp-week">Choose a week in May or June:</label>
 
 <input type="week" name="week" id="camp-week" min="2018-W18" max="2018-W26" required />