HTML Tutorial

HTML Form Tutorial

Forms can be used to allow users to input and send data over the internet to you or applications that process the data.

The starting <form> and ending </form> tags define the form on the web page.

<form>
</form>

Forms contain elements that allow users to enter information. Examples of these elements are text fields, textarea fields, radio buttons, checkboxes, drop down menus, etc., that are contained within the form.

The following example shows you how to add a text field to a form.

<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>
<input type="submit">

The above HTML code example produces the following:

First name: Last name:

The starting <input> and closing </input> tag places a text field into a form. The <input> tags must be placed within the starting <form> and closing </form> tags.

The type attribute of the <input> tag has to have a value of text to indicate that a text field will appear within the form.

Data that is input into the form must be identified to the application that processes the data from the form. The name attribute of the <input> tag is the name that is given to the data that is entered in the text field.

Forms also need a submit button for the users to be able to send the data that entered. A submit button is added to a form by using a self enclosing <input> tag and a value of submit for the type attribute.

Try it yourself.

Controlling the Size of the Textfield

You can control the size of the textfield that appears on the web page by placing the size attribute within the starting <input> tag. The value of the size attribute is the number of characters that can be placed into the textfield.

<form>
First name:
<input type="text" name="firstname" size="10">
Last name:
<input type="text" name="lastname" size="20">
</form>
<input type="submit">

The above HTML form code produces the following example.

First name: Last name:

Notice that the textfield "firstname" is shorter than the textfield "lastname".

Default Size of the Textfield

Note that in most web browser, the width of the textfield is 20 characters by default.

You can also restrict the number of characters that a user can type into a textfield, thereby limiting the amount of information that can be entered by the user. This is done by placing the maxlength attribute within the starting <input> tag.

<form>
First name:
<input type="text" name="firstname" maxlength="5">
Last name:
<input type="text" name="lastname" maxlength="20">
</form>
<input type="submit">

The above HTML form code produces the following example.

First name: Last name:

Try to enter more than 5 characters in the "firstname" textfield and notice that you are not able to enter more than 5. This is because the maxlenght is set to 5. The maxlength for the textfield "lastname" is 20.

Other HTML Form Tutorials

HTML Form Tutorial - How To add a Password Field
This html forms tutorial shows you how to create a password field in an html form.

HTML Form Tutorial - Checkbox
This html forms tutorial shows you how to make checkboxes, which users can use to select and unselect multiple items.

HTML Form Tutorial - Radiobutton
This html code example shows you how to make radiobuttons in HTML forms.

HTML Form Tutorial - Drop Down Box
This html code example shows you how to create drop down boxes.

Previous Tutorial HTML Table Tutorial

Learn CSS with our CSS Tutorials