How to create HTML-Forms


 

 Learn how to use HTML form controls


In this article we are going to learn How to use basic html-form controls for creating different kinds of forms. For any websites It should have at least one or two forms in the site in order to communicate with the client and share information and views of the users, which helps them to take their business up one level. So If we come to the topic, html provides various graphical user-interface controls for creating forms which allows users to feed different kinds of data. Now we learn what those controls are and how to use them etc. In this tutorial we will create the various forms one by one which are more frequently used in websites.

1) login page
2) signup page using following html controls:

  • Radio buttons: Radio buttons allow users to choose only one option among the group. ex: Gender
  • Checkbox: Checkbox allows users to choose all options from the group. ex:Hobbies
  • Combo box: Combo box also called it as drop down. It holds a list of values and allows user to use one or more from the provided list ex: country list,states list etc.,
  • Text area: It is a multi line text control. It allows the user to enter a large amount  of text.


3) linking login page and signup form.

4) Creating contact form.

5) Creating upload form

using file input controls

ex:upload a file

 

 

 Login Form

login-form.html


<html>
 
<head>
 	
<title> e-Trainings Demo on Html forms </title>
 
</head> 
 
<body>

<h1> Login Form </h1>
 
<form name="f1" method="get" action=""> 

Enter Username:
<input name="user" id="username" ><br> 

Enter Password:
<input type="password" name="password"><br>
 
<input type="submit" name="submit" value="Login">
 
<br>

<a href= "signup-form.html"> Signup Here </a> 

</form>
 
</body>

</html>

 Preview:

coding-zon-login-form

 

 

 Signup or Registration Form

signup-form.html


<html>
<head>
 <title> e-Trainings Demo on Html forms </title>
</head>  
<body>
<form action="" method="post" >
<center>
<h2>Signup Form</h2>
</center>
Username:
<input name="user" id="username" ><br> 

Password:
<input type="password" name="password"><br>

Confirm Password:
<input type="password" name="cpassword"><br>

Gender:
<input type="radio" value="Male" name="gender" checked /> Male
<input type="radio" value="Female" name="gender" />Female<br><br>
Country:
<select name="country" >
<option>India</option>
<option>America</option>
<option>Briton</option>
<option>France</option>
</select>
<br><br>
Hobbies:<br>
<input type="checkbox" value="singing" name="hob[]" />singing<br>
<input type="checkbox" value="dancing" name="hob[]" />dancing<br>
<input type="checkbox" value="drawing" name="hob[]" />drawing<br>
<input type="checkbox" value="scating" name="hob[]" />scating<br><br>
Address:<br>
<textarea rows=5 cols=50 name="address" />
</textarea><br><br>
<input type="submit" value="Submit" name="submit" value="Signup" />
<input type="reset" value="Reset" name="reset" />
</form>
</body>
</html>

 Preview:

 

coding-zon-signup-form



 Contact Form

 

 

 contact-form.html

<html>

<head>
 	
<title> e-Trainings Demo on Html forms </title>
 
</head>  
 
<body>

<h1> Contact Form </h1>
 

<form name="f1" method="get" action=""> 

Enter Name:
<input name="name" id="name" ><br> 

Enter Email:
<input name="email" id="email" ><br> 
 
Enter Phone:
<input type="phone" name="phone"><br>
 
<input type="submit" name="submit" value="Contact">

</form>
 
</body>

</html>

 Preview:

 coding-zon-contact-form

 file-upload-form.html

  

<html> 
 
<head>
 	
<title> e-Trainings Demo on Html forms </title>
 
</head>  
  
<body>

<h1> FileUpload Form </h1>
 

<form name="f1" method="get" action="" enctype="multipart/form-data">
Choose File:
<input name="file" id="file" ><br> 
 
 
<input type="submit" name="submit" value="Contact">

</form>
 
</body>

</html>

 

 Preview:


 

 

 

coding-zon-fileupload-form

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Comments

Post a Comment

Popular posts from this blog

Recently viewed list in PHP Mysql

Image
 Recently viewed list in PHP MySQL        Learn How to show recently viewed products list in a PHP website using MySQL Database . In the previous tutorial, you learn how to get the last five product IDs in an array. In this tutorial, we use MySQL to get the details of each product from recently viewed, and display them in the bottom of the product details page. Here we're using two files, one is bookdetails.php and another is recentlyviewed.php. In Bookdetails.php bookid is added to a session array 'lastviewed' every time when user clicks on some book. bookdetails.php <?php @ session_start (); include "connect.php" ; //check if //A) a bookid has been submitted //B) the submitted value is numeric $auth = "" ; if ( isset ( $_GET [ 'bid' ])){ //clean it up if (! is_numeric ( $_GET [ 'bid' ])){ //Non numeric value entered. Someone tampered with the catid $error = true ; $errormsg = " Security, Serious error. Contact webmast...
Read more

Import CSV File Into MySQL Using PHP

Image
 Learn How to Import CSV File into MySQL Database Using PHP     This article shows you how to import an uploaded CSV file into MySQL using PHP. index.php file having a form code to upload a CSV file. Once the file uploaded successfully, PHP opens it and reads the line from CSV. Each line of data separated into php variables and then inserted into MySQL table. This process continues until the last line of the CSV. Once it is finished inserting, It displays a message – " Data Inserted in database" And finally closes CSV file. In case any error in uploading, it shows "the file type not allowed" message. PHP Version 5.5.11 1. Create a table with given code in a Database. Query: CREATE TABLE IF NOT EXISTS `items` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY ( `id` ) ) ;   2. Create a following file with you database details and include it in a index.ph...
Read more

Shoppingcart using PHP Sessions - Miniproject

Image
Shopping cart using PHP Sessions, MySQL In this tutorial, you are going to learn how to build a simple shopping cart project using PHP and MySQL. It is a basic project aimed for beginners . This project uses PHP Session to implement shopping cart. Within the session, a cart is created. Sessions allows you managing the products in the cart. Such as… adding product to the cart,  modifying the product quantity,  deleting the product finding the total number of products in the cart. etc.   Download source code from the given link: Note: Scan the code with antivirus and use it. Download Here are steps to accomplish the project. Just follow them. STEP-1   Create a project in a server. Create an image's folder inside the project folder. As given in the picture. Copy some sample products images in that. GO TOP↑   STEP-2: Start server. Open PhpMyAdmin tool in a browser, Create a database, with name shoppingcartdb. Create Table. And insert Data using the given queri...
Read more