Almost any interactive website will have a web form. Web forms allow users to send information, such as a search query, to the web server.

There are several interface elements that you can use to construct an interactive form. This topic will cover basic usage for the set of HTML5 web form elements.

<form>

The <form> tag is used to create a form. All sub elements of the form will be nested within the <form></form> tags.

<form>
    <!-- Nested form elements -->
</form>

<label>

Each form element can have an optional label associated with it. The label is helpful to indicate to the user the purpose of the form element. The following example shows a text field with a label element.

<label for="text-field">Label text</label>
<input type="text" id="text-field" />

The label 'for' text associates the label with another element containing a matching 'id'.

<input>

The input tag has multiple uses and varies in appearance and function based on the 'type' attribute.'

type="text"

The text field type is an one-line text box. E.g. if you want users to create a username:

<label for="username">Choose a username:</label>
<input type="text" id="username" />