In this tutorial we will show you the solution of upload button in HTML, many times, in html we see that in some websites there is a button, whereas websites like college websites, jobs website, in which we have to upload our scanned documents and resume.
So, in these types of websites we see a button in which when we click on them a dialog box appears in which we have to choose file from our device and upload them.
Many developers come across this situation. Hence, today we here show you how you are able to make this button named as upload button. Let us understand this.
Step By Step Guide On Upload Button In HTML :-
As here, there are many ways with the help of which you are able to make this button. And today we are here to show you that way.
We will show you the most used way with the help of this can be done and only with the help of html tags.
Here, below we show you some codes to done this. We hope that you understand this.
<!DOCTYPE html> <html> <head> <title> Title of the document</title> </head> <body> <form action="/action_page.html" method="post"> <input type="file" name="file_upload" id=""> <input type="submit" value="Click here to upload"> </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.
- Here, in body we will show you that here we create a form and in this form we give value in action the form method used is post.
- After form, we create an input type button of type file with a submit button. The submit button has value Click here to upload.
- The main concept is here of input type file. Input tag with type file is used to make a file upload able.
- When you open this file on browser, you see a button here with text Choose file and when you click on this button, a box appears in which you have to choose file.
- When you choose file the name of file gets displayed after button. And the last step is to click on submit button with text Click here to upload and your file gets uploaded.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, here we can say that with the help of this article you are able to make an upload file button in html. I hope this tutorial on upload button in HTML helps you.
About Riya
