HTML: Building Interactive Web Forms with the `label` Element

Forms are the backbone of interaction on the web. They allow users to input data, make choices, and submit information, enabling everything from simple contact forms to complex e-commerce platforms. While the “ element is the container, and elements like “, ``, and “ handle the data input, the `<label>` element plays a crucial, often overlooked, role in creating user-friendly and accessible forms. This tutorial will delve into the `<label>` element, exploring its functionality, best practices, and how it significantly enhances the user experience and accessibility of your web forms.</p> <h2>Why the `<label>` Element Matters</h2> <p>Before diving into the technical details, let’s understand why the `<label>` element is so important. Consider these key benefits:</p> <ul> <li><b>Accessibility:</b> The primary purpose of the `<label>` element is to improve accessibility, particularly for users with disabilities. Screen readers, used by visually impaired individuals, rely on the association between labels and form controls to announce the purpose of each input field. Without labels, or with improperly associated labels, the form becomes unusable.</li> <li><b>Usability:</b> Clicking on a label often activates its associated form control. For example, clicking the text “Email” could focus the email input field. This expands the clickable area, making forms easier to use, especially on touch devices.</li> <li><b>SEO:</b> While not a direct ranking factor, well-structured forms with semantic HTML, including labels, contribute to a better user experience, which Google values. This can indirectly improve your search engine optimization.</li> <li><b>Clarity:</b> Labels provide clear context to the user about what information is expected in each form field. This reduces confusion and improves the overall user experience, leading to higher form completion rates.</li> </ul> <h2>Basic Usage of the `<label>` Element</h2> <p>The `<label>` element is straightforward to use. The basic structure involves wrapping the text that describes the form control within the `<label>` tags and associating it with the control itself using the `for` attribute. This attribute must match the `id` attribute of the form control.</p> <p>Here’s a simple example:</p> <pre><code class="language-html" data-line=""><label for="name">Name:</label> <input type="text" id="name" name="name"></code></pre> <p>In this example:</p> <ul> <li>The `<label>` element contains the text “Name:”.</li> <li>The `for` attribute of the `<label>` is set to “name”.</li> <li>The “ element has an `id` attribute also set to “name”.</li> </ul> <p>This association tells the browser that the label “Name:” is associated with the text input field. Clicking on the text “Name:” will focus the text input field.</p> <h2>Different Form Control Types and Labeling</h2> <p>The `<label>` element can be used with various form control types. Let’s look at examples for common form elements:</p> <h3>Text Input</h3> <p>As shown in the basic example above, text inputs are easily labeled.</p> <pre><code class="language-html" data-line=""><label for="email">Email:</label> <input type="email" id="email" name="email"></code></pre> <h3>Textarea</h3> <p>Textareas, used for multi-line text input, are labeled in the same way.</p> <pre><code class="language-html" data-line=""><label for="message">Message:</label> <textarea id="message" name="message" rows="4" cols="50"></textarea></code></pre> <h3>Select</h3> <p>Labels for select dropdowns also follow the same pattern.</p> <pre><code class="language-html" data-line=""><label for="country">Country:</label> <select id="country" name="country"> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="uk">UK</option> </select></code></pre> <h3>Radio Buttons</h3> <p>Radio buttons require a slightly different approach. The label is typically placed *after* the radio button itself, and the `for` attribute of the label should match the `id` of the radio button. Because radio buttons share the same `name` attribute, the `id` is crucial for differentiating them for labeling. Also, placing the label *after* the radio button (or checkbox) allows for a larger clickable area.</p> <pre><code class="language-html" data-line=""><input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label></code></pre> <h3>Checkboxes</h3> <p>Checkboxes are labeled similarly to radio buttons.</p> <pre><code class="language-html" data-line=""><input type="checkbox" id="agree" name="agree" value="yes"> <label for="agree">I agree to the terms and conditions</label></code></pre> <h2>Common Mistakes and How to Fix Them</h2> <p>Even experienced developers can make mistakes when using `<label>` elements. Here are some common pitfalls and how to avoid them:</p> <h3>Incorrect `for` Attribute</h3> <p>The most frequent error is mismatching the `for` attribute in the `<label>` element with the `id` attribute of the associated form control. This breaks the association and renders the label ineffective. Always double-check that the values match exactly, including case sensitivity.</p> <p><b>Example of Incorrect Usage:</b></p> <pre><code class="language-html" data-line=""><label for="emailAddress">Email:</label> <input type="email" id="email" name="email"></code></pre> <p><b>Fix:</b> Correct the `for` attribute to match the `id` attribute of the input field.</p> <pre><code class="language-html" data-line=""><label for="email">Email:</label> <input type="email" id="email" name="email"></code></pre> <h3>Missing `id` Attribute</h3> <p>If the form control is missing the `id` attribute, there’s nothing for the `for` attribute to reference, and the label won’t be associated. Every form control that needs a label should have a unique `id`.</p> <p><b>Example of Incorrect Usage:</b></p> <pre><code class="language-html" data-line=""><label for="name">Name:</label> <input type="text" name="name"></code></pre> <p><b>Fix:</b> Add a unique `id` attribute to the input field.</p> <pre><code class="language-html" data-line=""><label for="name">Name:</label> <input type="text" id="name" name="name"></code></pre> <h3>Nested Labels (Less Common, But Important)</h3> <p>You can also nest the form control directly *inside* the `<label>` element. In this case, you don’t need the `for` attribute, as the association is implicit.</p> <p><b>Example of Nested Label:</b></p> <pre><code class="language-html" data-line=""><label> Name: <input type="text" name="name" id="name"> </label></code></pre> <p>While this is valid, it’s generally recommended to use the `for` and `id` attributes because it provides more flexibility and control over styling and layout. It also avoids potential issues with screen readers if the structure is not perfectly semantic.</p> <h3>Incorrect Placement of Labels</h3> <p>While the label text can be placed before or after the form control, the best practice is to place the label *before* the form control for text inputs, textareas, and selects. For radio buttons and checkboxes, place the label *after* the control. This is primarily for visual clarity and accessibility.</p> <p><b>Example of Incorrect Placement (Text Input):</b></p> <pre><code class="language-html" data-line=""><input type="text" id="email" name="email"> <label for="email">Email:</label></code></pre> <p><b>Fix:</b> Place the label *before* the text input.</p> <pre><code class="language-html" data-line=""><label for="email">Email:</label> <input type="text" id="email" name="email"></code></pre> <p><b>Example of Incorrect Placement (Radio Button):</b></p> <pre><code class="language-html" data-line=""><label for="male">Male</label> <input type="radio" id="male" name="gender" value="male"></code></pre> <p><b>Fix:</b> Place the label *after* the radio button.</p> <pre><code class="language-html" data-line=""><input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label></code></pre> <h2>Styling `<label>` Elements with CSS</h2> <p>CSS provides a powerful way to style `<label>` elements, improving the visual appeal and usability of your forms. You can customize the font, color, spacing, and other aspects to match your website’s design. Here are some common styling techniques:</p> <h3>Basic Styling</h3> <p>You can apply basic styles directly to the `<label>` element using CSS. For example, to change the font color and size:</p> <pre><code class="language-css" data-line="">label { color: #333; font-size: 16px; display: block; /* Important for spacing, especially with input on the next line */ margin-bottom: 5px; /* Adds space below the label */ }</code></pre> <p>The `display: block;` property is often useful to ensure that the label and the form control appear on separate lines, improving readability. The `margin-bottom` property adds space between the label and the input field.</p> <h3>Styling Labels Based on Form Control State</h3> <p>You can use CSS selectors to style labels based on the state of the associated form control. This can provide visual feedback to the user, enhancing the interaction.</p> <ul> <li><b>`:focus` pseudo-class:</b> Style the label when the associated input field has focus.</li> <li><b>`:valid` and `:invalid` pseudo-classes:</b> Style the label based on the validity of the input field (e.g., for email validation).</li> <li><b>`:checked` pseudo-class:</b> Style the label when a checkbox or radio button is checked.</li> </ul> <p><b>Example:</b></p> <pre><code class="language-css" data-line="">/* Style the label when the input has focus */ label:focus-within { font-weight: bold; color: #007bff; /* Example: highlight on focus */ } /* Style the label for invalid inputs */ input:invalid + label { color: red; } /* Style the label when a checkbox is checked */ input[type="checkbox"]:checked + label { font-weight: bold; }</code></pre> <p>In this example, the label’s font will turn bold and change color when the associated input field has focus. The label will turn red if the input field is invalid (e.g., an incorrect email format). If a checkbox is checked, the label will also become bold.</p> <h3>Using the Adjacent Sibling Selector (+)</h3> <p>The adjacent sibling selector (`+`) is crucial for styling labels based on the state of the *associated* input field. It selects an element that is directly preceded by another element. In the examples above, the `label` is the adjacent sibling of the `input` element.</p> <p><b>Important Note:</b> The adjacent sibling selector works *only* if the elements are siblings (share the same parent) and the label directly follows the input element in the HTML. This is why the correct HTML structure is vital for these CSS techniques to work.</p> <h3>Customization and Branding</h3> <p>You can further customize your labels to match your brand’s style. Experiment with:</p> <ul> <li><b>Font families:</b> Use your brand’s preferred font.</li> <li><b>Font weights:</b> Use bold or other weights for emphasis.</li> <li><b>Colors:</b> Use your brand’s color palette for a consistent look.</li> <li><b>Spacing:</b> Adjust padding and margins for optimal readability.</li> <li><b>Icons:</b> Add icons to labels using background images or pseudo-elements (e.g., `::before` or `::after`).</li> </ul> <p>Remember to test your form styling across different browsers and devices to ensure a consistent user experience.</p> <h2>Enhancing Accessibility Beyond Basic Labeling</h2> <p>While proper use of the `<label>` element is a huge step towards accessible forms, there are other considerations to enhance the experience for users with disabilities:</p> <ul> <li><b>ARIA Attributes:</b> Use ARIA (Accessible Rich Internet Applications) attributes to provide additional information to screen readers. For example, `aria-label` can be used to provide a descriptive label when a visible label is not present. This is rare, but can be helpful.</li> <li><b>Keyboard Navigation:</b> Ensure that form controls can be accessed and interacted with using the keyboard. The tab order should be logical, and focus should be clearly indicated (e.g., with a focus outline).</li> <li><b>Error Handling:</b> Provide clear and concise error messages when form validation fails. Associate error messages with the relevant input fields using the `aria-describedby` attribute.</li> <li><b>Contrast Ratios:</b> Ensure sufficient contrast between text and background colors to make the form readable for users with visual impairments.</li> <li><b>Testing:</b> Regularly test your forms with screen readers and keyboard navigation to identify and fix any accessibility issues. Use accessibility testing tools (e.g., WAVE, Axe) to automate some of the testing process.</li> </ul> <h2>Key Takeaways</h2> <ul> <li>The `<label>` element is essential for creating accessible and user-friendly web forms.</li> <li>The `for` attribute of the `<label>` must match the `id` attribute of the associated form control.</li> <li>Proper labeling improves accessibility, usability, and SEO.</li> <li>Use CSS to style labels and provide visual feedback to users.</li> <li>Consider other accessibility best practices, such as ARIA attributes and keyboard navigation.</li> </ul> <h2>FAQ</h2> <h3>1. What happens if I don’t use `<label>` elements?</h3> <p>Without `<label>` elements, your forms will be significantly less accessible to users with disabilities. Screen readers won’t be able to announce the purpose of each input field, making the form unusable for many users. Also, clicking the text associated with an input field won’t automatically focus the field, making the form less user-friendly.</p> <h3>2. Can I use the `<label>` element with all form controls?</h3> <p>Yes, you can and should use the `<label>` element with all form controls that require a label, including text inputs, textareas, selects, radio buttons, and checkboxes. The method of associating the label with the control (using `for` and `id` or nesting) may vary slightly depending on the control type.</p> <h3>3. What is the difference between the `for` attribute and the `id` attribute?</h3> <p>The `for` attribute is used in the `<label>` element to specify which form control the label is associated with. Its value must match the `id` attribute of the form control. The `id` attribute is a unique identifier assigned to the form control. It allows the browser to link the label to the control and for CSS and JavaScript to target the element.</p> <h3>4. How can I test if my labels are working correctly?</h3> <p>The easiest way to test your labels is to:</p> <ol> <li>Click on the label text. The associated input field should gain focus (e.g., the cursor should appear in the text input).</li> <li>Use a screen reader (e.g., NVDA, VoiceOver) to navigate the form. The screen reader should announce the label text when focusing on each form control.</li> <li>Use keyboard navigation (Tab key) to move through the form. The focus should clearly move between form controls, and the labels should be easily associated with the controls.</li> </ol> <h3>5. Are there any performance implications of using `<label>` elements?</h3> <p>No, there are no significant performance implications of using `<label>` elements correctly. The impact on page load times and rendering performance is negligible. The benefits in terms of accessibility and usability far outweigh any minor performance considerations. The main performance considerations should be in writing efficient CSS and HTML, and not in the use of the `<label>` element itself.</p> <p>Mastering the `<label>` element is a fundamental step in building web forms that are accessible, usable, and user-friendly. By understanding its purpose, correct usage, and styling techniques, you can significantly improve the user experience and ensure that your forms are inclusive to everyone. From the initial design to the final deployment, prioritize the `<label>` element, and you’ll be well on your way to creating web forms that are both effective and enjoyable to use. The careful association of labels with input fields not only enhances the user experience, but it also reflects a commitment to web accessibility, ensuring that your digital creations are accessible to the widest possible audience.</p> <div class="wpzoom-social-sharing-buttons-bottom"><div class="wp-block-wpzoom-blocks-social-sharing align-left" style="text-align:left;"><ul class="social-sharing-icons"><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-facebook" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#0866FF;" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F&t=HTML%3A+Building+Interactive+Web+Forms+with+the+%60label%60+Element" title="Facebook" target="_blank" rel="noopener noreferrer" data-platform="facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Facebook</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-x" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#000000;" href="https://x.com/intent/tweet?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F&text=HTML%3A+Building+Interactive+Web+Forms+with+the+%60label%60+Element" title="Share on X" target="_blank" rel="noopener noreferrer" data-platform="x"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Share on X</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-threads" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#000000;" href="https://threads.net/intent/post?text=HTML%3A+Building+Interactive+Web+Forms+with+the+%60label%60+Element+https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F" title="Threads" target="_blank" rel="noopener noreferrer" data-platform="threads"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Threads</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-linkedin" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#0966c2;" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F" title="LinkedIn" target="_blank" rel="noopener noreferrer" data-platform="linkedin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">LinkedIn</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-pinterest" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#E60023;" href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F&media=&description=HTML%3A+Building+Interactive+Web+Forms+with+the+%60label%60+Element" title="Pinterest" target="_blank" rel="noopener noreferrer" data-platform="pinterest" data-pin-custom="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Pinterest</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-reddit" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#FF4500;" href="https://www.reddit.com/submit?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F&title=HTML%3A+Building+Interactive+Web+Forms+with+the+%60label%60+Element" title="Reddit" target="_blank" rel="noopener noreferrer" data-platform="reddit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z"></path></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Reddit</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-telegram" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#0088cc;" href="https://t.me/share/url?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F&text=HTML%3A+Building+Interactive+Web+Forms+with+the+%60label%60+Element" title="Telegram" target="_blank" rel="noopener noreferrer" data-platform="telegram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Telegram</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-whatsapp" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#25D366;" href="https://api.whatsapp.com/send?text=HTML%3A+Building+Interactive+Web+Forms+with+the+%60label%60+Element+https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F" title="WhatsApp" target="_blank" rel="noopener noreferrer" data-platform="whatsapp"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">WhatsApp</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-bluesky" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#1DA1F2;" href="https://bsky.app/intent/compose?text=HTML%3A+Building+Interactive+Web+Forms+with+the+%60label%60+Element+https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F" title="Bluesky" target="_blank" rel="noopener noreferrer" data-platform="bluesky"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Bluesky</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-email" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#333333;" href="mailto:?subject=HTML%3A+Building+Interactive+Web+Forms+with+the+%60label%60+Element&body=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-building-interactive-web-forms-with-the-label-element%2F" title="Email" target="_blank" rel="noopener noreferrer" data-platform="email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-.4 4.25l-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25c-.25-.16-.4-.43-.4-.72 0-.67.73-1.07 1.3-.72L12 11l6.7-4.19c.57-.35 1.3.05 1.3.72 0 .29-.15.56-.4.72z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Email</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-copy-link" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#333333;" href="#copy-link" title="Copy Link" data-platform="copy-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Copy Link</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-print" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#333333;" href="#print" title="Print" data-platform="print"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Print</span></a></li></ul><script> document.addEventListener("DOMContentLoaded", function() { var copyLinks = document.querySelectorAll("a[data-platform='copy-link']"); copyLinks.forEach(function(link) { if (link.hasAttribute("data-listener-added")) return; link.setAttribute("data-listener-added", "true"); link.addEventListener("click", function(e) { e.preventDefault(); var tempInput = document.createElement("input"); tempInput.value = window.location.href; document.body.appendChild(tempInput); tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput); var originalText = this.querySelector(".social-sharing-icon-label")?.textContent || ""; var originalTitle = this.getAttribute("title"); var originalIcon = this.querySelector("svg").outerHTML; // Show success feedback this.setAttribute("title", "Copied!"); this.classList.add("copied"); if (this.querySelector(".social-sharing-icon-label")) { this.querySelector(".social-sharing-icon-label").textContent = "Copied!"; } else { this.querySelector("svg").outerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" /></svg>'; } var self = this; setTimeout(function() { self.setAttribute("title", originalTitle); self.classList.remove("copied"); if (self.querySelector(".social-sharing-icon-label")) { self.querySelector(".social-sharing-icon-label").textContent = originalText; } else { self.querySelector("svg").outerHTML = originalIcon; } }, 2000); }); }); }); </script><script> document.addEventListener("DOMContentLoaded", function() { var printLinks = document.querySelectorAll("a[data-platform='print']"); printLinks.forEach(function(link) { if (link.hasAttribute("data-listener-added")) return; link.setAttribute("data-listener-added", "true"); link.addEventListener("click", function(e) { e.preventDefault(); window.print(); }); }); }); </script></div></div></div> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> <div class="taxonomy-post_tag is-style-post-terms-1 is-style-post-terms-1--2 wp-block-post-terms"><a href="https://webdevfundamentals.com/tag/accessibility/" rel="tag">Accessibility</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/css/" rel="tag">CSS</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/forms/" rel="tag">Forms</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/html/" rel="tag">HTML</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/labels/" rel="tag">Labels</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/usability/" rel="tag">usability</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/web-development/" rel="tag">web development</a></div> </div> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow" style="margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);"> <nav class="wp-block-group alignwide is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-878fe601 wp-block-group-is-layout-flex" aria-label="Post navigation" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"> <div class="post-navigation-link-previous wp-block-post-navigation-link"><span class="wp-block-post-navigation-link__arrow-previous is-arrow-arrow" aria-hidden="true">←</span><a href="https://webdevfundamentals.com/html-building-interactive-web-tables-with-the-and-related-elements/" rel="prev">HTML: Building Interactive Web Tables with the “ and Related Elements</a></div> <div class="post-navigation-link-next wp-block-post-navigation-link"><a href="https://webdevfundamentals.com/html-building-interactive-web-dashboards-with-semantic-elements/" rel="next">HTML: Building Interactive Web Dashboards with Semantic Elements</a><span class="wp-block-post-navigation-link__arrow-next is-arrow-arrow" aria-hidden="true">→</span></div> </nav> </div> </div> <div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> <h2 class="wp-block-heading alignwide has-small-font-size" style="font-style:normal;font-weight:700;letter-spacing:1.4px;text-transform:uppercase">More posts</h2> <div class="wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow"> <ul class="alignfull wp-block-post-template is-layout-flow wp-container-core-post-template-is-layout-b4d04ffe wp-block-post-template-is-layout-flow"><li class="wp-block-post post-1403 post type-post status-publish format-standard hentry category-web-development"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cba70755 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/svelte-5-runes-the-definitive-guide-to-modern-reactivity/" target="_self" >Svelte 5 Runes: The Definitive Guide to Modern Reactivity</a></h3> <div class="has-text-align-right wp-block-post-date"><a href="https://webdevfundamentals.com/svelte-5-runes-the-definitive-guide-to-modern-reactivity/"><time datetime="2026-04-04T11:47:59+00:00">April 4, 2026</time></a></div> </div> </li><li class="wp-block-post post-1402 post type-post status-publish format-standard hentry category-web-development"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cba70755 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/mastering-svelte-actions-the-ultimate-guide-to-custom-dom-logic/" target="_self" >Mastering Svelte Actions: The Ultimate Guide to Custom DOM Logic</a></h3> <div class="has-text-align-right wp-block-post-date"><a href="https://webdevfundamentals.com/mastering-svelte-actions-the-ultimate-guide-to-custom-dom-logic/"><time datetime="2026-04-04T11:42:58+00:00">April 4, 2026</time></a></div> </div> </li><li class="wp-block-post post-1401 post type-post status-publish format-standard hentry category-web-development"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cba70755 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/mastering-svelte-5-runes-the-future-of-reactive-state-management/" target="_self" >Mastering Svelte 5 Runes: The Future of Reactive State Management</a></h3> <div class="has-text-align-right wp-block-post-date"><a href="https://webdevfundamentals.com/mastering-svelte-5-runes-the-future-of-reactive-state-management/"><time datetime="2026-04-04T11:38:03+00:00">April 4, 2026</time></a></div> </div> </li><li class="wp-block-post post-1398 post type-post status-publish format-standard hentry category-web-development"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cba70755 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/mastering-svelte-stores-the-ultimate-guide-to-state-management/" target="_self" >Mastering Svelte Stores: The Ultimate Guide to State Management</a></h3> <div class="has-text-align-right wp-block-post-date"><a href="https://webdevfundamentals.com/mastering-svelte-stores-the-ultimate-guide-to-state-management/"><time datetime="2026-04-04T11:28:00+00:00">April 4, 2026</time></a></div> </div> </li></ul> </div> </div> </main> <footer class="wp-block-template-part"> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow"><div class="is-default-size wp-block-site-logo"><a href="https://webdevfundamentals.com/" class="custom-logo-link" rel="home"><img width="390" height="260" src="https://webdevfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_12__2026__08_35_12_PM-removebg-preview-edited.png" class="custom-logo" alt="WebDevFundamentals Site Logo" decoding="async" fetchpriority="high" srcset="https://webdevfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_12__2026__08_35_12_PM-removebg-preview-edited.png 390w, https://webdevfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_12__2026__08_35_12_PM-removebg-preview-edited-300x200.png 300w" sizes="(max-width: 390px) 100vw, 390px" /></a></div> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-cf54d0a6 wp-block-group-is-layout-flex"> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"><p class="wp-block-site-tagline">From Fundamentals to Real-World Web Apps.</p></div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div> </div> </div> </div> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-2ab8c7fb wp-block-group-is-layout-flex"> <p class="has-small-font-size wp-block-paragraph">© 2026 • WebDevFundamentals</p> <p class="has-small-font-size wp-block-paragraph">Inquiries: <strong><a href="mailto:admin@codingeasypeasy.com">admin@webdevfundamentals.com</a></strong></p> </div> </div> </div> </footer> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyfive/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <div class="wp-dark-mode-floating-switch wp-dark-mode-ignore wp-dark-mode-animation wp-dark-mode-animation-bounce " style="right: 10px; bottom: 10px;"> <!-- call to action --> <div class="wp-dark-mode-switch wp-dark-mode-ignore " tabindex="0" role="switch" aria-label="Dark Mode Toggle" aria-checked="false" data-style="1" data-size="1" data-text-light="" data-text-dark="" data-icon-light="" data-icon-dark=""></div></div><script data-wp-router-options="{"loadOnClientNavigation":true}" fetchpriority="low" id="@wordpress/block-library/navigation/view-js-module" src="https://webdevfundamentals.com/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=96a846e1d7b789c39ab9" type="module"></script> <!-- Koko Analytics v2.4.0 - https://www.kokoanalytics.com/ --> <script> (()=>{var e=window.koko_analytics,c=["utm_source","utm_medium","utm_campaign"];function d(){let t={},a=new URLSearchParams(window.location.search),s=new URLSearchParams(window.location.hash.substring(1));return c.forEach(i=>{let n=a.get(i)||s.get(i);n&&(t[i]=n)}),t}e.trackPageview=function(t,a){if(/bot|crawl|spider|seo|lighthouse|facebookexternalhit|preview|prerender/i.test(navigator.userAgent)||window._phantom||window.__nightmare||window.navigator.webdriver||window.Cypress){console.debug("Koko Analytics: Ignoring call to trackPageview because user agent is a bot or this is a headless browser.");return}navigator.sendBeacon(e.url,new URLSearchParams({action:"koko_analytics_collect",pa:t,po:a,r:document.referrer.indexOf(e.site_url)==0?"":document.referrer,m:e.use_cookie?"c":e.method[0],...d()}))};function o(){e.trackPageview(e.path,e.post_id)}function r(){e.autotracked||(o(),e.autotracked=!0)}document.visibilityState==="hidden"||document.visibilityState==="prerender"?document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&r()}):r();window.addEventListener("pageshow",t=>{t.persisted&&o()});})(); </script> <script>document.addEventListener("DOMContentLoaded", function() { // ---------- CONFIG ---------- const MONETAG_URL = "https://omg10.com/4/10781348"; const STORAGE_KEY = "monetagLastShown"; const COOLDOWN = 24*60*60*1000; // 24 hours // ---------- CREATE MODAL HTML ---------- const modalHTML = ` <div id="monetagModal" style=" position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:9999; visibility:hidden; opacity:0; transition: opacity 0.3s ease; "> <div style=" background:#fff; padding:25px; border-radius:10px; max-width:400px; text-align:center; box-shadow:0 4px 15px rgba(0,0,0,0.3); "> <h2>Welcome! 👋</h2> <p>Thanks for visiting! Before you continue, click the button below to unlock exclusive content and surprises just for you.</p> <button class="monetagBtn" style=" padding:10px 20px; background:#dc3545; color:#fff; border:none; border-radius:5px; cursor:pointer; margin-top:15px; ">Not Now</button> <button class="monetagBtn" style=" padding:10px 20px; background:#ff5722; color:#fff; border:none; border-radius:5px; cursor:pointer; margin-top:15px; ">Continue</button> </div> </div> `; document.body.insertAdjacentHTML("beforeend", modalHTML); // ---------- GET ELEMENTS ---------- const modal = document.getElementById("monetagModal"); const buttons = document.querySelectorAll(".monetagBtn"); // ---------- SHOW MODAL ON PAGE LOAD ---------- window.addEventListener("load", function(){ modal.style.visibility = "visible"; modal.style.opacity = "1"; }); // ---------- CHECK 24H COOLDOWN ---------- function canShow() { const last = localStorage.getItem(STORAGE_KEY); return !last || (Date.now() - parseInt(last)) > COOLDOWN; } // ---------- TRIGGER MONETAG ---------- buttons.forEach(btn => { btn.addEventListener("click", function(){ if(canShow()){ localStorage.setItem(STORAGE_KEY, Date.now()); window.open(MONETAG_URL,"_blank"); } // hide modal after click modal.style.opacity = "0"; setTimeout(()=>{ modal.style.visibility="hidden"; },300); }); }); });</script><script id="prismatic-prism-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/prism-core.js?ver=3.7.5"></script> <script id="prismatic-prism-toolbar-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-toolbar.js?ver=3.7.5"></script> <script id="prismatic-prism-line-highlight-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-line-highlight.js?ver=3.7.5"></script> <script id="prismatic-prism-line-numbers-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-line-numbers.js?ver=3.7.5"></script> <script id="prismatic-copy-clipboard-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-copy-clipboard.js?ver=3.7.5"></script> <script id="prismatic-command-line-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-command-line.js?ver=3.7.5"></script> <script id="prismatic-prism-css-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/lang-css.js?ver=3.7.5"></script> <script id="zoom-social-icons-widget-frontend-js" src="https://webdevfundamentals.com/wp-content/plugins/social-icons-widget-by-wpzoom/assets/js/social-icons-widget-frontend.js?ver=1780124698"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://webdevfundamentals.com/wp-includes/js/wp-emoji-release.min.js?ver=7.0"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://webdevfundamentals.com/wp-includes/js/wp-emoji-loader.min.js </script> <script> (function() { function applyScrollbarStyles() { if (!document.documentElement.hasAttribute('data-wp-dark-mode-active')) { document.documentElement.style.removeProperty('scrollbar-color'); return; } document.documentElement.style.setProperty('scrollbar-color', '#2E334D #1D2033', 'important'); // Find and remove dark mode engine scrollbar styles. var styles = document.querySelectorAll('style'); styles.forEach(function(style) { if (style.id === 'wp-dark-mode-scrollbar-custom') return; if (style.textContent && style.textContent.indexOf('::-webkit-scrollbar') !== -1 && style.textContent.indexOf('#1D2033') === -1) { style.textContent = style.textContent.replace(/::-webkit-scrollbar[^}]*\{[^}]*\}/g, ''); style.textContent = style.textContent.replace(/::-webkit-scrollbar-track[^}]*\{[^}]*\}/g, ''); style.textContent = style.textContent.replace(/::-webkit-scrollbar-thumb[^{]*\{[^}]*\}/g, ''); style.textContent = style.textContent.replace(/::-webkit-scrollbar-corner[^}]*\{[^}]*\}/g, ''); } }); // Inject our styles. var existing = document.getElementById('wp-dark-mode-scrollbar-custom'); if (!existing) { var customStyle = document.createElement('style'); customStyle.id = 'wp-dark-mode-scrollbar-custom'; customStyle.textContent = '::-webkit-scrollbar { width: 12px !important; height: 12px !important; background: #1D2033 !important; }' + '::-webkit-scrollbar-track { background: #1D2033 !important; }' + '::-webkit-scrollbar-thumb { background: #2E334D !important; border-radius: 6px; }' + '::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }' + '::-webkit-scrollbar-corner { background: #1D2033 !important; }'; document.body.appendChild(customStyle); } } // Listen for dark mode changes. document.addEventListener('wp_dark_mode', function(e) { setTimeout(applyScrollbarStyles, 100); setTimeout(applyScrollbarStyles, 500); setTimeout(applyScrollbarStyles, 1000); }); // Observe attribute changes. var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName === 'data-wp-dark-mode-active') { var existing = document.getElementById('wp-dark-mode-scrollbar-custom'); if (existing && !document.documentElement.hasAttribute('data-wp-dark-mode-active')) { existing.remove(); } setTimeout(applyScrollbarStyles, 100); setTimeout(applyScrollbarStyles, 500); } }); }); observer.observe(document.documentElement, { attributes: true }); // Initial apply. setTimeout(applyScrollbarStyles, 100); setTimeout(applyScrollbarStyles, 500); setTimeout(applyScrollbarStyles, 1000); })(); </script> </body> </html>