Question

I’m building a CMS for a site with php. I have multiple forms on a page which posts to itself. Every time the page reloads to populate the forms, it displays the top of the page. (like normal) The pseudocode below may illustrate my question better:

<Form 1>(top of page)
   bla
   bla
   bla
</form1>
<Form 2>(middle of page)
   bla
   bla
   bla
</form2>
<Form 3>(bottom of page) (how do i get this to show at the top when the page reloads?)
   bla
   bla
   bla
</form3>

I feel like theres an easy way im not seeing. But its late and its been that kind of day. Thanks in advance to everyone as usual.

Answer 1

You can insert an element with id="idname" before each form, then include that anchor (#idname) in the form action.

<div id="form1"></div>
<form action="this_page.php#form1">
...
</form>

<div id="form2"></div>
<form action="this_page.php#form2">
...
</form>

What happens: after form submission, the anchor will be respected scrolling the page to the element with that ID.

Note that, having an empty element just before the form allows to scroll the screen exactly to that point, so, to scroll just before the start of the form.