FAQ: Learn HTML: Forms - Forms Review

This community-built FAQ covers the “Forms Review” exercise from the lesson “Learn HTML: Forms”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction to HTML

FAQs on the exercise Forms Review

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

How placeholder works??

placeholder is an attribute, like value that will display in the input field. Unlike value, though, it is typed over and can be used in place of a label. It has no effect on the value that is POSTed.

<input name="name" placeholder="Name" value="">
<input name="email" placeholder="Email" value="">
3 Likes

So where do the answers to the form end up after they’ve been sent? How do I handle/send the response in a real world scenario?

1 Like

The <form> element opentag will have an action="" attribute with the URL of the request page on the server. That page will read the POST data, validate it and make it safe to insert in the database (encode it), then do so. That page will likely handoff a success response, or a failure response, as applies. That page (or AJAX response) will be composed and sent back to the client.

Given only those two pieces of information, name and email, it’s likely this would be a signup for a subscription. When the row is created in the database, it may also be added to the mailing list of the periodical.

3 Likes

I had a similar question to @techbecca

I asked my questions here and got a couple of very helpful replies from @stetim94, which I think complement your post nicely :smiley:

1 Like

Hey! I have a question if my code is correct.
Let’s say I have a list of topping people can choose “What toppings would you like?
Lettuce Tomato Onion” but also I want to put 4th option of your own choice. Is my code correct?

It showed the thing I wanted to but I’m not sure if it would work properly.

you created two input element, and no text btw the opening and closing tags of label element, i suggest that is why your output looks the way it is. A single input of type = checkbox is enough.

span vs. label tags


<section class="toppings">
          <span>What toppings would you like?</span>
          <br>
          <input type="checkbox" name="topping" id="lettuce" value="lettuce">
	  ....

<section class="bun-type">
          <label for="bun">What type of bun would you like?</label>
          <select name="bun" id="bun">
	  ...

to write text also we can use “p”," h1…h6" tags (and prolly even more ways) BUT can some one please explain in which cases we should use , ??? and why not “p” or “h1” (we use “h1” only for headers, right ?!) thanks

1 Like

If I make a separate project that has an input request as a number, how can I take that number and add/subtract it from a variable in javascript in the same project?

Hi folks:)
Just a quick note here.
in the review it says: " Setting type to "list" will pair the <input> with a <datalist> element.".
That is not correct, the list attribute needs to be assigned the id of the datalist, as previously stated in the course.
Cheers,
Daniel

2 Likes

What is the point in adding id="" and name="" when it is irrelevant the feature itself? For example, on the section “How do you want your patty cooked?” the input is as follows: <input type="range" name="doneness" id="doneness" value="3" min="1" max="5">

However, take out those 2 and you still get the exact same functionality on the menu. The input could look like this:
<input type="range" value="3" min="1" max="5">

So is the name and id in this scenario simply for data we are retrieving?

The id could be a hook for some CSS selector rule, it could be a hook for a JS element node to capture events, or it could be associated with a label. If neither of those apply, then it is not needed. As for the name, that is used to identify the user input in the POSTDATA on Submit.

1 Like

Question here! For the textarea element, which goes like this:
<textarea id="blog" name="blog" cols="30" rows"5"> </textarea>

From my understanding, when you put text between the opening and closing tags for textarea, text appears in the text box. I thought logically this should be achievable using a value attribute instead but it doesnt? Can anyone explain why this is the case? This is what I mean:
<textarea id="blog" name="blog" cols="30" rows"5" value="Text here"> </textarea>

Narrow things down to what the user is submitting.

<textarea>User input</textarea>

The API is not looking for a value attribute on that HTMLElement. It’s looking for a text node.

If we are submitting this, then it will need a name attribute. If it is not being styled, then id and class are frivolous. Like as always, we preach traversal against id and class; but, to each their own.

Hello guys, maybe this a bit more advanced, but after I finished my Forms chapter, I am challenged to create a form myself using some of the tools taught.

I was considering to create a small project where users would insert their phones, but instead of asking for them to type their country code, how can I make sort of a datalist where the available countries are shown? Is this a JS thing?

There are a variety of ways that could be accomplished, though an AJAX approach is probably best. If all the CCs are hard coded into the HTML it could make for a rather large document. A server-side data base is better suited, and easier to maintain. That steps out of the purview of this module, so add it to your future topics list for further research once you start working with a server and db.

1 Like

Great, thanks for the support on it!

1 Like