Let us create a Simple Food Order form by using HTML ,CSS and javaScript
Hello guys, this article shows you how can we make a simple food ordering web page by using HTML ,CSS and javaScript.Here I used checkbox,textarea,button,paragrapgh and option by using HTML and added colours,font styles ,padding and alignment by using CSS Styles.Also to have alerts,validations,final calculations and to get data for the backend javaScript language is used.
First let us consider HTML and css part of this form.
This is a simple food ordering form.The Items with the pricelist shows at the begining. You can select any branch from the given branches where you prefer to order.You have to simply provide the Name and the telephone number in appropriate places.Buyer can select at least 4 items which are available in food-shop with quantities(According to form here I mentioned 4 items,if want more items options can be added to select).After seeing pricelist buyer can either submit it or clear.
This is how we are going to implement it with HTML and CSS.We are going to implement this web page according to the following diagram.
First I am going to implement the css part which supports to beautify the form.We can use notepad or notepad++ as a text-editor.The border,colour styles,Font styles to the form, all are added via css styles.Following code shows how we use css styles to this form.
th{
text-align:left;
}
body{
font-size: 20pt;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
div {
text-align: center;
border-style: solid;
margin-left: 300px;
width:60%
}
#alignment{
margin-left: auto;
margin-right: auto;
}The css web page we are saving as “Styles.css” as an external file type.Here all the styles that should added to the web-page added via css file. Therefore we can simply edit and do prferences. A good look to the form comes via css styles.As I told text-align,font-size,background-color,border,padding,margin all are done by this css style.
There after here we enter to the HTML file, where the whole body of the form includes.Every html file opens with <html> tag and ends with the html close tag</html>.
<html>
<head>
<title>FOOD ORDER FORM</title>
<link rel="stylesheet" type="text/css" href="formCssFile.css">
<script type="text/javascript" src="scriptfile.js"> </script> </head>
</html >After<html> tag, we use <head> tag what we use before <body> tag.Here with in <head> tag we link the css file and javaScript file to the html file. By using <link href>we link the css File .We use <script src>to link the javaScript file.
<body >
<div>
<h2>==========Price list==========</h2>
Before close the </html> tag ,after </head> we apply <body> tag where all the body of the form include.At the begining of the <body>here we use <div> to make the devisions of content in the webpage. with in header tag<h2> we can write topics.Here I have written “Price List” between <h2> tags,and that’s the reason we can see it in large and bolded letters.
<table width="40%" id="alignment" >
<tr>
<th>Food Item</th>
<th></th>
<th>Price(Rs.)</th>
</tr> <tr>
<td>Chicken pizza</td>
<td> - </td>
<td>700.00</td>
</tr> <tr>
<td>Vegetable Pizza</td>
<td> - </td>
<td>500.00</td>
</tr><tr>
<td>Chiken Kottu</td>
<td> - </td>
<td>300.00</td>
</tr> <tr>
<td>Vegetable Kottu </td>
<td> - </td>
<td>200.00</td>
</tr> <tr>
<td>Water Bottle</td>
<td> - </td>
<td>70.00</td>
</tr>
</table>
To make this form I have created a table.In side the table here we created the pricelist with fooditem and price.table tag opens with <table> and ends with </table>.Each and every row of a table starts with a <tr>tag and ends with </tr>.Here I did not use a table border.If I did there you can see a table border.We write table head via <th> tag and ends with </th>.We use in side of the<th> what we want to highlight.We use <td> tag what we want to include inside of the table furthur.Here “ Food Item” and the “Price(Rs)” have written with in <th> tag and we can see them in bold letters.
Here let us see what we have implemented in our food ordering web page up to now.
<h>FIT Food - Order Form</h1>
<table style="background-color:aquamarine;margin-left: 100px;"> <tr>
<td>Branch : </td>
<td>
<select>
<option>--Select Item--</option>
<option>Galle</option>
<option>Colombo</option>
</select>
</td>
</tr>
<tr>
<td>User name:</td>
<td>
<input type="text" >
</td>
</tr>
<tr><td>Mobile: </td>
<td><input type="text" id="mblenmb" onfocusout="checkmob()"></td></tr>
</table>
<br>Here I wrote the main topic of the web page as “FIT Food- Order Form” with in <h> tag.Here I added option method where we can select the branch.<option>tag use inbetween<select> tag. Any option can be given and we can select the option as per our requirenments.Here I created another table because it is easy to mange the content in side a table.User name and the Mobile phone number also should be provided.Following figure shows the implemented part we have done up to now and there you can see how to select the branch.
Now let us see how can we see the form after completing.We have to supply our name and the Mobile number.The backgroud color of the table visible due to css style.
Now let us apply food items, price of a selected item and the quantity.Here also I have given option value to select the Items what we want. This also I have created inside of a <table> as I can manage it easily rather than keep spacing.Here I have given a name to the form as “tblform”.
<form name="tblform" >
<table width="80%" id="alignment" >
<tr>
<th>Food Item</th>
<th> </th>
<th>Quantity</th>
<th>Price</th>
</tr><tr>
<td>Item 1:</td>
<td>
<select id="item1">
<option value="1">--Select Item--</option>
<option value="Chicken pizza">Chicken pizza</option>
<option value="Vegetable Pizza">Vegetable Pizza</option>
<option value="Chicken Kottu">Chicken Kottu</option>
<option value="Vegetable Kottu">Vegetable Kottu</option>
<option value="Water Bottle ">Water Bottle </option>
</select>
</td>
<td><input type="number" value="0" id="q1"></td>
<td><input type="text" id="p1"></td>
</tr> <tr>
<td>Item 2:</td>
<td>
<select id="item2">
<option value="1">--Select Item--</option>
<option value="Chicken pizza">Chicken pizza</option>
<option value="Vegetable Pizza">Vegetable Pizza</option>
<option value="Chicken Kottu">Chicken Kottu</option>
<option value="Vegetable Kottu">Vegetable Kottu</option>
<option value="Water Bottle ">Water Bottle </option>
</select>
</td>
<td><input type="number" value="0" id="q2"></td>
<td><input type="text" id="p2"></td>
</tr> <tr>
<td>Item 3:</td>
<td><select id="item3">
<option value="1">--Select Item--</option>
<option value="Chicken pizza">Chicken pizza</option>
<option value="Vegetable Pizza">Vegetable Pizza</option>
<option value="Chicken Kottu">Chicken Kottu</option>
<option value="Vegetable Kottu">Vegetable Kottu</option>
<option value="Water Bottle ">Water Bottle </option>
</select>
</td>
<td><input type="number" value="0" id="q3"></td>
<td><input type="text" id="p3"></td>
</tr> <tr>
<td>Item 4:</td>
<td><select id="item4">
<option value="1">--Select Item--</option>
<option value="Chicken pizza">Chicken pizza</option>
<option value="Vegetable Pizza">Vegetable Pizza</option>
<option value="Chicken Kottu">Chicken Kottu</option>
<option value="Vegetable Kottu">Vegetable Kottu</option>
<option value="Water Bottle ">Water Bottle </option>
</select>
</td>
<td><input type="number" value="0" id="q4"></td>
<td><input type="text" id="p4"></td>
</tr> <tr>
<td></td>
<td></td>
<td><input type="submit" class="button" value="Create Bill" onclick=createBill()></td>
<td><input type="reset" class="button" value="Clear"></td>
</tr>
</table>
</form>
Here I have given an input type called “submit” to submit the orders after we have done.Also here we can clear what we have ordered.For this I have put input type called “reset”.Following figure shows you the output of the form according to above code.
So this is end of the interface of our simple web page. It is a food order form. We can simply use HTML,CSS and make more creative web pages like this.It is easy and free for both customer and for the buyer.Now let us see how we used javaScript for our “FIT-Food order form”. We can use notepad or notepad++ as text editor.
Now let us see how we used javaScript to this food order form
function checkmob(){
var str=document.getElementById("mblenmb").value;
var ptr=/^07[072568][0-9]{7}$/;
var chck=ptr.test(str);
if(!chck)
alert("Moblie Number is Incorrect");
}To check whether the given telephone number is correct or not we have implemented a validation part in javaScript.Here first two numbers of telephone number should be start with 07, and the third letter should be 0,7,2,5,6 or 8.And the other 7 letters can be any numbers between 0 to 9.If we have entered a wrong mobile number,An alert message comes as follows.There we can see ,
“This page says
Mobile Number is Incorrect”
function createBill(){var index=0;
var items = ["null", "null", "null","null"];
var quantities = ["null", "null", "null","null"];
var prices = ["null", "null", "null","null"];
var e1 = document.getElementById("item1");
var itemselected1 = e1.options[e1.selectedIndex].value;
if(itemselected1!="1"){
items[index]=itemselected1;
quantities[index] = document.getElementById("q1").value;
prices[index] = document.getElementById("p1").value;
index++;
}
var e2 = document.getElementById("item2");
var itemselected2 = e2.options[e2.selectedIndex].value;
if(itemselected2!="1"){
items[index]=itemselected2;
quantities[index] = document.getElementById("q2").value;
prices[index] = document.getElementById("p2").value;
index++;
}
var e3 = document.getElementById("item3");
var itemselected3 = e3.options[e3.selectedIndex].value;
if(itemselected3!="1"){
items[index]=itemselected3;
quantities[index] = document.getElementById("q3").value;
prices[index] = document.getElementById("p3").value;
index++;
}
var e4 = document.getElementById("item4");
itemselected4 = e4.options[e4.selectedIndex].value;
if(itemselected4!="1"){
items[index]=itemselected4;
quantities[index] = document.getElementById("q4").value;
prices[index] = document.getElementById("p4").value;
index++;
}
var fTot=0;
strt(1);
for(var i=0;i<index;i++){
document.write("<tr>");
createtbl(items[i]);
createtbl(quantities[i]);
createtbl(prices[i]);
var tot=parseInt(quantities[i])*parseInt(prices[i]);
document.write("<td>"+tot+"</td>");
fTot+=tot;
document.write("</tr>");
}document.write("<tr><td colspan=\"3\"><strong>TOTAL</strong></td><td>"+fTot+"</td><tr>");
strt(2);
}function createtbl(x){
document.write("<td>"+x+"</td>");
}
function strt(n){
if(n==1){
document.writeln("<h1 style=\"text-align:center;\">The Bill</h1>");
document.writeln("<table width=\"90%\" border=\"1\">");
document.writeln("<tr><th>ITEMS</th><th>QUANTITY</th><th>PRICE</th><th></th></tr>");
}
else
document.write("</table>");
}
function createTot(x,y){
var tot=parseInt(x)*parseInt(y);
document.write("<td>"+tot+"</td>");
}
Above javaScript code shows the furthur implementations of our form.Here get input parameters from the user and pass them to the backend of the form.Calculation parts of the form done via this javaScript part.
Following figure shows you how to fill the form. We can select any food item given in the form with number of quantity and the price.
After we submit Create Bill option,we can see bill is created as following diagram.
Finally we can receive the bill.The bill is created with javaScript programming.When we enter input ,the output of the bill comes as above.
Here let us see , how another programme works by using PHP.
This part shows you how we get data from the PHP server.The user interface of this form have created by using html and css.Backend has developed with PHP. PHP is an another server side programming language that is embedded in html.It is used to manage database.PHP scripts are executed in PHP server.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contract form tutorial</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<p>Send E-mail</p>
<form class="contact-form" action="contactform.php" method="post"><input type="text" name="name" placeholder="Full name">
<input type="text" name="mail" placeholder="Your email">
<input type="text" name="subject" placeholder="Subject">
<textarea name="message" placeholder="message"></textarea>
<button type="submit" name="submit">Send mail</button></form></main>
</body></html>
This form is created by using html and css.And the out put of the above form is as below.To connect it to the PHP server,POST method is used. There are mainly two types of methods called GET and POST.POST method is the most common method that often use. POST method is used here to send the data to the server.POST method is more secure than GET method.The action is “contactform.php”.
Now let us create PHP contact form for the above form.Here also we can use notepad++ as the text editor.Here you can see all the inputs send to the server with POST method.PHP script opens with <?php and ends with?>.A PHP File is save as a .php file.
<?php
if (isset($_POST['submit'])){
$name=$_POST['name'];
$subject=$_POST['subject'];
$mailFrom=$_POST['mail'];
$message=$_POST['message'];$mailTo="dani@mmtuts.net";
$headers="From: ".$mailFrom;
$txt="You have received an email from".$name.".\n\n".$message;mail($mailTo,$subject,$txt,$headers);
header("Location:index.php?mailsend");
}
Now let us fill above form as below diagram.
Now after submitting SEND MAIL button, the datails that entered by the user goes to the backend. This is happened via <form class=”contact-form” action=”contactform.php” method=”post”> in the html file. The data we input and the backend connected via this POST method.
So thank you guys for reading my article about how to create a food order form by using HTML and CSS.Here I have supplied you the sample code and the output of each code.Try this out.Hope you guys enjoy and got an knowledge regarding with html,css and PHP.
