(1)first write code for insert.html file:
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "insert.php";
var id = document.getElementById("id").value;
var nm = document.getElementById("name").value;
var cy = document.getElementById("city").value;
var vars = "id="+id+"&name="+nm+"&city="+cy;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<input type="text" id="id" name="id">
<input type="text" id="name" name="name">
<input type="text" id="city" name="city">
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();">
<div id="status"></div>
</body>
</html>
(2)Then write code for insert.php :
<?php
$id=$_POST['id'];
$nm=$_POST['name'];
$cy=$_POST['city'];
$con=mysql_connect('localhost','root','' );
mysql_select_db('needa',$con);
$sql="insert into details (id,name,city) values('$id','$nm','$cy')";
mysql_query($sql);
echo "record inserted successfully";
?>
Ajax example code to update record from form to MYSQL Database :
(1) write code for update.html :
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "update.php";
var id = document.getElementById("id").value;
var nm = document.getElementById("name").value;
var cy = document.getElementById("city").value;
var vars = "id="+id+"&name="+nm+"&city="+cy;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<input type="text" id="id" name="id">
<input type="text" id="name" name="name">
<input type="text" id="city" name="city">
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();">
<div id="status"></div>
</body>
</html>
(2)write code for update.php :
<?php
$id=$_POST['id'];
$nm=$_POST['name'];
$cy=$_POST['city'];
$con=mysql_connect('localhost','root','' );
mysql_select_db('needa',$con);
$sql="update details set name ='$nm', city='$cy' where id='$id'";
mysql_query($sql);
echo "record updated successfully";
?>
Ajax example code to search record from MYSQL Database :
(1)write code search.html :
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "search.php";
var nm = document.getElementById("name").value;
var vars = "name="+nm;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<input type="text" id="name" name="name">
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();">
<div id="status"></div>
</body>
</html>
(2)write code for search.php:
<?php
$nm=$_POST['name'];
$con=mysql_connect('localhost','root','' );
mysql_select_db('needa',$con);
$sql="select * from details where name='$nm'";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo $row['id'];
echo $row['name'];
echo $row['city'];
}
?>
Ajax example code to Delete record from MYSQL Database :
(1)write code for delete.html :
<html>
<head>
<script>
function ajax_post()
{
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "delete.php";
var id = document.getElementById("id").value;
var vars = "id="+id;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<input type="text" id="id" name="id">
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();">
<div id="status"></div>
</body>
</html>
(2) write code for delete.php :
<?php
$id=$_POST['id'];
$con=mysql_connect('localhost','root','' );
mysql_select_db('needa',$con);
$sql="delete from details where id='$id'";
mysql_query($sql);
echo "record deleted successfully";
?>
==============================================================
Ajax code using GET method :
==============================================================
(1)write code for ajax.html file:
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var name = document.getElementById('name').value;
var queryString = "?age=" + age ;
queryString += "&wpm=" + wpm + "&name=" + name;
ajaxRequest.open("GET", "test.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form name = 'myForm'>
Age: <input type = 'text' id = 'age' /> <br />
WPM: <input type = 'text' id = 'wpm' />
NAME <input type='text' id='name' />
<br />
<input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
</form>
<div id = 'ajaxDiv'>Your result will display here</div>
</body>
</html>
(2)write code for test.php file :
<?php
echo $age=$_GET['age'];
echo $wpm=$_GET['wpm'];
echo $name=$_GET['name'];
?>
=======================================================================
(1)FIRST WRITE javascript CODE in <head> section </head> :
<html>
<head>
<script type="text/javascript">
function doDelete(id){
if(confirm("Do you want to delete the record?")){
$.ajax({
url:'delete.php',
type:'post',
data:'id='+id,
success:function(msg){
alert(msg);
window.location.href='pagination2.php';
}
});
}
}
</script>
</head>
<!---Second use following line where you want to call doDelete() method in <body> section </body>--->
<body>
<?php
include("connect.php");
$per_page = 8;
$pages_query = mysql_query("SELECT COUNT('id') FROM notes order by coursename,semester ASC");
$pages = ceil(mysql_result($pages_query, 0) / $per_page);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$start = ($page - 1) * $per_page;
$query = mysql_query("SELECT * FROM notes LIMIT $start, $per_page");
while($row = mysql_fetch_assoc($query))
{
echo "record one";
?>
<a class="click-more" href="#" onClick="doDelete('<?php echo $row['id']; ?>');">read more</a>
<?php
$prev = $page - 1;
$next = $page + 1;
if(!($page<=1)){
echo "<a href='pagination1.php?page=$prev'><button>Prev</button></a> ";
}
if($pages>=1 && $page<=$pages){
for($x=1;$x<=$pages;$x++){
echo ($x == $page) ? '<strong><a href="?page='.$x.'"><button>'.$x.'</button></a></strong> ' : '<a href="?page='.$x.'"><button>'.$x.'</button></a> ';
}
}
if(!($page>=$pages)){
echo "<a href='pagination1.php?page=$next'><button>Next>></button></a>";
}
?>
</body>
</html>
(2)write code for "delete.php" file:
<?php
$id=$_POST['id'];
include("connect.php");
$sql="delete from notes where id='$id'";
mysql_query($sql) or die(mysql_error());
echo "Record deleted successfully";
echo '<br></br>';
echo '<a href="pagination1.php"><button>back to previous page</button></a>';
?>
Now see below example for dynamic drop down & Onchange & Onclick event with Ajax:
First of all Write code for filterdownload.php :
<script>
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "displaynotes1previous.php";
var fn = document.getElementById("coursename").value;
var en = document.getElementById("semseter").value;
var vars = "coursename="+fn+"&semseter="+en;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
function ajax_disp(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "displaynotes1.php";
var fn = document.getElementById("coursename").value;
var en = document.getElementById("semseter").value;
var pn = document.getElementById("subject").value;
var vars = "coursename="+fn+"&semseter="+en+"&subject="+pn;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
<span style="color:#000;">Select Course Name : -</span>
<select name=coursename id="coursename" >
<?php
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("itexam", $con);
$sql="select * from subject group by coursename ";
$result=mysql_query($sql) or die(mysql_error());
while ($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['coursename'].'">';
echo $row['coursename'];
echo '<option>';
}
?>
</select>
<span style="color:#000;"> Select Semester : -</span>
<select name=semseter id="semseter" onChange="ajax_post();">
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("itexam",$con);
$sql="select * from subject group by semseter ";
$result=mysql_query($sql) or die(mysql_error());
while ($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['semseter'].'">';
echo $row['semseter'];
echo '<option>';
}
?>
</select>
<!------>
<br /><br />
<div id="status">
</div>
<br /><br />
<input align="middle" name="myBtn" type="submit" value="Submit Data" onclick="ajax_disp();">
<br />
<?php
ob_flush();
?>
<br /><br />
</div>
</center>
(2)now write code for displaynotes1previous.php:
<html>
<head>
</head>
<body>
<?php
$coursename=$_POST['coursename'];
//echo $coursename;
$semseter=$_POST['semseter'];
//echo $semseter;
?>
Subject <select name="subject" id="subject">
<?php
$con = mysql_connect('localhost', 'root', '');
mysql_select_db("itexam", $con);
$sql="select subject from subject where coursename='$coursename' AND semseter='$semseter'";
$result=mysql_query($sql) or die(mysql_error());
while ($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['subject'].'">';
echo $row['subject'];
echo '<option>';
}
?>
</select>
</td></tr>
<tr>
<td>
</tr>
</body>
</html>
(3)now write code for displaynotes1.php:
<?php
ob_start();
?>
<?php
$coursename=$_POST['coursename'];
//echo $coursename;
$semseter=$_POST['semseter'];
//echo $semseter;
?>
Subject <select name="subject" id="subject">
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("itexam",$con);
$sql="select subject from subject where coursename='$coursename' AND semseter='$semseter'";
$result=mysql_query($sql) or die(mysql_error());
while ($row=mysql_fetch_array($result))
{
echo '<option value="'.$row['subject'].'">';
echo $row['subject'];
echo '<option>';
}
?>
</select>
<?php
$coursename=$_POST['coursename'];
$semester=$_POST['semseter'];
$subject=$_POST['subject'];
echo '<h3>';
echo '<table border=0>';
echo '<tr> <td>';
echo "CourseName =".$coursename;
echo '</td> <td> </td>';
echo '<td>';
echo "Semester =".$semester;
echo '</td></tr>';
echo '</table>';
echo '</h3>';
//$con=mysql_connect("localhost","root","");
$con=mysql_connect("localhost","root","");
mysql_select_db("itexam",$con);
//mysql_select_db("itexam",$con);
$sql="select * from notes where coursename='$coursename' AND semester='$semester' AND subject='$subject' order by subject";
$result=mysql_query($sql) or die(mysql_error());
echo '<h4>';
echo '<table border=0>';
echo '<tr><td><h2>Subject Name </h2></td><td> </td><td><h2>Unit </h2></td><td> </td> <td> <h2>Download Link</h2></td></tr>';
while($row=mysql_fetch_array($result))
{
echo ' <tr><td>"'.$row['subject'].'" </td><td> </td><td>"'.$row['unit'].'" </td><td> </td>
<td>
<button ><a href=../proudct_images/'.$row['file'].'>
Download file</a></button> </td></tr>';
}
echo '</table>';
?>
<?php
ob_flush();
?>
================================================================================================================================================
ONCHANGE DROPDWON EXAMPLE USING JQUERY AND AJAX WITH PHP & MYSQL:
STEP 1: create table categorie :
create table categorie
(
category_id int primary key auto_increment ,
type varchar(200),
categoryname varchar(200)
);
STEP 2 :
<!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=iso-8859-1" />
<title>Sections Demo</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var data=$(this).val();
var dataString = 'data='+ data;
$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
</style>
</head>
<body>
<form action=test.php method=post enctype="multipart/form-data">
<div style="margin:80px">
<label>Country :</label>
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
echo $sql1="select * from categorie group by type";
$result1=mysql_query($sql1) or die(mysql_error());
while($row1=mysql_fetch_array($result1))
{
echo '<option value="'.$row1['type'].'">';
echo $row1['type'];
echo '</option>';
}
?>
</select>
<textarea type=text name=hello > </textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'hello' );
</script>
<input type=file name=image>
<input type=submit name=submit value=submit>
</form> <br/><br/>
<label>City :</label>
<div name="city" class="city">
</div>
</div>
</body>
</html>
OUTPUT:
STEP 3: now write code for ajax_city.php file which will execute on onchange of dropdown:
<select name="categoryname" id="categoryname">';
<?php
include("db.php");
$type=$_POST['data'];
echo $sql2="select * from categorie where type='$type'";
$result2=mysql_query($sql2) or die(mysql_error());
while($row2=mysql_fetch_array($result2))
{
echo '<option value="'.$row2['categoryname'].'">';
echo $row2['categoryname'];
echo '</option>';
}
?>
</select>
Step 4: now write code for test.php file which will execute on click on submit button:
<?php
echo "country =". $test=$_POST['country'];
echo '<br>';
echo "categoryname=". $categoryname=$_POST['categoryname'];
echo '<br>';
echo "hello=".$hello=$_POST['hello'];
echo '<br>';
echo "image =". $image=$_FILES['image']['name'];
echo '<br>';
move_uploaded_file($_FILES['image']['tmp_name'],"upload/".$_FILES['image']['name']);
?>
================================================================================================================================================
========================================================================
Ajax with Jquery & php & mysql========================================================================
HTML File – refreshform.html
· Consists of form with id = “form”.
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Without Refreshing Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/refreshform.css" rel="stylesheet">
<script src="js/refreshform.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Without Refreshing Page</h2>
<!-- Required Div Starts Here -->
<form id="form" name="form">
<h3>Fill Your Information!</h3>
<label>Name:</label>
<input id="name" placeholder="Your Name" type="text">
<label>Email:</label>
<input id="email" placeholder="Your Email" type="text">
<label>Contact No.</label>
<input id="contact" placeholder="Your Mobile No." type="text">
<label>Gender:</label>
<input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female
<label>Message:</label>
<textarea id="msg" placeholder="Your message..">
</textarea>
<input id="submit" type="button" value="Submit">
</form>
</div>
</body>
</html>
jQuery File – refreshform.js
· Sends request to php script with form details. Return notification on successful data submission.
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var contact = $("#contact").val();
var gender = $("input[type=radio]:checked").val();
var msg = $("#msg").val();
if (name == '' || email == '' || contact == '' || gender == '' || msg == '') {
alert("Insertion Failed Some Fields are Blank....!!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("refreshform.php", {
name1: name,
email1: email,
contact1: contact,
gender1: gender,
msg1: msg
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
});
}
});
});
My-SQL Code
· My-SQL command for creation of database ‘mydba’ and table ‘form_elements’.
CREATE DATABASE mydba;
CREATE TABLE form_element (
id int(25) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
contact int(25) NOT NULL,
gender varchar(255) NOT NULL,
message varchar(255) NOT NULL,
PRIMARY KEY (id)
)
PHP File – refreshform.php
· Insert form information into database.
<?php
// Establishing connection with server by passing "server_name", "user_id", "password".
$connection = mysql_connect("localhost", "root", "");
// Selecting Database by passing "database_name" and above connection variable.
$db = mysql_select_db("mydba", $connection);
$name2=$_POST['name1']; // Fetching Values from URL
$email2=$_POST['email1'];
$contact2=$_POST['contact1'];
$gender2=$_POST['gender1'];
$msg2=$_POST['msg1'];
$query = mysql_query("insert into form_element(name, email, contact, gender, message) values ('$name2','$email2','$contact2','$gender2','$msg2')"); //Insert query
if($query){
echo "Data Submitted succesfully";
}
mysql_close($connection); // Connection Closed.
?>
Css File – refreshform.css
· Includes basic styling of form.
@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#form{
background-color:#556b2f;
color:#D5FFFA;
border-radius:5px;
border:3px solid #d3cd3d;
padding:4px 30px;
font-weight:700;
width:350px;
font-size:12px;
float:left;
height:auto;
margin-left:35px
}
label{
font-size:15px
}
h3{
text-align:center;
font-size:21px
}
div#mainform{
width:960px;
margin:50px auto;
font-family:'Fauna One',serif
}
input[type=text]{
width:100%;
height:40px;
margin-top:10px;
border:none;
border-radius:3px;
padding:5px
}
textarea{
width:100%;
height:60px;
margin-top:10px;
border:none;
border-radius:3px;
padding:5px;
resize:none
}
input[type=radio]{
margin:10px 5px 5px
}
input[type=button]{
width:100%;
height:40px;
margin:35px 0 30px;
background-color:#f4a460;
border:1px solid #fff;
border-radius:3px;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px
}
=====================================================================
same example in different way:
=====================================================================
HTML File: ajaxsubmit.html
Here, we create our form
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Using AJAX and jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Using AJAX and jQuery</h2>
<div id="form">
<h3>Fill Your Information !</h3>
<div>
<label>Name :</label>
<input id="name" type="text">
<label>Email :</label>
<input id="email" type="text">
<label>Password :</label>
<input id="password" type="password">
<label>Contact No :</label>
<input id="contact" type="text">
<input id="submit" type="button" value="Submit">
</div>
</div>
</div>
</body>
</html>
PHP File: ajaxsubmit.php
<?php
$connection = mysql_connect("localhost", "root", "");$db = mysql_select_db("mydba", $connection);$name2=$_POST['name1'];
$email2=$_POST['email1'];
$password2=$_POST['password1'];
$contact2=$_POST['contact1'];$query = mysql_query("insert into form_element(name, email, password, contact) values ('$name2', '$email2', '$password2','$contact2')");
echo "Form Submitted Succesfully";
mysql_close($connection);?>
jQuery File: script.js
jQuery file consist of ajax functionality.
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();
var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
if(name==''||email==''||password==''||contact=='')
{
alert("Please Fill All Fields");
}
else
{
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
MY-SQL Code Segment:
Here is the My-SQL code for creating database and table.
CREATE DATABASE mydba;
CREATE TABLE form_element(
id int(10) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(255) NOT NULL,
contact varchar(255) NOT NULL,
PRIMARY KEY (id)
)
CSS File: style.css
@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#form {
background-color:#fff;
color:#123456;
box-shadow:0 1px 1px 1px #123456;
font-weight:400;
width:350px;
margin:50px 250px 0 35px;
float:left;
height:500px
}
#form div {
padding:10px 0 0 30px
}
h3 {
margin-top:0;
color:#fff;
background-color:#3C599B;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
#mainform {
width:960px;
margin:50px auto;
padding-top:20px;
font-family:'Fauna One',serif
}
input {
width:90%;
height:30px;
margin-top:10px;
border-radius:3px;
padding:2px;
box-shadow:0 1px 1px 0 #123456
}
input[type=button] {
background-color:#3C599B;
border:1px solid #fff;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px;
color:#fff
}ouput:
