Form in HTML | Lesson 31 HTML Tutorial
Form in HTML Safhatech Image

Form in HTML | Lesson 31 HTML Tutorial

In this lesson “Form in HTML” we will learn the basic of the form and later in next lessons we will learn deep info.

This Video Explain The Same Lesson Content:

Form in HTML Video

HTML <form> Element

The HTML <form> element defines a form that is used to collect user input, means the window between the user and the server. An HTML form contains form elements.

There is many types of elements in form input, like text fields, checkboxes, radio buttons, submit buttons, and more.

HTML <input> Element

The <input> element is the most important form element which is the base tag in form. <input> element can be displayed in several ways, depending on the type attribute we have.

Some <input> Example:

TypeDescription
1- <input type=”text”>Defines a one-line text input field
2- <input type=”radio”>Defines a radio button (for selecting one of many choices)
3- <input type=”submit”>Defines a submit button (for submitting the form)

Text Input

<input type="text"> defines a one-line input field for text input that receives only text characters.

Example:

 <form>
   Name:<br>
  <input type="text" name="Name"><br>
   Company:<br>
  <input type="text" name="Company">
</form> 

Result:

Name:

Company:

Radio Button Input

<input type="radio"> defines a radio button. The main purpose of radio buttons is to let a user select ONE of a limited number of choices.

Example:

 <form>
  <input type="radio" name="language" value="German" checked> German<br>
  <input type="radio" name="language" value="English"> English<br>
  <input type="radio" name="language" value="Arabic"> Arabic
</form> 

Result:

German
English
Arabic

HTML Submit Button

<input type="submit"> defines a button for submitting the form data to a form-action. The form-action is typically a server page with a script for processing input data. The form-action is specified in the form’s action attribute.

Example:

 <form target="_blank" action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form> 

Result:

First name:

Last name:


HTML Form Action Attribute

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button. In the example above, the form data is sent to a page on the server called “/action_page.php”. This page contains a server-side script that handles the form data like php or javascript scripts.

Example:

 <form target="_blank" action="/action_page.php">



This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

References: https://www.w3schools.com

Leave a Reply