Menu
HTML

HTML Forms

  • <form>: Creates an interactive form for user input.
  • <input>: Allows users to input data (text, checkbox, radio buttons, etc.) within a form.
  • <textarea>: Creates a multi-line text input area within a form.
  • <select>: Creates a dropdown list to choose from.
  • <button>: Generates a clickable button.
  • <label>: Represents a label for an <input> element.
  • <fieldset>: Groups related elements within a form.
  • <legend>: Represents a caption for the <fieldset> element.
  • <optgroup>: Groups related <option> elements within a <select> dropdown.
  • <option>: Defines an option in a <select> dropdown.
  • <datalist>: Specifies a list of pre-defined options for an <input> element.
  • <progress>: Represents the progress of a task.
  • <meter>: Represents a measurement within a predefined range.

 

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

<!-- Example of using the <form> element -->
<form action="/submit_form" method="post">

    <!-- Text Input -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <br>

    <!-- Password Input -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <br>

    <!-- Textarea for Multi-line Input -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50" required></textarea>
    <br>

    <!-- Dropdown List with <select> and <option> -->
    <label for="gender">Gender:</label>
    <select id="gender" name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
    </select>
    <br>

    <!-- Radio Buttons -->
    <fieldset>
        <legend>Choose a color:</legend>
        <input type="radio" id="red" name="color" value="red">
        <label for="red">Red</label>
        <input type="radio" id="blue" name="color" value="blue">
        <label for="blue">Blue</label>
        <input type="radio" id="green" name="color" value="green">
        <label for="green">Green</label>
    </fieldset>
    <br>

    <!-- Checkbox -->
    <input type="checkbox" id="subscribe" name="subscribe" value="yes">
    <label for="subscribe">Subscribe to newsletter</label>
    <br>

    <!-- Button to Submit Form -->
    <button type="submit">Submit</button>

</form>

<!-- Using <datalist> for Pre-defined Options -->
<label for="browser">Choose a browser:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>
<br>

<!-- <progress> element for Progress -->
<label for="file">Upload File:</label>
<input type="file" id="file" name="file">
<progress value="0" max="100"></progress>
<br>

<!-- <meter> element for Measurement -->
<label for="diskSpace">Disk Space Usage:</label>
<meter id="diskSpace" value="75" min="0" max="100">75%</meter>

</body>
</html>
HTML