AInput in HTML: A comprehensive guide with all types and uses explained

If you are diving into the world of web development, there is a fundamental element of which you have to have a deep knowledge: the <input> in HTMLThis small but versatile block of code is responsible for facilitating one of the most essential functions on any modern website: user interaction with forms. From submitting a simple name, choosing a date, or uploading a file, to validation and accessibility, the input does practically everything.

Know in depth how the label works <input>, its various types and attributes, It is key to being able to manipulate the user experience, collect information and bring our web projects to life.. In this article, we're going to explain everything clearly and in detail, with examples, so you don't miss any important details. Get ready to discover everything you need to know about HTML inputs.

What is the label `<input>` in HTML?

The label <input> It is a basic component used in HTML forms. It is used to capture user information through different mechanisms such as text fields, radio buttons, drop-down lists, or file uploads. To learn more about other important features, we recommend reading about it in the context of input functions in HTML.

Each input type is defined by the attribute type. This attribute determines the specific behavior and appearance of the field. If not specified, it is interpreted as text.

Its general structure is very simple:

<input type="text" name="usuario" placeholder="Escribe tu nombre">

Although it is a self-contained label (it does not close with </input>), this can be extensively customized with other attributes that modify its value, visibility, validation and behavior.

Complete list of input types

HTML5 has considerably expanded the number of possible types for <input>Here's a breakdown of the most commonly used ones and how they work:

text: Single-line text field. Ideal for names, addresses, etc.
password: Similar to text, but hides entered characters. Perfect for passwords.
Email: Accepts email addresses and validates the format before sending.
number: Allows you to enter numbers only. You can add min, max y step.
phone: To enter phone numbers without strict validation.
url: Validates that a well-formed web address is entered.
at your place: Select dates from an integrated calendar.
my: Use a clock to choose a time.
datetime-local: Date and time without time zone.
months: Allows you to select only month and year.
week: Select the week of the year.
checkbox: Checkboxes for multiple choices.
radio: Single selection from several options.
file: Allows you to upload local files.
range: Slider to select a number.
color: Graphic color selector.
search: Search-optimized field.
image: Graphical submit button with integrated image.
submit: Button that submits the form.
reset: Resets the form values.
button: Button with no predefined action. Combined with JavaScript.
hidden: Invisible field used to send values without user interaction.

Most common and useful attributes of an input

HTML inputs can be accompanied by multiple attributes that control their behavior specifically. Some of the most commonly used are:

name: Associates a name with the input that will be used as a key when submitting the form.
placeholder: Displays indicative text within the input field.
required: Forces the user to complete the field before submitting the form.
readonly: The field is visible but not editable.
disabled: Inactive field, cannot be interacted with and is not sent to the server.
value: Assigns the default value of the input.
maxlength / minlength: Defines the maximum or minimum length allowed.
pattern: Used to define a validation regular expression.
autocomplete: Allows or prevents the browser from suggesting previously used values.
autofocus: Automatically places the cursor in that field when the page loads.
steps: Indicates valid ranges for numeric inputs. E.g.: 5, 10, 0.01.
min / max: Minimum and maximum accepted values.
multiple: Allows you to upload more than one file or select multiple emails with type="email".

Uploading files with input file

One of the most practical uses is the type input file, which allows users to upload documents, images, or any local file. For more information on this type of functionality, you can learn more about how to handle inputs in your forms in the article.

Basic example:

<form action="/subir" method="POST" enctype="multipart/form-data">
  <input type="file" name="documento">
  <input type="submit" value="Subir archivo">
</form>

To allow uploading multiple files at once, just add the attribute multiple:

<input type="file" name="archivos[]" multiple>

Remember that this input type only works with method="POST" and enctype="multipart/form-data".

Additionally, you can define allowed file types using the attribute accept:

<input type="file" accept=".jpg, .png, .pdf">

Sliders or range controls

The type range allows you to include a slider. This is useful when the exact value isn't crucial, such as selecting volume, estimated age, or price ranges. This type of input can be seen as part of a broader approach to form customization, a topic also addressed in .

<input type="range" min="0" max="100" step="5" value="50">

To display the current value of the slider it is recommended to link it with a label <output> and use JavaScript to update it dynamically:

<input type="range" id="rango" min="0" max="100" value="50">
<output id="valorRango">50</output>

<script>
  const slider = document.getElementById("rango");
  const output = document.getElementById("valorRango");

  output.textContent = slider.value;
  slider.addEventListener("input", () => output.textContent = slider.value);
</script>

Selection fields: radio, checkbox and select

To provide multiple options to the user, HTML provides:

Radio: Allows you to select a single option from a group.
Check box: Allows you to select multiple options simultaneously.
Select: Displays a list with customizable options.

Example of radio:

<input type="radio" name="color" value="rojo"> Rojo
<input type="radio" name="color" value="azul"> Azul

Checkbox example:

<input type="checkbox" name="intereses[]" value="lectura"> Lectura
<input type="checkbox" name="intereses[]" value="cine"> Cine

Accessibility, compatibility and good practices

To ensure a good user experience, it's vital to consider certain technical and accessibility aspects, which are essential when working with forms and inputs. If you're interested in learning more about these types of recommendations, you can check out .

Always use labels <label> to describe the input, and associate them using the attribute for.
Avoid using type inputs text for passwords, emails or dates. Use the correct types.
Always validate data on both the frontend and backendHTML attributes are not sufficient to prevent malicious submissions.
Check cross-browser compatibility. Some types are not available in all (such as date in Safari).
Includes attributes such as aria-label o aria-describedby if the input lacks visible text.

By applying these recommendations, your forms will not only be more robust, but also inclusive and accessible to any type of user.

El <input> It's a super-powerful tool in HTML, going far beyond a simple text field. From collecting emails, facilitating searches, enabling file uploads, or adding key validations, its use is indispensable.By thoroughly understanding each of its types and attributes, you can enhance interaction and improve the experience. from user to professional levels.

What is the label <input> in HTML?