| Assignment-1 | Assignment-2 |
| Assignment-3 | Assignment-4 |
| Assignment-5 | Assignment-6 |
| Assignment-7 | Assignment-8 |
| Assignment-9 | Assignment-10 |
Creating Table
Table is a collection of rows and columns. It is defined by using <table> tag with sub-tags: table row <tr>, table header <th> and table data <td>. Moreover, you can add caption on table by using tag <caption> but it is not mandatory. Table is a useful tool to arrange information on web page and some of the attributes are listed below.
| Attributes | Descriptions |
|---|---|
| border=N(in pixel) | Defines size of table border |
| bordercolor="colorcode" or "colorname" | Defines border color of a table |
| cellspacing=N (in pixel) | Defines distance between cell cell's border in a table |
| cellpadding=N (in pixel) | Distance between cells content and cell border |
| width=N | Defines table width and row width in pixel or N% |
| height=N | Height of table or row in pixel or N% |
| colspan=N (Integer Number) | No. of cells to be merged column wise in a row |
| rowspan=N (Integer Number) | No. of cells to be merged row wise in a column |
| bgcolor="colorcode" or "colorname" | Table or row background color |
| align="left / right / center " | Defines alignment in a table or in a row |
6.4.16 Forms: Creating form using Textbox, Radio, Check box, Text Area, Button
Form or Web form is a graphical interface on webpage for the users to enter data. The data sent to the web server for further processing or storing. A form has many elements depending on input data types. These elements have different attributes, some of attributes are listed on table below. The form is defined by <form> tag and the form elements are defined by the tags <input>,<textarea>,<button>,<select>,<option>,<optgroup>,<fieldset> and <label>
| Attribute | Description of the attribute |
|---|---|
| action | takes URL that defines where to send the form data when the submit button is clicked |
| method | Defines the HTTP method get or post |
| type | type of form element or form field |
| name | Unique name for the field value |
| value | Default value of the field |
| checked | Defined Boolean values: true or false |
| size=N {Integer Number} |
Size of a form field in terms of number of characters |
| maxlength=N {Integer Number} |
Maximum length of characters in a field |
| readonly | Defines Boolean values :true/false |
| rows=N | No. of characters in row for textarea field |
| cols=N | No. of characters in columns for textarea field |
<input> Tag
The <input> sub-tag is important form element to enter text, number,password,file etc. The attribute type specifies the different input fields such as textbox, checkbox, radio button ,file browser, command button, submit button etc.
- Textbox: Textbox is used to enter text or numbers. Some of the examples are:
Name : <input type="text" name="name"> <br>
Address: <input type="text" name="add"> <br> - Radio Button: It is used for selecting a single option from multiple choices. The same name value of radio button makes a group automatically so that only one button in the group can be selected. Some of the examples are:
Marital Status: <input type="radio" name="c1" checked=true>Married <input type="radio" name="c1">Unmarried
- Check Box: It allows users to select multiple options from the multiple choices. It is not mandatory for the selection. Some of the examples are:
Hobbies: <input type="checkbox" checked =true name="ch1"> Movie <input type="checkbox" name="ch2"> Music <input type="checkbox" name="ch3"> Travel
- Password Box: It allows users to enter password. It is same as textbox, but it displays asterisks while typing on the box. Example is as follows:
Password : <input type="password" size=10 maxlength=5 name="password"> - File Browser: It helps to browse a file from the computer and attach the file to the form. Example is as follows:
Select File: <input type="file" size=20 maxlength=40> - Command Button: It helps to perform any action inside form. Mainly, there are two attributes: value and onclick.The value defines the title for the command button and onclick is an event of the button to perform the action. Example is as follows:
Calculate Total: <input type="button" value="sum" name="button1"> - Submit and Reset Button: Submit button provides user to submit the entire form contents. Reset button clears the content of all fields of the form. Example is as follows:
Submit Form: <input type="submit" value="send" ><br>
Clear Form: <input type="reset" value="clear">
Example 23 gives the basic idea about <form> tag, <input> tag and their respective attributes. The attributes action and method specify where to send/receive data when a form is submitted. But these attributes are only used during the server site scripting programming such as asp or php etc.
Example 23It provides user to select option from the given list of items. The <select> tag is sed to create list, the sub-tag <option> defines the items of the list and the attribute size defines the number of items visible at a time. For example:
It allows user to type multiple lines of text on a form. The <textarea> tag is used to define text area with two attributes: rows define number of characters in row and cols define the number of characters in column. For example:
It allows user to create a clickable button. It is better to use <button> tag than using <input type="button"> because user can put text or picture using tags like <b>, <i>, <u>,<img> etc. Moreover, you can also create submit and reset button using the same tag. For example:
| Attribute | Description of the attribute |
|---|---|
| type=button / reset / submit | Defines type of the button |
| name=name | Defines name of the button |
| value=text | Defines intial value of the button |
| onclick=method | Calls method or function |
<optgroup> Tag
It allows user to make group of related options in a <select> tag. It is useful tag when the list of items related to different groups. The attribute label defines the name for the group. For example:
It allows user to make group of related elements on form. It creates a line of box around the related elements of the form. The <legend> tag is used to define a caption for the <fieldset> element. For example:
Example 24 gives the idea about <select> tag, <textarea> tag, <optgroup> tag and how these form elements are grouped together by using <fieldset> tag.
Example 24The <label> specifies a label for form elements such as <input>, <select>. <textarea> etc. Newer versions of HTML5 recommends to use <label> tag for the element of form as a good programming practice. The <label> tag has two attributes: for and from. The for attributes defines id of the form element, the label should be linked to and the from attribute defines which form the label belongs to. You must write the same value for the attribute for of <label> tag and the value of attribute of id of <input> tag. Example 25 describes how <label> tag is linked to different form elements: <input type="text"> , <input type="checkbox"> , <input type="radio"> , <input type="button">, <select> and <textarea>.
Example 25The new version of HTML5 provides many other elements to <input> tag and they are listed below:
| Tags | Examples | Descriptions |
|---|---|---|
| <input type="image"> | <input type="image" src="pic1.jpg" height=25 width=40> | Use Image as button |
| <input type="color"> | <label for="fcolor"> Select Color:</label> <input type="color" id="fcolor" name="fcolor" value="#ff0000"> |
Shows color panel and you can pick r-g-b values |
| <input type="date"> | <label for="birthday"> Birthday:</label> <input type="date" id="birthday" name="birthday"> |
Shows date panel and you can pick year, month day |
| <input type="time"> | <label for="at"> Select Time:</label> <input type="time" id="at" name="at"> |
Shows time clock to select hour and minutes |
| <input type="email"> | <label for="email"> Enter Email:</label> <input type="email" id="email" name="email"> |
Helps to enter email |
| <input type="number"> | <label for="quantity"> Quantity [1 to 5]:</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> |
Helps to enter integer number between the min and max range |
| <input type="search"> | <label for="gsearch"> Search Google:</label> <input type="search" id="gsearch" name="gsearch"> |
Helps to enter keywords for searching |
| <input type="tel"> | <label for="phone"> Enter phone no:</label> <input type="tel" id="phone" name="phone" placeholder="0123-456-789" pattern="[0-9]{4}-[0-9]{3}-[0-9]{3}" required> [Format:9861-492-492] |
Helps to enter the phone no. on specific format |
Example 26 demonstrates the extra feature of <input type> which is mentioned on the above table.
Example 26Creating Frameset
It allows users to divide a window into multiples sections and multiple webpages can be embedded on these sections as frame, respectively. The <frameset> tag defines frames with attributes cols and rows. The cols define the column of a frame and the rows define the row of a frame in percentage with respect to window. The <frame> tag helps to insert webpage on these frames and the attribut src defines the source file of webpage or URL. One important point is that the file containing <frameset> should not contain <BODY>. In the first example, a window is colummn-wise divided into two sections with 50%,50% respectively. <frameset cols="50%,50%"> <frame src="1.html"> <frame src="2.html"> </frameset> IN this example, a window us row-wise divided into two sections with 40%,* respectively. The * defines the remaining percentage i.e. 60%. <frameset rows="40%,*"> <frame src="1.html"> <frame src="2.html"> </frameset> Example 27 shows nested frameset : a frameset can be defined inside another frameset. In this example, firstly, a window is row-wise divided into two frames 20%,80% respectively. Finally, the second frameset is further column wise divided into two frames 50%,50%.
Example 27The <frameset> tag and <frame> tag were used in HTML4 and they may not be supported by newer browsers. It is recommended to use <iframe> tag.
| Attribute | Description of the attribute |
|---|---|
| src=source file or URL | Defines the source file or URL |
| height= N pixels | Defines the height of frame in pixels |
| width=N pixels | Defines the width of frame in pixels |
| title=text | Specifies hte title of the frame |
| name=text | Defines the name of the frame |
Example 28 shows how you can embed one webpage to another. In this example, firstly a webpage named eg1.html is embeded, secondly a URL is embedded and lastly the goolge map is embedded from the website google map and YouTube video as well.
Example 28Introduction to HTML5
HTML5.0 was first released in 2008 by W3C with major update and improvement over HTML4 and XHTML1. It is more efficient on wide variety of platforms, computers, browsers and mobile computing devices. It has more features on multimedia, application programming interface (API) for complex web applications, cross-platform mobile applications. To manage multimedia and graphical contents, the new tags<audio>, <video>, <canvas> and <svg> have been introduced. It has not been updated since 2017 as HTML5.3. We have already discussed some of the features of HTML5 such as:<audio>, <video>, <label>, <button>, <optgroup>, <fieldset<, <iframe>.
<canvas> Tag The <canvas> tag is used to define the area on webpage to draw graphics. It is container that defines transparent area for the graphics. It is useful tag with JavaScript and style sheet. It has three attributes: id defines the unique name, height defines height of canvas in pixels and width defines width of canvas in pixels. Example 29 gives an idea about <canvas> tag, in this example <canvas> is used with style (a type of inline css).
Example 29<svg>
The <svg> tag (Scalable Vector Graphics) is based on XML, and it is used to define different vector graphics (Drawing Based) such as circle, rectangel,polygon etc. on webpage. It is also a container that defines elements such as <circle>, <rect>,<polygon> etc to draw graphics. Example 30 shows how graphics such as circle, rectangle and polygon cam be drawn using <svg> tag.
Example 30Structure of HTML5
The basic structure of HTML5 is defined by using the following elements:<main>, <section>, <article>, <header>,<footer>,<aside> ,<nav> , and <figure>. It helps to manage a web contents easy and improves the search in more efficient way.
| <section> | <aside> |
| <article> | |
You can add additional effects on webpage by using cascading style sheet(CSS). CSS specifies additional properties on html tags such as paragraph, font , heading, background, table etc to make dynamic effects on web page. There are two methods for embedding such effects: first using CSS and the second using scripts. CSS is a text file which contains set of properties for determining how information on a web page should be displayed. It is simply an effect which can be embedded inside HTML file to make easy and standard formatting and styles of a web page. It is case sensitive and the general syntax for writing CSS is as follows:
where Element is a tag of html, properties are the attributes and the values are the attribute values for the tag. Some common font and paragraphs related styles and their properties are as follows:
Attribute Description of the attribute font-size:Npt Change the size of the font in points font-style: normal/italic/oblique/initial change the font front style font-family:arial change the font name like arial, comic san ms, times new roman etc