Creating basic forms using HTML
HTML markup language contains all the necessary tags for PHP form development. Remember, HTML form allows the Internet user to input data in any website or webpage online. Which is filled manually step by step online by the client user, when needed, this information is processed and stored by the server. HTML forms in PHP are used to collect many types of data and information from the user. Such as, online user registration, user login, data and information search and data submission, data upload, and data download and many other types of forms can be created and controlled with the help of HTML in PHP.
Main steps in creating a form for php in HTML webpage.
Basic form structure for php form development in HTML webpage.
The <form> tag is used in the basic form structure for PHP form development in HTML webpage. Which defines the form layout in the webpage, and displays the form by adding the form tag element. In a normal HTML webpage, the form contains input fields like text box, checkbox, radio button, and button for form data submission for PHP form development.
php form development examples in HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Html Form With Php</title>
</head>
<body>
<h1>Contact Form</h1>
<form action=”submit_form.php” method=”POST”>
<label for=”empoyeename”>Employeename – </label>
<input type=”text” id=”employeename” name=”employeename” required>
<br>
<label for=”gender”>Employee Gender – </label>
<label for=”gender_m”>Male</label>
<input type=”radio” id=”gender_m” name=”gender” value=”male”>
<label for=”gender_f”>Female</label>
<input type=”radio” id=”gender_f” name=”gender” value=”female”>
<br>
<label for=”language”>Employee Language – </label>
<label for=”language”>Php </label>
<input type=”checkbox” id=” language ” name=” language ” value=”yes”>
<label for=”language”>Java </label>
<input type=”checkbox” id=” language ” name=” language ” value=”yes”>
<label for=”language”>Javascript </label>
<input type=”checkbox” id=” language ” name=” language ” value=”yes”>
<br>
<label for=”course”>Select Course – </label>
<select id=”course” name=”course”>
<option value=”course”>Html</option>
<option value=”course”>Php</option>
<option value=”course”>Javascript</option>
</select>
<br>
<label for=”bdate”>Enter Dob – </label>
<input type=”date” id=”bdate” name=”bdate” required>
<br>
<label for=”file”> File Upload -</label>
<input type=”file” id=”file” name=”file”>
<br>
<label for=”message”>Message:</label><br>
<textarea id=”message” name=”message” rows=”4″ cols=”50″ required></textarea><br><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
php form explanation in HTML webpage.
<form> tag – The form tag defines the beginning of the form in the webpage and the end of the form. The form tag has two important attributes. In which,
method – The method in the HTML webpage defines how the form data is sent. Where the basic form method is GET (adds data to the URL) and POST sends the data in the request body to the online server location.
action – It indicates the server-side script in the form, such as submit_form.php. Which will process the form data in the online location when submitted by the user.
<label> tag – Displays a text label for each form field in an HTML webpage. It is a best practice to associate <label> with inputs using for attributes, which connects the label to the corresponding input field in the HTML form webpage via an ID.
<input> tag – It is a multi-purpose element in HTML webpages, which is used to create input fields in a form. Here you get the selection options in different types of input field type attributes (e.g., text, email, password, etc.).
type=”text” – Provides a standard text input field in an HTML webpage.
type=”email” – An input field in an HTML webpage that inputs and validates an email address.
required – This tag is used in a form in an HTML webpage to ensure that the field is required to be filled before the form can be submitted.
<textarea> tag – Creates a multiline text box for large text input, such as long message text, in an HTML webpage.
<input type=”submit”> – Creates a submit form button in an HTML webpage, which allows you to submit the form data to a server location.
Form elements in an HTML webpage.
In an HTML webpage form, you get a variety of form element selection choices in the Multiple Form Input Types option as per your requirement.
Let’s understand form elements in an HTML webpage better.
HTML form text input.
<label for=”employeename”>Employeename – </label>
<input type=”text” id=”employeename” name=”employeename” required>
HTML form password input.
<label for=”password”>Password – </label>
<input type=”password” id=”password” name=”password” required>
HTML form radio buttons.
Radio button forms in HTML webpage forms allow the user to select only one option from a group of radio buttons.
<label for=”gender_m”>Male</label>
<input type=”radio” id=”gender_m” name=”gender” value=”male”>
<label for=”gender_f”>Female</label>
<input type=”radio” id=”gender_f” name=”gender” value=”female”>
HTML form checkbox.
Checkbox forms in HTML webpage forms allow the user to select multiple firm checkbox options.
<label for=”language”>Php </label>
<input type=”checkbox” id=” language ” name=” language ” value=”yes”>
HTML form select dropdown.
A dropdown (or selection) in an HTML webpage form allows the user to select an option from a list.
<label for=”course”>Select Course – </label>
<select id=”course” name=”course”>
<option value=” course “>Html</option>
<option value=” course “>Php</option>
<option value=” course “>Javascript</option>
</select>
HTML form date input.
A date input form in an HTML webpage form helps the user to input a date.
<label for=”bdate”>Enter Dob – </label>
<input type=”date” id=”bdate” name=”bdate” required>
HTML form file upload.
Form File Upload form in HTML webpage helps user to upload form data online.
<label for=”file”> File Upload -</label>
<input type=”file” id=”file” name=”file”>
Grouping form elements with <fieldset> in an HTML webpage form.
To visually group and display related form elements in an HTML webpage form, you can use the <fieldset> tag. Which provides a box area around the related form controls in your existing HTML webpage form.
<fieldset>
<legend>Employee Detail</legend>
<label for=”name”>Employee Name – </label>
<input type=”text” id=”name” name=”name” required><br><br>
<label for=”email”>Employee Email – </label>
<input type=”email” id=”email” name=”email” required><br><br>
</fieldset>
Here in this example.
The use of the <legend> tag here provides a box to group form control fields.
HTML form submit and reset buttons.
Form submit button – Submits the form data online to the server location in the HTML webpage form.
<input type=”submit” value=”Submit”>
Form reset button – Resets all the form fields in the HTML webpage form to their default values.
<input type=”reset” value=”Reset”>
HTML form form validation.
You can add basic validation effects to HTML forms by using form attributes like required, min length, max length, pattern, type etc. in your existing HTML webpage form. This ensures in the existing form that the form is filled correctly before the user submits the form.
HTML form email validation example.
<label for=”email”>Employee Email -</label>
<input type=”email” id=”email” name=”email” required>
Here, in your existing HTML webpage form the browser will check if the email address entered is in the correct format before submitting the form.
HTML form sending form data to the server.
When form information is submitted in an HTML webpage form, the web browser sends the data to the server location defined in the action defined attributes of the <form> tag. Here the form data is sent online using GET or POST form method, depending on what you select in the form method attributes.
- GET – Sends the data entered in the form URL to the HTML webpage form, this method is for sending (not safe for sensitive data).
- POST – Sends data in the body of the form request to an HTML webpage form, this is more secure for sensitive data than in existing forms.
Form submission example with POST.
<form action=”submit_form.php” method=”POST”>
<label for=”employeename”>employee name – </label>
<input type=”text” id=” employeename ” name=” employeename ” required><br><br>
<input type=”submit” value=”Submit”>
</form>
Here, when the online form is submitted, the existing web browser will send the data to the submit_form.php location via the POST form method.
HTML form form action and processing.
In an HTML webpage form, a server-side script (such as submit_form.php) will receive and process the form data. Below is an example of how to process form data using PHP.
PHP form processing (submit_form.php) example.
<?php
if ($_SERVER[“REQUEST_METHOD”] == “POST”) {
$username = $_POST[“employeename”];
echo “Hi, $employeename!”;
}
?>
This PHP script processes user-entered form data online.
It checks if the form was submitted using POST.
It retrieves the value of the employee name input field using $_POST[“employeename”].
HTML form conclusion.
Creating an HTML webpage form involves defining the form structure layout with the <form> tag and adding or displaying multiple form tag elements, such as text inputs, radio buttons, checkboxes, and submit buttons. HTML5 versions give you more form validation and more options for input types, making forms easier to use and more secure. When a form submission sends the data to the server, where it can be processed online using a server-side scripting language such as PHP.
