HTML Tutorial - Project 3: Complete the Form - Complete the Story!

The Project: Complete the Form – Complete the Story!

Forms are great for collecting information on users, like job applications or insightful surveys. However, we can also stretch our creative muscles and have a little fun with forms. For this project, we’ll use our knowledge of the HTML <form> and grab user input to put a spin on a classic story!

The logic for parsing and inserting of user inputs is already taken care of in main.js using JavaScript . We’ve also added some styling to the page in style.css. You can find these files by click on the folder icon located at the top of the code editor and selecting the files you’re interested in.

What you have to do is now make a <form> capable of collecting the correct information so that the newly crafted story makes sense!

Note: Save your code as you follow the steps to see your progress!

If you get stuck during this project, check out the project walkthrough video which can be found in the help menu.

Tasks

21/21 CompleteMark the tasks as complete by checking them off

Adding The Form

We’ll be collecting information from our users using a <form> so, first, we have to add a <form> under the <hr> element inside the <body> of index.html.

Assign the <form> an action of "story.html" and a method of "GET".

We’ll be sending information from our form to story.html using a GET request.Hint

Assign the action and method attribute inside the opening <form> tag.

In the <form>, create a submit button by adding an <input> with a type of "submit". Assign the value a value of "Form My Story!". Save your code to see the button rendered.

This might seem counterintuitive, but by creating this submit button and submitting the form as you add more code, you can see how the final result of the story and debug in smaller chunks. Check the hint for more debugging tips!Hint

As you add more code to create new input fields, the submit button should be kept at the bottom. This formatting won’t affect how the <form> submission process but makes sense from a design standpoint — users will submit the <form> at the end, when they’re done filling out the <form>.

As you create more input fields, make sure that you’ve included the name attributes in each element that takes user input and the value of the name is correctly written as stated in the instructions.

If you see “null” show up in your story, it could be that you omitted the name.

To see which <input> is related to the text, hover your cursor over the bold and underlined word to see the id of the <input>. Then check that the <input> has all the necessary attributes.

Adding Text Input

Now we can populate our <form> with <input> elements that allow users to type in their responses. We’ll also want to have associated <label>s with these <input> elements so users know what they’re filling in.

Add a <label> element and assign the for attribute a value of "animal-1". Have the <label> render the text Animal: on the webpage.

Write your code so that the submit button always shows up at the bottom of the <form>. As you add more code, the submit button should be kept at the bottom.Hint

Set the for attribute in the opening tag of the <label> element. To have the text Animal: displayed on the webpage, add it between the opening and closing <label> tags.

Now we can create an <input> to associate our <label> element with.

Set the id of the <input> to "animal-1" and the type to "text". Assign the name to "animal-1". Remember, the name attribute is needed for information from this <input> to be sent with the form during submission.

Speaking of submission, since we want our users to put in some value, add the required attribute to the <input>.Hint

The id value of the <input> must match the value of the for attribute to associate the two elements.

We’re going to be adding more <label>s and <input>s so we should add some spacing.

Below the <input> element, add a line break using <br>.

With the first input field and working submit button, type some text into the field and submit it! Remember, in order for you to see the new code rendered on the browser, you’re going to need to save your code.Hint

As you add more input fields, save your code. Play around with the rendered form and submit the values that you have to check out how other users would interact with the <form>.

Our story has quite a few blanks, so we’re going to need a lot more <label>s and <input>s.

Add another <label> with a for attribute of "animal-2" that renders Another Animal: to the webpage.

Underneath the <label>, create a new <input> with the attributes:

id and name set to "animal-2".
type to "text".
required

Add another <br> for a line break.Hint

Your code will resemble the previous <label> and <input> added, like so:

<label for="idValue">Rendered Text</label>
<input id="idValue" type="text" name="name-of-input" required>
<br>

There’s another animal in our story, so let’s add another <label> with a for attribute of "animal-3" that renders One More Animal: to the webpage.

Then, add a new <input> with the attributes:

id and name set to "animal-3".
type to "text".
required

Remember to add another <br> for a line break.

Let’s have our users provide an adjective.

Add another <label> with a for attribute of "adj-1" that renders the text Adjective (past tense): to the webpage.

Then, add a new <input> with the attributes:

id and name set to "adj-1".
type to "text".
required

Add another line break.

10.

Let’s get a verb.

Create a <label> with has a for attribute set to "verb-1" that renders the text Verb (ends in -ing):.

Follow the <label> with an <input> with the attributes:

id and name set to "verb-1".
type to "text".
required

Also, add a line break.

Other Inputs

11.

Great, we have some <input>s set up that accept text, but we can use some <input> with different types in our <form>.

Let’s add a field that will accept a number. First add <label> with a for attribute of "num-1"that renders the text Number: to the webpage.

After the <label> element, add an <input> that has:

id and name set to "num-1".
a type attribute of "number".
a required attribute.

Also, add a line break.Hint

This <label> and <input> will resemble the previous <label>s and <input>s. The key difference is that you’re now setting the type to "number" instead of "text".

12.

One of our blanks requires a “yes” or “no” answer— sounds like we can use some radio buttons for that.

Before we can add the radio buttons, add a <span> element that has the text Yes or No:.Hint

We want to use a <span> element so that we don’t add an unnecessary line break.

A <span> element has an opening and closing tag. Add the text between the opening and closing <span> tags.

13.

For radio buttons, we want to add the <input> before the <label> to render the radio button on the left of the text.

Add an <input> element with the following attributes:

an id set to "yes".
a type with a value of "radio".
a name of "answer".
a value of "yes".
a required attribute.

Under the <input>, add a <label> with a for attribute assigned a value of "yes" that renders the text Yes on the webpage.Hint

You do not need to add a line break yet, we can have the radio buttons show up next each.

14.

We should now add a radio button that represents the “no” choice.

Add another <input> element that has the following attributes:

an id set to "no".
a type with a value of "radio".
a name of "answer".
a value of "no".

Under the just added <input>, add another <label> with a for attribute assigned a value of "no" that renders the text No on the webpage.

This time, add a line break!Hint

You do not need to add a required attribute for the second radio button. If two radio buttons share the same name, only one needs to have the required attribute.

15.

The story that we’re creating this <form> for involves some sort of speed, so let’s give our users a dropdown list of speed options.

Create a <label> and set the for attribute to "speed". The <label> should render the text: Relative speed (ends in -er):

Then add a <select> element with an id and name of "speed". Add the required attribute to make this field mandatory.

Insert a <br> after the closing <select> tag. The <select> element will be empty for now.Hint

We’ll be populating the <select> with <option>s in the next step.

16.

Inside the <select> add a few <option>s for users to choose from.

One example of an <option> you could include is:

<option value="faster">Faster</option>

Add as many or as few as you’d like!

Remember to assign a value and include text between the opening and closing <option> tags.Hint

The text within an <option> element is displayed to the user. When the <form> is submitted, the value of the value attribute is sent along with the name of the <select> element as a key-value pair.

Your code might look like:

<label for="speed">Choose a speed (ends in -er):</label>
<select id="speed" name="speed" required>
  <option value="slower">Slower</option>
  <option value="faster">Faster</option>
</select>
<br>

17.

One of our story’s blank requires a quote. We could provide our users with a few options but also give them the choice of adding their own custom quote. To do this, we can use the <datalist> element.

To set up the <datalist> we need an accompanying <label> and <input>.

Under the last <br>, add a <label> with a for attribute of "quote". Have the <label> render the text Motivational Quote:.

After the <label>, add an <input> with the follow attributes:

an id and name assigned a value of "quote".
the type set to "text".
a required attribute.
a list attribute of "quote-choices".

Hint

Add your new code after the code that wrote that renders the dropdown list for speed options.

We don’t need to add a <br> yet.

18.

Awesome, we should add the <datalist> now under the <input> element. Assign the <datalist> an id of "quote-choices".

Add a <br> after the closing <datalist> tag.Hint

Make sure the id of the <datalist> matches the list attribute of the <input>.

19.

Let’s add a few <option>s with values within the <datalist> element. For example:

<option value="winner gets ice cream!"></option>

Hint

You may add as many or as few quotes as you’d like! For a <datalist> you do not have to add text within the <option> element since the text will show up twice when rendered.

20.

Every good story has a key takeaway, so let’s finish off this <form> by having our users provide this message!

Add a <label> that has a for attribute of "message". Have the <label> render Meaningful Message: on the web page.

Under the <label> add a <textarea> that has an id and name of "message". Make the <textarea> a required field. The <textarea> should have 8 rows and 40 columns. (Check the hint for a syntax reminder).

Then add a line break after the <textarea> element.Hint

The syntax for a <textarea> element:

<textarea id="some-od" name="a-name" rows="100" cols="100"></textarea>

Project Extras

21.

Fantastic job creating a <form> to fill in a story!

If you want to challenge yourself:

Add pre-selected values for each input field.
Add placeholder text that contains examples for users.
Add some extra validations like min, minlength, or pattern to the elements that accept user input.