Computer scienceFrontendHTMLForms

HTML5 forms validation

Theory

Create the form

Report a typo

As shown in the images below, the form displays some feedback regarding the user inputs after client-side validation. Modify the code below so that the form passes all validation checks and the feedback messages do not appear after applying validation.

The form with Username text field and notification about that the length of the inputted text is needed to be 8 or moreThe form with username and password fields with the notification at the last about that the password should contain only 15 capital letters

Write HTML and CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create form and add validations</title>
</head>
<body>
<form action="">
<label for="username">Username:</label>
<input
type="text"
id="username"/><br /><br />
<label for="password">Password:</label>
<input
type="password"
id="password"
title="Password should contain only 15 capital letters. "
/><br /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>

Completed 1 of 3
Add validation for username input type.
Add validation for password input type.
___

Create a free account to access the full topic