How to add a text field in HTML

problem

You’re learning HTML and wish to add a text field/ text box on your web page so the user can type some text inside e.g. the name of a place. In this post we will see how to add one.

SOLUTION

Using the <input> tag. With this tag we can further specify by using the type attribute what type of user input we wish to use. In this case for a text field we need to specify the type=”text”.

For example:

textfield.html
				
					<input type="text" />

				
			
output
text field on HTML - unfocused
text field focused

In the screenshot above we can see the text box appears on the web page. We can click on it and type some text as shown below:

type some text in text field

By clicking on it, we can type anything we wish, without any limitation.

(Note): The blue color on the borders of the text box is added by default depending on which web browser (user-agent) is used. These are the user-agent stylesheet. [https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets]

Adding default text/ value

We can use the attribute value if we wish to put some text by default. For example, if we use value=”London”, the web browser will show London in the text box when the page loads up. And, the user can change it.

 

For example:

textfield.html
				
					<input type="text" value="London" />
				
			
output
default value in text field
Making it disabled

If we wish to disallow the user to edit the text field, we can use the attribute disabled. It accepts a boolean value (true, false). We can omit setting the value to true if we wish. The following 2  have the same result:

textfield.html
				
					<input type="text" value="London" disabled />
<input type="text" value="London" disabled=true />

				
			
output
text field disabled

As you can see the text field appears grayed out and the user cannot click on it; so it cannot change it.

Similarly we can use the attribute readonly that has a similar effect. The text cannot be changed but the text field is clickable.

For example:

textfield.html
				
					<input type="text" value="London" readonly />
				
			
output
text field readonly
disabled vs readonly

When using the disabled attribute, the text field is not even clickable. When using the readonly though, the text field can be clicked (focused) and the user can select/highlight the text for copying.

Limiting characters on text field

We can limit the number of characters our user can type by setting the attribute maxLength and use a number. For example, let’s set it to 5 characters:

textfield.html
				
					<input type="text" maxlength="5" />
				
			

By adding maxlength=”5″, the user is allowed to type up to 5 characters including any whitespace.

output
text field maxLength example
Adding a placeholder

We can specify a default text to appear only when the text field is empty. This is called a placeholder. Simply, we specify it with the attribute placeholder.

For example:

textfield.html
				
					<input type="text" placeholder="What's your name?" />
				
			
output
placeholder example

Cool.

conclusion

In this post we saw how to use the <input> tag with the type=”text” attribute to create a text field/ text box on a web page.

Share it!

Facebook
Twitter
LinkedIn
Reddit
Picture of Ellion

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookies

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

Google Analytics Cookies

This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

HotJar Cookies

We use Hotjar in order to better understand our users’ needs and to optimize this service and experience. Hotjar is a technology service that helps us better understand our users’ experience (e.g. how much time they spend on which pages, which links they choose to click, what users do and don’t like, etc.) and this enables us to build and maintain our service with user feedback. Hotjar uses cookies and other technologies to collect data on our users’ behavior and their devices. This includes a device's IP address (processed during your session and stored in a de-identified form), device screen size, device type (unique device identifiers), browser information, geographic location (country only), and the preferred language used to display our website. Hotjar stores this information on our behalf in a pseudonymized user profile. Hotjar is contractually forbidden to sell any of the data collected on our behalf.

For further details, please see the ‘about Hotjar’ section of Hotjar’s support site.