Text Input

To get information from our form, we need inputs. In this exercise, we'll look at the most common one: a text input.

We create most inputs with the input element. Like img, it has no content and no closing tag. Its type attribute says what kind of input it is; for a text input, the value is text.

The second attribute of our input is name, the name of the input. What the user types into the box becomes the input's value. When the form is sent, the browser sends each value together with the name of its input, for example nickname=Tim. That's how the server knows which value is which, even when the form has several text inputs.

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

This code displays an empty box, like this:

We can also write the value attribute in the code. The box then starts out pre-filled with that value, which the user can of course change:

<input type="text" name="nickname" value="Tim">

This code is displayed like this:

Elsewhere, you may also see <input ... /> with a slash at the end. Just like <br />, it's an older way of writing the same thing.

Instructions

In the form, create an input element with the attribute type with the value text.

Add the attribute name with the value name to the input, because the user will type their name into it. Then run the code and try typing into the box.

Start programming for free

By signing up, you agree to the Terms of Service and Privacy Policy.

Or sign up with:

2/11