How to use HTML5 Form Controls in PHP

 Using HTML5 Form Controls in PHP

 

coding-zon-htgml5-forms-php 

This article shows you how to use html5 form controls in the form and read their values in  PHP. There are many controls newly introduced in html5. Some form controls you will learn in this tutorial such as number, tel, url, email, date, time etc. The following examples show you how to use different type of form fields.  There two files in each example, one is HTML and the other one is PHP file. Both the files save in some folder in the server(xampp/wampp) and run the HTML file in a browser. When it is open, enter the data and submit the form. You will see the result  as shown below the PHP file.

Example1- A form using get

Example2- A form using post

Example 1: 

The below example show you how to submit form with get method.

html5demo.html 

<!DOCTYPE html>
<html>
<head>
<title>html5 Form</title>
</head>
<body>
<form action="html5demo.php" autocomplete="on" name="form1" method="get">
<input type="text" name="fname" placeholder="First name" required><br>
<input type="text" name="lname" placeholder="Last name" required><br>
<input type="password" name="password" placeholder="password"><br>
<input type="tel" name="usrtel" placeholder="Telephone" ><br>
<input type="email" name="email" placeholder="email" autocomplete="off"><br>
<input type="url" name="homepage" placeholder="Add your homepage"><br>
<input pattern="[0-9][A-Z]{3}" name="product" type="text"
title="Single digit followed by three uppercase letters."
placeholder="Product Number" />
<br><br>
CheckBoxes:<br>
<input type="checkbox" name="cb1">cb1
<input type="checkbox" name="cb2">cb2
<input type="checkbox" name="cb3">cb3<br><br> 
RadioButton:<br>
<input type="radio" name="rb1"> rb1
<input type="radio" name="rb2"> rb2
<input type="radio" name="rb3"> rb3<br><br>

FileUpload:
<input type="file"> <br>
Number:<br>
<input type="number" min="0" max="10" step="2" value="6"><br>
Date:<br>
<input type="date" name="date"><br>
Month:<br>
<input type="month" name="month"><br>
Week:<br>
<input type="week" name="week"><br>
Time:<br>
<input type="time" name="time"><br>
Search:<br>
<input name="search" type="search" placeholder="search"><br>
<br><br>
Dropdown:
<select name="opt">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<br><br>
<input type="submit" value="submit">
</form>
</body>
</html>

 Form Output

 

coding-html5-form-controls

html5demo.php 

<?php
 
echo "<br> fname=".$_GET['fname'];
echo "<br> lname=".$_GET['lname'];
echo "<br> password=".$_GET['password'];
echo "<br> email=".$_GET['email'];
echo "<br> tel=".$_GET['usrtel'];
echo "<br> url=".$_GET['homepage'];
echo "<br> product=".$_GET['product'];
echo "<br> date=".$_GET['date'];
echo "<br> month=".$_GET['month'];
echo "<br> week=".$_GET['week'];
echo "<br> time=".$_GET['time'];
echo "<br> option=".$_GET['opt'];
echo "<br> search-value=".$_GET['search'];
 
?>
 
Result
 
FirstName=John
LastName=Doe
Password=john123
Email=john@gmail.com
Telephone=12341234
website=http://john.com
Product=9ABC
Date=2021-12-30
Month=2021-12
Week=2021-W52
Time=20:10
Option=2
Search-value=john 

Example 2: 

 The below example show you how to submit form with post method.

 

html5demopost.html

 

<!DOCTYPE html>
<html>
<head>
<title>html5 Form novalidate demo</title>
</head>
<body> 

 

<form method="post" action="html5demopost.php">
<p>Customer name: <input name="custname" required></p>
<p>Telephone: <input type=tel name="custtel"></p>
<p>E-mail address: <input type=email name="custemail"></p>
<fieldset>
<legend> Pizza Size </legend>
<p><input type=radio name=size value="small"> Small </p>
<p><input type=radio name=size value="medium"> Medium </p>
<p><input type=radio name=size value="large"> Large </p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>

<p> <input type=checkbox name="topping[]" value="onion"> Onion </p>
<p> <input type=checkbox name="topping[]" value="mushroom"> Mushroom </p>
<p> <input type=checkbox name="topping[]" value="Capsicum"> Cpsicum</p>
<p> <input type=checkbox name="topping[]" value="cheese"> Extra Cheese</p> 
</fieldset>
<p>Preferred delivery time: <input type=time min="11:00" max="21:00"
step="900" name="delivery" required> </p>
<p>Delivery instructions: <textarea name="comments"
maxlength=1000></textarea> </p>
<p><button>Submit order</button><p>
</form>
</body>
</html> 

  Output:

 

coding-zon-html5demopost

 

 

 

html5demopost.php 

<?php

echo "<h1> Order Details</h1>"; 
echo "<br> Customer Mobile=".$_POST['custtel'];
echo "<br> Customer Email=".$_POST['custemail'];
echo "<br> Customer Name=".$_POST['custname'];
echo "<br> Size=".$_POST['size'];
echo "<br> Topping=";
foreach($_POST['topping'] as $val){
echo $val.",";
}
echo "<br> Delivery=".$_POST['delivery'];
echo "<br> Comments=".$_POST['comments'];
?> 
 
 Output:
coding-zon-html5demopost

 
 
 
 
 
 
 
 

What is form novalidate

 

No validate disables the inbuilt Html5 form validation.

if you check the below form, there is a keyword added in the form tag.

if try to submit the form without entering email, the browser will display a warning.

if no validate is specified. it will submit the blank field to the action_page. 

 


Ex:
 
 
<!DOCTYPE html>
<html>
<head>
<title>html5 Form novalidate demo</title>
</head>
<body> 
 

<form action="/action_page.php" novalidate> 

 Email: <input type="email" name="user_email">

<input type="submit" value="submit"> 

</form>
</body>
</html>

 

Comments

Post a Comment

Popular posts from this blog

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.
Read more

Creating a new PDF by Merging PDF documents using TCPDF

Image
Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs? You can merge several documents into one. In PHP, you have a library called TCPDF which allows you to combine one or more PDF documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide
Read more

Import excel file into mysql in PHP

Image
  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library - extract it, rename the folder to library . Create index.php file with given code in a server. Create excelUpload.php with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:   5.5.11 Folder Structure      Query: CREATE TABLE IF NOT EXISTS `tbl_products` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT, `productname` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY (`id`) )     Top index.php <!DOCTYPE html> <html> <head> <title> coding-zon Demo - Upload Excel to MySQL in PHP </title> <lin
Read more