What methods to use for implementation?

There is a page with input form - after entering text and pressing enter, should instead of this form appear another form with a different text and another variable.
To create a dozen identical pages - not so much.

I did something like that, but I'm sure there is a correct approach and best implementation:
PHP
switch (isset($_POST)) {
 case isset($_POST['arg']):
 echo '<form method="post"><h1><a>Text1</a><br> <input type="text" name="arg1" class="enterdream" autofocus> </h1></form>';
break;
 case isset($_POST['arg1']):
 echo '<form method="post"><h1><a>Text2</a><br> <input type="text" name="arg2" class="enterdream" autofocus> </h1></form>';
break;
 case isset($_POST['arg2']):
 echo '<form method="post"><h1><a>Текст3</a><br> <input type="text" name="arg3" class="enterdream" autofocus> </h1></form>';
break;
default:
 echo '<form method="post"><h1><a>Текст0</a><br> <input type="text" name="arg" class="enterdream" autofocus> </h1></form>'; 
 }


June 14th 19 at 18:05
1 answer
June 14th 19 at 18:07
Solution
So many options, all depends on tasks, if part of the form does not require some kind of validation on the server before sending the entire form, you can the contents of a form divided into blocks and Otkryty/hide them as required, you can even ajax requests to hang to do some validation on the server or save the data before opening the next tab
tell me little example how to open/hide the blocks? - Chris_Lang72 commented on June 14th 19 at 18:10
For example the following form:
<form>
 <div id="step-1" style="display: block">
 <label for="username">Username</label>
 <input type="text" name="username" id="username">
 <button type="button" onclick="next(2)">Next</button>
</div>
 <div id="step-2" style="display: none">
 <label for="email">Email</label>
 <input type="email" name="email" id="email">
 <button type="button" onclick="next(3)">Next</button>
</div>
 <div id="step-3" class="hidden" style="display: none">
 <label for="password">Password</label>
 <input type="password" name="password" id="password">
 <button type="button" onclick="next(4)">Next</button>
</div>
 <div id="step-4" style="display: none">
 <button type="submit">Submit</button>
</div>
</form>

Here in onclick using the next()function
function next(id) {
 var currentElement = document.getElementById('step-'+(id-1));
 var nextElement = document.getElementById('step-'+id);
 currentElement.style.display = 'none';
 nextElement.style.display = 'block';
 }
- Doug.OConnell commented on June 14th 19 at 18:13

Find more questions by tags HTMLJavaScriptPHP