Design a registration form with appropriate input control types
Use datalist for country field
Steps to do hands-on:
- install the required packages by clicking the install button
- write the code
- run the application and test it
Answer:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.png" type="image/png">
<title>Destiny</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
//write your code here
<header><h1>Registration Form</h1></header>
<div id="container">
<form action="">
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="dob">Name:</label>
<input type="date" name="dob"><br><br>
<label for="country">country:</label>
<input list="country" name="country" id="country">
<datalist id="country">
<option value="India">
<option value="United States">
<option value="United Kingdon">
<option value="Austraila">
<option value="France">
</datalist><br><br>
<label for="phone">Phone number:</label>
<input type="tel" name="phone"><br><br>
<label for="email">Email:</label>
<input type="email" name="email"><br><br>
<label for="web">website:</label>
<input type="url" name="web"><br><br>
<button type="submit"><a href="">Submit</a></button>
</form>
</div>
</body>
</html>
Click on image to view test result:
No comments:
Post a Comment
If you have any doubts, Please let us know.