0% found this document useful (0 votes)
13 views5 pages

HTML Image and Form Elements Guide

The document provides various HTML examples demonstrating how to create links with images, insert images, use framesets, and implement form elements like radio buttons, password fields, checkboxes, and dropdown lists. Each section includes code snippets illustrating the syntax and functionality of these HTML features. Additionally, it highlights tips and notes related to the usage of these elements.

Uploaded by

Denver Martin
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
13 views5 pages

HTML Image and Form Elements Guide

The document provides various HTML examples demonstrating how to create links with images, insert images, use framesets, and implement form elements like radio buttons, password fields, checkboxes, and dropdown lists. Each section includes code snippets illustrating the syntax and functionality of these HTML features. Additionally, it highlights tips and notes related to the usage of these elements.

Uploaded by

Denver Martin
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd

<html>

<body>
<p>Create a link of an image:
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:
<a href="[Link]">
<img border="0" src="[Link]" alt="HTML tutorial" width="32"
height="32" />
</a></p>
</body>
</html>

<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>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
<html>
<body>
<p>An image
<img src="[Link]" alt="Smiley face" align="bottom" width="32"
height="32" />
with align="bottom".</p>
<p>An image
<img src="[Link]" alt="Smiley face" align="middle" width="32"
height="32" />
with align="middle".</p>
<p>An image
<img src="[Link]" alt="Smiley face" align="top" width="32"
height="32" />
with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!</p>
<p><img src="[Link]" alt="Smiley face" width="32" height="32" />
An image before the text.</p>
<p>An image after the text.
<img src="[Link]" alt="Smiley face" width="32" height="32" /></p>
</body>
</html>

INSERTING IMAGE AND MOVING PICTURES

<html>
<body>
<p>
An image:
<img src="[Link]" alt="Smiley face" width="32" height="32" />
</p>
<p>
A moving image:
<img src="[Link]" 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>
VERTICAL FRAMESET
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>

HORIZONTAL FRAMESET
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>

RADIO BUTTON
<html>
<body>
<form action="">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<p><b>Note:</b> When a user clicks on a radio-button, it becomes
checked, and all other radio-buttons with equal name become
unchecked.</p>
</body>
</html>

PASSWORD FIELD
<html>
<body>
<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password" name="password" />
</form>
<p><b>Note:</b> The characters in a password field are masked
(shown as asterisks or circles).</p>
</body>
</html>
CHECK BOX

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

DROP DOWN LIST

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

DROP DOWN WITH SELECTION

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

<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>

You might also like