<!DOCTYPE html> <body> <head> <style> html, body { height: 100%; } html { display: table; margin: auto; font-family: "Metropolis", sans-serif; } body { display: table-cell; vertical-align: middle; background: #182239; color: #d4def7; } input { width: 100%; box-sizing: border-box; line-height: 1.5; background: #121a2b; border-radius: 3px; border: 0px solid transparent; color: #d4def7; padding: 0.5em 0.8em; height: 2.5rem; line-height: 1.5; background: #121a2b; width: 100%; display: block; } a{ display: block; color: #DDE7F5; text-decoration:underline; } </style> </head> <h2>WIFI Configuration</h2> <a href="#">Refresh</a> <form> <div class="wifi-list"> <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br> <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br> <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br> <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br> <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br> <a href="#" onclick="fillSSID(this.innerHTML)">WifiName</a><br> </div> <div class="wifi-form"> <input id="wifi-ssid" type="text"><br> <input id="password" type="text"><br> <input type="submit" value="Connect"> </div> </form> <script> function fillSSID(value) { document.getElementById("wifi-ssid").value = value; } </script> </body>