HTML Forms

Yaser Rahmati | یاسر رحمتی

HTML forms are used to collect user input in a web application. They’re a crucial part of web development, allowing users to submit data such as text, selections, and files. Here’s a basic overview of HTML forms and how to use them:

Basic Structure

An HTML form is defined with the <form> element. Inside the form, you use various input elements to gather data from users. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Form</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" cols="50" required></textarea>
        <br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Key Attributes

  • action: Specifies the URL where the form data will be sent when the form is submitted. This could be a server endpoint or a script.

  • method: Determines how the data will be sent. The common methods are:

    • GET: Appends form data to the URL. This method is suitable for simple data retrieval and is less secure.

    • POST: Sends form data in the request body, which is more secure and suitable for sensitive information or large amounts of data.

Input Elements

  • Text Input: Allows users to enter text.

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

  • Email Input: Specifically for email addresses. The browser can validate the format.

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

  • Password Input: Hides user input for passwords.

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

  • Textarea: For multi-line text input.

<textarea id="message" name="message" rows="4" cols="50" required></textarea>

  • Radio Buttons: Allow users to select one option from a set.

<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>

  • Checkboxes: Allow users to select multiple options.

<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
<label for="subscribe">Subscribe to newsletter</label>

  • Select Dropdown: Provides a dropdown menu for selecting one option from a list.

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

  • File Input: Allows users to upload files.

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

  • Submit Button: Submits the form data.

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

Form Attributes

  • required: Specifies that the input field must be filled out before submitting the form.

  • placeholder: Provides a hint to the user about what to enter in the field.

  • value: Specifies the default value of the input field.

Example Form

Here’s a more comprehensive example including various input types:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Form</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" required>
        <br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" required>
        <br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
        <br>

        <label for="bio">Bio:</label>
        <textarea id="bio" name="bio" rows="4" cols="50" placeholder="Tell us about yourself" required></textarea>
        <br>

        <label>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>
        <br>

        <label for="newsletter">Subscribe to newsletter:</label>
        <input type="checkbox" id="newsletter" name="newsletter" value="yes">
        <br>

        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="usa">United States</option>
            <option value="canada">Canada</option>
            <option value="uk">United Kingdom</option>
        </select>
        <br>

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

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

Keywords

HTML, Hypertext Markup Language, Tags, Elements, Attributes, Head, Body, Paragraph, Heading, Title, Meta, Link, Image, Anchor, Hyperlink, List, Table, Form, Input, Button, CSS, Class, ID, Inline, Block, Div, Span, Script, Styles, Font, Color, Background, Margin, Padding, Border, Doctype, HTML5, Video, Audio, Canvas, SVG

External Links

🌐 Personal Website 📄 Resume 🎥 Video Archive 💼 Finance Blog 🔐 Network & Security Notebook 🎬 Aparat Channel

PreviousBuilding TablesNextCisco

Last updated