HTML text inputs are crucial for capturing user input in forms.
They allow users to enter single-line text data.
HTML Text Input Element
Element Syntax:
<input type="text" name="username" placeholder="Enter your username" required>
Common Attributes for <input type="text">
id: Provides a unique identifier for the input element. This can be used to link the input field with a <label> element and for CSS styling.
<label for="username">Username:</label> <input type="text" id="username" name="username">
name: Specifies the name of the input field, which is used to reference form data after submission.
<input type="text" name="email" placeholder="Enter your email">
value: Sets a default value for the input field. This value appears in the field when the page loads.
<input type="text" value="John Doe">
placeholder: Provides a hint or example of what to enter in the field. The placeholder text appears in the field before the user types anything and disappears once the user starts typing.
<input type="text" placeholder="Enter your full name">
maxlength: Limits the number of characters that can be entered in the text field.
<input type="text" maxlength="30" placeholder="Max 30 characters">
required: Specifies that the input field must be filled out before submitting the form.
<input type="text" required placeholder="This field is required">
readonly: Makes the input field read-only, meaning users cannot modify its value.
<input type="text" value="Read-only text" readonly>
disabled: Disables the input field, preventing users from interacting with it.
<input type="text" value="Disabled text" disabled>
pattern: Defines a regular expression that the input's value must match for the form to be submitted.
<input type="text" pattern="[A-Za-z]{3,}" placeholder="Enter at least 3 letters">
size: Sets the width of the text field in characters. This affects the visible width of the input field.
<input type="text" size="40" placeholder="40 characters wide">
These attributes provide a way to customize and control user input in HTML forms, making them more interactive and user-friendly.