Creating a Registration Form - Exercise

Contact Us or call 1-877-932-8228
Creating a Registration Form - Exercise

Creating a Registration Form

Duration: 15 to 25 minutes.

In this exercise, you will begin to create a registration form. The form will submit to a page on https://www.webucator.com/course-demos/htm101/process-form.cfm, which will simply "dump" the values entered into the form back to you.

The form should appear as follows:Final Registration Form

  1. Open Forms/Exercises/RegistrationForm.html for editing.
  2. Add a form to the page.
  3. Add the following input elements:
    • text: name and id should be "username"
    • password: name and id should be "pw"
    • hidden: name and id should be "emailMe"; value should be your email.
    • submit button: value should be "Register"
    • reset button
  4. When you are done, open the page in a browser, and fill out and submit the form. If successful, the processing page will display the values you entered. You will need internet access to see the resulting page.

Solution:

Forms/Solutions/RegistrationForm1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form method="post" action="https://www.webucator.com/course-demos/htm101/process-form.cfm">
<div>
	<input type="hidden" name="emailMe" id="emailMe" value="you@you.com">

	<label for="username">User name:</label>
	<input type="text" name="username" id="username" size="15">
</div>
<div>
	<label for="pw">Password:</label>
	<input type="password" name="pw" id="pw" size="15">
</div>
<div>
	<input type="submit" name="submitbutton" id="submitbutton" value="Register">
	<input type="reset" name="resetbutton" id="resetbutton">
</div>
</form>
</body>
</html>
Next