Text Input
input.html
<!DOCTYPE html> <html> <head> <title>Getting Input</title> <link rel="stylesheet" type="text/css" href="input.css"> </head> <body> <form method="get"> <table> <tr> <td>Username:</td> <td><input type="text" name="uname" id="txtUsername" value="Minecrafter"></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="pword" id="txtPassword" value="Fortnite"></td> </tr> <tr> <td colspan=2> <input type="button" value="Check" onclick="validate()"> <input type="reset"> <input type="submit" value="Login"> </td> </tr> <tr> <td colspan=2 id="status"></td> </tr> </table> </form> <br> <script src="input.js"></script> </body> </html>
input.css
body{ background-color: ghostwhite; } table { border-collapse: collapse; } td { border: 3px solid #778899; text-align: left; padding: 5px; } tr:nth-child(even) { background-color: lavenderblush; }
input.js
function validate(){ var username = document.getElementById("txtUsername").value; var password = document.getElementById("txtPassword").value; var feedback = ""; if (username != "Minecrafter"){ feedback = feedback + "Username is incorrect.<br>"; document.getElementById("status").style.color = "red"; } if (password != "Fortnite"){ feedback = feedback + "Password is incorrect.<br>"; document.getElementById("status").style.color = "red"; } if (feedback == ""){ feedback = "Everything seems fine.<br>" document.getElementById("status").style.color = "green"; } document.getElementById("status").innerHTML = feedback; }
- the CSS for this task uses
tr:nth-child(even)
to style every second row.. how does this improve the 'readability' of the table? - look at the HTML table in the source. What is the difference between
tr
andtd
? How doescolspan
work? - the
getElementById()
method looks for a corresponding, unique ID on the page. This is the most common used method in the HTML DOM. In this example I am using it to changeinnerHTML
as well asstyle.color
. Can you change the current values to something else? - Look at the CSS source. Explain the concept of padding using the CSS box model.