HTML Forms

Used to create a form for user inputs.
It's a crucial part of web development as they allow users to input data and interact with web pages.
Forms are used for various purposes, such as submitting information, performing searches, and collecting user data.
They typically consist of input fields, buttons, and other form elements that enable users to enter and submit data to a server for processing.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Sample Form</title>
    </head>
    <body>
        <h2>Contact Us</h2>
        <form action="/submit_form.php" method="POST">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required />
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required />
            <label for="message">Message:</label>
            <textarea id="message" name="message" required></textarea>
            <input type="submit" value="Submit" />
        </form>
    </body>
</html>

HTML Form Elements

There are some elements used in forms
  1. <label>
  2. <input>
  3. <textarea>
  4. <select>
  5. <button>
  6. <label>
  7. <fieldset>
  8. <legend>

Input Element

Description

Example

<label>

Used to associate a label with an input element, such as <input>, <textarea>, <select>, or other form elements
Syntax: <label for="input_id">Label Text</label>

Run

<textarea>

A multi-line text input area that allows users to enter longer text or comments
Syntax: <textarea name="comments" rows="4" cols="50"></textarea>

Run

<select>

Creates a drop-down list of options from which users can select one or more items. Inside <select>, you use <option> elements to define the individual selectable items.
Syntax: <select name="country"> <option value="USA">United States</option> </select>

Run

<datalist>

Defines a list of predefined options for an <input> element with the list attribute
Syntax: <datalist id="fruits"><option value="Apple"><option value="Banana"></datalist>

Run

<output>

Represents the result of a calculation or a user action. It is often used in combination with JavaScript to display computed values or responses
Syntax: <output name="result"></output>

Run

<option>

Defines an option within a <select> element or a <datalist>
Syntax: <select name="city"><option value="New York">New York</option><option value="Los Angeles">Los Angeles</option></select>

Run

<button>

A clickable button that can perform various actions, such as triggering JavaScript functions or submitting a form
Syntax: <button type="button" onclick="alert('Hello!')">Click me</button>

Run

<fieldset> and <legend>

Used to group related form elements together, with the <legend> providing a caption for the fieldset.
Syntax: <fieldset> <legend>Contact Information</legend> </fieldset>

Run

<optgroup>

Groups related options within a <select> element
Syntax: <optgroup label="Citrus"><option value="Orange">Orange</option></optgroup>

Run


The <input> Element

Let's learn about input element seperately.
The HTML <input> element is a versatile form control that allows users to input data on a web page.
It is used to create various types of form fields, such as text fields, checkboxes, radio buttons, buttons, and more.
The appearance and behavior of the input element can vary depending on the type attribute you assign to it.
Syntax: <input type="..." name="..." value="..." />

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Text input type</title>
    </head>
    <body>
        <h2>Contact Us</h2>
        <form action="/submit_form.php" method="POST">
            <label for="text">Name:</label>
            <input type="text" id="text" name="text" />
        </form>
    </body>
</html>

The <input> Types

The default value of the type attribute is "text"
Here are the input types

Input Type

Description

Example

text

Creates a single-line text input field for users to enter plain text
Syntax: <input type="text"/>

Run

password

Creates a password input field that masks the characters entered for security
Syntax: <input type="password"/>

Run

email

Provides an input field specifically designed for entering email addresses with built-in email validation
Syntax: <input type="email"/>

Run

checkbox

Creates a checkbox that allows users to select one or more options from a list
Syntax: <input type="checkbox"/>

Run

radio

Creates a set of radio buttons that allow users to select only one option from a list
Syntax: <input type="radio"/>

Run

tel

Creates a field that is specifically designed for entering telephone numbers
Syntax: <input type="tel" name="phoneNumber">

Run

image

Creates a clickable image that acts as a submit button within a form
Syntax: <input type="image" src="image_path.png" alt="Image Description" name="submitImage">

Run

submit

Creates a button that, when clicked, submits the form data to the server for processing
Syntax: <input type="submit"/>

Run

reset

Creates a button that, when clicked, resets the form fields to their default values
Syntax: <input type="reset"/>

Run

file

Creates a file input field that allows users to upload files from their local system
Syntax: <input type="file"/>

Run

week

used to allow users to select a specific week within a calendar month
Syntax: <input type="week"/>

Run

month

Creates a field for entering only the month and year, without specifying a specific day
Syntax: <input type="month" name="monthInput">

Run

search

create a field that is specifically designed for entering search queries
Syntax: <input type="search" name="searchQuery">

Run

url

Used for entering website URLs. Some browsers provide URL validation for this input type
Syntax: <input type="url"/>

Run

time

Allows users to select a time value
Syntax: <input type="time"/>

Run

Color

Provides a color picker for selecting colors
Syntax: <input type="color"/>

Run

Range

Creates a slider control to select a value within a specified range
Syntax: <input type="range"/>

Run

button

A generic button that can be used for JavaScript interactions
Syntax: <input type="button"/>

Run

hidden

Hides the input field from the user but can store data used by scripts
Syntax: <input type="hidden"/>

Run

number

Creates an input field for entering numeric values
Syntax: <input type="number"/>

Run

datetime-local

Creates a field for entering both date and time values, with the time displayed in a 24-hour format
Syntax: <input type="datetime-local" name="dateTimeInput">

Run

date

Creates an input field for selecting dates
Syntax: <input type="date"/>

Run


Example

<!DOCTYPE html>
<html>
<head>
  <title>Sample Form</title>
</head>
<body>

  <h2>Registration Form</h2>

  <form action="/submit_form.php" method="POST">

    <label for="full_name">Full Name:</label>
    <input type="text" id="full_name" name="full_name" required>

    <br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <br>

    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="male" required>
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female" required>
    <label for="female">Female</label>
    <input type="radio" id="other" name="gender" value="other" required>
    <label for="other">Other</label>

    <br>

    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="usa">USA</option>
      <option value="canada">Canada</option>
      <option value="uk">UK</option>
      <option value="australia">Australia</option>
      <option value="other">Other</option>
    </select>

    <br>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <br>

    <input type="submit" value="Submit">
  </form>

</body>
</html>

Quick Recap - Topics Covered

HTML Forms
HTML Forms
Input Element
Input Types

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message