Textbox in HTML

One of many controls in HTML is input box or textbox, in which you can type some information. There is two types of an input box, Single line, and Multi-line. We will learn about single line input box. Let us have a look at the example.

Type your name:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Type your name: <input type="text" />
    </body>
</html>
                        

As shown in above code, to create an inputbox, <input type="text"> is used. Here, type="text" is most important because <input> element is used for other controls like button. So type attribute defines the type of the control.

Attributes

There are many attributes which will be useful while working with the input box. Let us have a look at one by one.

placeholder attribute

Placeholder inside the input box provides hint what to enter. Let us have a look at an example.

Type your name:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Type your name: <input placeholder="all in lower case" type="text" />
    </body>
</html>
                        

Placeholder is rendered in lighter color and automatically vanishes when a user types something inside input box or sets value using JavaScript.

size attribute

You can set the width of the input box using CSS in pixels but it is not possible to set the width depending on a certain number of characters. With size attribute, you can specify the number of characters the input box can display at a time.

Type your name:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Type your name: <input size="30" placeholder="all in lower case" type="text" />
    </body>
</html>
                        

In the above code, the textbox can fit 30 characters.

Validation

Validation will be more useful while working with form but it is important that you learn it before jumping into form.
Validation means that something needs to be followed and it needs to be validated. Before HTML5, validation was done by JavaScript but in HTML5 there are some attributes that help to validate basic things.
In validation section, we will use <form>. You will learn about form in coming up section.

Input value length

You may have seen some login forms where minimum characters need to be entered otherwise form will not send the data and you will not be able to log in.
You can add restriction of minimum characters using minlength attribute and same way, you can add restriction for maximum characters using maxlength.

name:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form>
            name: <input minlength="4" maxlength="30" placeholder="lower case" type="text" required/>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>
                        

In the above code, we have added a restriction for minimum length 4 and maximum length 30. When you try to submit the form with less than 4 characters it will show the hint. It is given by the browser itself.

required attribute

Some fields in the form are must in the form. Like in the login form, username and password must be filled before submitting the form.
For that, required attribute is used.

name:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form>
            name: <input placeholder="lower case" type="text" required/>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>
                        

In the above code, the name field is required otherwise form will not submit.

Specifying pattern

You can specify a regular expression that must be matched by inputted value. For that pattern attribute is used. If you don't know what regular expressions are, we will add tutorials for that but for now on, you can visit this link.

name:

Name must be lowercase and 4-8 characters in length


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form>
            name: <input pattern="[a-z]{4,8}" placeholder="lower case" type="text" required/>
            <button type="submit">Submit</button>
        </form>
        <p>
            Name must be lowercase and 4-8 characters in length
        </p>
    </body>
</html>
                        

In above code, pattern is regular expression which is "[a-z]{4,8}", which means the entered expression must be in lower case (a-z) and length should be between 4 to 8.

type email and password

Most of the login form needs email and password for verification. In inputbox, type="text" can be changed to type="email" for email verification and type="password" to hide the entered characters.

User ID:
Password:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form>
            User ID: <input type="email" placeholder="Email" required/>
            <br>
            Password: <input type="password" minlength="4" maxlength="30" required/>
            <br>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>
                        

In type="email" and type="password", other attributes like required, minlength, maxlength, pattern will work.

Conclusion

In this section, we have learned about important control in HTML. Inputbox is used widely in HTML forms.
In next section, we will learn about buttons in HTML.