What is the correct HTML for Making a Text input field?

If you want to create a text box using the Input tag in HTML, First add the “<input>” tag in HTML and use the “type” attribute and give it the value “text“. In this article, what is the correct Html syntax for making a text input field? And some attributes and values in the input tag.

What is an input tag?

It is an unpaired tag in HTML, which means this tag will have only an opening tag and no closing tag. You should always use the input tag inside the form tag because the input tag is the main tag of the form tag. If you use an input tag make sure to use the type and name attribute, otherwise nothing will be displayed in your output.  The input element display depends on the value of the type attribute. It has an attribute named “type”, in which you have to give the type of input. For example: if you are going to get a password from the user as input, then you should give “password” as a value in the type attribute. Like this, the type attribute has multiple values ​​so you can use whatever value you need.

So, the attribute “type” indicates which element of the form you are going to create. And you can assign a name to your input tag by specifying the “name” attribute.

How to make text box using input tag and their attributes?

<form>
Name: <input type="text" name="text" placeholder="Name"><br><br>
Email-Id: <input type="text" name="text" placeholder="Email"><br><br>
Password: <input type="password" name="text" placeholder="Password">
</form>

Live Preview:

If you need to accept text from the user, you need to create a text control or input text box. For that, you need to use a tag called as “Input” element. Input has an attribute called “type” to that you can give a value “text“. You have successfully created an input text box.

Name Attribute

You need to use the “name” attribute to call/access that input element in CSS or JS. Name is one of the most important attributes. We must give a name to every input control because the “name” is the one by which we can identify that input control and access that input control into the code and process. If you use the name attribute there is no need to use the ID attribute or class attribute, because you can access the input element using the value of the name attribute. If you are using ID, then use the same value for name and ID attributes. Ex : <input type="text" name="value" Id="value" >

Value Attribute

If you want to give a value as default in the textbox then use the “value” attribute and give your default value as the value of the “value” attribute. If you don’t give any value in the value attribute then nothing will be displayed in the textbox. Ex: <input type="text" value="Raju">

Placeholder Attribute

To tell the user what the text box you created is for, you can use the “placeholder” attribute and give as a value, what your textbox is, for ex:placeholder: name. Placeholder is one of the most important attributes of the textbox. Your placeholder value is displayed in gray color inside the textbox. This is just information for the user and is not a value for the text box. When the user enters some text in the text box, it becomes the value of the text box. So, the placeholder is only information for what the user needs to do.Ex: <input type="text" placeholder="name" >

Max length Attribute

Input tag has an attribute called max length. For example, if you give the max value attribute 15, the textbox will only accept 15 characters, User can type a maximum of 15 characters. Ex: <input type="text" maxlength="15">

Disabled Attribute

And one of the most important attributes of input is called “disabled“. If you add the “disabled” attribute in the input tag, the textbox will be disabled and the user cannot type anything. You don’t have to give any value to it. Ex: <input type="text" disabled>

Why create a textbox in the input tag instead of textarea tag?

If you use textarea tag instead of the input field, The input tag contains a type value for specific text (eg: password, name or last name, phone number, and email). But you can’t give that in a text area tag usually, you can just create a text box (notes). In the text area, you can keep on giving value in multiline and the textbox will extend. But in the input field, you can enter value only in one line and The text box will not extend. And if you create a specific text input field, your user can only type that specific value. For example, if you create a number input field, the user can type only the number, not the text. But you can’t do that in textarea. This is why the text box is mostly created using input tags.

Type attribute values

The main and commonly used values are:

Radio: It is used to create a Radio button. If the user needs to make only one selection out of multiple choices, then we need to create radio buttons. For example, in an application form if we are accepting the gender of an applicant in front of him there will be two choices either male or female, out of which he needs to make only one choice. Then in that situation we need to create radio buttons.

Password: It is used to create a password textbox. In the password box, the text is displayed in the form of dots, we can’t see the text. The browser automatically displays those text in the form of dots or asterisks.

Reset: It is used to create a Reset button and reset the controls back to their default values. If you don’t want the text to be displayed on the form you should create a reset type value.

Submit: It creates Submit button. When you can click submit button all information that is filled in these controls is sent to the “value of the action attribute in the form tag” page.

Conclusion

Hope you guys have understood, what is the correct HTML for making a text input field?