Computer scienceFrontendHTMLForms

More input attributes

Theory

University form

Report a typo

A university is organizing an event for its students. You are an organizer of the event and, to know the number and data of the participants, you have to create an HTML form as shown below. Consider the following:

  • Add two break tags after each input element to generate the same results as in the image below (not mandatory).

  • The students born before 1990-01-01 are not allowed to participate in the event.

  • The students must be able to attach their university records for the previous 2 years, which means multiple files are supported.

  • The username must be of 5 characters, only uppercase and lowercase alphabet.

  • The pattern of the password must be numbers only: first four numbers in the range of 0 to 9, the next two numbers in the range of 5-9, and the last four numbers in the range of 2-9.

Rendered HTML form with the fields – name, email, date of birth, username, attach your file, password and the 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</title>
</head>
<body>
<form action="">
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<label for="email">Email:</label>
<input type="email" name="email" id="email" />
<label for="dob">Date of Birth:</label>
<input type="date" name="date" id="date" />
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<label for="files">Attach your file:</label>
<input type="file" name="file" id="files" />
<label for="password">Password:</label>
<input type="password" name="password" id="password"/>
<button type="submit">Submit</button>
</form>
</body>
</html>

Completed 1 of 6
Add attribute to the input element of date type as per above instrucitions.
Add attribute to the input of the file type such that more than one files can be uploaded.
___

Create a free account to access the full topic