HTML Text Input: <input type="text">
An HTML text input collects a single line of text such as a name, city, search term or short code.
<label for="topic">Topic</label>
<input type="text" id="topic" name="topic">The name identifies the submitted field, while the id connects the input to its label and uniquely identifies the element in the page.
Text Input Inside a Form Top ↑
<form method="post" action="target_page.php">
<label for="topic">Topic</label>
<input type="text" id="topic" name="topic" value="SEO basic">
<button type="submit">Submit</button>
</form>When this form is submitted, the control contributes a name/value pair using topic as the field name.
Text Input Attributes Top ↑
| Attribute | Purpose |
|---|---|
type="text" | Creates a single-line text control. |
name | Defines the field name used when the form is submitted. |
id | Uniquely identifies the element and connects a label through for. |
value | Sets the input's initial value. |
maxlength | Limits the maximum number of characters accepted by the control. |
minlength | Sets the minimum number of characters for browser constraint validation. |
size | Provides an approximate visible width in characters; CSS is preferred for layout. |
autocomplete  | Provides the browser with autofill guidance. |
autofocus | Requests focus when the page loads. |
placeholder | Displays a short hint while the control has no value. |
readonly | Prevents editing while keeping the control available for normal submission. |
disabled | Disables interaction and normally excludes the control from form submission. |
required | Requires a non-empty value for browser constraint validation. |
name and id Top ↑
The name attribute is important when the value must be submitted:
<label for="city">City</label>
<input type="text" id="city" name="city">A normal successful form control without a name is not included in the submitted form data.
The visible <label> improves accessibility and makes the field purpose clear. A placeholder should not replace the label.
value Attribute Top ↑
Use value to supply an initial value:
<label for="txtbox">Text</label>
<input type="text" id="txtbox" name="txtbox" value="Simple Text">value attribute, the application must HTML-escape that value before output. HTML source alone does not make dynamic values safe.maxlength and minlength Top ↑
Use maxlength to limit the number of characters a user can enter:
<input type="text" name="username" maxlength="20">You can also set a minimum length:
<input type="text" name="username" minlength="3" maxlength="20" required>These browser rules improve usability, but the receiving application must still validate the value.
size and CSS Width Top ↑
The size attribute gives an approximate visible width in characters:
<input type="text" name="code" size="12">For responsive page layout, use CSS rather than relying on size as a precise pixel width.
autocomplete Top ↑
The autocomplete attribute can tell the browser what kind of information the field expects.
<label for="full_name">Full name</label>
<input type="text" id="full_name" name="full_name" autocomplete="name">Using a meaningful autocomplete token can improve form completion and accessibility.
autofocus Top ↑
<input type="text" name="search" autofocus>The browser attempts to focus that control when the page loads.
Keeping the cursor at a textbox by default
placeholder Top ↑
A placeholder gives a short example or hint while the input is empty:
<label for="search_term">Search</label>
<input type="text" id="search_term" name="search_term" placeholder="Enter a tutorial name">readonly vs disabled Top ↑
readonly Top ↑
<input type="text" name="member_id" value="A102" readonly>A readonly text input cannot be edited by the user, but its value is normally included when the form is submitted.
disabled Top ↑
<input type="text" name="member_id" value="A102" disabled>A disabled control cannot be edited or focused in the normal way and is not normally submitted with the form.
required Top ↑
Use required when the user must provide a value before the form can pass browser constraint validation:
<label for="first_name">First name</label>
<input type="text" id="first_name" name="first_name" required>Client-side validation can be bypassed, so required data must also be checked by the receiving application.
Complete Example Top ↑
<form method="post" action="target_page.php">
<label for="topic2">Topic</label>
<input
type="text"
id="topic2"
name="topic"
placeholder="Example: HTML forms"
minlength="3"
maxlength="80"
required
>
<button type="submit">Submit</button>
</form>Video Tutorial Top ↑
Related Tutorials Top ↑
Frequently Asked Questions Top ↑
It creates a single-line text field for short user-entered text.
The name identifies submitted form data. The id identifies the element in the document and can connect it to a label.
No. Use a visible label to identify the field and use placeholder only for a short hint or example.
A readonly text input cannot be edited but is normally submitted. A disabled input is normally excluded from form submission.
Size gives an approximate width in characters. Use CSS when you need layout or responsive width control.
No. Browser restrictions improve usability but the server must still validate submitted data.
HTML Form Checkbox
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
