Foundation CSS Forms File Upload Button

Last Updated : 02 Mar, 2022

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
            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:

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
            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:

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

How to Create a Upload File Button in ReactJS?

tejsidda34

Improve

Article Tags :

Foundation CSS Forms File Upload Button

Similar Reads

Thank You!

What kind of Experience do you want to share?