How to Make an HTML Text Box
While making web forms, you’ll require various elements, including divs, labels, and inputs.
Inputs are seemingly the main form element. There are numerous conceivable input types like checkboxes, radio buttons, select menus, and text boxes that enable users to enter data in various ways.
An HTML text box allows form users to present their name, username, and other significant pieces of information. Figure out how to make one following the means below, then look at some examples.
How to Make a Text Box in HTML
It’s easy to create a text box in HTML with the “<input>” element. Let’s break the process down step-by-step below.
Step 1: Create a label element.
To start, create a
<label for="Name">Name:</label>
Step 2: Create an input element.
Next, create an <input> element. In the opening tag, add a type attribute and set it to “text”. Note that this is its default value. Then, add an ID and name attribute and set both to the same value as the for attribute in the previous step.
So, for this example, you’d set the name and ID attributes to “Name.” Here’s the HTML:
<input type="text" id="Name" name="Name">
The name attribute is required for any data from a form to be submitted. The id attribute is required to associate the input field with a label.
Step 3: Define any other attributes needed.
Text inputs support extra attributes, such as maxlength, minlength, and placeholder, which can give significant context to users as they finish up a form.
For instance, you might need to add placeholder text to the example input field above to indicate that you’re searching for the user’s first and last name. Here’s the HTML side-by-side with the result on the front end.
<label for="Name">Name:</label>
<input type="text" id="Name" name="Name" placeholder="Jane Doe">
Output
Here’s a video that can explain these steps in more detail.
HTML Text Box Input
HTML text box input refers to a single-line text field in a form. You can create one with an input element with a type attribute specified as “text” or no type attribute specified. Note that the type attribute does not need to be specified since the default type of an input element is “text”.
The <input> element can be displayed in other ways using different type attributes, like “checkbox”, “date”, “email”, “password”, and “submit”. But when using the text type attribute or no attribute, the result will look like this:
HTML Textarea
If you’d like to ask users to submit a comment on a form, then a single-line text field won’t work. Users could submit a comment via a text input field, but most of their answers will be hidden. Instead, you can create a multi-line text field using the HTML <textarea> element.
The process of creating a text area is similar to creating a text box. You create a <label> element with a for attribute. You create a <textarea> element with an ID and name attribute set to the same value as the for attribute. You can also specify the <cols> and <rows> attributes to set the size of the text area.
Here’s an example:
<label for="freeform">Tell us how you heard about Dura Networks:</label>
<br>
<textarea id="freeform" name="freeform" rows="4" cols="50">
Enter text here...
</textarea>
Output
Text Box Examples
Below are text box examples with commonly specified attributes.
Text Box with Maxlength Attribute
To specify a maximum number of characters that a user can enter into the text box, you must specify the maxlength attribute with an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the text box has no maximum length.
<label for="Name">Name:</label>
<input type="text" id="Name" name="Name" maxlength="16">
<p>Note: Try typing in "John Doe."</p>
Output
Note: Try typing in "John Doe."
Text Box with Minlength Attribute
To specify a minimum number of characters that a user must enter into the text box, you must specify the minlength attribute as an integer value that is not negative and is at least equal to or smaller than the value specified by the maxlength attribute. If no minlength is specified, or an invalid value is specified, the text box has no minimum length.
<label for="Name">Name:</label>
<input type="text" id="Name" name="Name" minlength="2">
Output
Text Box with Placeholder Attribute
To provide more context about how the user should fill out a text box, you can specify the placeholder attribute. This should contain a word or short phrase that indicates what kind of information is expected.
<label for="Name">Name:</label>
<input type="text" id="Name" name="Name" placeholder="First and last name">
Output
Text Box with Size Attribute
To set the size of a text box, you can specify the size attribute. This should be a numeric value greater than 0. If no size is specified, then the text box will be 20 characters wide by default.
<label for="Name">Name:</label>
<input type="text" id="Name" name="Name" size="60">
Output
HTML Form with Text Boxes
Below is an example of an HTML form with multiple input fields, including two text boxes, a password, and submit button, and a text area.
<form action="/action_page.php">
<label for="firstName">First name:</label>
<input type="text" id="firstName" name="firstName"><br><br>
<label for="lastName">Last name:</label>
<input type="text" id="lastName" name="lastName"><br><br>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="freeform">Tell us how you heard about us:</label>
<br>
<textarea id="freeform" name="freeform" rows="4" cols="50">
</textarea><br><br>
<input type="submit" value="Submit">
</form>
Output
Making Text Boxes in HTML
HTML text boxes, or single-line text fields, allow users to submit their name, username, and other important information in your forms. The best part is that they’re easy to make thanks to the <input> element and its various attributes.
Facebook
Twitter
LinkedIn
Pinterest
Telegram
Reddit