content logo

Bootstrap Tabs:

Simple Profile Form with Bootstrap Tabs

There are many ways to take away the boringness of filling out a profile form and make it more interesting for the users. Profile forms usually include a long list of inquiries with input fields besides them. Each user has to provide this information if they want to complete their profile. However, there is a way to make the forms less frustrating. Usually, these forms are lengthy and therefore the users don’t feel like completing it but if you somehow make the form shorter, it will affect how the visitors view this task. Remember that you shouldn’t cut out some of the information to make it shorter. The idea is to keep all the fields and yet make the form appear shorter. To do this, you can cut it into several sections and group them together with the help of another useful design element called tabs.

Tabs with forms are perfect for making lengthy forms appear shorter as each tab only contains a couple of fields. In this post, we have the code for a simple profile form with Bootstrap simple tabs. the Bootstrap profile form offers the basic information you need and does not feature any CSS colourful effects. It features only the fundamentals plus some tabs options so you can group your forms together.

#

Bootstrap Simple Tabs

#

Bootstrap Profile Form

#

Simple Profile Form

#

Tabs with Form

<!-- This script got from frontendfreecode.com -->
<div class="well">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">Profile</a></li>
        <li><a href="#profile" data-toggle="tab">Password</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane active in" id="home">
            <form id="tab">
                <label>Username</label>
                <input type="text" value="jsmith" class="input-xlarge" />
                <label>First Name</label>
                <input type="text" value="John" class="input-xlarge" />
                <label>Last Name</label>
                <input type="text" value="Smith" class="input-xlarge" />
                <label>Email</label>
                <input type="text" value="jsmith@yourcompany.com" class="input-xlarge" />
                <label>Address</label>
                <textarea value="Smith" rows="3" class="input-xlarge">
2817 S 49th
    Apt 314
    San Jose, CA 95101

                </textarea>
                <label>Time Zone</label>
                <select name="DropDownTimezone" id="DropDownTimezone" class="input-xlarge">
                    <option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
                    <option value="-11.0">(GMT -11:00) Midway Island, Samoa</option>
                    <option value="-10.0">(GMT -10:00) Hawaii</option>
                    <option value="-9.0">(GMT -9:00) Alaska</option>
                    <option selected="selected" value="-8.0">(GMT -8:00) Pacific Time (US & Canada)</option>
                    <option value="-7.0">(GMT -7:00) Mountain Time (US & Canada)</option>
                    <option value="-6.0">(GMT -6:00) Central Time (US & Canada), Mexico City</option>
                    <option value="-5.0">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option>
                    <option value="-4.0">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
                    <option value="-3.5">(GMT -3:30) Newfoundland</option>
                    <option value="-3.0">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
                    <option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
                    <option value="-1.0">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
                    <option value="0.0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
                    <option value="1.0">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
                    <option value="2.0">(GMT +2:00) Kaliningrad, South Africa</option>
                    <option value="3.0">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
                    <option value="3.5">(GMT +3:30) Tehran</option>
                    <option value="4.0">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
                    <option value="4.5">(GMT +4:30) Kabul</option>
                    <option value="5.0">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
                    <option value="5.5">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
                    <option value="5.75">(GMT +5:45) Kathmandu</option>
                    <option value="6.0">(GMT +6:00) Almaty, Dhaka, Colombo</option>
                    <option value="7.0">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
                    <option value="8.0">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
                    <option value="9.0">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
                    <option value="9.5">(GMT +9:30) Adelaide, Darwin</option>
                    <option value="10.0">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
                    <option value="11.0">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
                    <option value="12.0">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
                </select>
                <div>
                    <button class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
        <div class="tab-pane fade" id="profile">
            <form id="tab2">
                <label>New Password</label>
                <input type="password" class="input-xlarge" />
                <div>
                    <button class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="well">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">Profile</a></li>
        <li><a href="#profile" data-toggle="tab">Password</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane active in" id="home">
            <form id="tab">
                <label>Username</label>
                <input type="text" value="jsmith" class="input-xlarge" />
                <label>First Name</label>
                <input type="text" value="John" class="input-xlarge" />
                <label>Last Name</label>
                <input type="text" value="Smith" class="input-xlarge" />
                <label>Email</label>
                <input type="text" value="jsmith@yourcompany.com" class="input-xlarge" />
                <label>Address</label>
                <textarea value="Smith" rows="3" class="input-xlarge">
2817 S 49th
    Apt 314
    San Jose, CA 95101

                </textarea>
                <label>Time Zone</label>
                <select name="DropDownTimezone" id="DropDownTimezone" class="input-xlarge">
                    <option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
                    <option value="-11.0">(GMT -11:00) Midway Island, Samoa</option>
                    <option value="-10.0">(GMT -10:00) Hawaii</option>
                    <option value="-9.0">(GMT -9:00) Alaska</option>
                    <option selected="selected" value="-8.0">(GMT -8:00) Pacific Time (US & Canada)</option>
                    <option value="-7.0">(GMT -7:00) Mountain Time (US & Canada)</option>
                    <option value="-6.0">(GMT -6:00) Central Time (US & Canada), Mexico City</option>
                    <option value="-5.0">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option>
                    <option value="-4.0">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
                    <option value="-3.5">(GMT -3:30) Newfoundland</option>
                    <option value="-3.0">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
                    <option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
                    <option value="-1.0">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
                    <option value="0.0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
                    <option value="1.0">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
                    <option value="2.0">(GMT +2:00) Kaliningrad, South Africa</option>
                    <option value="3.0">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
                    <option value="3.5">(GMT +3:30) Tehran</option>
                    <option value="4.0">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
                    <option value="4.5">(GMT +4:30) Kabul</option>
                    <option value="5.0">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
                    <option value="5.5">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
                    <option value="5.75">(GMT +5:45) Kathmandu</option>
                    <option value="6.0">(GMT +6:00) Almaty, Dhaka, Colombo</option>
                    <option value="7.0">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
                    <option value="8.0">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
                    <option value="9.0">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
                    <option value="9.5">(GMT +9:30) Adelaide, Darwin</option>
                    <option value="10.0">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
                    <option value="11.0">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
                    <option value="12.0">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
                </select>
                <div>
                    <button class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
        <div class="tab-pane fade" id="profile">
            <form id="tab2">
                <label>New Password</label>
                <input type="password" class="input-xlarge" />
                <div>
                    <button class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview