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:

GET Method:

  1. All the name value pairs are submitted as a query string in URL.
  2. It’s not secured as it is visible in plain text format in the Location bar of the web browser.
  3. As the data transfers through address bar (URL) there are some restrictions in using space, some characters like ampersand (&) etc in the GET method of posting data. We have to take special care for encoding data if such special characters are present.
  4. Length of the string is restricted.
  5. If method is not mentioned in the Form tag, this is the default method used.
  6. If get method is used and if the page is refreshed it would not prompt before the request is submitted again.
  7. One can store the name value pairs as bookmark and directly be used while sharing with others – example search results.
  8. Data is always submitted in the form of text
  9. If the response of the page is always same for the posted query then use GET example database searches

POST Method:

1. All the name value pairs are submitted in the Message Body of the request.

2. Length of the string (amount of data submitted) is not restricted.

3. Post Method is secured because Name-Value pairs cannot be seen in location bar of the web browser.

4. If post method is used and if the page is refreshed it would prompt before the request is resubmitted.

5. If the service associated with the processing of a form has side effects (for example, modification of a database or subscription to a service), the method should be POST.

6. Data is submitted in the form as specified in enctype attribute of form tag and thus files can be used in FileUpload input box.

 

<!DOCTYPE HTML>
<html>
<body>
<script></script>

<form name=”htmlform” method=”post” action=”html_form_send.html”>
<table width=”450px”>
<tr>
<td valign=”top”>
<label for=”first_name”>First Name *</label>
</td>
<td valign=”top”>
<input  type=”text” name=”first_name” maxlength=”50″ size=”30″>
</td>
</tr>

<tr>
<td valign=”top”>
<label for=”last_name”>Last Name *</label>
</td>
<td valign=”top”>
<input  type=”text” name=”last_name” maxlength=”50″ size=”30″>
</td>
</tr>
<tr>
<td valign=”top”>
<label for=”email”>Email Address *</label>
</td>
<td valign=”top”>
<input  type=”text” name=”email” maxlength=”80″ size=”30″>
</td>

</tr>
<tr>
<td valign=”top”>
<label for=”telephone”>Telephone Number</label>
</td>
<td valign=”top”>
<input  type=”text” name=”telephone” maxlength=”30″ size=”30″>
</td>
</tr>
<tr>
<td valign=”top”>
<label for=”comments”>Comments *</label>
</td>
<td valign=”top”>
<textarea  name=”comments” maxlength=”1000″ cols=”25″rows=”6″></textarea>
</td>

</tr>
<tr>
<td colspan=”2″ style=”text-align:center”>
<input type=”submit” value=”Submit”/>
</td>
</tr>
</table>
</form>

</body>
</html>

HTML Table attributes and elements

Table Tag:
The <table> tag defines an HTML table.
An HTML table consists of the <table> element and one or more <tr><th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

COLSPAN AND ROWSPAN:

Creating a cell that “spans” across a number of columns or rows is possible using the COLSPAN and the ROWSPAN properties in a TD (or TH) tag.
These two properties can be a bit confusing, so I’ll start off with a simple 2 row 2 column table.

<table>
<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>
row 1 cell 1. row 1 cell 2
row 2 cell 1 row 2 cell 2

COLSPAN creates a cell that “spans” across a number of cells in a row. This makes the cell longer across, not down, since it is crossing COLumns, not ROWs.

<table>
<tr>
<td>
row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr>
<tr>
<td colspan=”2>
row 2 cell 1
</td>
</tr>
</table>
row 1 cell 1. row 1 cell 2
row 2 cell 1

ROWSPAN is very similar to COLSPAN, but it works in the opposite direction. While COLSPAN goes across columns, ROWSPAN goes across rows. Taking the simple 2 row 2 column table from above, here is an example with ROWSPAN in place.

<table>
<tr>
<td rowspan=”2>
row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr>
<tr>
<td>
row 2 cell 2
</td>
</tr>
</table>
row 1 cell 1 row 1 cell 2
row 2 cell 2

CELLSPACING:

It is a attribute of Table tag. We use cellspacing attribute to set the space among the cells of table.

CELLPADING:
It is also a attribute of Table tag. We use it to set the space between cell wall and cell text.

Note : There are also  many attribute of table tag like border, BGcolor(background color),Frame ,rules ,width etc.

Example:

<TABLE BORDER=1 CELLPADDING=2 CELLSPACING=3>
<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>

DIV Tag:

The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once. For instance, by wrapping a set of paragraph elements into a <div> element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the <div> tag instead of coding the same style for each paragraph elements.

 Example:

<div id="myDiv" name="myDiv" title="Example Div Element">
  <h5>Subtitle</h5>
  <p>This paragraph would be your content paragraph...</p>
  <p>Here's another content article right here.</p>
</div>

 

Script tag and Html Attributes:

The <script> Tag :

The script tag has two purposes:
1. It identifies a block of script in the page.
2. It loads a script file.
What it does depends on the presence of src attribute.
src=”url”
The src attribute is optional. If it is present, then its value is a url which identifies a .js file. The loading and processing of the page pauses while the browser fetches, compiles, and executes the file. The content between the <script src=”url”> and the </script> should be blank.
If the src attribute is not present, then the content text between the <script> and the </script> is compiled and executed. In older versions of HTML it was necessary to specify a value for “type”. The scripting language is specified by the “type” attribute.
<script type=”text/javascript”>
// JavaScript code here
</script>
However in HTML5, “type” defaults to “text/javascript”. Therefore, HTML5 <script> tags can be shortened in the following fashion.
<script>
// JavaScript code here
</script>
By default script tag is for client side if we want it to run on server side we have to add attribute which tells it runs on server side.
The document.write method provides a way of incorporating strings into the HTML content of the page.This simply prints the specified text to the page.
<script>
document.write(‘*Hello, there!*’)
</script>

Changing HTML Content:

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id=”demo”>
JavaScript can change the content of an HTML element.
</p>
<script>
function myFunction()
{
x=document.getElementById(“demo”); // Find the element
x.innerHTML=”Hello JavaScript!”; // Change the content
}
</script>
<button type=”button” onclick=”myFunction()”>Click Me!</button>
</body>
</html>
In this example we have assigned id to paragraph element which is demo. In the script tag we can also define funtions by using function keyword which is followed by the name of funtion myFunction in this case. The getElementById funtion returns html element having demo as id so in this case it returns paragraph element. The innerHTML funtion is used to change content of paragraph element.
Button tag <button> is used for buttons. Its onclick event is assigned funtion myFunction so whenever the button is clicked it calls the funtion.

Html Attributes:

The rel attribute is used to provide information about the relationship between the document that’s being linked to (as defined in the href attribute) and the referencing document.One of the most common uses of the rel attribute, in the context of the a element, is to specify a value of “nofollow”. This is to indicate to search engines that the linked document should not be indexed by the search engine, and that any reputation/value associated with the linking site is not passed on such that it benefits the linked page in search results.
The href attribute defines the document to which the link leads. This may be a web page in the same directory, a page somewhere else on the same server, a location within the current page, or a web page—or any another kind of document—stored on another server.

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

Download Code Examples:

The HTML Element

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script> and <base>.


The HTML <title> Element

The <title> tag defines the title of the document.

The <title> element is required in all HTML/XHTML documents.

The <title> element:

  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results

A simplified HTML document:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head><body>
The content of the document……
</body></html>

 


The HTML <base> Element

The <base> tag specifies the base URL/target for all relative URLs in a page:

<head>
<base href=”http://www.abc.com/images/” target=”_blank”>
</head>

 


The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.

The <link> tag is most used to link to style sheets:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

 


The HTML <style> Element

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser:

<head>
<style type=”text/css”>
body {background-color:yellow}
p {color:blue}
</style>
</head>

 


The HTML <meta> Element

Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

<meta> tags always goes inside the <head> element.

<meta> Tags – Examples of Use

Define keywords for search engines:

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

Define a description of your web page:

<meta name=”description” content=”Free Web tutorials on HTML and CSS”>

Define the author of a page:

<meta name=”author” content=”Hege Refsnes”>

Refresh document every 30 seconds:

<meta http-equiv=”refresh” content=”30″>

HTML Hyperlinks

The HTML <a> tag defines a hyperlink.

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

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.cssubjects.com/”>Visit cssubjects</a>

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.google.com/” target=”_blank”>Visit Google!</a>

HTML Links – The id Attribute

The id attribute can be used to create a bookmark inside an HTML document.

Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

An anchor with an id inside an HTML document:

<a id=”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, create a link to the “Useful Tips Section” from another page:

<a href=”http://www.w3schools.com/html_links.htm#tips”>
Visit the Useful Tips Section</a>

HTML Formatting

HTML Text Formatting

This text is bold

This text is italic

This is computer output

This is subscript and superscript



HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be rendered in a way that the user understands as “important”. Today, all major browsers render strong as bold and em as italics.

 

Try it Yourself – Examples

Text formatting

<!DOCTYPE html><html><body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body></html>

Preformatted text

<!DOCTYPE html><html><body>

<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
print i
next i
</pre></body></html>

 

Computer Code

<!DOCTYPE html><html><body>

<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>

<p><b>Note:</b> These tags are often used to display computer/programming code.</p>

</body></html>

Address

<!DOCTYPE html>
<html><body><address>

Written by abc.com<br>
<a href=”mailto:us@example.org”>Email us</a><br>
Address: Box 564, Disneyland<br>
Phone: +12 34 56 78
</address></body></html>

Abbreviations and acronyms

<!DOCTYPE html><html><body>

<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>
<p>Can I get this <abbr title=”as soon as possible”>ASAP</abbr>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p></body></html>

Text direction

<!DOCTYPE html><html><body>

<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>

<bdo dir=”rtl”>
Here is some Hebrew text
</bdo></body></html>

Quotations

<!DOCTYPE html><html><body>

<h2>The &lt;blockquote&gt; tag</h2>
<p>The &lt;blockquote&gt; tag specifies a section that is quoted from another source.</p>
<p>Here is a quote from WWF’s website:</p>
<blockquote cite=”http://www.worldwildlife.org/who/index.html”>
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<p><b>Note:</b> Browsers usually indent &lt;blockquote&gt; elements.</p>

<h2>The &lt;q&gt; tag</h2>
<p>The &lt;q&gt; tag defines a short quotation.</p>

<p>WWF’s goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<p><b>Note:</b> Browsers insert quotation marks around the &lt;q&gt; tag.</p></body></html>

Deleted and inserted text

<!DOCTYPE html><html><body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p></body></html>

 

HTML Paragraphs and Line Breaks

HTML documents are divided into paragraphs.


HTML Paragraphs

Paragraphs are defined with the <p> tag.

Example

<p>This is a paragraph</p>
<p>This is another paragraph</p>

 

Note: Browsers automatically add an empty line before and after a paragraph.


Don’t Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

Example

<p>This is a paragraph
<p>This is another paragraph

 

The example above will work in most browsers, but don’t rely on it. Forgetting the end tag can produce unexpected results or errors.

Note: Future version of HTML will not allow you to skip end tags.


HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br>a para<br>graph with line breaks</p>

The <br> element is an empty HTML element. It has no end tag.


HTML Output – Useful Tips

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.