In this tutorial we will show you the solution of HTML file upload example, we will show you how you are able to make a webpage in which you are able to make an uploader.
Many times, you see on web that there are some websites in which there is a button and when you click on the button a dialog box appears in which you have to select file and below here is a button named open and after selection your file name gets displayed on browser screen.
So, today we come across with concept of upload file in html with example.
Step By Step Guide On HTML File Upload Example :-
As here, we are going to show you the concept behind this. There are many ways to done this, but we will use only html tags here. Now, let us understand.
<!DOCTYPE html> <html> <head> <title> Title of the document</title> </head> <body> <h1> File Upload example in html </h1> <form action=" " method="post"> <input type="file" name="uploader" id=""> <br> <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 tag you see that we create a heading tag first, this is done only for heading. We create here h1 you can use any one.
- Or if you don’t want to use it then you can also do this. After heading tag, here we create from tag. Form tag is created with attribute method with its value post.
- If you don’t know about the methods in form, means what are methods in form, how many they are and what’s there meaning. Then you can go to the article in which we describe all about forms in html.
- After form we create an input tag with type attribute and its value is file. Now, here we create a submit button with the help of input type submit.
- Now, let us talk about concept. The submit button is used to submit form on webpage. Whereas the button file is used to get files from user.
- When you see on browser that there is a button shown on webpage with placeholder choose file and after click on this button a dialog box appears where you have to choose files.
- After this when you choose file and click on open button the file gets uploaded and seen on browser with name along with choose file button. Now, you have to click on submit button and your file gets submitted.
- 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 we are able to upload file in html, we discussed the concept with the help of example. I hope this tutorial on HTML file upload example helps you.
About Amruta
