Link your pages together

To take users from one page to another, you can use either:

• a link (<a> tag)
• a form (<form> tag, when the user inputs data)

Link your start page to question 1

1. Open start-page.html in your app/views folder.
2. Find the <a> tag with "Start now" inside.
3. Change the value of the href attribute from # to /magical-powers.

Go to http://localhost:3000/start-page and select the Start now button to check the link works.

Links normally appear as text with underlines. We make Start now look like a button to make it more obvious to users.

Link question 1 to question 2

1. Open magical-powers.html in your app/views folder.
2. Find the line <form class="form" action="/templates/check-your-answers" method="post">.
3. Change the value of the action attribute from /templates/check-your-answers to /details.

Go to http://localhost:3000/magical-powers and select Continue to check the button works.

This time it's a real HTML button, not a link. Buttons submit form data – the URL is on the form tag, not the button.

Link question 2 to your "Check answers" page

1. Open details.html in your app/views folder.
2. Find the line <form class="form" action="/templates/check-your-answers" method="post">.
3. Change the value of the action attribute from /templates/check-your-answers to /check-your-answers.

Go to http://localhost:3000/details and select Continue to check the button works.

Link 'Check your answers' to your 'Confirmation' page

1. Open check-your-answers.html in your app/views folder.
2. Find the <a> tag with 'Accept and send registration' inside.
3. Change the value of the href attribute from /templates/confirmation-page to /confirmation-page.

Go to http://localhost:3000/check-your-answers and select Accept and send registration to check the button works.