HTML Forms

Become More Then A coder | Learn & Start Coding Now.

HTML Forms and Attributes Guide

HTML Forms

Forms are used to collect user input. They are created using the <form> element:

<form action="/submit" method="post">

    <!-- Form elements here -->

</form>

The action attribute specifies where to send the form data, and the method attribute specifies the HTTP method (e.g., GET or POST).

HTML Form Attributes

Form attributes control how the form behaves. Key attributes include:

• action: URL where the form data will be sent
• method: HTTP method to use (GET or POST)
• enctype: Encoding type for form data (e.g., application/x-www-form-urlencoded, multipart/form-data)
• target: Specifies where to open the response (e.g., _blank, _self)

<form action="/submit" method="post" enctype="multipart/form-data">

    <!-- Form elements here -->

</form>

HTML Form Elements

Forms can contain various elements, such as:

• <input>: Input fields for user data
• <textarea>: Multi-line text input
• <select>: Drop-down list
• <button>: Clickable buttons
• <label>: Descriptive text for form controls

Example form with multiple elements:

<form action="/submit" method="post">

    <label for="name">Name:</label>

    <input type="text" id="name" name="name">

    <br>

    <label for="email">Email:</label>

    <input type="email" id="email" name="email">

    <br>

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

</form>

HTML Input Types

The <input> element supports various types to specify the type of data being entered:

• text: Single-line text input
• password: Password input, hides characters
• email: Email address input with validation
• number: Numeric input with optional constraints
• date: Date picker input
• checkbox: Checkbox input
• radio: Radio button input
• file: File upload input
• submit: Submit button
• button: Generic button

Example of different input types:

<form action="/submit" method="post">

    <input type="text" name="username">

    <input type="password" name="password">

    <input type="email" name="email">

    <input type="date" name="birthdate">

    <input type="checkbox" name="subscribe" value="yes">

    <input type="radio" name="gender" value="male"> Male

    <input type="radio" name="gender" value="female"> Female

    <input type="file" name="fileUpload">

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

</form>

HTML Input Attributes

Input elements can have various attributes to control their behavior:

• type: Specifies the type of input (e.g., text, password)
• name: Name of the input, used in form submission
• value: Default value of the input
• placeholder: Placeholder text displayed in the input field
• required: Makes the field mandatory
• maxlength: Limits the number of characters
• min and max: Define range for numeric inputs

Example of input attributes:

<input type="text" name="username" placeholder="Enter your username" required maxlength="20">

Input Form Attributes

Attributes that apply to form elements can help in customizing and validating input fields:

• autocomplete: Controls whether the browser should autocomplete the field
• pattern: Specifies a regular expression for input validation
• readonly: Makes the input field read-only
• disabled: Disables the input field
• step: Specifies the legal number intervals for numeric input

Example with additional attributes:

<input type="text" name="username" pattern="[A-Za-z]{3,}" title="Three or more letters" autocomplete="on">

© 2024 GreatToCode. All rights reserved.