Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we add a single-line input field in HTML?
To add a single-line input field in HTML, use the <input> tag with type="text". This creates a text input field where users can enter data. The <input> tag is a self-closing element and one of the most versatile form elements in HTML.
Note: The article mentioned <isindex> tag, but this tag has been deprecated since HTML 4.01 and removed entirely in HTML5. Modern web development uses the <input> tag instead.
Syntax
Following is the basic syntax for creating a single-line input field −
<input type="text" name="fieldName" id="fieldId">
For better accessibility and user experience, it's recommended to use labels −
<label for="fieldId">Field Label:</label> <input type="text" name="fieldName" id="fieldId">
Common Attributes
The following are the most commonly used attributes for text input fields −
| Attribute | Value | Description |
|---|---|---|
| type | text | Specifies the input type as a single-line text field |
| name | string | Name of the input field for form submission |
| id | string | Unique identifier for the input element |
| value | string | Default value displayed in the input field |
| placeholder | string | Hint text displayed when the field is empty |
| maxlength | number | Maximum number of characters allowed |
| required | boolean | Makes the field mandatory for form submission |
| readonly | boolean | Makes the field non-editable but still submittable |
| disabled | boolean | Disables the input field completely |
Basic Text Input Example
Following example shows how to create a simple single-line input field −
<!DOCTYPE html>
<html>
<head>
<title>Single-line Input Field</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Basic Text Input</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The output displays a labeled input field where users can type their username −
Basic Text Input Username: [ ] [Submit]
Using Placeholder Text
The placeholder attribute provides helpful hints to users about what to enter in the field −
<!DOCTYPE html>
<html>
<head>
<title>Input with Placeholder</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form>
<label for="fullname">Full Name:</label><br>
<input type="text" id="fullname" name="fullname" placeholder="Enter your full name">
<br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="example@domain.com">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The placeholder text appears in light gray and disappears when the user starts typing −
Contact Form Full Name: [Enter your full name ] Email: [example@domain.com ] [Submit]
Input Field with Validation
Following example demonstrates input validation using the required and maxlength attributes −
<!DOCTYPE html>
<html>
<head>
<title>Input Field Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form>
<label for="user-id">User ID (required, max 10 chars):</label><br>
<input type="text" id="user-id" name="userid" maxlength="10" required>
<br><br>
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890">
<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
The form will not submit unless the required User ID field is filled, and the field accepts a maximum of 10 characters −
Registration Form User ID (required, max 10 chars): [ ] Phone Number: [123-456-7890 ] [Register]
Different Input Types for Single-line Fields
HTML5 provides several input types for single-line fields, each with specific validation and interface behaviors −
| Input Type | Purpose | Example |
|---|---|---|
| text | General text input | <input type="text" name="name"> |
| Email addresses with built-in validation | <input type="email" name="email"> | |
| password | Password input (characters are masked) | <input type="password" name="pwd"> |
| tel | Telephone numbers | <input type="tel" name="phone"> |
| url | Website URLs with validation | <input type="url" name="website"> |
| search | Search queries (may show clear button) | <input type="search" name="query"> |
Example − Different Input Types
<!DOCTYPE html>
<html>
<head>
<title>Different Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Various Input Types</h2>
<form>
<label>Text: <input type="text" placeholder="Any text"></label><br><br>
<label>Email: <input type="email" placeholder="user@example.com"></label><br><br>
<label>Password: <input type="password" placeholder="Your password"></label><br><br>
<label>URL: <input type="url" placeholder="https://example.com"></label><br><br>
<label>Search: <input type="search" placeholder="Search term"></label><br><br>
</form>
</body>
</html>
Each input type provides appropriate keyboard layouts on mobile devices and built-in validation where applicable.
Conclusion
Single-line input fields are created using the <input> tag with appropriate type attributes. The type="text" is the most common, but HTML5 provides specialized types like email, password, and url for better user experience and validation. Always use labels for accessibility and consider placeholder text for user guidance.
758 Views
