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

<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:

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:

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:

<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>

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

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:

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: