Build a Create an account form with various input types in HTML
Almost every web app will use forms in one incarnation or another, so HTML forms will be an important part of your skillset.
git clonethis repository into your main exercise folder.
- If you are not too sure how to do it, please follow this video to see how to git clone the repository into your device.
- The code for this exercise should go into the
/Submissionfolder.
-
Create an
index.htmlfile in theSubmissionfolder. Create the HTML base code by typing!and pushingtab -
Add a heading inside the body:
<h1>Create an account</h1>inside the<body>element. -
Create a
<form></form>element after the<h1> -
Add an
actionandmethodattribute to your form, so it looks like the below snippet:<form action="mailto:[email protected]" method="post"></form>
This will make your form submission be emailed to your instructor.
-
Inside your
<form>element, add the following HTML form elements, with the corresponding labels and input types.-
Ensure each of your labels is linked to your input by using the
forattribute, that matches theidof the form input -
Ensure each of your inputs has the
nameattribute.<label for="name">Name</label> <input id="name" name="name" type="text" />
Label Input name Input type Options Name name text n/a Email email email n/a Password password password n/a Address address textarea n/a Country country select New Zealand, Australia Sign up to newsletter? newsletter checkbox n/a -
-
Add a submit button before the closing
</form>tag:<button type="submit">Create account</button>`
-
Test your page in your web browser
-
Do your form inputs look correct? For example, does it hide the text when you type your password? Do your checkbox and select work correctly?
-
When you click the label, does it automatically highlight the form input?
-
-
Fill in the form fields and submit the form. All things going well, you should get a success message. If you get an error message, try and fix the error.
-
You will notice all the form elements are on the same line. This is because form elements are
inlineby default.
To make everything appear in its own line, wrap each label/input combination in a
<div>element. For example:<div> <label for="name">Name</label> <input id="name" name="name" type="text" /> </div>
-
Ensure your HTML is valid using the W3C HTML Validator.
-
Commit your code to git
Your form should look like the screenshot below. It's not well designed, but it's functional.
Acceptance criteria
- All form fields are present that are listed in the specification
- When clicking a label, it focuses on the corresponding form input
- When a user pushes enter while in a form element, the form submits
- When the form submits, it displays the Formspree confirmation page
- The form inputs have appropriate names, so when the form is submitted the correct data appears in the Formspree email
It's possible to make form inputs required, by using the required attribute. You can read more about The required attribute on MDN
-
Make the Name and Email form inputs required, by adding the
requiredattribute to the inputs.<input id="name" name="name" type="text" required />
-
Commit your code to git
Acceptance criteria
- If the name input is empty, the form can not be submitted
- If the email input is empty, the form can not be submitted
We can also have a button for reset all the input.
-
Now try to create one
resetbutton.<input type="reset" value="Reset" />
-
Your button section should look like
Acceptance criteria
- When you click Reset button, all the input field should become empty without any text inside.
- Push your code with your folder back to this Github Repository
- Tutorial Video for push your code