Unlocking Table and Form Secrets in HTML

Taking Actions With Forms

Learning Outcome

HTML Form Elements and Attributes

1

2

Working with Interactive Form Design

 

3

Advanced Form Controls in HTML

Earlier, We Explored How Form Elements Facilitate The Creation Of Forms

Label

Required

Placeholder

Button

Input Type

Date

Select Tag

Text Area

Datalist

Method

Action

Target

How Do We Add A Date Selection Feature to HTML Form?

Using Date as a input type

 <label>Select Date </label>
 <br />
 <input type="date" />

How Can <input type="date"> Be Used to Create A Date Picker?

 <label>Select Date </label>
 <br />
 <input type="date" />

Using <select> tag

Using <datalist> tag

Or

The 'date' input in HTML forms allows users to input date values, either manually or through a calendar picker

How Can <input type="date"> Be Used to Create A Date Picker?

 <label>Select Date </label>
 <br />
 <input type="date" />

Using <select> tag

Using <select> tag

Using <datalist> tag

Or

The 'date' input in HTML forms allows users to input date values, either manually or through a calendar picker

Can We Create A Cool Dropdown Menu Using Just HTML?

Using <select> tag

Using <datalist> tag

Yes, We can

Let's see what's the difference between them

The <select> tag in HTML is used to create dropdown lists, allowing users to select one or more options from a predefined set of choices.

What is <select> tag?

What is <datalist> tag?

The <select> tag in HTML is used to create dropdown lists, allowing users to select option

The <datalist> tag in HTML offers predefined options for input fields also enabling entering custom input

How <select> Tag Can Be Used In HTML?

<label>Courses </label>
      <br>
      <select name="Courses">
        <option value="FSD">Full Stack Developer</option>
        <option value="DSA">Data Software Engineering</option>
        <option value="DA">Data Analytics</option>
      </select>

<option> Tag

The <option> tag in HTML lets you define choices in a dropdown menu made with <select>

Why do we utilize the <option> tag with the 'value' attribute within the 'select' tag?

What Makes The <option> Tag?

<option value="DSA">Data Software Engineering</option>

<option> Tag

value Attribute

Lets you define choices in a dropdown menu made with <select>

Assigns a value to each option

This value is what gets submitted when the form is filled out

How Can We Enhance Form Interactivity Using Preset Dropdown Options?

Using Datalist with <option> Tag

How <datalist> Tag is Used with Option?

 <label>Select your Hobby in Sports :- </label>
      <br>
      <input list="sports" name="sport">
      <datalist id="sports">
        <option value="cricket"></option>
        <option value="hockey"></option>
        <option value="tennis"></option>
        <option value="badminton"></option>
        <option value="volleyball"></option>
        <option value="Baseball"></option>
        <option value="Football"></option>
      </datalist>

Opening & closing of datalist tag

The input list connects fields with dropdown options and controls datalist tags

What Does HTML Offer For Typing Longer Addresses Or Feedbacks?

<textarea> is a multi-line text input field in HTML forms, allowing users to enter larger amounts of text

Type something

Using <textarea> tag

What is <textarea> Tag?

How <textarea> Tag is Used?

<label> Address :</label>
<textarea name="Address" cols="50" required></textarea>

Cols sets the initial horizontal width of the text area

cols="50"
cols="20"

After Filling Out The Form, When We Click The Submit Button, Various Actions Can Occur

Redirecting to another page

Redirecting to URL

Fetching or Posting Data

Method

Target

Action

After Hitting 'Submit' On A Form, How Does Our Data Move Across The Internet?

Using Method Attribute

GET

POST

Determine how data is transferred during submission

How 'GET' Method Works?

'GET' method in HTML forms sends data to the server as part of the URL, typically used for retrieving data from the server

  • Data is visible

  • Can't send large amount of data

 <form method="get" action="./successful.html" target="_self">
<form method="get"

How 'POST' Method Works?

The 'POST' method sends data to the server in the request body, commonly used for submitting data to be processed or stored on the server

  • Data is not visible

 <form method="get" action="./successful.html" target="_self">
<form method="post"

How Does the Information of Registration Form Get Transferred to the Server?

Using Action Attribute

What is Action Attribute?

The action attribute specifies the URL where the form data should be submitted after it's submitted

 <form method="get" action="./successful.html" >

How Do Web Pages Open in New Tabs When Clicked?

 <form method="get" action="./successful.html" >

How Do Web Pages Open in New Tabs When Clicked?

 <form method="get" action="./successful.html" target="_self">

Using target Attribute

What is 'Target' Attribute?

 <form method="get" action="./successful.html" target="_self">

HTML's target attribute controls if links open in a new tab or the same one

Here we assign "_self" as a value to target

What Are Various Values of The 'Target' Attribute

target="_self"

target="_blank"

target="_parent"

target="_top"

Opens the response in the same browser window/tab (default)

Opens the response in the full body of the window, replacing any frames

Opens the response in the parent frame of a nested frame

Opens the response in a new browser window/tab

Let's See It In Action

Taking Actions With Forms

By Content ITV

Taking Actions With Forms

  • 5

More from Content ITV