fix(html): provide corresponding 'id's for 'for' attributes on <label…

…> tags (#2678)

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>

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>

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>

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>

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@[email protected]" />
+  <input id="email" name="email" type="email" value="na@[email protected]" />
 
   <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>

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>

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>

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="[email protected]" />
+  <input id="email" name="email" type="email" placeholder="[email protected]" />
 
   <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>

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="[email protected]" />
+  <input id="email" name="email" type="email" value="[email protected]" />
 
   <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>

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="[email protected]" />
+  <input id="email" name="email" type="email" value="[email protected]" />
 
   <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>

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>

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@[email protected]" />
+  <input id="email" name="email" type="email" value="na@[email protected]" />
 
   <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>

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" />

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" />

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" />

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>

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" />

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>

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>

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>

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>

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 />

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>

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>

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" />

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 />