Use file input within regular formo

Topic: Use file input within regular formo

info28 pro asked 9 years ago

Hi everyone, I'm trying to create a registration form with a file upload within. I know there is a single file input in the documentation, but it just doesn't fit within the form style. So I was wondering if someone has a good solution to make the file input fit. Thanks alot.

Add comment

info28 pro answered 9 years ago

0 0 Best answer

Sorry for the late respone, but this sovled the problem! I'd only change one thing: I added the class "pt-1 pb-4" to a div instead of a form, otherwise the functionality of the main form would conflict.

Add comment

Marta Wierzbicka free answered 9 years ago

0 0 Best answer

Hello,

Look at this example of registration form with file input, maybe it will solve your problem:
<pre><code>
<div class="card">
    <div class="card-block">

<div class="text-xs-center">
            <h3><i class="fa fa-user"></i> Register with:</h3>
            <a href="" class="btn-floating btn-fb btn-small"><i class="fa fa-facebook"></i></a>
                <a href="" class="btn-floating btn-tw btn-small"><i class="fa fa-twitter"></i></a>
                <a href="" class="btn-floating btn-gplus btn-small"><i class="fa fa-google-plus"></i></a>
                <a href="" class="btn-floating btn-li btn-small"><i class="fa fa-linkedin"></i></a>
                <a href="" class="btn-floating btn-git btn-small"><i class="fa fa-github"></i></a>
            <hr class="mt-2 mb-2">
        </div>

<div class="md-form">
            <i class="fa fa-envelope prefix"></i>
            <input type="text" id="form2" class="form-control">
            <label for="form2">Your email</label>
        </div>

<div class="md-form">
            <i class="fa fa-lock prefix"></i>
            <input type="password" id="form3" class="form-control">
            <label for="form3">Your password</label>
        </div>

<div class="md-form">
            <i class="fa fa-lock prefix"></i>
            <input type="password" id="form4" class="form-control">
            <label for="form4">Repeat password</label>
        </div>

<form action="#" class="pt-1 pb-4">
            <div class="file-field">
                <div class="btn btn-primary btn-sm">
                    <span>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>

<fieldset class="form-group">
                <input type="checkbox" id="checkbox1">
                <label for="checkbox1">Subscribe me to the newsletter</label>
            </fieldset>
        </div>
        
        
        <div class="modal-footer">
            <div class="options">
                <p>Already have an account? <a href="#">Log in</a></p>
            </div>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>

</div>
</div>
</code></pre>

Best,
Marta

Please insert min. 20 characters.

Hello, Look at this example of registration form with file input, maybe it will solve your problem:

<!--Form without header-->
<div class="card">
    <div class="card-block">

        <!--Header-->
        <div class="text-xs-center">
            <h3><i class="fa fa-user"></i> Register with:</h3>
            <a href="" class="btn-floating btn-fb btn-small"><i class="fa fa-facebook"></i></a>
                <a href="" class="btn-floating btn-tw btn-small"><i class="fa fa-twitter"></i></a>
                <a href="" class="btn-floating btn-gplus btn-small"><i class="fa fa-google-plus"></i></a>
                <a href="" class="btn-floating btn-li btn-small"><i class="fa fa-linkedin"></i></a>
                <a href="" class="btn-floating btn-git btn-small"><i class="fa fa-github"></i></a>
            <hr class="mt-2 mb-2">
        </div>

        <!--Body-->
        <div class="md-form">
            <i class="fa fa-envelope prefix"></i>
            <input type="text" id="form2" class="form-control">
            <label for="form2">Your email</label>
        </div>

        <div class="md-form">
            <i class="fa fa-lock prefix"></i>
            <input type="password" id="form3" class="form-control">
            <label for="form3">Your password</label>
        </div>

        <div class="md-form">
            <i class="fa fa-lock prefix"></i>
            <input type="password" id="form4" class="form-control">
            <label for="form4">Repeat password</label>
        </div>

        <form action="#" class="pt-1 pb-4">
            <div class="file-field">
                <div class="btn btn-primary btn-sm">
                    <span>Choose files</span>
                    <input type="file" multiple>
                </div>
                <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Upload one or more files">
                </div>
            </div>
        </form>

        <div class="text-xs-center">
            <button class="btn btn-primary btn-lg mb-1">Sign up</button>

            <fieldset class="form-group">
                <input type="checkbox" id="checkbox1">
                <label for="checkbox1">Subscribe me to the newsletter</label>
            </fieldset>
        </div>
        
        <!--Footer-->
        <div class="modal-footer">
            <div class="options">
                <p>Already have an account? <a href="#">Log in</a></p>
            </div>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>

    </div>
</div>
<!--/Form without header-->

Best, Marta

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

info28

Pro User 10Support score
1Questions 1Answers 0Snippets