<!DOCTYPE HTML> <html lang="en-PH"> <head> <meta charset="utf-8"> <title>Websocket Client</title> <style> form { margin: 2em 0; } fieldset { display: contents; } legend { position: absolute; left: -999999px; } legend ~ div { margin: 0.5em 0; } legend ~ div > div { display: flex; gap: 0.5em; } legend ~ div > div :first-child { flex: auto; } legend ~ div > div :first-child > label { display: block; width: 100%; } legend ~ div > div :first-child > label > input { display: block; width: 100%; box-sizing: border-box; } label { position: relative; } label > span { position: absolute; left: -999999px; } label + input[type="checkbox"] { position: absolute; left: -999999px; } textarea { width: 100%; box-sizing: border-box; display: block; } </style> </head> <body> <h1>Websocket Client</h1> <form id="formConnection" > <fieldset> <legend>Server</legend> <div> <div> <div> <label> <span>URL</span> <input type="url" name="serverUrl" autocomplete="off" value="ws://localhost:42069" required > </label> </div> </div> </div> <div> <div> <div> <label> <span>Username</span> <input type="text" name="username" autocomplete="off" value="Web" required > </label> </div> </div> </div> <button type="submit" name="connect" > Connect </button> </fieldset> </form> <form id="formMessage" > <fieldset name="fieldset" disabled > <legend>Message</legend> <div> <div> <div> <label> <span>Message</span> <input type="text" value="" autocomplete="off" name="message" placeholder="Type your message" > </label> <input type="checkbox" name="binary" readonly tabindex="-1" /> </div> <button type="submit" > Send as Text (Enter) </button> <button name="submitBinary" type="button" > Send as Binary (Shift + Enter) </button> </div> </div> </fieldset> </form> <form id="formLogs" > <fieldset> <legend>Logs</legend> <div> <label> <span>Logs</span> <textarea rows="10" cols="50" name="logs" readonly ></textarea> </label> </div> <button type="submit" > Clear Logs </button> </fieldset> </form> <script src="index.js"></script> </body> </html>