A text box is a section of your website where users can enter text. A blinking cursor appears when you click or tap on or inside the text box, indicating that you are ready to begin typing. And an on-screen keyboard will appear if you're using a tablet or smartphone.
Text boxes are classified into two types: text fields and text areas. These two text boxes serve different purposes and help your user understand what they should be typing into the text box.
A text field is a small, typically rectangular box where you can enter a single line of text, such as a name, number, or any other short text type.
A text area is a larger box where you can enter multiple lines of text, such as descriptions, paragraphs, and so on.
When you tap the enter button in a text field, the cursor will either move to the following field or submit the form. In a text area, on the other hand, the cursor will move to a new line, creating a line break.
How to Add a Text Field to Your Website
Whenever you want a user to input something into a webpage, you can use the
<input> tag. Then, to ensure this is a text field, you can add the type attribute of
<form> <input type='text' /> </form>
This will output a single-line text field on our web page, which can take in all forms of text values. We can also add a label tag or other attributes like the
placeholder attribute to let users know what to input in the text field.
<form> <input type='text' placeholder='Enter your name...' /> </form> Or <form> <label>Name:</label> </br> <input type='text' /> </form>
There are many more attributes we can define on a text field, such as the
minlength, to help define the maximum or the minimum amount of text a field can accept.
<form> <input type='text' maxlength="100" minlength="10" placeholder='Enter your name' /> </form>
We can also pass in default values to our text filed with the value attribute:
<form> <input type='text' value='John Doe' placeholder='Enter your name...' /> </form>
How to Add a Text Area to Your Website
A text area is defined by a
<textarea> tag. You use it to collect unlimited multi-line text like comments or reviews.
You specify the size of a text area by the
rows attributes (or with CSS).
<form> <textarea rows="5" cols="33"></textarea> </form>
The textarea field does not use the value attribute to pass in default values, but you can place default content between the opening and closing tags.
<form> <textarea rows="5" cols="33"> This is the default comment... </textarea> </form>
Like the input tags, we can add the
placeholder attributes to the textarea field.
<form> <textarea placeholder='Enter comment...' maxlength='1000' minlength='100'> This is the default comment... </textarea> </form>
In this article, you have learned how to add a text box to your website using the
<input/> tags, depending on the
text you wish to add.
You can learn more about HTML tags in the following resources:
- HTML for Beginners - freeCodeCamp
- What are HTML Tags, and How Do You Use Them?
- HTML Cheat Sheet – HTML Elements List Reference
Have fun coding!