Scribd
Upload
60 views52 pages

Lecture 2, Web Development, Dept. of Electronics, QAU

The document discusses various aspects of HTML text formatting tags, including: - Text formatting tags like <b>, <strong>, <em> etc. - Preformatted text tags like <pre> - Computer output tags like <code>, <kbd>, <tt> - Address tag <address> - Abbreviation and acronym tags <abbr> and <acronym> - Text direction tag <bdo> - Quotation tags like <blockquote> and <q> - Deleted and inserted text tags <del> and <ins> It also discusses HTML links tags and attributes like <a>, href, name, target

Uploaded by

waqar_quaidian
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
60 views52 pages

Lecture 2, Web Development, Dept. of Electronics, QAU

The document discusses various aspects of HTML text formatting tags, including: - Text formatting tags like <b>, <strong>, <em> etc. - Preformatted text tags like <pre> - Computer output tags like <code>, <kbd>, <tt> - Address tag <address> - Abbreviation and acronym tags <abbr> and <acronym> - Text direction tag <bdo> - Quotation tags like <blockquote> and <q> - Deleted and inserted text tags <del> and <ins> It also discusses HTML links tags and attributes like <a>, href, name, target

Uploaded by

waqar_quaidian
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 52

Web

Development!

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
Text formatting

<html>
<body>

<p><b>This text is bold</b></p>


<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></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>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
Preformatted text
<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>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
"Computer output" tags
<html>
<body>

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<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>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
Address

<html>
<body>

<address>
Written by W3Schools.com<br />
<a ref="mailto:[email protected]">Email
us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
Abbreviations and acronyms
<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</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>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
Text direction
<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>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
Quotations
<html>
<body>

A long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also insert margins.</p>

A short quotation:
<q>This is a short quotation</q>

<p><b>Notice that the browser inserts quotation marks around the short quotation (Does not work in IE).</b></p>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
Deleted and inserted text
<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>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
HTML Text Formatting Tags

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Text Formatting
HTML "Computer Output" Tags

HTML Citations, Quotations, and Definition Tags

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Styles
Deprecated Tags and Attributes

The purpose of the style attribute is:

To provide a common way to style all HTML elements.

Styles was introduced with HTML 4, as the new and preferred way to
style HTML elements. With HTML styles, styles can be added to HTML
elements directly by using the style attribute, or indirectly in separate
style sheets (CSS files).

You can learn everything about styles and CSS in our CSS Lecture.

In this lecture we will use the style attribute to introduce you to HTML
styles.

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Styles
The HTML Style Attribute

In HTML 4, several tags and attributes are deprecated. Deprecated means


that they will not be supported in future versions of HTML and XHTML.

The message is clear: Avoid using deprecated tags and attributes!

These tags and attributes should be avoided:

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Styles
HTML Style Example - Background Color
The background-color property defines the background color for an
element:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Styles
HTML Style Example - Font, Color and Size
The font-family, color, and font-size properties defines the font, color, and
size of the text in an element:

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Styles
HTML Style Example - Text Alignment
The text-align property specifies the horizontal alignment of text in an
element:
<html>
<body>

<h1 style="text-align:center">This is a heading</h1>


<p>The heading above is aligned to the center of this page.</p>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Links
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:


• To create a link to another document, by using the href attribute
• To create a bookmark inside a document, by using the name attribute

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Links
HTML Links - The target Attribute

<html>
<body>

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


W3Schools.com!</a>

<p>If you set the target attribute to "_blank", the link will open in a new
browser window.</p>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Links
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.
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, 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>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Links
An image as a link
<html>
<body>

<p>Create a link of an image:


<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
width="32" height="32" />
</a></p>

<p>No border around the image, but still a


link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML
tutorial" width="32" height="32" />
</a></p>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Links
Link to a location on the same page
<html><body>

<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>


<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

</body></html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Links
Create a mailto link
<html>
<body>

<p>
This is an email link:
<a href="mailto:[email protected]?Subject=Hello%20again">
Send Mail</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the
browser will display the text properly.
</p>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Links
Create a mailto link 2
<html>
<body>

<p>
This is another mailto link:
<a
href="mailto:[email protected][email protected]&bcc=andsomeoneels
[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20bi
g%20summer%20party!">Send mail!</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser
will display the text properly.
</p>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Images
Insert images
<html>
<body>

<p>An image from another folder:</p>


<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32" />

<p>An image from W3Schools:</p>


<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"
width="104" height="142" />

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Images
Insert images from different locations
<html>
<body>
<p>
An image:
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
</p>
<p>
A moving image:
<img src="hackanm.gif" alt="Computer man" width="48" height="48" />
</p>
<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>
</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Tables
<html>
<body>

<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>

<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

<h4>One row and three columns:</h4>


<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Tables
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Table borders
<html> <h4>With a very thick border:</h4>
<body> <table border="15">
<tr>
<h4>With a thick border:</h4> <td>First</td>
<table border="8"> <td>Row</td>
<tr> </tr>
<td>First</td> <tr>
<td>Row</td> <td>Second</td>
</tr> <td>Row</td>
<tr> </tr>
<td>Second</td> </table>
<td>Row</td>
</tr> </body>
</table> </html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Tables without borders
<html>
<body>

<h4>And this table has no borders:</h4>


<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Table headers
<html><body>
<html><body>
<h4>Vertical headers:</h4>
<h4>Table headers:</h4>
<table border="1">
<table border="1">
<tr>
<tr>
<th>First Name:</th>
<th>Name</th>
<td>Bill Gates</td>
<th>Telephone</th>
</tr>
<th>Telephone</th>
<tr>
</tr>
<th>Telephone:</th>
<tr>
<td>555 77 854</td>
<td>Bill Gates</td>
</tr>
<td>555 77 854</td>
<tr>
<td>555 77 855</td>
<th>Telephone:</th>
</tr>
<td>555 77 855</td>
</table>
</tr>
</table>
</body></html>
</body></html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Table with a caption
<html>
<body>

<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

</body></html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Table cells that span more than one row/column
<html> <html>
<body> <body>

<h4>Cell that spans two columns:</h4> <h4>Cell that spans two rows:</h4>
<table border="1"> <table border="1">
<tr> <tr>
<th>Name</th> <th>First Name:</th>
<th colspan="2">Telephone</th> <td>Bill Gates</td>
</tr> </tr>
<tr> <tr>
<td>Bill Gates</td> <th rowspan="2">Telephone:</th>
<td>555 77 854</td> <td>555 77 854</td>
<td>555 77 855</td> </tr>
</tr> <tr>
</table> <td>555 77 855</td>
</tr>
</body> </table>
</html>
</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Tags inside a table
<html> <td>This cell contains a list
<body> <ul>
<li>apples</li>
<table border="1"> <li>bananas</li>
<tr> <li>pineapples</li>
<td> </ul>
<p>This is a paragraph</p> </td>
<p>This is another paragraph</p> <td>HELLO</td>
</td> </tr>
<td>This cell contains a table: </table>
<table border="1">
<tr> </body>
<td>A</td> </html>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Cell padding

<html> <h4>With cellpadding:</h4>


<body> <table border="1"
<h4>Without cellpadding:</h4> cellpadding="10">
<table border="1"> <tr>
<tr> <td>First</td>
<td>First</td> <td>Row</td>
<td>Row</td> </tr>
</tr> <tr>
<tr> <td>Second</td>
<td>Second</td> <td>Row</td>
<td>Row</td> </tr>
</tr> </table>
</table> </body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
Cell spacing
<html> <h4>With cellspacing:</h4>
<body> <table border="1"
<h4>Without cellspacing:</h4> cellspacing="10">
<table border="1"> <tr>
<tr> <td>First</td>
<td>First</td> <td>Row</td>
<td>Row</td> </tr>
</tr> <tr>
<tr> <td>Second</td>
<td>Second</td> <td>Row</td>
<td>Row</td> </tr>
</tr> </table>
</table> </body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
The frame attribute
<html>
<body>

<p>
<b>Note:</b>
If you see no frames/borders around the tables
below, your browser does not support
the "frame" attribute.
</p>

<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<body>
<html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
The frame attribute

<html> <h4>With frame="void":</h4>


<body> <table frame="void">
<tr>
<h4>With frame="box":</h4> <td>First</td>
<table frame="box"> <td>Row</td>
<tr> </tr>
<td>First</td> <tr>
<td>Row</td> <td>Second</td>
</tr> <td>Row</td>
<tr> </tr>
<td>Second</td> </table>
<td>Row</td> <body>
</tr> <html>
</table>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Tables
HTML Table Tags

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Lists
Unordered list
Ordered list
<html> <html>
<body> <body>

<h4>An Unordered List:</h4> <h4>An Ordered List:</h4>


<ul> <ol>
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ul> </ol>

</body> </body>
</html> </html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Lists
Different types of ordered lists
<html> <h4>Roman numbers list:</h4>
<body> <ol type="I">
<li>Apples</li>
<h4>Numbered list:</h4> <li>Bananas</li>
<ol> </ol>
<li>Apples</li>
<li>Bananas</li> <h4>Lowercase Roman numbers
</ol> list:</h4>
<ol type="i">
<h4>Letters list:</h4> <li>Apples</li>
<ol type="A"> <li>Bananas</li>
<li>Apples</li> </ol>
<li>Bananas</li>
</ol> </body>
</html>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
</ol>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Lists
Different types of unordered lists
<html>
<body>

<h4>Disc bullets list:</h4>


<ul type="disc">
<li>Apples</li>
</ul>

<h4>Circle bullets list:</h4>


<ul type="circle">
<li>Apples</li>
</ul>

<h4>Square bullets list:</h4>


<ul type="square">
<li>Apples</li>
</ul>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Lists
Definition list
HTML List Tags
<html>
<body>

<h4>A Definition List:</h4>


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Lists
Nested list Nested list 2
<html> <html>
<body> <body>

<h4>A nested List:</h4> <h4>A nested


<ul> List:</h4>
<li>Coffee</li> <ul>
<li>Tea <li>Coffee</li>
<ul> <li>Tea
<li>Black tea</li> <ul>
<li>Green tea</li> <li>Black tea</li>
</ul> <li>Green tea
</li> <ul>
<li>Milk</li> <li>China</li>
</ul> <li>Africa</li>
</ul>
</body> </li>
</html> </ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Forms and Input
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.
<form>
The <form> tag is used to create an HTML form: .
input elements
HTML Forms - The Input Element .
The most important form element is the input element. </form>

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.

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Forms and Input
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>
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>

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

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Forms and Input
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user
select ONLY ONE 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>
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>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Forms and Input
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>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Forms and Input
Simple drop-down list Drop-down list with a pre-selected value
<html> <html>
<body> <body>

<form action=""> <form action="">


<select name="cars"> <select name="cars">
<option value="volvo">Volvo</option> <option value="volvo">Volvo</option>
<option value="saab">Saab</option> <option value="saab">Saab</option>
</select> <option value="fiat"
</form> selected="selected">Fiat</option>
<option value="audi">Audi</option>
</body> </select>
</html> </form>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Forms and Input
Textarea Create a button
<html> <html>
<body> <body>

<textarea rows="10" cols="30"> <form action="">


The cat was playing in the garden. <input type="button" value="Hello world!">
</textarea> </form>

</body> </body>
</html> </html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Forms and Input
Fieldset around form-data Form with text fields and a submit button
<html> <html>
<body> <body>

<form action=""> <form name="input" action="html_form_action.asp"


<fieldset> method="get">
<legend>Personal information:</legend> First name: <input type="text" name="FirstName"
Name: <input type="text" size="30" /><br /> value="Mickey" /><br />
E-mail: <input type="text" size="30" /><br /> Last name: <input type="text" name="LastName"
Date of birth: <input type="text" size="10" /> value="Mouse" /><br />
</fieldset> <input type="submit" value="Submit" />
</form> </form>

</body> <p>If you click the "Submit" button, the form-data will be
</html> sent to a page called "html_form_action.asp".</p>

</body>
</html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Forms and Input
Send e-mail from a form
<html><body>

<h3>Send e-mail to
[email protected]:</h3>

<form
action="MAILTO:[email protected]"
method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name"
value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your
email" /><br />
Comment:<br />
<input type="text" name="comment"
value="your comment" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">

</form>
</body></html>

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool
HTML Forms and Input
HTML Form Tags

Lecture 2, Web Development, Dept. of Electronics, QAU By: Muhammad Usman Maqbool

You might also like