Need help with a webpage

Hi!

I’m trying to create a webpage with a form inside and once completed, would generate another webpage with a summary of information taken from the previous webpage’s form. This would be very handy for a registration form.

For example:
Webpage1 would have a form with the following details:
Name1: ________ Age1:_____
Name2:__Age2:
Name3:__Age3:
(and so on, then there would be a submit button right after)

Once a user hits the submit button, a new webpage would automatically be generated with text from the form (the summary of information)

How can I do this? Thank you very much!

This isn’t within the realm of HTML.

Most people have a backend running not only a webserver but also some webserver framework (examples would be Django, Dancer, WordPress, Drupal) where you, in your backend language (Python, PHP, Perl, C#, whatever) collect, clean, and process the form info and give it to whatever function renders the new web page. Often a templating language is used to populate your returning HTML page with the form values. Examples of templating languages are Smarty, Jinja, TemplateToolkit (usually the web framework you are using already works with a particular templating language).

A lousy example of what this would look like on the HTML side is something like

In yourform.html, as you see it in your HTML editor:

<form action=“{{ template link to name_age.index }}” method=“post”>
<fieldset>
<legend>Fill in names and ages</legend>
<div><label for=“name1”>Name: </label><input type=“text” id=“name1” name=“name1”>
<label for=“age1”>Age1: <input type=“text” id=“age1” name=“age1”>
</div>
<div><label for=“name2”>Name: </label><input type=“text” id=“name2” name=“name2”>
<label for=“age2”>Age2: <input type=“text” id=“age2” name=“age2”>
</div>
<div><label for=“name3”>Name: </label><input type=“text” id=“name3” name=“name3”>
<label for=“age3”>Age3: <input type=“text” id=“age3” name=“age3”>
</div>
<input type=“submit” value=“send”>
</fieldset>
</form>

In reality even the form fields may be generated and so you’d only see the above HTML when viewing source on the web page.

This may render on your web site for your visitors as a form with the action being
action=“/name_age/”

You’d have something like a set of routes in your backend that knows that name_age.index is the same as yourdomain.com/name_age/
and you’d have a module called name_age (let’s say name_age.py) with a function inside called index

name_age.py

def index():
… some code that takes what was sent from the form, checks whatever it checks, and adds that info to new variables
… let’s say the variables are called name1, age1, name2, age2, name3, age3

at the end of the function you’d call the “render()” function of your templating system

return render(path/to/results.html,
name_1 = name1,
age_1 = age1,
name_2 = name2,
age_2 = age2,
name_3 = name3,
age_3 = age3
)

You’d have your resulting HTML page already written, again with the template

results.html

{% if results %}
<dl>
<dt>{{ results.name_1 }}</dt>
<dd>{{ results.age_1 }}</dd>
<dt>{{ results.name_2 }}</dt>
<dd>{{ results.age_2 }}</dd>
<dt>{{ results.name_3 }}</dt>
<dd>{{ results.age_3 }}</dd>
</dl>
{% endif %}

The templating system would turn this into regular HTML page.

The above is just a bit of an idea of how many websites do this sort of thing. It’s not the only way, but it’s usually a pretty clean way.

This might not answer your question, and someone can probably show you some sort of basic quick-and-dirty thing that also works, but in the end it will still need a server with a backend script involved. The server can be your own computer of course.