Web development #1 bootstrap tabbed user login and registration form

kibriakk (50)in #utopian-io • 6 years ago

PicsArt_08-30-11.06.18.png

Repositories https://github.com/kibriakk/bootstrap-dev/blob/master/Reg-login

Today i am going to share Bootstrap Development tutorial part -1. In this part i will share the code of "user login and registration tabbed content ". I also explain the development methood.

Requirement:

Bootstrap-combined.min.css
Bootstrap.min.js
jquery-1.11.1.min.js

Development & Coding

Step-1: First go to the head section of your web page and insert the code given in bellow:

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Use it in <head>...</head> tag

Step-2: Now you should write the full code of user login and registration tabbed content in <body>...</body> tag.

Full code :


<div class="container">
    <div class="row">
        <div class="span12">
            <div class="" id="loginModal">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Have an Account?</h3>
              </div>
              <div class="modal-body">
                <div class="well">
                  <ul class="nav nav-tabs">
                    <li class="active"><a href="#login" data-toggle="tab">Login</a></li>
                    <li><a href="#create" data-toggle="tab">Create Account</a></li>
                  </ul>
                  <div id="myTabContent" class="tab-content">
                    <div class="tab-pane active in" id="login">
                      <form class="form-horizontal" action='' method="POST">
                        <fieldset>
                          <div id="legend">
                            <legend class="">Login</legend>
                          </div>    
                          <div class="control-group">
                            (html comment removed:  Username )
                            <label class="control-label"  for="username">Username</label>
                            <div class="controls">
                              <input type="text" id="username" name="username" placeholder="" class="input-xlarge">
                            </div>
                          </div>
     
                          <div class="control-group">
                            (html comment removed:  Password)
                            <label class="control-label" for="password">Password</label>
                            <div class="controls">
                              <input type="password" id="password" name="password" placeholder="" class="input-xlarge">
                            </div>
                          </div>
     
     
                          <div class="control-group">
                            (html comment removed:  Button )
                            <div class="controls">
                              <button class="btn btn-success">Login</button>
                            </div>
                          </div>
                        </fieldset>
                      </form>                
                    </div>
                    <div class="tab-pane fade" id="create">
                      <form id="tab">
                        <label>Username</label>
                        <input type="text" value="" class="input-xlarge">
                        <label>First Name</label>
                        <input type="text" value="" class="input-xlarge">
                        <label>Last Name</label>
                        <input type="text" value="" class="input-xlarge">
                        <label>Email</label>
                        <input type="text" value="" class="input-xlarge">
                        <label>Address</label>
                        <textarea value="Smith" rows="3" class="input-xlarge">
                        </textarea>
     
                        <div>
                          <button class="btn btn-primary">Create Account</button>
                        </div>
                      </form>
                    </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</div>

(change the value="" with your site registration system value in "")

The code is fully written in HTML language.
You need to change some depend on your website. All class and script are based on the step-1 files.

Note: All the code is written by me and there is no mistake. if you find any bug please comment here. I would be very happy if you help me.

sorry for bad English.

#development #tutorial #busy #wafrica

6 years ago in #utopian-io by kibriakk (50)

$0.40

Sort:

Trending

[-]

codingdefined (68) 6 years ago

Thank you for your contribution. Some thoughts:

User Login and Registration code seem to be simple and straightforward.
Similar and more-thorough tutorials can be easily found online.
For the development contribution, it should be unique which is not the case for this contribution.
For tutorials, you should be more detailed and thorough in explaining everything.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

$5.54

8 votes

[-]

minnowsupport (70) 6 years ago

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by Steem-contest from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.

$0.00

[-]

steemitboard (66) 6 years ago

Congratulations @kibriakk! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

_{Click on the badge to view your Board of Honor.}
_{If you no longer want to receive notifications, reply to this comment with the word STOP}

You can upvote this notification to help all Steemit users. Learn why here!

$0.00