Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
21 views21 pages

HTML Ppts

Uploaded by

20131A5327 KONDETI SHIVA NARASIMHA
Copyright
© © All Rights Reserved
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
21 views21 pages

HTML Ppts

Uploaded by

20131A5327 KONDETI SHIVA NARASIMHA
Copyright
© © All Rights Reserved
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/ 21

29-Jun-15

TOPIC SPECIFICATION
1. Introduction to HTML
2. Document Heading
Build Your Web Site from Start to Finish 3. HTML Text Formatting Tags
4. HTML List
5. HTML table
6. HTML links
FUNDAMENTALS OF HTML 7. Images and other page elements
8. Frames
9. Forms

1. INTRODUCTION TO HTML History Of Markup Languages


• What is HTML? Tim Berners Lee
Computer Scientist Gives the concept of
– Hyper Text Markup Language Making connection between simple huge text files or
D.Base files on the internet.
– To generate web document
– Created by Tim Bernes-Lee at CERN,
First markup language was created named SGML
European Lab, Geneva.

SGML
Standard Generalized Markup Language
Supports Simple text, it don’t support Graphics Features

1
29-Jun-15

History Of Markup Languages HTML Structure

After SGML, HTML was generated By Tim Berners Lee . <html>


HTML supports Graphics features. <head>
Then <title></title>
DHTML: Dynamic Hypertext Markup Language.
Uses: CSS & Java Script
</head>
<body>
VRML: Virtual Reality Markup Language.
Supports 3-D </body>
WML: Wireless Markup Language
</html>
Used for Wireless Devices Like Cellular Phones .

XML Extensible Markup Language

HTML TAGS HTML TAG Structure


TAGS Or FLAGS: Tags contains Elements, attribute and value:
• Html use < Less Than and > Greater Than Signs
For writing commands. <FONT COLOR=“Blue”>This is blue font</FONT>
• All tags are CaSe InSeNsiTiVe
• In Html there are two types of Tags Elements Attributes Value
1.Paired. -> requires a ending tag which ends with a Slash /
<html>….</html> <FONT COLOR=“Blue” SIZE=“+1”>This is blue and
<body>….</body>
bigger than normal font</FONT>
2.Single. -> No need to specify the ending tag.
<br> , <li> , <td>
• Tags may be nested

2
29-Jun-15

HTML PAGE PARTS Start a Page


• <html>
– Tells the browser to decipher code based
In Html the Page is divided into Two Parts
on html rules.Describe to browser that this
1.HEAD <head> file contains HTML code.
2.BODY <body> • <head>
Both these Tags are Paired Tags. – Mostly unseen code
– Tells browser what other languages will be
used
• <body>
– Mostly visible code
– Content of page

<head>
<body>
• Will contain the following tags
– <title> • All web page content that we want the
• Tells browser what to put in the title bar of
page viewer to see on the web page is
– <script> written here
• Tells browser what, if any, scripting language • Attributes like
is being used
– <meta> – <background>
• Designates meta tags for search engines – <bgcolor>
– <link> – <text>
• Directs other pages appearance
– <style>
• Use in Cascading Style Sheet (CSS)

3
29-Jun-15

• Example:
<html>
<head>
<title>Web Authoring</title>
</head>

<body>
<p>HTML is easy!!</p>
</body>
</html>

That’s How This ….Turns into This


<HTML>
<HEAD>
<BODY background="slate.gif">
<H1>Welcome</H1>
<IMG SRC="DOUGLAS.GIF" WIDTH="80" HEIGHT="107" ALT="Our
Founder" BORDER="0">
<H2>A Message from the President </H2>
<P><font color=red>Good evening! Thank you for working
late!</font></P>
<P>Hello and welcome to DougCo, Incorporated! I'm
<b>Douglas S. Michaels,</b> President and Founder,
<a href="acronyms.htm">COB, CEO, COO, and BBBWAIC</a>. Let
me take this opportunity to congratulate you on obtaining
employment here at DougCo; I want you to know that you've
chosen to spend your career in one of the most worthwhile
and rewarding endeavors possible --making me richer!</P>
. . .

4
29-Jun-15

Steps to creating a HTML Page <body> tag Attributes


• Open a text editor like Notepad or Wordpad
• Bgcolor : <body bgcolor=“red”>
• Create your HTML document
• Head - not displayed with body • Background : <body background=“c:\imgs\flower.jpg”>
• Body
• Bgproperties :<body bgproperties=FIXED>
• Save the HTML (extension of .htm or .html)
• Bottommargine : <body bottommargine=100>
• Display your HTML document in Web browser (File -> Open or double click
on File) • Topmargine : <body topmargine=100>
• Check your work and modify as necessary • Leftmargin : <body leftmargine=100>
• Place it on the Web…Then Finish the web Hosting. • Rightmargine :<body rightmargine=100>
• Web tools to create HTML pages:
Start from scratch: using Notepad (Windows), Emacs (UNIX), Simple Text • Link : <body link=“blue”>
(Macintosh). • Alink : <body alink=“black”>
WYSIWYG: Adobe Dreamweaver, Microsoft Front page, Microsoft Visual
• Vlink : <body vlink=“red”
Studio, Microsoft Publisher.
• Scroll : <body scroll=yes/no>
• Text : <body text = “brown”>

Text Formatting Tags Advanced Text Formatting Tags


• <b> : To apply Bold on the text
• <i> : To apply italic on the text. • <Address> : To display the address
• <u> : To apply the underline on the text. information.
• <center> : Display the text center. • <code> : program code.
• <strike> : Text will be strike • <em> : Emphasized text
• <tt> : Displays teletype text. Usually rendered in monospace font.
• <samp> : Sample output.
• <big> : Displays the text larger than usual.
• <strong> : Strongly emphasized text
• <small> :Displays the text smaller than usual.
• <sub> : Displays the text as subscript • <Abbr> : Abbreviated text
• <sup> : Displays the text as superscript • <acronym> : Acronym text.

5
29-Jun-15

DOCUMENT HEADING DOCUMENT HEADING


• Use as document header in HTML body. EXAMPLE:

• Starting and closing tags for header: <html>


<head>
<h1>……</h1> <title>Web Authoring</title>
• There are six levels of headings, from Heading 1 through </head>
Heading 6. <body>
• Various types of header: HTML is easy!!
<h1>This line using h1</h1>
<h1></h1> <h2>This line using h2</h2>
<h2></h2> <h3>This line using h3</h3>
<h4>This line using h4</h4>
<h3></h3> <h5>This line using h5</h5>
<h4></h4> <h6>This line using h6</h6>
</body>
<h5></h5> </html>
<h6></h6>

DOCUMENT HEADING <br> and <hr> Tags


• <br> tag is a break tag. Used to break up the
current line and cursor goes to next line.
• <hr> tag is used to display the horizontal line.
Attributes of <hr> tag is
– Align = left/right/center
– Width – horizontal width of the line
– Size – vertical size of the line
– Noshade – displayed in two-dimensional

6
29-Jun-15

<font> tag <p> tag


• Used to sets the font properties to the text on
the webpage. • Formats the text into a paragraph and
adds space before the paragraph.
• Attributes:
• Attributes:
– Face : sets the font type like Arial,tahoma.
– Align : sets the alignment of the text in the
– Size : Sets the size of the text. possible values
paragraph. Possible values are LEFT,
are 1 through 7.
RIGHT,CENTER,JUSTIFY
– Color : Sets the color of the text.
– Example :
<font face=“Arial” size=7 color=“red”> This is font tag </font>

<marquee> tag <pre> - Displaying Preformatted Text


• Displays scrolling text in a marquee style.
• Attributes • Tells the browser that the enclosed text is
– Align: Sets the alignment of the text relative to preformatted and display it as it is on the
marquee box. Possible values are browser.
TOP(default),MIDDLE,BOTTOM.
<pre>
– Behavior : Sets how the text in the marquee should
move. Can be SCROLL,SLIDE,ALTERNATE. preformatted text
– Bgcolor : Sets the background color for the marquee </pre>
box.
– Direction : Sets the direction of the text should scroll.
Can be LEFT(default),RIGHT,DOWN,UP.

7
29-Jun-15

<DIV> - Formatting a block of text

• Used for putting the text in terms of blocks


so we can apply the styles to individual
blocks. Working with Images
• Attributes
– Align : Sets the horizontal alignment of the
<img> Tag
element in the page. Possible values are
LEFT(default),RIGHT,CENTER,JUSTIFY.

<img> - Adding an image to a web page


• Inserts an image into a webpage.
• Attributes
– Src : should be required. Specifies the path of the actual image
to display.
– Align : Sets the alignment of the image relative to text. Can be
LEFT,RIGHT,TOP, BOTTOM, MIDDLE.
– Alt : Displays the text to be displayed in place of an image for Working with Hyperlinks
browsers that can’t handle the images.
– Border : Sets the border size of the image . Set to 0 for no
border or a positive integer pixel value. <A> Anchor Tag
– Height : Specifies the height of the image. if we specify , can
speed up the downloading of the image.
– Width : Specifies the width of the image. if we specify , can
speed up the downloading of the image.
– Hspace : Sets the horizontal spacing (both right & left sides)
around the image.
– Vspace : Sets the vertical spacing (both top & bottom sides)
around the image.

8
29-Jun-15

<A> - Creating a Hyperlink Document


<a href>
– Refer to other sources such as HTML documents and
images. Both text and images can act as hyperlinks.
– Attributes : • To link to another page on same web
• Href : Holds the target URL of the hyperlink. Either this – <a href=“PAGENAME.html”>
attribute or NAME attribute must be used.
• Name : Specifies an anchor name, the name we want • To link to another web
to use is as the target of a hyperlink.
– <a href=http://www.WEBNAME.com>
• Accesskey : Assigns a keyboard shortcut to the
hyperlink. Set to a single alphanumeric value. • To link to another page in other web
• Tabindex : Sets the tab sequence of hyperlinks in the – <a href=http://www.WEBNAME.com/pagename.html>
page (pressing the tab key moves from one to the next
hyperlink).
• Title: Holds the text that will be displayed in tool tips
when the mouse moves over the hyperlink.

Relative and Absolute URLs Setting Hyperlink text colors


• Specifying a page’s full address – Absolute URL.
– http://www.jntu.ac.in/btech/results.html • In the <body> tag link,alink and vlink
– http://www.jntu.ac.in/mca/results.html
attributes specify the colors for the
– http://www.jntu.ac.in/3rdbtech/syllabus.html
hyperlink text depending upon the visiting
• Specifying a page’s URL relative to current page
displaying on the web browser – Relative URL. status.
– results.html – Link : <body link=“blue”> - color of the hyperlink that
have not yet been visited.
– btech/results.html
– Alink : <body alink=“black”> - color of the hyperlinks
– btech/3rdyear/results.html as they are being clicked
– ../results.html – Vlink : <body vlink=“red”> - color of the hyperlink that
– ../mca/results.html have been visited.

9
29-Jun-15

<BASE> - Setting the base for hyperlinks Linking to a section of a Document


• Sets the base URL for the hyperlinks in a page. Can only
be used in <head> tag. • The name attribute is used to create a named
• Relative hyperlinks are defined relative to current page, anchor. When using named anchors we can
unless we specify a different base to use for hyperlinks create links that can jump directly into a specific
with <base> element. section on a page, instead of letting the user
• Attributes: scroll around to find what he/she is looking for.
– Href : Holds the URL we want to use as the base URL of
hyperlinks in the page. Syntax :-
Eg: <a name="label">Text to be displayed</a>
<head>
<base href=http://jntu.ac.in/imgs>
</head> We can refer to that anchor as #label in <a> tag
<body> href attribute.
< a href=http://jntu.ac.in/results.html> Syntax :-
<img src=“clickme.gif”>
</a> <a href=“#label">Text to be displayed</a>
<a href=“syllabus.html>Syllabus</a>
</body>

Giving Hyperlinks Access keys Emailing with Hyperlinks


• In Internet Explorer we can use <a> element’s • We can use an email hyperlink to let users do
accesskey attribute to assign a shortcut key to email, it opens their email program and creates
hyperlinks to make it accessible from keyboard. an empty message addressed to receiver.
• To activate access key, the user presses Alt + • We create an email hyperlink by using the
specified access key at the same time. hyperlink protocol “mailto” followed by receiver
• Ex email address.
<a href="http://www.microsoft.com/ie" accesskey="i"> Internet Explorer</a> • Ex:
<br>
<a href="http://www.netscape.com" accesskey="n"> Netscape Navigator < a href=mailto:[email protected]> contact Us
</a>
</a>

10
29-Jun-15

Types of Lists
• Lists may be used for a piece of information
and for providing a straightforward index to
Creating Lists the site.
• HTML provides three types of lists.
– Unordered Lists - <ul>
– Ordered Lists - <ol>
– Definition Lists - <dl>

<li> .. </li> Unordered Lists - <ul> Tag


• <ul> tag is used to create an unordered list. This
• The ordered and unordered lists are each list has a bullet in front of each list item. Every list
made up of sets of list items. Elements of item in <ul> tag must be encapsulated within
a list may be formatted with <li> tag. <li>..</li> tag.
<li>Win98</li> • Attributes
– Type : Specifies the type of list item. For unordered list
<li>Win XP</li> sets to DISC(solid bullet), SQUARE(solid
<li>Windows Millennium</li> square),CIRCLE(hollow bullet).
– Compact : stand alone attribute specifying that
<li>Windows Vista </li> compact rendering be used.
<li> Windows 7 </li> eg : <ul compact>

11
29-Jun-15

Ordered Lists - <ol> tag Example


• <ol> tag is used to Create an ordered list. This <b>This is an Ordered List:</b> <br>
<OL>
list has a sequence of numbers in front of each
<LI> Item number one.
list item. Every list item in <ol> tag must be <LI> Item number two.
encapsulated within <li>..</li> tag. <LI> Item number three.
• Attributes </OL>
<b>This is an Unordered List:</b> <br>
– Type : Specifies the type of list item. For ordered list
<UL>
sets to A, a, I, i ,1.
<LI> First item.
– Compact : stand alone attribute specifying that <LI> Second item.
compact rendering be used. <LI> Third Item.
eg : <ol compact> </UL>

Another Example
Here is an ordered list using small
Roman values:
<ol type=”i”>
<li>Point number one </li>
<li>Point number two</li>
<li>Point number three</li>
</ol>

12
29-Jun-15

Definition Lists - <DL> , <DT> , <DD> Example of Definition List


• The definition list is a special kind of list for
<h3> Here is a definition List </h3> <br>
providing terms followed by a description for
<dl>
them.
<dt>Unordered List</dt>
• Definition lists are contained inside the <dl> <dd>A list of bullet points.</dd>
element. The <dl> element then contains <dt>Ordered List</dt>
alternating <dt> and <dd> elements. <dd>An ordered list of points, such as a
• The content of the <dt> element is the term we numbered set of steps.</dd>
will be defining. <dt>Definition List</dt>
• The <dd> element contains the definition of the <dd>A list of terms and definitions.</dd>
previous <dt> element </dl>

Nesting Lists
• We can nest lists inside other lists.
• For example, we might want a numbered
list with separate points corresponding to
one of the list items. Each list will be
numbered separately . And each new list
should be placed inside a <li> element

13
29-Jun-15

Example
<ol>
<li>Speed
<ul>
<li>1.5 Ghz
<li>2.2 Ghz
<li>2.7 Ghz
</ul>
<li>RAM
<ul>
<li>128 MB
<li>256 MB
<li>512 MB
<li>1 GB

Working with Tables


<li>2 GB
</ul>
<li>Hard Disk
<ul>
<li>20 GB
<li>40 GB
<li>80 GB

</ul>
<li>120 GB
<li>320 GB <table> Tag
<li>External Disks
<ul>
<li>CD-ROM
<li>CD-Writer
<li>Combo Driver
<li>DVD Driver
</ul>
<li>Monitor
<ul>
<li>15"
<li>17"
</ul>
</ol>

<TABLE> , <TR> , <TD>


<TABLE> - Creating a Table • Inside the <table> element, the table is
written out row by row. A row is
• The TABLE tag defines a table for multi- contained inside a <tr> element —
dimensional data arranged in rows and columns. which stands for table row. And each
cell is then written inside the row
• Tables are commonly used to display all manner element using a <td> element — which
of data, such as timetables, financial reports, stands for table data.
and sports results.
<table border=”1”>
• In order to work with tables, we need to start <tr>
thinking in grid of rectangles. Each rectangle is <td>Row 1, Column 1</td>
known as a cell. <td>Row 1, Column 2</td>
</tr>
• A row is made up of a set of cells on the same <tr>
line from left to right, while a column is made up <td>Row 2, Column 1</td>
of a line of cells going from top to bottom. <td>Row 2, Column 2</td>
</tr>
</table>

14
29-Jun-15

<TABLE> Attributes
<TR> - Creating a Table Row
• BORDER : To display a table with borders, we will have to use the
border attribute.
• CELLSPACING : This attribute allows control over the space used • Creates a row in a table. Contains multiple <TD> or
between cells in a table. The value should be a pixel value.
• CELLPADDING : This attribute allows control over the space <TH> elements.
inserted between the cell data and cell wall in a table. The value
should be a pixel value. • Attributes
• WIDTH : This attribute is used to describe the desired width of this – Align : Specifies the horizontal alignment of the text in
table, either as an absolute width in pixels, or a percentage of
document width. this table row. Set to LEFT, CENTER,RIGHT.
• HEIGHT : This attribute describes the height of the table, either as a
particular pixel value, or as a percentage of the display window. – Bgcolor : Sets the background color of the table cells.
• ALIGN : It allows a table to be aligned to the left or right of the – Bordercolor : Sets the external border color for the row.
page, allowing text to flow around the table.
• BGCOLOR : It allows the background color of the table to be – Valign :Sets the vertical alignment of the data in this row.
specified, using either the specified color names, or a rrggbb hex Sets to TOP,MIDDLE,BOTTOM.
triplet.
• BORDERCOLOR : This attribute used to set the border color of the
table.

<TD> - Creating Table Data <TH> - Creating Table Headings


• Creates a table headings; just like table data but usually bold and • Creates a table headings; just like table data but usually bold and
centered vertically and horizontally. centered vertically and horizontally.
• Attributes • Attributes
– Align : Specifies the horizontal alignment of the text in this table – Align : Specifies the horizontal alignment of the text in this table
row. Set to LEFT, CENTER,RIGHT. row. Set to LEFT, CENTER,RIGHT.
– Bgcolor : Sets the background color of the table cells. – Bgcolor : Sets the background color of the table cells.
– Bordercolor : Sets the external border color for the row. – Bordercolor : Sets the external border color for the row.
– Valign :Sets the vertical alignment of the data in this row. Sets to – Valign :Sets the vertical alignment of the data in this row. Sets to
TOP,MIDDLE,BOTTOM. TOP,MIDDLE,BOTTOM.
– Width : Specifies the width of the cell. Set to either pixel value or – Width : Specifies the width of the cell. Set to either pixel value or
percentage of the display area. percentage of the display area.
– Height : Specifies the height of the cell. Set to either pixel value – Height : Specifies the height of the cell. Set to either pixel value
or percentage of the display area. or percentage of the display area.
– Colspan : Indicates how many cell columns of the table this cell – Colspan : Indicates how many cell columns of the table this cell
should span. Set to a positive integer. should span. Set to a positive integer.
– Rowspan : Indicates how many rows of the table this cell should – Rowspan : Indicates how many rows of the table this cell should
span. Set to a positive integer. span. Set to a positive integer.
– Nowrap : Specifies that data in the cell should not be wrapped – Nowrap : Specifies that data in the cell should not be wrapped
by the browser , meaning the table cell will be made long enough by the browser , meaning the table cell will be made long enough
to fit the contents without line breaks. to fit the contents without line breaks.

15
29-Jun-15

<CAPTION> - Creating a Table Caption

• Specifies the data for a table cell. Used


inside the <TABLE> tag.
•<THEAD>
• Attributes
– Align
– VAlign •<TBODY>
•<TFOOT>

Frames
• With frames, we can display more than one HTML
document in the same browser window. Each HTML
document is called a frame, and each frame is
Working with Frames independent of the others.
• Frames divide a browser window into several separate
<Frameset> , <Frame> Tag pieces or panes, each pane containing a separate HTML
page.
• One of the key advantages of frames is that we can load
and reload individual panes without having to reload the
entire contents of the browser window.
• A collection of frames in the browser window is known as
a frameset.

16
29-Jun-15

<FRAMESET> Tag <FRAME> Tag


• The <frameset> tag defines how to divide the window
into frames each frameset defines a set of rows or • This tag defines a single frame in a frameset. Used inside
columns. The values of the rows/columns indicate the the <FRAMESET> element.
amount of screen area each row/column will occupy. • Attributes
• Attributes : – SRC: The SRC attribute takes the URL of the document to be
– Rows : Sets the number of rows (horizontal frames) in the displayed in this particular frame. FRAMEs without SRC attributes
frameset. Separate the values assigned to this attribute with are displayed as a blank space the size the frame would have been.
commas; each value represents the height of the row. Set to – NAME : The NAME attribute is used to assign a name to a frame so
pixel value or percentages or use an asterisk to specify the it can be targeted by links in other documents. The NAME attribute is
remaining space. optional; by default all windows are unnamed.
– Cols : Sets the number of cols (Vertical frames) in the frameset. – MARGINWIDTH : Sets the size of the right and left margins used in
Separate the values assigned to this attribute with commas; the frame.
each value represents the height of the column. Set to pixel – MARGINHEIGHT : Sets the size of the top and bottom margins used
value or percentages or use an asterisk to specify the remaining in the frame.
space. – NORESIZE : Stand alone attribute indicating that the frame may not
– Border :It accepts a pixel value, which determines the thickness be resized. The default is that frames may be resized by dragging
of any borders used within the frame set. the border.
• Example – SCROLLING : Determines scrollbar action. Possible values are
– <FRAMESET ROWS="20%,60%,20%"> AUTO,YES,NO.
– <FRAMESET COLS="100,*,100">

<NOFRAMES> Tag <IFRAME> Tag


• <NOFRAMES> tag used inside the
<FRAMESET> tag. • Creates an inline frame
• If the browser does not support the <frame> tag, it
will display the text enclosed in the <noframes>
tag.
• Example
<frameset rows=50%,50%>
<noframes> Browser can’t support to divide into
frames </noframes>
<frame src=“frame1.html”>
<frame src=“frame2.html”>
<frameset>

17
29-Jun-15

Result Description Entity Name Entity Number


HTML Character Entities non-breaking space &nbsp; &#160;
< less than &lt; &#60;
• Some characters are reserved in HTML. For > greater than &gt; &#62;
example, we cannot use the greater than or less & ampersand &amp; &#38;
than signs within your text because the browser ¢ cent &cent; &#162;
could mistake them for markup. £ pound &pound; &#163;
• If we want the browser to actually display these ¥ yen &yen; &#165;
characters we must insert character entities in € euro &euro; &#8364;

the HTML source. § section &sect; &#167;


© copyright &copy; &#169;
• A character entity looks like this: &entity_name; ® registered trademark &reg; &#174;
OR &#entity_number; " quotation mark &quot; &#34;
• To display a less than sign we must write:
' apostrophe &apos; &#39;
&lt; or &#60;
™ trademark &trade; &#8482;

What is a FORM?
• Forms provide a means of
submitting information from the
Working with Forms client to the server. Using Form ,
we will be able to handle HTML
<FORM> , <INPUT> Tags
controls like textfields , buttons ,
textareas , checkboxes.

18
29-Jun-15

What is a FORM?
<FORM> - Creating HTML Forms
• HTML forms are used to create GUIs on Web
pages • Creates an HTML form; used to enclose HTML
– Usually the purpose is to ask the user for information controls like buttons and textfields.
– The information is then sent back to the server • Attributes :
• A form is an area that can contain form elements – Action : Gives the URL that will handle the form data
when the Submit button is clicked.
– The syntax is: <form parameters> ...form elements... </form> – Method : Indicates a method or protocol for sending
– Form elements include: buttons, checkboxes, text fields, data to the target action URL. Possible values are
radio buttons, drop-down menus, etc GET(default) / POST.
• Other kinds of HTML tags can be mixed in with the form elements – Name : Gives a name to the form so we can
– A form usually contains a Submit button to send the reference it in code.
information in he form elements to the server – Target : Indicates a named frame for the browser to
– The form’s parameters tell JavaScript how to send the display the form results in.
information to the server.

The <INPUT> tag Text input


• Form elements use the input tag, with a A text field:
type="..." attribute to tell which kind of element it <input type="text" name="textfield" value="with an initial value">
is
– type can be text, checkbox, radio, password, hidden,
submit, reset, button, file, or image A multi-line text field
• Other common input tag attributes include: <textarea name="textarea" cols="24" rows="2">Hello</textarea>
– name: the name of the element
– accesskey : can assign a keyboard shortcut key.
– value: the “value” of the element; used in different
ways for different values of type A password field:
<input type="password" name="textfield3" value="secret">
– disabled: the user can’t do anything with this element
– Size : Sets the size of the control.
– Other arguments are defined for the input tag but
have meaning only for certain values of type • Note that two of these use the input tag, but one
uses textarea

19
29-Jun-15

Buttons Checkboxes
• A submit button:
<input type="submit" name="Submit" value="Submit"> • A checkbox:
• A reset button: <input type="checkbox" name="chkbx”
<input type="reset" name="Submit2" value="Reset">
• A plain button: value="checkbox" checked>
<input type="button" name="Submit3" value="Push Me">

• submit: send data • type: "checkbox"


• name: used to reference this form element from
• reset: restore all form JavaScript
elements to their initial state
• value: value to be returned when element is
• button: take some action as checked
specified by JavaScript • Note that there is no text associated with the
checkbox—you have to supply text in the
surrounding HTML

Radio buttons Drop-down menu or list


Radio buttons:<br> • A menu or list:
<input type="radio" name="radiobutton" value="myValue1">male <br>n <select name="select">
<input type="radio" name="radiobutton" value="myValue2" checked>female <option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>

• If two or more radio buttons have the same name, the user
can only select one of them at a time • Additional arguments:
– This is how you make a radio button “group”
– size: the number of items visible in the list
• If you ask for the value of that name, you will get the value (default is "1")
specified for the selected radio button
– multiple: if set to "true", any number of items
• As with checkboxes, radio buttons do not contain any text may be selected (default is "false")

20
29-Jun-15

Hidden fields A complete example


• <input type="hidden" name="hiddenField" <html>
<head>
value="nyah">&lt;-- right there, don't you see it? <title>Get Identity</title>
</head>
<body>
<p><b>Who are you?</b></p>

<form method="post" action="">


• What good is this? <p>Name:
<input type="text" name="textfield">
– All input fields are sent back to the server, including hidden </p>
fields <p>Gender:
– This is a way to include information that the user doesn’t need to <input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
see (or that you don’t want her to see) </form>
– The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted </body>
</html>

21

You might also like