HTML Lesson 14: Forms

0
19

Introduction to HTML Forms

HTML Forms includes input field, text field, passwords, radio buttons and checkboxes. Every form comprised of start <form> and end </form> tag. Basically, HTML Form communicate with server. Every Form attribute send information to server.

Form Handling

You will learn in detail about forms in PHP. But you should know the basics of it. Every HTML Form is handled by the PHP and data is sent through POST and GET method. Following is the brief description of POST and GET method.

  • POST Method is used to send secure data. That is why this method is developer’s first priority.
  • GET Method is used to send unsecured date.

Don’t confuse about these methods right now, just focus on how to create a forms in HTML.

POST Method GET Method

Input Field – Forms

Input Fields are most widely used Form elements. The <input> elements can be text field, buttons, passwords etc. To define input, type attribute is used.

Here you will learn the basic but most widely used input attributes. So let’s get started!

Text field

Text Fields are mostly used for Login and Signup forms. But you can use it for any type of text. It calls text field because you can type in it. Here is the demonstration of it:

Source Code Output
First name:
Last name:

Name attribute are used to define path in PHP code. You will learn in detail about it in PHP.

Password field

A login without password is incomplete. right? So here is Password Fields which are used to input passwords. By default the password are being hidden. Here is the demonstration.

Source Code Output
Password:

Submit button

Since you have entered your username and password then you are required to submit it. Here is the Submit button which will send data on server and only then you are able to enter into a website. Here is how to add a submit button in the form.

Source Code Output
Name: Password:

Radio button

Radio button is use to select only ONE option from list. Here is the demonstration of it.

Source Code Output
Gender:
Male
Female

CheckBoxes

Unlike radio buttons, CheckBoxes are use to select only MULTIPLE option from list. Here is the demonstration of it

Source Code Output
Your Favourite Fruit:
Apple
Banana

Selection Fields

Selection Fields is a drop-down list. Instead of <input> tag you will use <select> tag. For options you will use <option> tag. Here is the demonstration

Source Code Output
Gender:

Summary

  • Forms use for communicating with server.
  • Form includes input field, text field, passwords, radio buttons, list, checkboxes etc
  • <input> tag allow you to add content and it can be text, password, checkboxes etc.
  • <select> tag has type attribute.
  • Text attribute defines text.
  • Password attribute allow user to add passowrd.
  • Submit button send data to server.
  • Radio button use to select one option.
  • Checkboxes use for multiple selection of option.
  • Selection fields create list.

Next Lesson

It seems you have good knowledge of HTML and ready to construct a basic website. So let’s give you the understanding of a Website Layout. See you in next Lesson!

Leave a Reply