What happens after submit is pressed? Where does the information go?

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)

19 Likes

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:

38 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:

https://mdn.mozillademos.org/files/14478/Web%20server%20form%20handling.png

126 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:

15 Likes

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)

31 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:

4 Likes

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

4 Likes

Very helpful indeed!

Thank You for your reply :cowboy_hat_face:

2 Likes

Thanks Stetim, very helpful answer!:eyeglasses:

1 Like

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!

1 Like

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)

7 Likes

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.

1 Like

I’m guessing with another programming language? Or HTML again?

you can set the action attribute on the form element, this will point to the forum endpoint, but yes, the back-end requires the use of other languages

if you are just curious, you could also just use JS to see the form:

https://stackoverflow.com/questions/54512053/how-to-console-log-the-entire-html-form

4 Likes

Great explanation :ok_hand:t2:

So to follow up that question - when the request is sent to the server - u would need corresponding code in your js file or does your html communicate to the server via the browser directly? and via http command transfer the data from the form in a json?