All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Browse Button In HTML For File Selection

Last Updated : Mar 11, 2024

Browse Button In HTML For File Selection

In this tutorial we will show you the solution of browse button in HTML for file selection and we are going to tell you that how you are able to create a browse button in HTML that is used for file selection in HTML.

Actually, this button is used in html if someone/we want files from user. That may be an image, a pdf, a video/audio file, etc.

We already see in some website that there is sometimes a browse button with text no file chosen and when you open any file in this, then it will show you file name with extension.

Step By Step Guide On Browse Button In HTML For File Selection :-

As here, we already say that in html this button is created to upload file and the file may be of any type.

Now, here below we are going to show you a form in which we create a browse button with the help of input tag, Let us understand codes.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document</title>
        </head>
          <body>
<body style="text-align: center;">
    <h1> File Upload example in html </h1>
    <form action=" " method="post">
        <label for="">
            Enter your name here:
        </label>
        <input type="text" name="" id="">
        <br> <br>
        <label for="">
            Enter about yourself:
        </label>
        <textarea name="" id="" cols="30" rows="1"></textarea>
        <br> <br>
        <label for="">
            Upload your resume here:
        </label>
        <input type="file" name="uploader" id="">
        <br> <br>
        <input type="submit" value="Click here to upload">
    </form>
</body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browse about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  6. 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.
  7. 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.
  8. 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.
  9. Here, we create some labels with some inputs so that user can enter some data in this. We arise here questions like your name, your age and create browse button for his/her resume.
  10. When he/she clicks on the button a dialog box appears from which you have to choose file and after selection, click on open button and the specific file gets selected. Now, you can enter submit button to submit further information.
  11. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last, here we can say that we are able to create a browse button in html for file selection. I hope this tutorial on browse button in HTML for file selection helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪