Make Signin/Signup form in Android using Phonegap

What will we do ?
-> We will make a Web Based App using HTML, CSS etc. and build it on above 4 mobile platforms. Our App will be a login page (index.html) and signup page (signup.html)

What we will need ?

An App based on HTML, CSS etc.

Adobe ID

7 Zip for zip compression.

All 4 platform mobiles to test the App.

Step 1 : Download 7Zip for zip compression.

Step 2 : Make a HTML based website. It must be responsive type to fit properly in your mobile device. You can use Mobile JQuery tools for building the App. I'll use the short example below. You can add any number of files of type css,js ,html etc.

NOTE : There must be a file named index.html. Without index.html you will not be able to build your application.

Step 3 : Make 2 html pages index.html and signup.html. Add the below code to both the pages . Our App will look like these in the browser.

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#">Login</a></li>
        <li><a href="signup.html">SignUp</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p><h1>Login</h1>
  </div>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</p>
  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div> 

</body>
</html>

signup.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="index.html">Login</a></li>
        <li><a href="#">SignUp</a></li>
      </ul>
    </div>
  </div>


<div data-role="main" class="ui-content">
    <p><h1>SignUp</h1>
 <br>

 <form role="form">  
<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="form-group">
    <label for="pwd">Repeat Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
Gender
<div class="radio">
  <label><input type="radio" name="optradio">Male</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Female</label>
</div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

  <div data-role="footer">
    <h1>Copyright</h1>
  </div>
</div> 
</p></div>
</body>
</html>

Step 4 : Go to https://build.phonegap.com/ and click Get Started. Choose free plan.

Sign in with your Adobe Account OR SignUp first if you do not have one.

Step 5 : Add index.html and signup.html in a folder (websiteapp) and make it as .zip file. Only .zip format is allowed.