HTML Input Text Box | Field | Value, Size, Width, Multiline

HTML Input Text Box is needed when the website has to take input from a user. If in your application have a sign up or sign in functionality, then you need to take input like Name, user ID and password etc. This can be done by a Text Box Field in HTML.

To Create a HTML Input Text Box you need to dine type=”text” attribute in <input> tag. In this tutorial, you will learn how to create HTML Text input box, Set Height and Width of the text input box, Get the value from text filed and Multiline Text box in HTML with examples.

HTML Input Text Box | Field | Value, Size, Width, Multiline

A <input> tag is very important to give to the user to input filed to enter a content (data). Not only text format it also provides an option like – CheckBox and Radio Button.

Syntax

A simple syntax of HTML input text box size.

HTML Input Text Example

See below simple example, to write a name in a text field. For that in the example used a <input> tag with an type=”text” in element.

HTML Input Text Example output

Output: How text box will look see below image.

Important Attributes

Here are some of the additional attributes you can use in the HTML input type text field. The adding an attribute will automatically support and give additional features to a text field.

AttributeDescription
maxlengthSet the limit maximum number of characters the input accepted by input bo
minlengthSet the limit minimum number of characters long the input should be and still be considered valid
patternA validation of input using a regular expression for contents must match in order.
placeholderWhen input text filed empty that will show as an exemplary value to display.
readonlyA stop to user input any data, its a Boolean attribute indicating whether input be read-only or not.
sizeThis number indicating how many characters wide the input field should be.
spellcheckEnable spell checking for the input field.

Get the HTML Input Text Value

Get the value of a text field is easy. The Value attribute is a DOMString that contains the current value of the text entered into the input text field.

maxlength & minlength

See the example of how you can the maxlength & minlength text input attribute in HTML code.

Output: Screenshot it.

maxlength & minlength text input attribute in HTML code

Size Input Text Box

Using Size attribute in input html tag will indicating how many characters wide the input field should be. The value is of it numeric. Where the value must be a number greater than 0, and the default value is 20. 

Placeholder – How to use

Just write a placeholder attribute with its value (what hint you want to show) in a <input> tag.

Output: See how placeholder will look in input text box.

HTML input text Placeholder How to use

Q: How to set HTML input text width and Height?

Answer: By using style attribute in <input> tag you can give width and Height to HTML input text box. See the below simple example of it.

Output: See the below changed width and Height to HTML input text box.

How to change width and Height to HTML input text box

Q: How to code HTML input text multiline?

Answer: For multiline text, you need to use a <textarea> to get multiline input. For example address of the customer in the shopping site have to give option multiline. Another one example of a comment section also has multiline. See below the code for HTML input multiline.

Do comment if you have any doubt and suggestions on this tutorial.

Note: The All HTML Input Text Box Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

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