HTML FORM

Maha



HTML Form

An HTML form is a section of a web page that contains interactive controls for users to input data. This data can be sent to a server for processing. Forms are a key component in web applications, enabling user interaction and data submission.

A portion of a document including controls like text fields, password fields, checkboxes, radio buttons, submit buttons, menus, and so on is called an HTML form.

An HTML form makes it easier for the user to enter information such a name, email address, password, phone number, etc. that needs to be transmitted to the server for processing. HTML forms are required if you want to collect some data from the site visitor. 

Syntax:

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

Uses of Form Tags

1. <form>

The <form> tag is used to create an HTML form for user input. It acts as a container for input elements like text fields, checkboxes, radio buttons, etc.

Attributes:

  • action: Specifies where to send the form data when submitted (the URL of the server).
  • method: Specifies the HTTP method to use when sending form data (GET or POST).

Example:

<form action="/submit" method="post">
    <!-- Form elements go here -->
</form>

2. <label>

The <label> tag defines a label for an <input> element. Clicking on the label will focus/activate the corresponding input element.

Attributes:

  • for: Specifies which form element a label is bound to (the ID of the input element).

Example:

<label for="username">Enter your name:</label>
<input type="text" id="username" name="username">


3. <textarea>

The <textarea> tag is used to create a multi-line text input field.

Attributes:

  • name: Specifies the name of the textarea.
  • rows and cols: Specifies the visible number of lines and the width of the textarea.

Example:

<label for="username">Type some text here:</label><br>
<textarea name="message" rows="5" cols="40"></textarea>


4. <select> and <option>

The <select> tag creates a drop-down list. The <option> tag defines the options that can be selected.

Attributes:

  • name: Specifies the name of the drop-down list.

Example:

<label for="username">Select any option:</label><br>
<select name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
</select>


5. <button>

The <button> tag is used to create a clickable button.

Attributes:

  • type: Specifies the type of button (submit, reset, button).

Example:

<button type="submit">Submit</button>
<button type="reset">Reset</button>


6. <fieldset>

It groups the related element in a form. It defines a caption for a <fieldset> element.

Example:

<fieldset>  
    <legend>User Information:</legend>  
    <label for="name">Enter name</label><br>  
    <input type="text" id="name" name="name"><br>  
    <label for="pass">Enter Password</label><br>  
    <input type="Password" id="pass" name="pass"><br>  
</fieldset>



Program:

 
  <!DOCTYPE html>
  <head>
      <title>Sample Form</title>
  </head>
  <body>
  <h1>Contact Us</h1>
  <form action="/submit" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>

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

        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

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

        <label for="newsletter">Subscribe to newsletter:</label>
        <input type="checkbox" id="newsletter" name="subscribe" value="yes"><br><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>
        </select><br><br>
         <fieldset>  
            <legend>User Information:</legend>  
            <label for="name">Password</label><br>  
            <input type="text" id="name" name="name"><br>  
            <label for="pass">Conform password</label><br>  
            <input type="Password" id="pass" name="pass"><br>  
         </fieldset><br><br>
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
  </form>
  </body>
  </html>


Output:



HTML <input> Element

The HTML <input> element is one of the most widely used form elements, allowing users to enter data. This element can take many different forms depending on the value of its type attribute.

Uses of <input> Element

User Input: The primary purpose of the <input> element is to collect user input. This can range from simple text and numbers to complex file uploads and date selections.

Creating Interactive Forms: By combining different types of <input> elements, you can create complex and interactive forms to gather various kinds of data.

User Authentication: <input> elements are commonly used in login forms to capture username and password information.

Data Submission: Forms with <input> elements often submit data to a server for processing, such as sending messages, signing up for newsletters, or completing transactions.

Common Attributes of <input> Element

  • type: Specifies the type of input (e.g., text, password, email, etc.).
  • name: Associates a name with the input, which is sent to the server with the form data.
  • value: Defines an initial value or the current value of the input.
  • id: Provides a unique identifier for the input.
  • placeholder: Offers a hint to the user about what can be entered in the input.

Example:

<input type="text">
<input type="checkbox" name="Username">
<input type="submit" value="Submit">
<input type="email" value="email" id="email">

Common Input Tag Type Attribute Values

  1. text
  2. number
  3. password
  4. email
  5. date
  6. datetime-local
  7. range
  8. color
  9. checkbox
  10. radio
  11. file
  12. button
  13. reset
  14. submit


Types of <input> Elements

Here are detailed explanations of different types of <input> elements:

1. Text Input (<input type="text">)

A single-line text input field for general text entry.

Example:

<label>Username:</label>
<input type="text" name="username">


2. Number (<input type="number">)

An input field for numeric values.

Example:

<label>Number:</label>
<input type="number" name="number">
<input type="number" name="number" min="1" max="10">


3. Password (<input type="password">)

A password input field where the input text is hidden.

Example:

<label>Password:</label>
<input type="password" name="password">


4. Email (<input type="email">)

An input field for email addresses.

Example:

<form>
    <label >Email Address:</label>
    <input type="email" name="email">
</form>
 

5. Date (<input type="date">)

An input field for selecting a date.

Example:

<label>Date:</label>
<input type="date" name="date">


6. Datetime-local (<input type="datetime-local">)

An input field for selecting a date and time (local).

Example:

<label>Datetime:</label>
<input type="datetime-local" name="datetime-local">


7. Range (<input type="range">)

An input field for selecting a value from a range of values.

Example:

<label>Range:</label>
<input type="range" name="range" min="0" max="100">


8. Color (<input type="color">)

An input field for selecting a color.

Example:

<label>Color:</label>
<input type="color" name="color">


9. Checkbox (<input type="checkbox">)

An input field for a checkbox, allowing multiple selections.

Example:

<label>Languages:</label><br>
<input type="checkbox"  name="subscribe">HTML<br>
<input type="checkbox"  name="subscribe">CSS<br>
<input type="checkbox"  name="subscribe">JavaScript<br>


10. Radio (<input type="radio">)

An input field for radio buttons, allowing a single selection from a group.

Example:

<label>Gender:</label><br>
<input type="radio"  name="gender" value="male">
<label>Male</label><br>
<input type="radio"  name="gender" value="female">
<label for="female">Female</label>



11. File (<input type="file">)

An input field for file uploads.

Example:

<label>Upload a file:</label><br>
<input type="file" name="file">


12. Button (<input type="button">)

A clickable button, often used with JavaScript for additional functionality.

Example:

<input type="button" value="Click me" onclick="alert('Button clicked!')">


13. Reset (<input type="reset">)

A button that resets all form fields to their default values.

Example:

<input type="reset" value="Reset">



14. Submit (<input type="submit">)

A button that submits the form data to the server.

Example:

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


                                                                          

Example 1:

  
  <!DOCTYPE html>
  <head>
    <title>Example Form</title>
  </head>
  <body>
    <h1>Example Form</h1>
    <form action="/submit">
        <label for="text">Text:</label>
        <input type="text" id="text" name="text"><br><br>

        <label>Number:</label>
        <input type="number" name="number"><br><br>

        <label>Password:</label>
        <input type="password" name="password"><br><br>

        <label>Email:</label>
        <input type="email" name="email"><br><br>

        <label>Date:</label>
        <input type="date" name="date"><br><br>

        <label>Datetime:</label>
        <input type="datetime-local" name="datetime-local"><br><br>

        <label>Range:</label>
        <input type="range" name="range" min="0" max="100"><br><br>

        <label>Color:</label>
        <input type="color" name="color"><br><br>

        <label>Subscribe:</label>
        <input type="checkbox" name="subscribe" value="newsletter"><br><br>

        <label>Gender:</label><br>
        <input type="radio" name="gender" value="male">
        <label>Male</label><br>
        <input type="radio" name="gender" value="female">
        <label>Female</label><br><br>

        <label>Upload a file:</label>
        <input type="file" name="file"><br><br>

        <input type="button" value="Click me" onclick="alert('Button clicked!')"><br><br>
        
        <input type="reset" value="Reset"><br><br>
        <input type="submit" value="Submit">
      </form>
  </body>
  </html>


Output:


Example 2:

  
  <!DOCTYPE html>
  <html>
  <head>
    <title>Document</title>
  </head>
  <form>
    <h1>HTML FORMS</h1>
    <label>Username:</label>
    <input type="text"><br>
    <label>Password:</label>
    <input type="password"><br>
    <label>Phone Number:</label>
    <input type="number"><br>
    <label>D.O.B:</label>
    <input type="date"><br>
    <label>Email ID:</label>
    <input type="email"><br>
    <label>Resume:</label>
    <input type="file"><br>
    <label>Hobbies:</label><br>
    <label>Gardening</label><input type="checkbox">
    <label>Painting</label><input type="checkbox">
    <label>Cricket</label><input type="checkbox">
    <label>Music</label><input type="checkbox"><br>
    <label>Gender:</label>
    <label>Male</label>
    <input type="radio">
    <label>Female</label>
    <input type="radio">
    <label>Others</label><input type="radio"><br>
    <label>Price Range</label><input type="range"><br>
    <label>Choose Background Color:</label>
    <input type="color"><br>
    <label>Website URL:</label><input type="text"><br>
    <label>Permanent Address*:</label><textarea></textarea><br>
     <input type="submit">
     <input type="reset">
     <input type="submit">
  </form>
  </body>
  </html>
 


Output:






More topic in HTML

Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send