Open In App

Foundation CSS Forms File Upload Button

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Foundation CSS Kitchen Sink has the foundation elements to work well in our websites and applications. The File Upload Button can be utilized to upload the files by specifying the input type as a file. Many forms require uploading a file, usually, a label is referenced to the input file type. For security issues, many browsers don’t allow input tags to be styled. For this, we can style the form label as a button.

Foundation CSS File Upload Classes:

  • button: This class is used on the label tag which creates a simple button.
  • show-for-sr: This class is used on the input tag to hide it from the view.

Syntax:

<form>
    <label class="button">Button</label>
    <input class="show-for-sr">
</form>

Example 1: In the below example, we have made created a simple file upload button.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Forms File Upload Button</title>
    <link rel="stylesheet"
          href=
          crossorigin="anonymous">
    <script src=
            crossorigin="anonymous"></script>
    <title>
        Foundation CSS Forms File Upload Button
    </title>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
    <h4>Foundation CSS Forms File Upload Button</h4>
    <form>
        <label for="upload" 
               class="button">
            Upload Your File
        </label>
        <input type="file" 
               id="upload" 
               class="show-for-sr"
    </form>
</body>
</html>


Output:

Foundation CSS Forms File Upload Button

Foundation CSS Forms File Upload Button

Example 2: In the below example, we have made a basic job template form with showcases how the file upload button can be used on a real form.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Forms File Upload Button</title>
    <link rel="stylesheet"
          href=
          crossorigin="anonymous">
    <script src=
            crossorigin="anonymous"></script>
    <title>
        Foundation CSS Forms File Upload Button
    </title>
  
</head>
<body>
    <h2>GeeksforGeeks</h2>
    <h4>
        Foundation CSS Forms File Upload Button
    </h4>
    <form>
        <div class="grid-container" 
             style="width: 40%;">
            <label>Name
                <input type="text" 
                       placeholder="Enter your name:"
            </label>
            <label>College
                <input type="text" 
                       placeholder="Enter your college">
            </label>
            <label> CGPA
                <input type="number" 
                       placeholder="Enter your CGPA">
            </label>
            <label> Tell us a little bit about yourself
                <textarea placeholder="None"></textarea>
            </label>
            <label for="upload" class="button">
                Upload Your Resume
            </label>
            <input type="file" 
                   id="upload" 
                   class="show-for-sr">
            <input type="submit" 
                   class="button" 
                   value="Submit"
        </div>
    </form>
</body>
</html>


Output:

Foundation CSS Forms File Upload Button

Foundation CSS Forms File Upload Button

References: https://get.foundation/sites/docs/forms.html#file-upload-button



Last Updated : 02 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads