HTML Input Text Box is needed when the website has to take input from a user. If the application has signup 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 an HTML Text input box, Set the Height and Width of the text input box, Get the value from the text field, and Multiline Text box in HTML with examples.
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.
<input type="text">HTML Input Text Example
See below simple example, to write a name in a
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Text Box</h2>
<label for="name">Enter Name:</label>
<input type="text" id="name" name="name">
</body>
</html>
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.
| Attribute | Description |
|---|---|
maxlength | Set the limit maximum number of characters the input accepted by input bo |
minlength | Set the limit minimum number of characters long the input |
pattern | A validation of input using a regular expression for contents must match in order. |
placeholder | When input text filed empty that will show as an exemplary value to display. |
readonly | A stop to user input any data, its a Boolean attribute indicating whether input be read-only or not. |
size | This number indicating how many characters wide the input field should be. |
spellcheck | Enable 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.
var x = document.getElementById("myText").value;maxlength & minlength
See the example of how you can the
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Text Box</h2>
<label for="name">Name (3 to 10 characters):</label>
<input type="text" id="name" name="name" required minlength="3" maxlength="10">
</body>
</html>
Output: Screenshot it.
Size Input Text Box
Using the Size attribute in the input html tag will indicating how many characters wide the input field should be. The value is numeric. Where the value must be a number greater than 0, and the default value is 20.
<input size="25" type="text">Placeholder – How to use
Just write a placeholder attribute with its value (what hint you want to show) in a <input> tag.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Text Box</h2>
<label for="name">Enter Name:</label>
<input type="text" id="name" name="name" placeholder="Enter name">
</body>
</html>
Output: See how placeholder will look in input text box.
Q: How to set HTML input text width and Height?
Answer: By using the style attribute in the <input> tag you can give width and Height to the HTML input text box. See the below simple example of it.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Text Box</h2>
<label for="name">Enter Name:</label>
<input type="text" id="name" name="name" style="height:120px; width:200px;">
</body>
</html>Output: See the below changed 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 example of a comment section also has multiline. See below the code for HTML input multiline.
<textarea name="Text1" cols="40" rows="5"></textarea>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