Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

HTML FORM tutorial with CSS based Example

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.

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 .

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Do you have any Query / Suggestion