HTML Input Type Text Field

A text field in HTML is a single line input box inside the form. You can create an input type text field using the syntax <input type=”text”> in HTML. You can check the below-given methods and examples to create input type text.

Text Field in HTML Using <input type=”text”>

The text field is useful when you want to get the user input data such as first name, middle name and other useful details. You can create this using the syntax as given below.

Syntax
<input type=”text”>

The above syntax showing only the type attribute of the input text. However, there many other attributes of it that you will learn further in this tutorial.

Let’s see the simple example to create a simple input box using the above syntax.

Example

Test it Live

Output




The above example creates a simple input box to use inside the HTML form. It contains the two other attributes which are name and id of the input textbox.

Input Type Text Field in HTML Form

How to Add Placeholder For Textbox

If you want to show the hint to the users to get the required value for the input field. A light text starts appearing inside the input box which disappears immediately on click. The hint is continuously displaying in the input box until the user clicks on it.

Test it Live

Output



The above example showing the input textbox with the hint showing inside it. When you click the input box, the hint automatically disappears and the user can enter the required value as per the given hint.

Make Text Field Required Using HTML

When the user clicks the submit button, it takes the user to the page given in the action attribute of the form. There are many elements inside the form and not all the elements are required by the user to fill.

You can easily make the input field required by adding the required attribute inside it. The required input box does not allow users to go ahead without entering the required value. See the example given below to find out how to add the attribute in the input field.

Test it Live

Output



The above example showing the input box and the submit button. Now, click the submit button to check if the input field is required to fill. You will definitely get a message to fill it first to continue with the other fields.

Some Other Attributes of <input type=”text”>

Below are the useful attributes you can use with the textbox. It’s details credit goes to mozilla doc library.

Attribute Name Description
maxlength
  • Define the maximum length of the text user can enter in the input box.
  • You have to enter a numeric value for this attribute.
minlength
  • It defines the minimum number of text content user must enter in the textbox.
  • Use number as the value for this attribute.
readonly
  • You can make the input field as readonly textbox. The textbox becomes disabled for the users to enter any content.
  • Use readonly as the value for this attribute.
size
  • If you want to specify the width of the inputbox, you have to use this attribute.
  • It require a numeric value to use for this attribute
value
  • Specify a default value for the input box which displays in the textbox.
  • Enter a text or number as the value of this attribute.
pattern
  • A valid value for the input text box can be defined by using the pattern attribute.
  • Use regular expression is the value for this attribute.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ULTIMATE TOOLKIT Free eBook

Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id