HTML FORM tutorial with CSS based Example

FORMS are used to pass data to a server and contain input elements like
text, check box, radio, button, submit, reset, password.HTML FORM tutorial with CSS based Example
A form is incomplete with out input box . Data sent to server through forms using input elements  and executed on the server.





Lets have a example of a form

<form action="name.php" method="post">
<input type="text" name="name" />
<input type="submit" name="submit" value="Go"/>
</form>
Output
Explanation:
action- pointed to page where programming codes will be there.
type- we have to define type of input box whether it is text, password,submit or so on..
method- we have to define which method we are using GET or POST , remember POST is secure compare to GET.

Lets have Complete example -
In this example used PHP as Programming language, CSS for making the form look good and html5.

Complete Script -

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Form Tutorial</title>
<meta charset="utf-8" />
<style type="text/css">
.input{
background:#fff;
border: 1px solid #999;
box-shadow:inset 0 0 2px #000000; 
color: #222; 
}
.input:hover{
background:#f6f6f6;
border: 1px solid #999;
color: #222;
}
</style>
</head><body>
<?php
if(isset($_POST['submit')){
$name=$_POST['name'];
echo "Hello ". $name. " its Working naa";
}
?>
<form action="" method="post">
<input type="text" name="name"  class="input"/>
<input type="submit" name="submit" value="Go" class="input"/>
</form>
</body>
</html>

If you have any question then please comment .

Labels: , ,