Computer scienceFrontendHTMLForms

HTML5 forms validation

Theory

Apply validation

Report a typo

The year is 2050, and everything in the world is entirely digital. But, in order to create, manage, and automate workflows, there is still a need for a front-end developer at a firm called Beta. Your task is to create a form as displayed below for the Beta company's job listing website. Make sure the form has been validated on the client side.

Make sure to follow the notes below:

  • The date of birth of an applicant should be in the range of 2020-01-31 to 2022-10-15.

  • The minimum experience required for the vacant position is 5 years.

  • It is mandatory to upload proof of work for an applicant.

The rendered form with vary of inputs and submit button

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>Forms and validation</title>
</head>
<body>
<form action="">
<input id="name" /><br /><br />
<input id="emails" /><br /><br />
<label for="contact">Contact no.:</label>
<input type="number" id="number" /><br /><br />
<input type="date" id="dob"/><br /><br />
<input type="number" id="experience" /><br /><br />
<label for="pow">Proof of work:</label>
<input type="file" id="pow" /><br /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>

Completed 1 of 10
Create a label for name input field.
Add type validation to the name input field.
___

Create a free account to access the full topic