How to Make an HTML Text Box [Examples]

Web forms are such a common staple of websites that yours will probably have at least one, be it a contact form, a newsletter signup form, or something else.

If you’re building a web form with HTML, you’ll probably have at least one field for text, so that users can submit things like their name, address, or comments. In that case, you’ll need to know how to create and customize text boxes to suit your form’s needs. In this post, you’ll learn how.

Table of Contents

• How to Make a Text Box in HTML with <input>
• How to Make a Text Box in HTML with <textarea>
• How to Change HTML Text Box Size
• HTML Text Box Examples

How to Make a Text Box in HTML with <input>

First, I'll walk through how to create an html text box with the <input> element. This approach is ideal for single-line inputs in forms, and you'll probably use them most often.

I'll start by adding an <input> element to the page. In the opening tag, I’ll add a type attribute and set it to text to designate the input element specifically as a text input. Note that text is the of type default value and the text box will look the same without the attribute, but it's a good practice to add it anyway.

Then, I'll add an id attribute and a name attribute, and set both to the same value. The id attribute is for the <label> element that we’ll add next, and the name attribute is for referencing that data in the text box if the data is submitted in a form.

Here’s what my element looks like so far:

See the Pen html text box by HubSpot (@hubspot) on CodePen.

It’s not really clear to the user what this is yet. So, next I'll add a <label> element just before the <input> element. A label makes clear to the user what should be entered in the text box, and also allows the user to select the text box by clicking the label text (making <input> a little easier to use). It also makes the form more accessible because it tells screen readers what the <input> element is for.

In the opening tag of <label>, I’ll add a for attribute and give it the same value as the id attribute in <input>. Doing this associates the label element with the corresponding input element.

Here's what both elements look like on the screen together:

See the Pen html text box: label by HubSpot (@hubspot) on CodePen.

You can add other attributes to <input> as well to control its behavior. Additional attributes for text input include:

• placeholder: This text appears in <input> when no value has been entered by the user. This is useful for prompting the user. This attribute takes a string of text as a value.
• disabled: If included, <input> will not be interactive. This is a boolean attribute, so it does not have any attributes.
• required: If included, the user must enter a value in <input> in order to submit the form. This is a boolean attribute, so it does not have any attributes.
• minlength: The minimum number of characters accepted by <input> before the form can be submitted. This attribute takes an integer as a value.
• maxlength: The maximum number of characters accepted by <input>. This attribute takes an integer as a value.
• size: Sets the width of the <input> element, in characters. This attribute takes an integer as a value.
• form: Specifies which form element the <input> element is associated with. If form is not specified, <input> is associated with the form that directly contains it.

Finally, if you want the text box to be part of a form, you can place both elements inside a form tag with other form inputs.

See the Pen html text box: form by HubSpot (@hubspot) on CodePen.

How to Make a Text Box in HTML with <textarea>

If you want users to submit a longer response on a form, like a comment, then a single-line text field won’t work because most of the answer will be hidden. Instead, you can create a multi-line text field using the HTML <textarea> element.

Using <textarea> is similar to <input>. Add the <textarea> element with an id and a name attribute set to the same value, and a <label> element before it with a for attribute matching the id.

See the Pen html text box: textarea by HubSpot (@hubspot) on CodePen.

You can also set other optional attributes for <textarea>, including:

• placeholder: This text appears in <textarea> when no value has been entered by the user. This is useful for prompting the user. This attribute takes a string of text as a value.
• disabled: If included, <textarea> will not be interactive. This is a boolean attribute, so it does not have any attributes.
• required: If included, the user must enter a value in <textarea> in order to submit the form. This is a boolean attribute, so it does not have any attributes.
• minlength: The minimum number of characters accepted by <textarea> before the form can be submitted. This attribute takes an integer as a value.
• maxlength: The maximum number of characters accepted by <textarea>. This attribute takes an integer as a value.
• cols: Sets the width of <textarea> in characters. By default, the width of a <textarea> is 20 characters. This attribute takes an integer as a value.
• rows: Sets the height of <textarea> in lines. By default, the height of a <textarea> is 2 lines. This attribute takes an integer as a value.
• spellcheck: Determines if the browser’s spell check works in the <textarea>. This attribute takes three possible values. true makes spellcheck active. false makes spell check inactive. default makes the <textarea> fall back to the browser’s default behavior.

• form: Specifies which form element the <textarea> element is associated with. If form is not specified, <textarea> is associated with the form that directly contains it.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

How to Change HTML Text Box Size

Depending on how much page space you have you may want to change the size of your text boxes in your forms. This is easy to do for both <input> and <textarea>, with either HTML or CSS.

Generally, I would recommend using CSS styling over HTML attributes for this Because it lets you separate style and content, making it easier to apply to your HTML and maintain over time.

How to Change <input> Size

For <input> elements, you can adjust the width with the size attribute. This attribute takes a positive integer as a value, which specifies the width of the box in character widths.

Here are a few <input> elements set to different sizes:

See the Pen html text box: input size attributes by HubSpot (@hubspot) on CodePen.

Alternatively, you can use the width property in CSS to set the width of <input>:

See the Pen html text box: input size css by HubSpot (@hubspot) on CodePen.

How to Change <textarea> Size

For <textarea> elements, use the cols and rows attributes to adjust the width and height of the text box respectively. Both attributes take positive integers as values. cols specifies width in character widths, and rows specifies height in, you guessed it, rows of text.

See the Pen html text box: textarea size attributes by HubSpot (@hubspot) on CodePen.

Or, use the CSS width and height properties to change the size:

See the Pen html text box: textarea size css by HubSpot (@hubspot) on CodePen.

HTML Text Box Examples

Below are text box examples with commonly specified attributes.

Text Box with Maxlength and Minlength 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 greater. If no maxlength is specified, the text box has no maximum length.

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 of 0 or greater, and is equal to or less than maxlength. If no minlength is specified, the text box has no minimum length.

While the user can enter fewer characters than specified by minlength into the text box, the form will not submit.

See the Pen Text box example with maxlength attribute by HubSpot (@hubspot) on CodePen.

Text Box with Placeholder Attribute

To provide more context for how the user should fill in a text box, you can specify a placeholder attribute. The value of placeholder should be a word or short phrase that indicates what kind of information is expected.

See the Pen Text box example with placeholder attribute by HubSpot (@hubspot) on CodePen.

HTML Form with Text Boxes

Finally, here’s an example of an HTML form with multiple input fields, including two text boxes, a password, a submit button, and a text area.

See the Pen HTML form with text box inputs by HubSpot (@hubspot) on CodePen.

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.

Editor's note: This post was originally published in April 2024 and has been updated for comprehensiveness.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now