Lesson 16: HTML Forms and Input

HTML Forms

HTML forms are used to pass data to a server.
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form.

Example:
<form> . input elements . </form>

HTML Forms - The Input Element

The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.

The most common input types are described below.

 Text Fields

<input type="text"> defines a one-line input field that a user can enter text into:

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

How the HTML code above looks in a browser:

First name:
Last name:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Password Field

<input type="password"> defines a password field:


Example:
<form> Password: <input type="password" name="pwd"></form>

How the HTML code above looks in a browser:

Password:

Note: The characters in a password field are masked (shown as asterisks or circles).  

Radio Buttons

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

Example:
<form> <input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female </form>

How the HTML code above looks in a browser:

Male
Female

Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example:
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

How the HTML code above looks in a browser:

I have a bike
I have a car

Submit Button

<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

Example:
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"><input type="submit" value="Submit"></form>

How the HTML code above looks in a browser:
Username:

<< Previous Lesson                                            HTML Tutorial                                            Next Lesson >>