HTML Forms

HTML Forms

HTML Forms are used to collect data from the user through a web page. The form has various elements like text fields, email fields, password fields, checkboxes, buttons, radio buttons, submit buttons, and so on.

For example, we can collect information of any user such as his/her name, address, contact number, picture and so on.

Syntax:

<form action = “” method = “”> Here, form elements  like input, textareas will be used to collect data 
</form>

Action: Defines URL of the page to which the data is to be submitted.

Method: Defines the method that is to be used for submitting this page to server. there are two type of methods.

  • GET
  • POST

Difference Between GET and POST Method in HTML

GET MethodPost Method
Parameters are placed inside the URLParameters are placed inside Body
to collect the datato update the data
It is not SecureSecure
Information can be cachedInformation can not be cached
Information is visibleInformation is not visible
Not Advised to use GET method
with sensitive data
Advised to use GET method
with sensitive data
can be up to 2000 characters only.can store data up to 8 Mb.

<input> Element

the <input> element is an input field where the users can enter information or Data. <input>elements are placed inside a element. An <input> element can be represented in various ways, depending on the type attribute.

Example:

<html>
 <body>
  <form>
   Your Name: <input type="text"><br>
   Address: <input type="text" ><br>
   City : <input type="text" ><br>
    Country: <input type="text" ><br>
   </form>
 </body>
</html>

Output:

Your Name:
Address:
City :
Country:

List of HTML Input Types

  • <input type=”button”>
  • <input type=”checkbox”>
  • <input type=”color”>
  • <input type=”date”>
  • <input type=”datetime-local”>
  • <input type=”email”>
  • <input type=”file”>
  • <input type=”hidden”>
  • <input type=”image”>
  • <input type=”month”>
  • <input type=”number”>
  • <input type=”password”>
  • <input type=”radio”>
  • <input type=”range”>
  • <input type=”reset”>
  • <input type=”search”>
  • <input type=”submit”>
  • <input type=”tel”>
  • <input type=”text”>
  • <input type=”time”>
  • <input type=”url”>
  • <input type=”week”>

Html Select Element

In HTML, it is used to create a drop-down list on a web page. you will use <select> element to create a drop-down list and <option> elements are also used inside <select> element.

Example:

<!DOCTYPE html>
<html>

 <head> 
  <title> Select Element in HTML: PrepareExams
 </head>
  <body>

   Choose City Here:

    <select>
     <option value=> London </option>
     <option value=> Paris </option>
     <option value=> NewYork </option>
     <option value=> Mumbai</option>
   </select>
  
 </body>
</html>

Output Here:

Choose City Here:

TextArea Form Tag Attribute in HTML

Using <textarea> tag, you can write multiple line text in any input area for a web page to take inputs from Users.

Example:

<html>
<head>
 <form>
 Leave Your Comment Here: <br/>
  <textarea rows="6" cols="30">  </textarea>
 <form>
</body>
</html>

Output:

Leave Your Comment Here:

Checkbox Tag in HTML

With the help of Checkbox, you can choose multiple options from the list of given options.

Syntax: <input type=”checkbox”>

Example

<html>
<head>
 <form>
   Choose Your Degree: <br>
    <input type="checkbox"/> 
   BCA: <input type="checkbox" /> 
   MSC: <input type="checkbox"/>  
   B.Tech: <input type="checkbox"/>  
 <form>
</body>
</html>

Output:

Choose Your Degree:
BCA: MSC: B.Tech:

Radio Button in HTML

The radio button is used to choose only one option from a group of multiple options. generally, we use this button to select a gender option (a male or female).

Syntax: input type=”radio”

Example:

<html>
 <body>
  <form>
   Select Gender: 
   <input type="radio"> Male
   <input type="radio"> Female
  </form>
 </body>
</html>

Output:

Select Gender: Male Female

Password Field in HTML

In HTML, You can provide a password field for users to enter their passwords. Password is not visible to everyone and users can see stat (*) symbols when they enter password digits or words.

Syntax: < input type=”password” >

Example:

<html>
 <body>
 <form>
  Enter Your Password: 
  <input type="password" placeholder="Password Here">
 </form>
</body>
</html>

Output:

Enter Your Password:

Email Field in HTML

If you want to get the User’s Email, you can do this by Email Field in HTML.

Example

<html>
<body>
 <form>
  Enter Your Email: 
  <input type="email" placeholder="Enter Your Email Here">
 </form>
</body>
</html>

Output:

Enter Your Email:

- Advertisment -

Latest Articles