1. Text Input Type(<input type = “text”>)
The text input field allow user to enter and view text directly. It is commonly used for entering names, emails, and other non-sensitive data.
The Text Input field is an open-ended box where users can type anything and close-ended input where user cannot type freely.
open-ended box means a text input field that allows users to type anything without predefined options.
Example of an Open-Ended (Text Input Field)
<input type="text" placeholder="Enter your name">Users can type anythings(letters, numbers, symbols).
No present answer — users decide what to type.
Flexible for collecting different kinds of text data.
Close-Ended Inputs:
User cannot type freely—they must pick from the given options.
There are 7 types of close-ended input fields where users must select from predefined options instead of typing freely.
a. Radio Type:Allows users to select one option from multiple choices.
<p>Choose your gender:</p>
<input type="radio" name="gender" value="male"> Male
<input petype="radio" name="gender" value="female"> Female
b. Checkbox Type:Allows to user select multiple options at once.
<p>Select your hobbies:</p>
<input type="checkbox" value="reading"> Reading
<input type="checkbox" value="music"> Music
<input type="checkbox" value="sports"> Sports
c. Select(Drop down) Type:In provided drop down lists, user can select only one option.
<p>Select your country:</p>
<select>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="india">India</option>
</select>
d. Data-list(auto suggest input):The <datalist> tag provide a list of suggestions for an input field, meaning the user can: 1)Choose from predefined options.2)Type freely if they want a different value.
<p>Type your favorite fruit:</p>
<input list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
</datalist>
e. Range:The <input type="range"> creates a horizontal slider, allowing the user to select a value from a specified range. The user can adjust the value by dragging the slider button horizontally along the track.
example:The slider will appear as a horizontal bar, and the user can click or drag the slider button to adjust the volume from 0 to 100.
<p>Select volume level:</p>
<input type="range" min="0" max="100" value="50">
f. Date,Time,Datetime-local":User can select dates and times separately or select time and date together with <input type = “datetime-local”> but all select with local time and dates setting because It does not include a time zone (like UTC or GMT).
<p>Select your birthdate:</p>
<input type="date,time or datetime-local">
g. Color:The color input type lets users pick a color from a color palette instead of typing a color code manually.
<p>Pick your favorite color:</p>
<input type="color">
- It does not hide the entered text.
Its mean that the characters a user types into the input field are visible as they type.
Example
<input type="chaicode" placeholder="Enter name">The text type chaicode will be shown on the screen for everyone to see.
When using password input then:
<input type="chaicode123" placeholder="Enter password">The text type chaicode123 will be hidden and shown as dots or asterisks, so others can't see it.
It is used for general data entry, like usernames, search bars, and form fields.
It means that the text input field is commonly used for entering general information that does not need to be hidden.
Example
Username → hitesh chaudhary Search query → Best laptop 2025 Email address → example@gmail.comThese types of data do not need to be hidden from view.
Key Features of a Text Input:
Visible Text: Whatever you type stays visible (unlike passwords).
Single-Line Input: Users can enter text in one line not multiple lines like
textareainput field.<textarea rows="4" cols="50" placeholder="Enter your text here..."></textarea>A
<textarea>is a HTML element used to create multi-line text input. It allow if write long-form text(like comments,message or description etc.)Used for General Data Entry: Common for usernames, names, search bars, and form fields.
Supports Placeholders: You can show a hint inside the input box.
Useful Attributes for Text Input:
2. Password Input Type(<input type = “password”>)
A password input is used to enter secret text like passwords, without showing the actual characters and it hides with dots(••••) or asterisks (*).
<input type="password" placeholder="Enter your password">
Why is it useful?
Privacy and Security: Passwords are sensitive information, and displaying them as plain text could allow others to see them. By masking the input, it ensures that no one can easily read the password while it's being typed.
Key Features of a Password Input:
Masking: The input is hidden with dots or asterisks.
Security: It doesn't prevent hacking or data theft but helps protect the password from being seen by others nearby.
Accessibility: Screen readers can still read the password field, but the actual characters are hidden visually.
But this password input field does not make the password fully secure because when you type your password, it only hide on the screen but it does not protect when it is sent over internet to the website server.
If the website does not use a secure connection (https) , your password is sent as plain text. This means hackers or bad people on the same network can easily see or steal your password as it travels over the internet.
The text (<input type="text">) and password (<input type="password">) attributes are almost the same, but with one key difference:
Text Input (type = “text”) - show the typed text visibly.
Password Input (type = “password”) - Hides the typed text as dots (••••) or asterisks (****) for security.
<label>Username:</label> <input type="text" placeholder="Enter username"> <br> <label>Password:</label> <input type="password" placeholder="Enter password">In text input, typing "chaicode123" will show chaicode123.
In password input, typing “chaicode123” will show ••••••••.
