HTML Form - Create form in html

HTML Form - Create form in html

HTML form are use collect user information from your website.. for example : during registration you would like gather user information i.e username,email,password,country,gender etc..You can save this user information in your database using php or other back-end language...
in this lesson we will learn how to create html from and how to process html form using php..

HTML Form - Create form in html

HTML Form Creation:

<div align="center">
<h3>HTML Form</h3>
<form method="POST" action="form.php">
<table width="400px">
    <tr>
	   <td><span>UserName:</span></td>
	   <td><input type="text" name="name" placeholder="Ex: ABCD"/>
	   </td>
	</tr>
	<tr>
	   <td><span>Email:</span></td>
	   <td><input type="text" name="email" placeholder="Ex: abcd@gmail.com"/>
	   </td>
	</tr>
	<tr>
	   <td><span>Password:</span></td>
	   <td><input type="password" name="password" placeholder="Ex: 1234"/>
	   </td>
	</tr>
	
	<tr>
	   <td><span>Full Name:</span></td>
	   <td><input type="text" name="fname" placeholder="ABCD ROY"/>
	   </td>
	</tr>
	
	<tr>
	   <td><span>Expalin Who are You:</span></td>
	   <td><textarea name="about" rows="6" cols="23" placeholder="Ex: i am abcd.student of Kolkata university department of cse.."></textarea>
	   </td>
	</tr>
	
	<tr>
	   <td><span>Sex:</span></td>
	   <td><input type="radio" name="sex" value="female"/>Female
	   <input type="radio" name="sex" value="male"/> Male
	   <input type="radio" name="sex" value="other"/>Other
	   </td>
	</tr>
	
	<tr>
	   <td><span>Fevorite Color:</span></td>
	   <td><input type="checkbox" name="color[]" value="red"/>Red
	   <input type="checkbox" name="color[]" value="green"/>Green
	   <input type="checkbox" name="color[]" value="yellow"/>Yellow
	   </td>
	</tr>
	
	<tr>
	   <td><span>Country:</span></td>
	   <td>
	   <select type="text" name="country">
	   <option value="">Select Country</option>
	      <option value="india">India</option>
		  <option value="usa">United States</option>
		  <option value="japan">Japan</option>
		  <option value="russia">Russia</option>
	   </select>  
	   </td>
	</tr>
	
	<tr>
	   <td></td>
	   <td><input type="submit" name="submit"/></td>
	</tr>
</table>
</form>
</div>

Design HTML Form using CSS:

  span{
    color:#666699;
	font-weight:bold;
	font-size:18px;
	font-style:italic;
  }
  textarea{
  border-radius:5px;
  text-transform:capitalize;
  }
  textarea:focus{
  border-radius:5px;
  background:black;
  color:white;
  width:100%;
  }
  input[type=text]{
	  padding:5px;
	  border-radius:4px;
  }
  input[type=text]:focus{
	 background:black;
	 color:white;
	  width:100%;
	 text-transform:capitalize;
	 padding:5px;
  }
  input[type=submit]{
	  padding:5px;
	  background:black;
	  color:white;
	  cursor:pointer;
	  border-radius:4px;
  }
  input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
	select {
    padding:3px;
    margin: 0;
	font-size:15px;
	width:185px;
    border-radius:4px;
    background: white;
    color:#888;

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

input[type=checkbox] {
  width:15px;
  height: 15px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 15px;
}

Processing HTML Form using PHP: form.php

<?php
if(isset($_POST['submit'])){
	//Getting Value from HTML FORM
	$username=$_POST['uname'];
	$email=$_POST['email'];
	$password=$_POST['password'];
	$fullname=$_POST['fname'];
	$about=$_POST['about'];
	$gender=$_POST['sex'];
	$colors=$_POST['color'];
	$country=$_POST['country'];
	//You have Submited Below Information
	echo 'UserName: <b>'.$username.'</b><br/>';
	echo 'Email: <b>'.$email.'</b><br/>';
	echo 'PassWord: <b>'.$password.'</b><br/>';
	echo 'Full Name: <b>'.$fullname.'</b><br/>';
	echo 'About: <b>'.$about.'</b><br/>';
	echo 'Gender: <b>'.$gender.'</b><br/>';
	//Color is Multiple so it will be an array
	echo 'Colors: ';
	foreach($colors as $color){
		echo '<b>'.$color.' </b>, ';}
	echo '<br/>Country: <b>'.$country.'</b>';
}

?>

Form Attribute:
<form method="POST" action="form.php">
</form>
for uploading file your form will look like below
<form method="POST" action="form.php" enctype="multipart/form-data">
</form>
here:
 method: method value should be POST or GET. this tells the form how to send data once it submitted..From should process with POST Method..GET Method is Bad idea for Security Reason..
 action: this field tell where to go after submitted form..this is back-end process to read or access submitted data.

HTML Form Tags:
there are Different's Type of HTML form tags use to Control Form.
  1. HTML Text and Password Field
  2. HTML Textarea
  3.HTML Checkbox
  4.HTML Radio Button
  5. HTML Input file
  6.HTML Dropdown
  7. HTML submit and Reset

1. HTML text and Password Fields :
input text field

<form method="post" action="index.php">
Your Name: <input type="text" name="name"/>
</form>

Result:

Your Name:

input Password Field:

<form method="post" action="index.php">
Your Name: <input type="password" name="name"/>
</form>

Result:

Your Password:

2. HTML textarea Field:

<form method="post" action="">
About:<textarea name="about" rows="5" cols="30"></textarea>
</form>

Result:

About:

3. HTML checkbox Field:
Checkbox are use to select Multiple options.

<form method="POST" action="">
 Company: 
 <input type="checkbox" name="compnay[]" value="Google"/>Google
 <input type="checkbox" name="compnay[]" value="Facebook"/>Facebook
 <input type="checkbox" name="compnay[]" value="Yahoo"/>Yahoo
 <input type="checkbox" name="compnay[]" value="Reliance"/>Reliance
</form>

HTML Checkbox Example:

Company: Google Facebook Yahoo Reliance

4.HTML Radio Button:
Radio Button are used to select only option from multiple options..

<form method="POST" action="">
Gender:
<input type="radio" name="sex" value="female"/>Female
<input type="radio" name="sex" value="male"/>Male
<input type="radio" name="sex" value="other"/>Other
</form>

Result:

Gender: Female Male Other

5.HTML input file:
file tag are use to create upload field.

<form method="POST" enctype="multipart/form-data">
Upload File: <input type="file" name="file"/>
</form>

Result:

Upload File:

6.HTML Dropdown:
HTML dropdown are also called select option ..select and option tags are used to create dropdown  menu

<form method="POST" action="">
<b>Country</b>
<select type="text" name="country">
	   <option value="">Select Country</option>
	      <option value="india">India</option>
		  <option value="usa">United States</option>
		  <option value="japan">Japan</option>
		  <option value="russia">Russia</option>
	   </select>
</form>

Result:

Country Select Country India United States Japan Russia

    =>Dropdown with Multiple Selection:

<b>Country(use Ctrl,right Click to Select)</b>
<form method="POST" action="">
<select type="text" name="country" multiple>
	   <option value="">Select Country</option>
	      <option value="india">India</option>
		  <option value="usa">United States</option>
		  <option value="japan">Japan</option>
		  <option value="russia">Russia</option>
	   </select>
</form>

=>Dropdown with optgroup:

<h3>HTML optgroup example:</h3>
Country:
	   <select type="text" name="country">

	   <optgroup label="Country">
	      <option value="india">India</option>
		  <option value="usa">United States</option>
	   </optgroup>
	   
	   <optgroup label="Ocean">
	      <option value="indian">Indian Ocean</option>
		  <option value="Paicific">Paicific Ocean</option>
	   </optgroup>
	   <optgroup label="City">
	      <option value="Mumbai">Mumbai</option>
		  <option value="Kolkata">Kolkata</option>
	   </optgroup>
	      
	   </select>

Result:

HTML optgroup example:

Country: India United States Indian Ocean Paicific Ocean Mumbai Kolkata

6.HTML submit and reset:
 if you want to allow your visitors to reset a form back to its default state.you can use input type='reset' to do that.

<form method="POST" action="">
 Your name:<input type="text" name="name"/>
 <input type="submit" name="submit" value="submit"/>
 <input type="reset" name="reset" value="reset"/>
</form>

Result:
HTML submit Reset

Your name:

That's it Friends how to create form in html ..if you like this post please share and don't forget to comments ..Thank You