Wednesday, 13 May 2020

HTML Forms Revision

HTML Forms

PART 1

FOR VIDEO TUTORIAL CLICK HERE

TOPICS
  • Introduction to Forms
  • Form Elements
  • <input> tag
  • Textbox & Password box elements
  • Radio button and Check box elements
  • Submit and Reset buttons
  • Few attributes of <input> tag


Introduction to Forms

Forms are an interactive feature of many websites.

Forms are the primary method for getting data from visitors of the web site.




A form takes the input and sends the data to webserver on clicking submit button.

On the web server backend application scripts will collect the data and store it on the database on the server.






Creating Forms
To create forms in HTML web page
<form> element is used
It is a container tag which will contain all the form elements



Form Elements




<input> element
The <input> element is the most important form element.
Using <input> tag and its type attribute you can create various form elements.
It is an empty tag.


To create text box:


       First Name :   <input type=“text” name=“fname” size=20>

It defines a single-line text input field.


To create Password box

   Password:    <input type=“password” name=“pwd” size=16>

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

Radio Button
A radio button is used to select one of many given choices.
Radio buttons are shown in radio groups to show a set of related options, only one of which can be selected.

To create Radio button:
Example - 
   Gender: 
  <input type=“radio” name=“gender” value=“male”>  Male

 <input type=“radio” name=“gender” value=“female”>  Female


Checkbox
Checkboxes are used for instances where a user may want to select multiple options

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

To create Checkbox
Example -

<h2>Select your   Hobbies: </h2>
  <input type=“checkbox” name=“h_read” value=“reading”>  Reading

  <input type=“checkbox” name=“h_surf”  value=“surf”>  Surfing

  <input type=“checkbox” name=“h_music”  value=“music”> Listening to Music

Creating a Simple Form  (Form Example No. 1)

<!doctype html>
<html>
  <head>
     <title>Form example</title>
  </head>
  <body bgcolor=“#FFFFCC”>
     <h1>Submit your information</h1>
     <form>
          First Name :  <input type=“text” name=“fname”>
         <br> <br>
          Last Name : <input type=“text” name=“lname”>
         <br>  <br>
        Gender :
        <input type=“radio” name=“gender” value=“male”>  MALE
        <input type=“radio” name=“gender” value=“female”> FEMALE
        <br>  <br>
        Hobbies :
        <input type=“checkbox” name=“h_read” value=“reading”>    Reading
        <input type=“checkbox” name=“h_surf”  value=“surf”>  Surfing
        <input type=“checkbox” name=“h_music”  value=“music”>  Listening to Music
        <br><br>
        <input type=“submit” value=“SUBMIT”>
        <input type=“reset” value=“RESET”>
    </form>
</body>
</html>

Submit Button
The Submit Button allows the user to send the form data to the web server.
The form data is typically handled by a Web Server page with a script for processing input data.
The server page is specified in form's  action attribute.

Reset Button
A reset button is used to reset all form values to their default values. (clear the form)


Attributes of <input> tag
Type - Specifies the type <input> element to display
Name - Specifies the name of an <input> element
Size - Specifies the width (in characters) of an input field
Maxlength - Specifies the maximum number of character for an input field
Value - Specifies the default value for an input field
Checked - Specifies that an input field should be pre-selected when the page loads (only for radio buttons and checkbox fields)

Disabled - Specifies that an input field is disabled
Required - Specifies that an input field is required (must be filled out) before submitting the form
Readonly - Specifies that an input field is read only (cannot be changed)
Autofocus - Specifies that an <input> element should automatically get focus when the page loads (boolean attribute)

Placeholder – specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
Title – Provides a tool tip for the input field.
Pattern – Specifies a regular expression that an <input> element's value is checked against.

A regular expression, or regex for short, is a pattern describing a certain amount of text.



FOR HOME WORK PRACTICE
Create the following forms :
1.

2.


3.


NOTES FOR READING



PART 2

FOR VIDEO TUTORIAL CLICK HERE

TOPICS

About Action attribute of <form> tag
Few attributes of <input> tag
Creating Drop-down list box
Attributes of <select> tag
<textarea> tag
Attributes of <textarea> tag

Action attribute of <form> tag
The Action attribute is used to specify where the form data is to be sent to the server after submission of the form.
Action=“URL”  -  It is used to specify the URL of the document where the data to be sent after the submission of the  form.

I have created a php script on my website which will give a response after submitting form to it, so specify the script in action attribute of forms you create...

Add the action attribute in <form> tag as per given below:

    <form action=“https://exza.in/response.php”>

The response.php web page will collect the form data and display back the contents.


Creating Drop-down list box
<select> tag is used to create drop-down list box consisting of a number of options, which a user can choose.
Each option is defined by an <option> tag.














In previous simple form example no. 1 add a dropdown list for selecting City.












Attributes of <select> tag
name – Defines a name for the drop-down list.
size – Defines the number of visible options in a drop-down list.
multiple – Specifies that multiple options can be selected at once.
selected – It specifies that an option should be pre-selected when the page loads. (for <option> tag)

      E.g. <select name=“city” size=3 MULTIPLE>

required – Specifies that the user is required to select a value before submitting the form.
autofocus – Specifies that the drop-down list should automatically get focus when the page.
disabled – Specifies that a drop-down list should be disabled.

      E.g. <select name=“city” size=3 MULTIPLE  AUTOFOCUS>


Creating multi-line text box
<textarea> tag is used to create multi-line text box in HTML.
The textarea element can hold unlimited number of characters.
The size of the box can be defined by cols and rows attributes.






In previous simple form example no. 1 add a textarea for Address.



Attributes of <textarea> tag
name – Specifies a name for a text area.
rows – Specifies the visible number of lines in a text area.
cols – Specifies the visible width of a text area.
maxlength – Specifies the maximum number of characters allowed in the text area.

   E.g. <textarea name=“address” cols=31 rows=5 maxlength=100>

required – Specifies that a text area is required. It must be filled out before submitting form.
autofocus – Specifies that the textarea should automatically get focus when the page loads.
readonly – Specifies that a text area should be read only (you cannot change).
placeholder – Specifies a short hint that describes the expected value of a text area.
disabled – Specifies that textarea should be disabled.


FOR HOME WORK PRACTICE

4.






5.











Tuesday, 12 May 2020

HTML Revision Part 2

Hyperlinks and Tables


Hyperlinks

  • What is Hyperlink?
  • How to create a Hyperlink?
  • What is URL?
  • Creating Image hyperlinks
  • Anchor Points
  • Internal Hyperlinks
  • External Hyperlinks
  • Hypermedia



What is Hyperlink?
Hyperlinks are an integral part of the World Wide Web 
It makes you jump from one location to another within web pages or even websites via references simply called as links or hyperlinks.











  • A hyperlink is a reference (an address) to a resource on the web.
  • Hyperlinks can point to any resource on the web : an HTML page, an image, a sound file, a movie, or other files, etc..
  • When you move the mouse over a link, the mouse arrow will turn into a little hand.



Appearance of Hyperlink -Text

  • Appears blue in color 
  • Hyperlink text is underlined when hovered
  • When the mouse cursor is placed over it, the arrow changes to hand and when clicked the pointed resource will open.


Default settings
An unvisited link is underlined and blue.
A visited link is underlined and purple.
An active link is underlined and red.

Note: The color and appearance of hyperlink can be changed using body tag attributes or thru CSS


A hyperlink can take many forms such as bold text, italic text, drop-down menus, pictures, animations, video, etc..


Hyperlinks are defined with the HTML  anchor tag (<a> tag):
       
        <a href="url">   link text    </a>


Example

<a href="https://www.w3schools.com">
               Visit our website
</a>




URL stands for Uniform Resource Locator.

It is the address or location for access of resources on the Internet. (web pages, images, videos, sound, animation, documents, etc.)





Attributes of <a> tag:
href – It specifies the destination address of the link.
title – It specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
target – It defines where to open the linked document.

Example:


Output:


Target Attribute:
The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:
_blank - opens the linked document in a new window or tab
_self - opens the linked document in the same window/tab
_parent - opens the linked document in the parent frame
_top - opens the linked document in the full window
framename - opens the linked document in a named frame


Anchor Points
Anchor points, scroll points or HTML bookmarks as some call them, make it possible to jump from one point on a page to another position on the same page by clicking a link. 


Example:



Output:



Internal Links:
Internal links are links that go from one page on a domain to a different page on the same domain. 
They are commonly used in main navigation. 
They allow users to navigate a website. 
They help establish information hierarchy for the given website.


External Links:
External Links are hyperlinks that point at a resource which is on another  website other than the domain the link exists on (source). 

In simple terms, if you link out to another website, this is considered an external link.


Hypermedia:
Hypermedia is an extension of hypertext that employs multiple forms of media such as text, graphics, audio or video sequences, still or moving graphics, etc. 


It extends the capabilities of hypertext systems by creating clickable links within multimedia. 
The most common hypermedia type is image links which are often linked to other web pages.






Tables

  • Introduction to Tables
  • <table>, <tr>, <th> and <td> tags
  • Attributes of <table> tag
  • <caption> tag
  • Attributes of <td>, <th> and <tr> tags
  • Using coslpan and rowspan attributes
  • Cellpadding and Cellspacing


Introduction to Tables
A table is made up of rows and columns.

<table> tag is used to create a table in HTML.
It is a container tag.


<tr> tag is used to create each row of the table.

<td> tag is used to specify data within table.
It defines the cells within a row.
<td> element contain all sorts of HTML elements; text, images, lists, other tables, etc.

<th> tag is used to specifies data within table
It is used to define the column headers.
<th> element aligns the cell content to center and displays in the text in bold.

Creating a simple table


Attributes of <table> tag
align – specifies the alignment of the table in the web page.
bgcolor – specifies the background color for the table.
border – specifies the border width (default value is 0)
width – specifies the width of the table. (Value - pixels or %)
height  – specifies the height of the table. (Value - pixels or %)

cellpadding – specifies the space between the cell wall and the cell content. (Value – pixels)
cellspacing – specifies the space in pixels between cells. (Value – pixels)


<caption> tag

  • The <caption> tag defines a table caption.
  • The <caption> tag must be inserted immediately after the <table> tag.
  • Align Attribute is used to specify the alignment of the <caption> Element. 
  • It is used to align the caption to the left, right, top and Bottom of a table.




Attributes of <td> & <th> tags

  • align – specifies the alignment for the cell content.
  •            (Values – left, center, right, justify)
  • valign – specifies the vertical alignment for the cell content.  (Values – top, middle, bottom)
  • bgcolor – specifies the background color for the cell.
  • width – specifies the width of the cell. 
  • height  – specifies the height of the cell. 
Example:





Merging cells

  • colspan – Specifies the number of columns a cell should span
  • rowspan – Specifies the number of rows a cell should span












Cellpadding and Cellspacing

cellpadding – specifies the space between the cell wall and the cell content. (Value – pixels)


cellspacing – specifies the space in pixels between cells. (Value – pixels)

E.g.  <table cellspacing="10px" cellpadding="5px">






















Bitcoins