HTML Forms

HTML forms are used to pass data to a server. A 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:

<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 used input types are described below.

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

<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:

<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:

<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 ONE or MORE options of a limited number of choices.

<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:

<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
How the HTML code above looks in a browser:

Submit
Username: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.

HTML Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute:

<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

HTML Table Headers

Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered.

<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
How the HTML code above looks in your browser:

Header 1

Header 2

row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

More Examples
Tables without borders How to create tables without borders. Table headers How to create table headers. Table with a caption How to add a caption to a table. Table cells that span more than one row/column How to define table cells that span more than one row or one column. Tags inside a table How to display elements inside other elements. Cell padding How to use cellpadding to create more white space between the cell content and its borders. Cell spacing How to use cellspacing to increase the distance between the cells. The frame attribute How to use the "frame" attribute to control the borders around the table.

HTML Table Tags

Tag <table> <th> <tr> <td> <caption> <colgroup> <col /> <thead> <tbody> <tfoot> Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines a group of columns in a table, for formatting Defines attribute values for one or more columns in a table Groups the header content in a table Groups the body content in a table Groups the footer content in a table

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways: 1. 2. To create a link to another document, by using the href attribute To create a bookmark inside a document, by using the name attribute

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example
<a href="http://www.w3schools.com/">Visit W3Schools</a>
which will display like this: Visit W3Schools Clicking on this hyperlink will send the user to W3Schools' homepage. Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab:

Example <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Try it yourself

HTML Links - The name Attribute

The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document. Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers. Bookmarks are not displayed in any special way. They are invisible to the reader.

Example
A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>

Or,

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles).

<ul> <li>Coffee</li> <li>Milk</li> </ul>

How the HTML code above looks in a browser:

Coffee Milk

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers.

<ol> <li>Coffee</li> <li>Milk</li> </ol>

How the HTML code above looks in a browser: 1. 2. Coffee Milk

HTML Definition Lists

A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
How the HTML code above looks in a browser: Coffee Milk - white cold drink

- black hot drink

Basic Notes - Useful Tips

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.

More Examples
Different types of ordered lists Demonstrates different types of ordered lists.

Different types of unordered lists Demonstrates different types of unordered lists. Nested list Demonstrates how you can nest lists. Nested list 2 Demonstrates a more complicated nested list. Definition list Demonstrates a definition list.

HTML List Tags

Tag <ol> <ul> <li> <dl> <dt> <dd> Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines an item in a definition list Defines a description of an item in a definition list