codeswithpankaj

HTML Forms

HTML Forms Tutorial by CodesWithPankaj

HTML forms are essential for collecting user input. They provide a way for users to submit data that gets processed, often on the server side. Let's explore the various tags and form elements available to create an interactive and functional form.

1. <form> Tag – Form Container

The <form> tag is the main container for all form elements. It defines the area where user input is collected and specifies how to send the data.

Important Attributes:

  • action: Specifies the URL to send form data when the form is submitted.

  • method: Specifies the HTTP method (GET or POST) to use for sending data.

  • enctype: Specifies the encoding type of the data. Commonly used for file uploads (multipart/form-data).

  • target: Defines where to display the response (e.g., _blank for a new tab).

Example:

<form action="submit.php" method="POST">
    <!-- Form elements go here -->
</form>

2. <input> Tag – Input Field

The <input> tag is a versatile form element used to create various types of input fields. The type attribute determines the kind of input field it will create.

Common Types:

  1. type="text" – Single-line text input.

  2. type="password" – Hidden input for passwords.

  3. type="email" – Email input with validation.

  4. type="number" – Number input with a spinner.

  5. type="date" – Date input with a date picker.

  6. type="checkbox" – Checkbox for selecting multiple options.

  7. type="radio" – Radio button for selecting one option from a group.

  8. type="submit" – Submit button to send form data.

  9. type="reset" – Reset button to clear all inputs.

  10. type="file" – File upload input.

Example:

<form action="submit.php" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

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

Additional Attributes:

  • placeholder: Shows hint text inside the input.

  • value: Sets a default value for the input.

  • name: Assigns a name for the input (important for form data).

  • required: Marks the field as mandatory.

  • readonly: Makes the field non-editable.

  • disabled: Disables the input.

3. <textarea> Tag – Multi-line Text Input

The <textarea> tag creates a multi-line text box, useful for longer input, such as comments or descriptions.

Example:

<form action="submit.php" method="POST">
    <label for="comments">Comments:</label>
    <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter your comments here"></textarea>
</form>

Attributes:

  • rows: Specifies the number of visible text lines.

  • cols: Defines the width of the text box.

  • placeholder: Displays a hint text.

4. <select> Tag – Dropdown List

The <select> tag is used to create a dropdown list, where users can select one or multiple options.

Example:

<form action="submit.php" method="POST">
    <label for="fruit">Choose a fruit:</label>
    <select id="fruit" name="fruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
    </select>
</form>

Attributes:

  • multiple: Allows multiple selections (use Ctrl key to select multiple items).

  • size: Defines the number of visible options.

5. <option> Tag – Option in a Dropdown List

The <option> tag defines each item in a <select> dropdown list. Each option has a value attribute that is submitted with the form.

Example:

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
</select>

Attributes:

  • value: Specifies the value submitted for that option.

  • selected: Pre-selects the option by default.

6. <button> Tag – Button

The <button> tag creates a clickable button. Unlike <input type="submit">, <button> can contain text or HTML.

Example:

<form action="submit.php" method="POST">
    <button type="submit">Submit Form</button>
</form>

Types:

  • type="submit": Submits the form.

  • type="reset": Resets all fields.

  • type="button": A regular button with no default action.

7. <label> Tag – Input Label

The <label> tag provides a label for form elements, improving accessibility and usability. The for attribute links the label to an input’s id.

Example:

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

8. <fieldset> and <legend> Tags – Grouping Form Elements

The <fieldset> tag is used to group related elements, often with a <legend> tag that provides a caption for the field group.

Example:

<form>
    <fieldset>
        <legend>Personal Information</legend>
        <label for="fname">First Name:</label>
        <input type="text" id="fname" name="fname">
        
        <label for="lname">Last Name:</label>
        <input type="text" id="lname" name="lname">
    </fieldset>
</form>

9. <datalist> Tag – Predefined Options for Input

The <datalist> tag provides a list of predefined options for an <input> element, offering suggestions as the user types.

Example:

<form>
    <label for="color">Choose a color:</label>
    <input list="colors" id="color" name="color">
    <datalist id="colors">
        <option value="Red">
        <option value="Blue">
        <option value="Green">
    </datalist>
</form>

10. <output> Tag – Display Calculation or Result

The <output> tag is used to display the result of a calculation or an operation performed by JavaScript.

Example:

<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
    <input type="number" id="num1" name="num1" placeholder="Number 1">
    <input type="number" id="num2" name="num2" placeholder="Number 2">
    Result: <output name="result" for="num1 num2"></output>
</form>

Full Example of HTML Form with All Tags

Here’s a complete example that includes all the various form elements discussed above:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form Tutorial by CodesWithPankaj</title>
</head>
<body>

    <h1>HTML Form Elements</h1>

    <form action="submit.php" method="POST" enctype="multipart/form-data">
        <fieldset>
            <legend>Personal Information</legend>
            <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="gender">Gender:</label>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label>

            <label for="comments">Comments:</label>
            <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter your comments here"></textarea>
        </fieldset>

        <fieldset>
            <legend>Preferences</legend>
            <label for="fruit">Choose a fruit:</label>
            <select id="fruit" name="fruit">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
                <option value="orange">Orange</option>
            </select>

            <label for="file

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

        <button type="submit">Submit Form</button>
    </form>

</body>
</html>

Summary

HTML forms are vital for gathering user input in web applications. By understanding the different tags and attributes, you can create functional and user-friendly forms. Practice using these elements to enhance your web development skills! Enjoy creating with CodesWithPankaj!

PreviousHTML ListsNextHTML iFrame

Last updated