PREVIOUS NEXT

HTML – Forms

HTML forms are very important part of web development, allowing users to input and submit data to a server.
HTML forms are used for various purposes, including user registration, contact forms, search boxes, and more.

Example:

Inside the <form >

Label:

The <label> element, which provides a text description for the input field.

Syntax:

🚀 Try it yourself! Click the button below to run the code and see the output in action.

HTML Code

Output

<head>
    <style>
      .login-container {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
            margin: 30px auto;
        }
        .login-container h2 {
            margin-bottom: 20px;
        }
        .input-group {
            text-align: left;
            margin-bottom: 15px;
        }
        .input-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .remember-me input {
            margin-right: 5px;
        }
        .login-button {
            background: #004aad;
            color: white;
            border: none;
            padding: 10px;
            width: 100%;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .login-button:hover {
            background: #0056b3;
        }
    </style>
  </head>
    
     <div class="login-container">
        <h2>Login Form</h2>
        <form>
            <div class="input-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="remember-me">
                <input type="checkbox" id="remember">
                <label for="remember">Remember me</label>
            </div>
          </form>
          <div class="form-login-btn">
<button type="submit" class="login-button">Login</button>
          </div>
    </div>

Input:

The <input> element is used so that the user can enter information. Input field is created using this tag. It is a self-closing tag.

Syntax:

🚀 Try it yourself! Click the button below to run the code and see the output in action.

HTML Code

Output

<head>
    <style>
      .login-container {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
            margin: 30px auto;
        }
        .login-container h2 {
            margin-bottom: 20px;
        }
        .input-group {
            text-align: left;
            margin-bottom: 15px;
        }
        .input-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .remember-me input {
            margin-right: 5px;
        }
        .login-button {
            background: #004aad;
            color: white;
            border: none;
            padding: 10px;
            width: 100%;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .login-button:hover {
            background: #0056b3;
        }
    </style>
 </head>
    
     <div class="login-container">
        <h2>Login Form</h2>
        <form>
            <div class="input-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" value="yourname@gmail.com" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" value="12345" placeholder="Enter your password" required>
            </div>
            <div class="remember-me">
                <input type="checkbox" id="remember">
                <label for="remember">Remember me</label>
            </div>
          </form>
          <div class="form-login-btn">
<button type="submit" class="login-button">Login</button>
          </div>

</div>

Note: The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

Form attributes

Action:

The action attribute specifies the URL or server-side script to which the form data should be submitted when the user clicks the submit button.
The value of the action attribute is typically a URL or a relative path.

Example:

Method:

Defines the HTTP method to be used when submitting the form data to the server.
It can be either “GET” or “POST”

GET

GET When the method is set to“GET”, the form data is appended to the URL as query parameters and sent as part of the URL string. In this method, form data is visible in the URL.

Example:

POST

When the method is set to “POST”, the form data is sent in the body of the HTTP request. This method is suitable for sending sensitive or large amounts of data that should not be exposed in the URL.
It is commonly used for submitting forms that create, update, or delete data on the server.

Example:

The HTML <form> Elements

<form> – Used for HTML form for user input
<input> – Used for input control
<textarea> – Used for multiline input control (text area)
<label> – Used for label for an <input> element
<fieldset> – Groups related elements in a form
<legend> – Used for caption for a <fieldset> element
<select> – Used for drop-down list
<optgroup> – A group of related options in a drop-down list
<option> – Used for option in a drop-down list
<button> – Used for clickable button
<datalist> – Used for list of pre-defined options for input controls
<output> – Used for result of a calculation

HTML Input Types

Syntax:

🚀 Try it yourself! Click the button below to run the code and see the output in action.

HTML Code

Output

<head>
  <style>
      input {
            display: block;
            width: 200px;
            padding: 5px;

border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

input[type="button"],
        input[type="submit"],
        input[type="reset"] {
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }

input[type="button"]:hover,
        input[type="submit"]:hover,
        input[type="reset"]:hover {
            background-color: #0056b3;
        }

input[type="checkbox"],
        input[type="radio"] {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

input[type="image"] {
            width: 150px;

}
    </style>
  </head>
    
    <input type="button" value="Click Here" /> <br />
          <input type="checkbox" /> <br />
          <input type="color" /> <br />
          <input type="date" /> <br />
          <input type="email" /> <br />
          <input type="file" /> <br />
          <input type="hidden" /> <br />
          <input
            src="https://designwithrehana.com/wp-content/uploads/2023/12/cropped-Logo.png"
            style="height: 100px; width: 100px"
            type="image"
          />
          <br />
          <input type="password" /> <br />
          <input type="month" /> <br />
          <input type="number" /> <br />
          <input type="radio" /> <br />
          <input type="range" /> <br />
          <input type="reset" /> <br />
          <input type="search" /> <br />
          <input type="submit" /> <br />
          <input type="tel" /> <br />
          <input type="text" /> <br />
          <input type="time" /> <br />
          <input type="url" /> <br />
          <input type="week" /> <br />

Note: Above are all input types with output examples.

For practice, you can create some input types to check output. Then you will understand more.

Jaldi se implement karoooooo abhiii😀😍

Important Note: Want to download the full HTML course as a PDF? Click here to save it locally!

PREVIOUS NEXT

HTML – Forms

Example:

Inside the <form >

Label:

Syntax:

HTML Code

Output

Input:

Syntax:

HTML Code

Output

Form attributes

Action:

Example:

Method:

GET

Example:

POST

Example:

The HTML <form> Elements

HTML Input Types

Syntax:

HTML Code

Output

Note: Above are all input types with output examples.

Leave a Comment Cancel reply