<input>

The <input> tag is primarily used to collect data from the user in forms.

This tag is versatile and allows the creation of many types of fields, ranging from text fields to buttons, including checkboxes.

Structure and syntax of the <input> tag

The <input> tag is a self-closing tag, which means it does not require a closing tag.

Here is a simple example:

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

In this example:

• type="text": Defines the type of field (here a text field);
• name="username": Gives a name to the field, which is then used when submitting the form;
• placeholder="Enter your name": Displays an indicative text that helps understand the type of information expected in this input.

Try it yourself:

Types of attributes

The <input> tag handles a wide variety of attributes, the main ones being:

• type: Defines the type of input. For example:
  • text: A classic text field.
  • password: A field for passwords, masking the entered text.
  • email: A field dedicated to email addresses.
  • number: A field for numbers.
  • checkbox: For a checkbox.
  • radio: For a radio button (a button that does not allow selecting different values simultaneously).
  • file: A field to upload a file.
  • submit: A button to submit the form.
  • button: A generic button with no default behavior.
  • date: To display a date picker.
• value: Defines the default value of the field.
• name: Provides an identifier that allows retrieving the entered value.
• placeholder: Displays an indicative text that helps better understand the type of information expected in this input.
• required: Makes the field mandatory.
• readonly: Makes the field non-editable.
• disabled: Disables the field, preventing any interaction.

Usage examples

Here are a few practical examples to demonstrate the versatility of the <input> tag:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required>

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

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="birthdate">Date of Birth:</label>
    <input type="date" id="birthdate" name="birthdate">

    <label>
        <input type="checkbox" name="newsletter">
        Subscribe to the newsletter
    </label>

    <input type="submit" value="Send">
</form>

Difference with the <button> tag

The <input> tag and the <button> tag are often confused, but they have clear differences:

• <input> is limited to a simple text or a value in its fields (you can't put an icon for example);
• <button> can contain complex content, such as images, icons, or HTML.

Browser compatibility

The <input> tag is compatible with all modern browsers.