start learning
Image 1
3HTMLInputtypes

HTML input types

HTML provides various input types that allow you to collect different types of data from users. Here are some commonly used HTML input types along with their definitions:


Text Input

1- Text Input (<input type="text">):

You can use our free live html editor to test tutorial codes .


<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">

Preview :

This code snippet creates a text input field where users can enter their username. The <label> element provides a label for the input field, and the placeholder attribute gives an example or hint to the user about the expected input.


Password Input

Password Input (<input type="password">):

You can use our free live html editor to test tutorial codes .


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

Preview :

This code snippet creates a password input field where entered characters are masked for security. The <label> element provides a label for the input field, and the placeholder attribute gives an instructional text to the user.


Number Input

Number Input (<input type="number">)

You can use our free live html editor to test tutorial codes .


<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99">

Preview :

This code snippet creates a number input field for entering the user's age. The <label> element provides a label for the input field, and the min and max attributes define the acceptable range of values for the input.


Email Input

Email Input (<input type="email">)

You can use our free live html editor to test tutorial codes .


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

Preview :

This code snippet creates an email input field where users can enter their email address. The <label> element provides a label for the input field, and the placeholder attribute gives an example or hint about the expected input format.


Date Input

Date Input (<input type="date">):

You can use our free live html editor to test tutorial codes .


<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate">

Preview :

This code snippet creates a date input field where users can select a date. The <label> element provides a label for the input field, and the selected date will be sent as the form data.


Checkbox Input

Checkbox Input (<input type="checkbox">)

You can use our free live html editor to test tutorial codes .


<label for="sports">Sports:</label>
<input type="checkbox" id="sports" name="interest" value="sports">
<label for="sports">Sports</label>

<label for="fitness">Fitness:</label>
<input type="checkbox" id="fitness" name="interest" value="fitness">
<label for="fitness">Fitness</label>

Preview :

This code snippet creates two checkboxes for selecting interests (sports and Fitness). The <label> elements provide labels for the checkboxes, and the name attribute groups them together so that multiple selections can be made.


Radio Button Input

Radio Button Input (<input type="radio">)

This input type allows users to select a single option from a set of mutually exclusive choices.

You can use our free live html editor to test tutorial codes .


<label for="male">Male:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<label for="female">Female:</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Preview :

This code snippet creates two radio buttons for selecting gender (male and female). The <label> elements provide labels for the radio buttons, and the name attribute groups them together so that only one option can be selected.


File Input

File Input (<input type="file">)

You can use our free live html editor to test tutorial codes .


<label for="avatar">Avatar:</label>
<input type="file" id="avatar" name="avatar">

Preview :

This code snippet creates a file input field that allows users to upload a file, such as an avatar image. The <label> element provides a label for the input field.


Range Input

Range Input (<input type="range">)

You can use our free live html editor to test tutorial codes .


<label for="rating">Rating:</label>
<input type="range" id="rating" name="rating" min="1" max="5">

Preview :

This code snippet creates a range input field for selecting a value within a specified range. The <label> element provides a label for the input field, and the min and max attributes define the minimum and maximum values of the range.


Submit Button

Submit Button (<input type="submit">)

You can use our free live html editor to test tutorial codes .


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

Preview :

This code snippet creates a submit button that triggers the form submission process when clicked. The value attribute sets the label displayed on the button.


These examples demonstrate HTML code for each input type along with clarifications about their usage. You can use these examples as a reference and customize them as per your specific requirements.


Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor
×