How can JavaScript be used for Progressive Enhancement in radio button selection?
When using radio buttons for selection in a form, JavaScript can be used for Progressive Enhancement by adding functionality that enhances the user experience without relying on JavaScript. This can be achieved by first setting up the form to function without JavaScript, and then using JavaScript to add additional features such as real-time validation or dynamic updates. ```html <!-- HTML code for radio button selection --> <form> <input type="radio" name="color" value="red">Red <input type="radio" name="color" value="blue">Blue <input type="radio" name="color" value="green">Green </form> <!-- JavaScript code for Progressive Enhancement --> <script> // Add event listeners to radio buttons for enhanced functionality document.querySelectorAll('input[type="radio"]').forEach(radio => { radio.addEventListener('change', () => { console.log(`Selected color: ${radio.value}`); // Add additional functionality here }); }); </script> ```
Related Questions
- How can PHP scripts be optimized for handling image uploads, file extensions, and data storage in a database?
- How can the error "Commands out of sync; you can't run this command now" be addressed when using mysqli in PHP?
- What are the advantages and disadvantages of using CURLOPT_RETURNTRANSFER versus CURLOPT_WRITEFUNCTION in cURL execution in PHP?