Link your pages together
To take users from one page to another, you will use either:
-
links – either
<a>
tags or button components with anhref
attribute -
forms – a
<form>
tag, used when submitting form data
The method used will depend on whether the page is submitting form data (radios, text inputs, etc) to the server. Otherwise we use links.
Link your start page to question 1
-
Open
start-page.html
in yourapp/views
folder. -
Find the button component. This will start with
{{ button({
and have "Start now" inside. -
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 it 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
-
Open
magical-powers.html
in yourapp/views
folder. -
Find the line
<form action="/form-handler" method="post" novalidate>
. -
Change the value of the
action
attribute from/form-handler
to/details
.
Go to http://localhost:3000/magical-powers
and select Continue to check the button works. The /details
page will look the same as the /magical-powers
page because we copied the same code in - but you should see the url change.
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
-
Open
details.html
in yourapp/views
folder. -
Find the line
<form action="/form-handler" method="post" novalidate>
. -
Change the value of the
action
attribute from/form-handler
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
-
Open
check-your-answers.html
in yourapp/views
folder. -
Find the
<form>
tag button component inside. -
Change the value of the
action
attribute from/form-handler
to/confirmation-page
.
Go to http://localhost:3000/check-your-answers and select Confirm and send to check the button works.
The back links in your pages do not go to the correct places yet. If you want, you can try and update the links by using the back link component guidance.