HTML Text Inputs

Table of Contents +

in previous section, we have learned about the basic html elements like Headings, Paragraphs, Links and Lists etc.

In this section, we will learn HTML interactive elements! Interactive elements are HTML elements that allow users to interact with the web page.

Let’s start with the most common interactive element, the text input.

What are Text Inputs?

Text inputs are HTML elements that allow users to enter text data. They are commonly used in forms for collecting user information such as names, email addresses, and messages.

Basic Text Input

The most basic text input is created using the <input> element with the type attribute set to "text". This creates a single-line text input field where users can type in their data.

How to Create a Text Input

To create a text input in HTML, you can use the <input> element with the type attribute set to "text". Here is an example:

<input type="text" name="name" placeholder="Enter your name" />

The output of the above code will look like this:

Output

As you can see, we have created a text input where users can enter their name.

Note

input tag is a self-closing tag it means we do not need to close it with a separate closing tag like <input></input>. Instead, we can use the self-closing syntax <input />.

Attributes of Text Inputs

Text inputs have many attributes that can be used to change the appearance and behavior of the input box. Here are some commonly used attributes:

Attribute Description Possible Values
type Specifies the type of input (e.g., text, email, password) text, email, password
name Defines the name of the input, used for form submission Any valid string
placeholder Provides a hint to the user about what to enter in the input field Any valid string
value Sets the initial value of the input field Any valid string
required Indicates that the input must be filled out before submitting the form Boolean (true/false)

TextArea Input

When we need to enter multi line text, we can use the <textarea> element instead of the <input> element. The <textarea> element provides a larger text input area that can have multiple lines of text inside it.

How to Create a TextArea Input

To create a textarea input in HTML, you can use the <textarea> element. Here is an example:

<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

The output of the above code will look like this:

Output

Attributes of TextArea Inputs

TextArea inputs also have attributes similar to text inputs. Here are some commonly used attributes:

Attribute Description Possible Values
name Defines the name of the textarea, used for form submission Any valid string
rows Specifies the number of visible text lines in the textarea Any positive integer
cols Specifies the visible width of the textarea in characters Any positive integer
placeholder Provides a hint to the user about what to enter in the textarea field Any valid string

Best Practices for Text Inputs

  • Use appropriate input types: Use the correct type attribute for the input field (e.g., email for email addresses, password for passwords) to ensure proper validation and user experience.
  • Provide placeholders: Use the placeholder attribute to give users a hint about what to enter in the input field.
  • Use labels: Always use <label> elements to associate text with input fields for better accessibility. For example:
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">

The output of the above code will look like this:

Output

🎮 Try It Yourself!

  1. Create a folder named interactive-elements.
  2. Create an HTML file named text-inputs.html.
  3. Create a basic html file with title “Text Inputs”.
  4. Try to add input and textarea elements with different attributes. For Example First Name,Last Name, Email, Message and Address input fields.

🎊 What we have learned

  • ✅ We learned about text inputs and how to create them using the <input> element.
  • ✅ We learned about textarea inputs and how to create them using the <textarea> element.
  • ✅ We learned about the attributes of text inputs and textarea inputs.
  • ✅ We learned about best practices for using text inputs and textarea inputs.

🚀 What’s Next?

Now next we will learn about HTML Number Inputs which help users to select options from a dropdown list or multiple choices.

Previous HTML Tables Next HTML Number Inputs

Share & Connect

Share on LinkedIn