HTML Forms Tutorial for Beginners – Web Development Course

Welcome to this tutorial on HTML forms! In this guide, you will learn how to create a simple HTML file, add form elements, attributes, and input types, and view the results in your web browser using a web hosting file manager. Let’s get started!

Step 1: Log into Your Web Hosting Control Panel

Open your web browser and go to your web hosting control panel login page (e.g., cPanel, Plesk, etc.).
Enter your username and password to log in.

Step 2: Open the File Manager

Once logged in, look for the File Manager option in your control panel dashboard.
Click on File Manager to open it.

Step 3: Navigate to the Public Directory

In the File Manager, navigate to the public_html directory or the appropriate directory where you want to create your HTML file.
This directory is typically where you place files that you want to be accessible via your web domain.

Step 4: Create a New File

In the public_html directory, click on the + File or New File button.
Name the new file forms.html and click Create New File.

Step 5: Edit the HTML File

Locate the forms.html file you just created in the file list.
Right-click on forms.html and select Edit or use the Edit button/menu option to open the file in the text editor provided by the file manager.

Step 6: Add HTML Form Code

Copy and paste the following HTML code into the text editor:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Forms Tutorial</title>
</head>
<body>

<h1>HTML Forms Examples</h1>

<h2>Basic Form</h2>
<form action="/submit_form" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

<h2>Form with Various Input Types</h2>
<form action="/submit_form" method="post">
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd"><br>
  <label for="birthday">Birthday:</label><br>
  <input type="date" id="birthday" name="birthday"><br>
  <label for="quantity">Quantity (between 1 and 5):</label><br>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
  <input type="submit" value="Submit">
</form>

<h2>Form with Attributes</h2>
<form action="/submit_form" method="post" target="_blank">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username" required><br>
  <label for="phone">Phone number:</label><br>
  <input type="tel" id="phone" name="phone"><br>
  <label for="website">Website:</label><br>
  <input type="url" id="website" name="website"><br><br>
  <input type="submit" value="Submit">
</form>

<h2>Form with Input Attributes</h2>
<form action="/submit_form" method="post">
  <label for="country">Country:</label><br>
  <input type="text" id="country" name="country" list="countries"><br>
  <datalist id="countries">
    <option value="USA">
    <option value="Canada">
    <option value="Mexico">
    <option value="Germany">
    <option value="France">
  </datalist>
  <br>
  <label for="file">Upload a file:</label><br>
  <input type="file" id="file" name="file"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

This code includes various HTML forms and form elements:

A basic form with text inputs and a submit button.
A form with different input types such as email, password, date, and number.
A form with attributes like target="_blank" and required fields.
A form using input attributes like list and file.

Step 7: Save the File

After pasting the code, click Save or use the save option in the text editor.
Close the text editor once the file is saved.

Step 8: View the File in a Web Browser

Open your preferred web browser (e.g., Chrome, Firefox, Edge, Safari).
Type your domain name in the address bar followed by /forms.html (e.g., http://yourdomain.com/forms.html).
You should now see a webpage displaying the different forms and input elements as specified in your HTML code.

Practicing on Your Own

To practice creating and modifying HTML forms, follow these steps:

Experiment with Different Elements: Add more form elements like radio buttons, checkboxes, and text areas to your forms.
Modify Attributes: Change the attributes of your form elements (e.g., maxlength, pattern, placeholder) to see how they affect the input fields.
Add Styles: Use CSS to style your forms and make them more visually appealing.
Test Submissions: Set up a simple server or use form submission services to test the form submission process.

By practicing these steps, you’ll become more familiar with HTML forms and their various attributes and input types. Happy coding!