Text Input

In order to obtain information from our form, we need to use inputs. In this exercise, we will look at the most commonly used input - text input.

We often create inputs using the input element with the type attribute specifying the type of input. For text input, the value will be text.

Another attribute that our input will have is the name attribute. This attribute gives our input a name so that we can distinguish multiple text inputs.

<form action="/processing.html" method="POST">
	<input type="text" name="text-field"/>
</form>

This code will display an empty box like this:

When the user types text into the box, the value of the value attribute changes to the text entered by the user.

We can also set the value of the value attribute in the code, which would result in a pre-filled input. Of course, the user can overwrite and change the pre-filled value.

<form action="/processing.html" method="POST">
	<input type="text" name="text-field" value="hello"/>
</form>

This code will be displayed like this: