FAQ: Learn HTML: Forms - Submit Form

This community-built FAQ covers the “Submit Form” 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 Submit Form

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!

In the “Solution”, why is the word “submit” capital in value vs the type as shown below:

Solution: < input type=“submit” value=“Submit” >

Answered my own question, but this may help others.

The reasoning for the Caps in “value=“Submit”” is because that is the part that is going to show up on the “button” on the webpage.

yes, exactly. The value attribute is used to set the text (value) of a button. Then its common to use make the first letter of the first word upper case (normal grammar rules)

I understand the forms and different types of input but i’m assuming the page after you press the submit button is another landing page. I just wanted to confirm is this the code that would take the visitor there ?

You can set the action attribute on the form element:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action

which could be many things, usually its a request to the server, which then processes the form, and sends back a response (often a page)

In this exercise the <form> element has its action attribute set to "submission.html" as follows:

<form action="submission.html" method="POST">

From what I can see, the file submission.html only contains code to generate the page Thanks for your submission! (the response generated on clicking the form’s submit button). However, my understanding from exercise 2 - How a Form Works and exercise 14 - Forms Review is that the action attribute determines where the information collected in the form is sent when it’s submitted i.e. where the name="value" pairs end up being stored for further processing by the end user.

Are we not seeing any code in submission.html for the transfer of these name="value" pairs, because this is just an example and the form’s information is not actually being processed and transferred somewhere else? What would we see in actual practice? Would there be additional code triggered by the action attribute’s "value", which together with the method="POST" attribute would cause the form to be processed and its data transferred (in addition to the response page being displayed to the person who completed and submitted the form)?

Or am I misunderstanding something? :wink:

3 Likes

yes

a back-end, where we actually process the information. This could be a lot of different things.

The login you use at many websites? That is a form, so in that case, the back-end has to validate your credentials and authenticate you.

The box i am currently typing my reply in could be a form with a text-area, which would need to be saved to the database.

yes, often in the back-end. Here is a nice image to demonstrate the process:

9 Likes

Very helpful diagram! :+1:

So, where in this exercise we see the action attribute directly redirecting the browser to the “success” page (generated by the code in submission.html), in practice it is more likely to have a "value" which references to a different back-end file containing code for the first back-end process (e.g. validating the data).

Is that correct?

I’m sure we’ll learn about this in more detail in later courses, so sorry if I’m jumping the gun a bit. It’s just nice to get a broad idea early on of how this works in practice, as it helps conceptualise things more easily. :smiley:

1 Like

just make sure that if you jump in the deep end, that you don’t drown. Having warned for that, i think its actually a positive thing you are curious about this and ask questions

yea, you are correct. action can also point to a url (example.com/login for example).

lets do a very silly PHP example (PHP is a back-end language, which could run on your server), lets say we have:

<form method="POST" action="submission.php">
   <input type="text" name="username">
   <input type="submit" value="submit username">
</form>

html will send use the data entered based on the name attribute of the input field. So then in submission.php we can do:

$username = $_POST['username'] 
# now we could write the username to a file
# although often a database is used

we could this for every field. Thankfully, abstraction exist to simplify this process, but this is the basic. There are also many languages capable of doing this (java, c#, python, ruby, go, javascript (nodeJS) to name a few)

5 Likes

I think it is a great excercise BUT, I dont see explained what happens when someone clicks on Submit button?

Where exactly the data is going and how to alter the adress of Submit button?
I think it should be part of the lesson. I’m really curius about this question.

Does any of You know this?
Thanks :slight_smile:

Looks like I first asked then researched in the lesson.
<form action="/example.html" method=“POST”> <h1>Creating a form</h1> <p>Looks like you want to learn how to create an HTML form. Well, the best way to learn is to play around with it.</p> </form>

Above: form action means, that by clicking the submit button the data goes to example.html webpage?
I would really apreciate a little more explanation regarding this question! :slight_smile:

I asked some similar questions and got some really helpful replies from @stetim94:

This link takes you to my original questions, then read the posts in the thread that follow, if you find it helpful :smiley:

Your question was also asked in the final review part of this lesson here. Again, read on down the thread for the response.

1 Like

The form would go to https://codecademy.com/example.html` in this case. Forms are very often send to the domain (website) where they where coming from. So codecademy rendered the page with the form, so the submitted form also goes codecademy website

1 Like

Very helpful indeed!

Thank You for your reply :cowboy_hat_face:

1 Like

Thanks Stetim, very helpful answer!:eyeglasses:

I don’t know if this is a question that has been asked before or I am trying to be more clear based on the explanations shown in this thread. However, I was wondering after learning how to create submit buttons what code are we supposed to use to gather and store the information received once users have already provided the input information? I hope that my question makes sense! I would greatly appreciate anyone’s help!

this can be interpreted two ways: keep the input fields populated after invalid form submission or how to retrieve stored information

this won’t be covered within the html course, given this involves a database (mysql for example) and a programming language to validate, store and retrieve the information (c#, java, python, ruby, golang to name a few)

Ok gotcha. Thanks I appreciate your response!

Can I see what I have submitted? Or to ask differently: If I made a website with <form>, how could I see what the reader submited?

normally you would send the form back to your server/back-end where you can validate and store the data.