Responsive Registration Form Using Bootstrap

-

Responsive Registration Form Using Bootstrap by sbphptricks
Responsive Registration Form Using Bootstrap


In this tutorial we will learn how to create a responsive Registration form Using Bootstrap.In 2018, 52.2 percent of all website traffic worldwide was generated through mobile phones, up from 50.3 percent in the previous year. In India this picture is more encouraging,According to a report "Mobile phones contribute 79% of all web traffic in India" .So in this scenario it is very much important to create web content or web pages which are more user friendly.Here comes bootstrap to help the web developer.

Check the code for "Responsive Registration Form In HTML".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Untitled Document</title>
</head>

<body>

<div class="form-group">

<div class="row">

<div class="col-sm-4"></div>
<div class="col-sm-4" style="padding:20px; border:#366 thin double;">
<H1>Registration Details</H1>
<hr />
<div class="form-group">

<label>Name</label>
<input type="text" name="f1" id="f1" class="form-control" />

</div>


<div class="form-group">

<label>Email</label>
<input type="text" name="f2" id="f2" class="form-control" />

</div>




<div class="form-group">

<label>State</label>
<select name="s1" id="s1" class="form-control">
  <option>Select State</option>
  <option>Assam</option>
  <option>Meghalaya</option>
  <option>Manipur</option>
  <option>West Bengal</option>



</select>

</div>


<div class="form-group">

<label>Address</label>
<textarea name="address" class="form-control"></textarea>

</div>


<div class="form-group">

<label>Upload</label>
<input type="file" name="file1" class="form-control"/>

</div>


<div class="form-group">

<input type="submit" name="b1" value="SAVE" class="btn btn-success"/>
<input type="button" name="b1" value="CANCEL" class="btn btn-danger"/>

</div>
</div>
<div class="col-sm-4"></div>


</div>

</div>
</body>

</html>

 Here 3 CDN file is included so that the responsive design can be achieved.Also we are using some classes to get the design in the text boxes and buttons.Copy paste these codes and let me
know if you get any problem in the comment section.Enjoy coding #sbphptricks



Comments

Post a Comment

Popular posts from this blog

Insert data into database using Android,php & Mysql

-
Image
In this tutorial i will explain a simple way to insert  data into mysql database using Android,Php & Mysql.in this tutorial i use Volley library. Copy paste the below code in your XML file.Here i am using Linear layout,you can use any layout. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <EditText android:id="@+id/editText" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:hint="Name" android:inputType...
Read more

Random password Generator In PHP

-
Image
In this tutorial you will learn how to create a random password using PHP. This program can be helpful to suggest the users an auto generated random password.In this program we are using substr() method which will use str_shuffle() to create a password of the length which is supplied to the function pass1($len).The password length will be decided by the number which is supplied to the function.The code of the program is as below- <?php function pass1($len) { error_reporting(0); $charset="!@iloveindia%^&"; $password=substr(str_shuffle($charset),0,$len); return $password; } $newpassword=pass1(8); ?> <table> <tr> <td>Password</td> <td><?php echo $newpassword;?></td> <td><input type="button" name="b1" id="b1" value="New Password" onClick="window.location.reload()"/></td> </tr> </table> Copy this code and paste in your .php file...
Read more