HTML input types

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

• This input type is used for single-line text input.
• Example: <input type="text" name="username">

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

Edit Copy Hide

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

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 (<input type="password">):

• This input type is used for password input fields where the entered characters are masked.
• Example: <input type="password" name="password">

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

Edit Copy Hide

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

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 (<input type="number">)

• This input type is used for numeric input.
• Example: <input type="number" name="age">

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

Edit Copy Hide

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

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 (<input type="email">)

• This input type is used for email addresses. It can enforce email validation.
• Example: <input type="email" name="email">

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

Edit Copy Hide

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

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 (<input type="date">):

• This input type is used for selecting dates.
• Example: <input type="date" name="birthdate">

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

Edit Copy Hide

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

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 (<input type="checkbox">)

• This input type allows users to select one or multiple options from a set of choices.
• Example: <input type="checkbox" name="interest" value="sports">

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

Edit Copy Hide

<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>

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 (<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 .

Edit Copy Hide

<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>

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 (<input type="file">)

• This input type is used for file uploads, allowing users to select files from their device.
• Example: <input type="file" name="avatar">

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

Edit Copy Hide

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

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 (<input type="range">)

• This input type is used to select a value from a specified range.
• Example: <input type="range" name="rating" min="1" max="10">

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

Edit Copy Hide

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

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 (<input type="submit">)

• This input type represents a button that submits the form.
• Example: <input type="submit" value="Submit">

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

Edit Copy Hide

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

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.