Table of Contents

HTML Forms

HTML Forms are used to collect data (like images, text etc ) from the user. Forms are defined using the <form> element. The form element starts with <form> and ends with </form>. <form> element contains lots of input elements, like text fields, radio buttons, checkboxes etc.

To clearly understand the HTML Forms, lets take a look at this example:

Example

<body>
  <form>

  </form>
</body>

The action Attribute

The action attribute is used to point to a webpage that will load after the user submits the form. In other words we can say that the action attribute specifies where the back-end script is located to process that data.

Example

<body>
  <form action = "https://crus4.com">
  </form>

Note:- Forms can be effective and useful if you use PHP with it, as it process the collected data.

The <input> Element

The <input> element is one of the most used form element. It can be displayed in many ways, depending on the attribute type. It can be a text, radio, checkbox, button etc.

Let’s discuss different variations of <input> element:

Text Fields

The <input type = “text”> represents a single line input field for text input. Below is an example of a form with input fields for text:

<form>
  <label> Email: </label> <br/> 
  <input type = "text" Name = "Email"> <br/>
  <label> Password: </label> <br/> 
  <input type = "text" Name = "text" > <br/> 
</form>

Output

Note:- We use <label> element to help users who are willing to share the required data. As the text between the <label> elements will appear bigger and the user can clearly focus on the input element.

Radio Buttons

The <input type = “radio”> allows users to select one of the given choices. Below is an example of a form with radio buttons:

Example

<p> Select your gender </p> 
 <form >
   <input type = "radio" name = "gender" value = "male" /> Male <br/>
   <input type = "radio" name = "gender" value = "female" /> Female <br/>
   <input type = "radio" name = "gender" value = "prefer not to say" /> Prefer not to say <br/> 
</form>

Output

Select your gender

Checkbox

The <input type = “checkbox”> allows users to select none or many options from the given choices. Below is an example of a form with checkboxes :

Example

<p> Which of these Programming languages you know </p> 
<form>
  <input type = "checkbox" name = "programming_language" value= "1" /> JavaScript <br/>
  <input type = "checkbox" name = "programming_language" value= "2" /> Python <br/>
  <input type = "checkbox" name = "programming_language" value= "3" /> Java <br/>
  <input type = "checkbox" name = "programming_language" value= "4" /> C <br/>
</form>

Output

Which of these Programming languages you know

Submit Button

The <input type = “submit”> defines a button for submitting a form to its action attribute. Below is an example of a form with a submit button:

Example

<form>
  <label> First Name: </label> <br/> 
  <input type = "text" Name = "First Name"> <br/>
  <label> Last Name: </label> <br/> 
  <input type = "text" Name = "text" > <br/> 
  <br/> 
  <input type = "submit" value = "submit" /> 
</form>