How To Get Value From URL In HTML Page
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you the solution of how to get value from URL in HTML page, sometimes, in some webpages we saw that there are some parameters that we fill our data in one webpage that are reused in next page with the help of URL.
The codes that we saw in URL are due to method get used in webpage. Let us understand how we can do that.
Step By Step Guide On How To Get Value From URL In HTML Page :-
Here, below we give you codes in html in which we used some codes which are used to get full URL from webpage and also the parameters that are used in webpage.
Before this we have to create a webpage so that after submission of this webpage we saw some values with parameters in our URL. Let do it.
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <form method=”get”> Enter name <input type=”text” name=”fname”> <br> Enter your age in years <input type=”number” name=”age” min=”0”> <input type=”submit” value=”submit”> </form> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Hence, here we create a webpage or say html page in which we use form tag to create form and inside form we give space for text field and other for number field.
- And then we create a submit button. Now, let us first get the full url and then its values of parameters - const queryString = window.location.search; console.log(queryString);
- Whereas this above code is used to get the value of full url and the code here given below is for the values of parameters which we want to get. const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const page_type = urlParams.get('page_type'); console.log(page_type);
- Hence, here above we used the codes in console of webpage you can also use this code to get the values form url.
- Now, it you want to get the values from url to webpage then you have to write the above code in php or html page rather than console. We hope that you understand the codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last here in conclusion, we can say that with the help of this article we are able to get values from URL in html page. I hope this tutorial on how to get value from URL in HTML page helps you.
About Dikshita
