Inputs

HTML form elements with various attributes.

<form action="/submit-your-form" method="POST">

  <label for="email">Email</label>
  <input
    type="email"
    id="email"
    name="email"
    value="[email protected] readonlyyy"
    autocomplete="off"
    readonly
  />

  <label for="username1">Username (Disabled)</label>
  <input
    type="text"
    id="username1"
    name="username1"
    placeholder="Type in your username.."
    autocomplete="off"
    disabled
  />

  <label for="username2">Username (Required)</label>
  <input
    type="text"
    id="username2"
    name="username2"
    placeholder="Type in your username.."
    autocomplete="off"
    required
  />

  <label for="email2">Email (Required)</label>
  <input
    type="email"
    id="email2"
    name="email2"
    placeholder="Type in your email.."
    autocomplete="off"
    required
  />

  <label for="password">Password</label>
  <input
    type="password"
    id="password"
    name="password"
    placeholder="Enter your password.."
    autocomplete="off"
    required
  />

  <label for="textarea">Text area</label>
  <textarea id="textarea" name="textarea" rows="3"></textarea>

  <label for="file">Upload your file</label>
  <input type="file" id="file" name="file" required />

  <label for="colour">Color</label>
  <input type="color" id="colour" name="colour" required />

  <label for="datalistOptions">Datalist Example</label>
  <input
    list="datalistOptions"
    id="exampleDataList"
    name="exampleDataList"
    placeholder="Type to search..."
  />

  <datalist id="datalistOptions">
    <option value="Option 1"></option>
    <option value="Option 2"></option>
    <option value="Option 3"></option>
  </datalist>

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

Explanation:

1. Email Input (Readonly): Displays a pre-filled email input that is read-only and disabled for editing (readonly attribute).

2. Username Input (Disabled): Shows a username input field that is disabled (disabled attribute), preventing user interaction.

3. Username Input (Required): Provides a username input field that requires user input (required attribute) for form submission.

4. Email Input (Required): Requires the user to enter an email address (required attribute).

5. Password Input: Presents a password input field for secure entry (type="password").

6. Textarea: Offers a textarea for multi-line text input (<textarea>).

7. File Upload: Allows users to upload a file (<input type="file">).

8. Color Picker: Provides a color input field (<input type="color">) for selecting a color.

9. Datalist Example: Implements a datalist for showing options when typing in an input field (<datalist> with associated <input>).

Each input is labeled appropriately for clarity, and attributes such as required, readonly, disabled, and placeholder are used as needed based on the input type and purpose. Adjustments can be made to suit specific form requirements or styling preferences.