What is the Correct HTML for Making a Text Input Field?

The correct HTML for making a text input field is just to use the HTML input tag with the type set to “text”.

<input type="text">

The type “text” is also the default value for an input field.

Let’s take a look at the input field in a form.

Let’s say I have the following HTML form:

<form>
  <label for="fname">Full Name:</label>
  <input type="text" id="fname" name="fname">
  <button type="submit" value="Submit">Submit</button>
</form>

As you can see in the code above, we have a simple text input field. We usually want a label to go with the input field to help describe what the user should input into the field.

Example of the Correct HTML for a Text Input Field in a Form

In this simple example, we will just have a standard HTML form. We will provide the HTML code for it and let the user enter a name and submit the form. The form will not have any backend connected to it, so when you submit the form, it should just refresh the page and put the name variable you entered in the url.

<form>
  <label for="fname">What is Your Name?</label>
  <input type="text" id="fname" name="fname">
  <button type="submit" value="Submit">Submit</button>
</form>

And finally, here is the above code in action for you to try out.

Hopefully this article has been useful for you to understand what the correct HTML for making a text input field is.