Feed the system with the raw codes (72lines) given below:
<!DOCTYPE html> <html> <head> <title>Log-in Window</title> <style> /* Add some basic styling to make the log-in window look decent */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; } .log-in-window { width: 300px; margin: 50px auto; padding: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .log-in-window h2 { text-align: center; } .log-in-window form { margin-top: 20px; } .log-in-window label { display: block; margin-bottom: 10px; } .log-in-window input[type="text"], .log-in-window input[type="password"] { width: 100%; height: 40px; margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .log-in-window input[type="submit"] { width: 100%; height: 40px; background-color: #4CAF50; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; } .log-in-window input[type="submit"]:hover { background-color: #3e8e41; } </style> </head> <body> <div class="log-in-window"> <h2>Log-in</h2> <form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <input type="submit" value="Log-in"> </form> </div> </body> </html>
The code as given or shown tells a lot and has been one of the best login codes in or using the HTML feature. In addition, the code creates a basic log-in window with a form containing fields for username and password as well. Also, added with a submit button.
Brief Explanation:
- We’ve started by defining the basic structure of the HTML document, which is the first and foremost feature to use.
- In addition, we added some basic styling to make the log-in window look decent.
- Not forgetting a container element which should be created, that <div> with a class of log-in-window. This holds the log-in form. One of the purposes of a class and a container.
- Note that inside the container, we added a heading, that is <h2> to display the title of the log-in window.
- However, a form element was also created, <form>, which holds the input field and as well as the submit button.
- Finally, the label and input fields for the username and password and submit. CSS style was added to the log-in window and its element.
Note that this is just the basic example, there are lots of advanced features to be added.
About Author
Discover more from SURFCLOUD TECHNOLOGY
Subscribe to get the latest posts sent to your email.
