A text field in HTML is a single line input box inside the form. It can be used to collect text data from users from forms in HTML.
|
1 2 |
<label for="Name">Name:</label> <input type="text" name="name" id="name"> |
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.
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
|
1 2 3 4 5 |
<form method="post" action="action.php"> <label for="Name">Name:</label> <input type="text" name="name" id="name"> <input type="submit" name="submit" value="Submit"> </form> |
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.
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.
|
1 2 3 4 |
<form method="post" action="action.php"> <input type="text" name="name" id="name" placeholder="Enter your name here"> <input type="submit" name="submit" value="Submit"> </form> |
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.
|
1 2 3 4 |
<form method="post" action="action.php"> <input type="text" name="name" id="name" placeholder="Enter your name here" required> <input type="submit" name="submit" id="submit"> </form> |
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 |
|
| minlength |
|
| readonly |
|
| size |
|
| value |
|
| pattern |
|