Signup/Sign In

How to create input field of type text using HTML form?

Answer: Using input tag with type attribute having value text.

The forms are widely used on the webpage to take input from users. The forms can be used to log in, register, surveys, etc., or for any other purpose.

Almost every form contains several input fields. An input field is used to take the input from the users. The input can be some text, emails, or any phone number, etc. It is to be validated that the users input the data as per the requirement. Here, we will learn to create an input field that takes only text.

The type attribute

The type attribute in <input> tag describes the type of input that can be entered in the input field. For textual input field use type="text". It is used for single-line input text.

Here is the syntax for it,

<input type="text" ... />

Example: Creating a textual input field

Here in the example, we will create a form with only textual input fields.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
    <h2>Textual input field</h2>
	<form>
	  <label for="fname">First name:</label>
	  <input type="text" id="fname" name="fname"><br>
	  <label for="lname">Last name:</label>
	  <input type="text" id="lname" name="lname"><br>
	  <input type="submit">
	</form>
</body>
</html>

Output:

Here is the output of the above program.

textual input field

Example: Max and min length of text in the input field

We can also limit the length of text in the input field. Use the minlength attribute to add the minimum length for the input text and the maxlength attribute to add the maximum length limit for the input text in the input field.

Here is an example to illustrate this.

Conclusion

We can use the input field type of text in HTML. The type="text" attribute is used to set the input field of the type text. Also, the text max and min length can be defined using its attributes.



About the author: