How to use input tag in HTML

html html5

Updated on 05-Jun-2024

The <input> tag in HTML is used to create various types of form elements that allow users to enter and submit data. The <input> tag is versatile and supports many types of inputs by using the type attribute to define the specific kind of input element you want to create.

Basic Syntax

<input type="text">

Common Types of Input Elements

Text Input (type="text"): Used for single-line text input.

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Password Input (type="password"): Used for entering passwords; characters are masked.

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

Email Input (type="email"): Used for entering email addresses.

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

Number Input (type="number"): Used for entering numerical values.

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

Date Input (type="date"): Used for entering dates.

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

Checkbox (type="checkbox"): Used for creating checkboxes.

<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe">

Radio Button (type="radio"): Used for creating radio buttons.

<label>
    <input type="radio" name="gender" value="male"> Male
</label>
<label>
    <input type="radio" name="gender" value="female"> Female
</label>

Submit Button (type="submit"): Used to submit the form data to the server.

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

Button (type="button"): Used to create a clickable button that does not submit the form.

<input type="button" value="Click Me" onclick="alert('Button clicked!')">

File Input (type="file"): Used for uploading files.

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

Attributes of `<input>` Tag

id: Specifies a unique identifier for the input element.
name: Specifies the name of the input element, which is used to identify the data when the form is submitted.
value: Specifies the default value of the input element.
placeholder: Provides a hint to the user about what to enter in the input field.
required: Specifies that the input field must be filled out before submitting the form.
readonly: Specifies that the input field is read-only.
disabled: Disables the input field.
maxlength: Specifies the maximum number of characters allowed in the input field.
min and max: Specifies the minimum and maximum values for numeric inputs.

The <input> tag is a fundamental element in HTML forms, allowing users to enter data in various formats. By utilizing the different type attributes and combining them with other form elements, you can create complex and functional forms to collect user input.

Read Also - HTML5 form attributes

interview

How to use input tag in HTML

Ravi Vishwakarma

Can you answer this question?

1 Answers

Basic Syntax

Common Types of Input Elements

Attributes of `<input>` Tag

Liked By

interview

How to use input tag in HTML

Ravi Vishwakarma

Can you answer this question?

1 Answers

Basic Syntax

Common Types of Input Elements

Attributes of <input> Tag

Liked By

Attributes of `<input>` Tag