HTML - Frames , forms , image-mapping , links

HTML FRAMES :

  • A method to display more than one document at once , the term frame is used.
  • Frame allow to split browser screen into multiple windows .
  • <frameset> tag is used for making frame .
  • Rows and cols attributes are used inside <frameset> tag . 
<!DOCTYPE html>
<html>
   <head>
<title>frameset attribute</title>
   </head>
<frameset rows = "30%, 30%, 40%">
<frame name = "top" src = "img1.png" />
<frame name = "main" src = "img2.png" />
<frame name = "bottom" src = "img3.png" />
</frameset>
</html>




HTML FORM :

  • HTML form allows user to full-fill data in form and submit it to server for output or result.
  • Form is a group of controls and its form elements .
  • HTML provides the selection controls and test base for creating a form in html .

FORM - ELEMENTS :

  • Form elements are specified within form layout .
  • Form elements are most efficient parts in every html form .

FORM ATTRIBUTES :

It specifies the form elements .

Most used form attributes : -
  1. Name : form name
  2. Method : Which method we want to use , GET method or POST method .
  3. Action : Script URL for receiving submitted data .
  4. Target : It targets the page where result data will be displayed .It takes the values like _blank , _cell , _parent .
  5. Enctype : Before sending data to server ,it tells that how data should be encoded . 

CONTROLS IN FORM :-

  1. Text input controls 
  2. File select boxes 
  3. Check boxes
  4. Select boxes 
  5. Hidden controls 
  6. Radio buttons 
  7. Submit and reset button

1. <input> CONTROL :
                                <input> is the most important form element .It is used to select user information. It can be type of  text field , password , checkbox , radio button , submit button , etc.

Syntax :
            
<html>
<head>
<body>
<form>
First name :<input type="text" name="first_name"/>
Last name :<input type="text" name="last_name"/>
</form>
</body>
</head>
</html>

Output :





INPUT ATTRIBUTES : 


AttributevalueUse
AcceptImage, Audio, Videoshows the type of file
alignLeft, right, top, bottom, middleshows alignment of input
namenameshows name of input element
scrURLshows url of input
typetext, button, password, radio, reset, submit, checkbox, fileshows type of input element
valuetextshows value of input element
sizenumbershows width of input element
readonlyread onlyshows that input element should be only readonly
alttextshows alternate text for image
checkedcheckedwhen page loads , input element should be preselected
maxlengthnumbershows maximum limit for characters allowed in input element
disabledisableinput element should be disable


  • PASSWORD KEY :- 
                             Password key shows input data in the form of dots for security and password key is like text input .

Attributes :-
 
1. Size
2. Maxlength
3. Name
4. Value
5.Align
6. tabindex

example :- 

<input type="password" size="25">

  • RADIO BUTTON :-
                           Radio buttons are used when we want to choose only one option .
Attributes :-

1.Type
2. Name
3. Value
4. Check

EXAMPLE :- 

<html>
<form>
<input type="radio" name="course" value="BCA">BCA
<input type="radio" name="course" value="BSC">BSC
<input type="radio" name="course" value="MCA">MCA
<input type="radio" name="course" value="MBA">MBA
</form>
</html>


Output :-





HTML IMAGE MAPPING :

  •  Image mapping means giving linking to an image in html document.
TYPES :-
  1. Client side image mapping
  2. Server side image mapping
  • In server side image mapping we uses ' ismap ' attribute .
  • In client side image mapping we uses ' usemap ' attribute .

CLIENT SIDE IAMGE MAPPING :-

SYNTAX :

<body>
<img src="source_name" alt="alternate_name" usemap="#name_of_image">
<map name="test">
<area shape="clickable_area_shape" coords="value" href="discription of hotspot">
</map>
</body>
</html>
  • The source of image and usemap attribute is defined inside image tag 
  • The hotspot (clickable area) is defines here .
  • Selectable area should defines inside <area> tag .
  • The value of usemap attribute and name attribute in map tag always should be same .

EXAMPLE :-

<html>
<body>
<img src="flower.jpg" alt="flower" usemap="#check">
<map name="check">
<area shape="rectangle" cords="20,70,145,146" href="flower.html">
</map>
</body>
</html>

Two ways to create client side image mapping :-
  1. Define pixels location
  2. create a map file within the html document that contains your image map .


HTML LINKS : 

 Linking in html is done by ' Anchor Tag '.

ANCHOR TAG :-

  • The anchor tag in html is used give linking to image , text , tab , etc.
  • It creates link to another document .
  • By adding anchor tag ,when click on that linked element we jumps to another document .
  • It uses href attribute .
  • href attribute is used give source or url of the destination page .
SYNTAX :-

<a href="destination url" >

</a>

EXAMPLE :- 

<html>
<body>
<a href="list.html"><p>enter your shopping list .</p></a>
</body>
</html>


list.html

<html>
<body>
  1. oil
  2. fruits
  3. butter
  4. veggies
  5. milk
</body>
</html>


APPEARANCE OF HTML LINKS :
  1. active link - underline and red 
  2. visited link - underline and purple 
  3.  unvisited link - underline and blue