form-css-javascript part1

WEB TECHNOLOGIES
HTML FORMS:
HTML Forms are required to collect some data from the site visitor. For example, during
user registration you would like to collect information such as name, email address, aadhaar card,
etc. A form will take input from the site visitor and then will post it to a back-end application such
as CGI, ASP,JSP or PHP script etc. The back-end application will perform required processing on
the passed data based on defined business logic inside the application. There are various form
elements available like text fields, text area fields, drop-down menus, radio buttons, checkboxes,
etc.
<form action="Script URL" method="GET|POST"> form elements like input, text area etc. </form>
Get vs post
In GET method, values are visible in the URL. In POST method, values are not
visible in the URL.
GET has a limitation on the length of the POST has no limitation on the length
values, generally 255 characters. of the values.
Get request is more efficient and used more than Post request is less efficient and used less
Post. than get.
GET is less secure compared to POST because data POST is a little safer than GET
sent is part of the URL
Never use GET when sending passwords or other
sensitive information!
HTML Form Controls :
There are different types of form controls that you can use to collect data using HTML
➢ Text Input Controls
➢ Checkboxes Controls
➢ Radio Box Controls
➢ Select Box Controls
➢ File Select boxes
➢ Hidden Controls
➢ Clickable Buttons
➢ Submit and Reset Button
Text Input Controls:-

There are three types of text input used on forms:
1) Single-line text input controls - This control is used for items that require only one
line of user input, such as search boxes or names. They are created using HTML
<input> tag.
<input type="text"> defines a one-line input field for text input:
Example:
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
2) Password input controls - This is also a single- line text input but it masks the character as
soon as a user enters it. They are also created using HTML <input> tag.
Input Type Password
<input type="password"> defines a password field:
<form>
User name:<br>
User password:<br>
<input type="password" name="psw">
3) Multi-line text input controls - This is used when the user is required to give details that may
be longer than a single sentence. Multi- line input controls are created using HTML
<textarea> tag.
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form> Description: <br />
<textarea rows="5" cols="50" name="description"> Enter description here... </textarea>
</form>
</body>
</html>
Checkboxes Controls:-
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.
Here is an example HTML code for a form with two checkboxes:
<!DOCTYPE html>
<html> <head> <title>Checkbox Control</title> </head>
<body>
<form>
<input type="checkbox" name="C++" value="on"> C++
<br>
<input type="checkbox" name="C#" value="on"> C#
<br>
<input type="checkbox" name="JAVA" value="on"> JAVA
</body> </html>
Radio Button Control:-

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.
Select Box Controls :- A select box, also called drop down box which provides option to
list down various options in the form of drop down list, from where a user can select one or
more options.
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="C++" selected>C++</option>
<option value="JAVA">JA VA</option>
<option value="HTML">HTML</option>
</select>
</form>
</body>
</html>
File Select boxes:- If you want to allow a user to upload a file to your web site, you will
need to use a file upload box, also known as a file select box. This is also created using the
<input > element but type attribute is set to file.
The accept attribute specifies a filter for what file types the user can pick from the file input dialog box.
<input type="file" name="avatar" accept="image/png,image/jpeg">
• The string audio/* meaning "any audio file".
• The string video/* meaning "any video file".
• The string image/* meaning "any image file".
For example: .jpg, .pdf, or .doc.
Hidden Controls:- Hidden form controls are used to hide data inside the page which later on
can be pushed to the server. This control hides inside the code and does not appear on the
actual page. For example, following hidden form is being used to keep current page number.
When a user will click next page then the value of hidden control will be sent to the web server
and there it will decide which page will be displayed next based on the passed current page.
<body>
Button Controls:-
There are various ways in HTML to create clickable buttons. You can also create a clickable button
using <input> tag by setting its type attribute to button. The type attribute can take the following
values:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="image" name="imagebutton" src="test1.png" />
</body> </html>
Here are the different input types you can use in HTML:
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
Input Type Color

The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Input Type Date

The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
You can also use the min and max attributes to add restrictions to dates:
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.
Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Input Type Month

The <input type="month"> allows the user to select a month and year.
Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Input Type Number

The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form
HTML Input Attributes

The value Attribute
The input value attribute specifies an initial value for an input field:
Example
Input fields with initial (default) values:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The readonly Attribute
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy
the text from it).
The value of a read-only input field will be sent when submitting the form!
Example
A read-only input field:
<form>
<input type="text" id="fname" name="fname" value="John" readonly><br>
</form>
The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example
A disabled input field:
<form>
<input type="text" id="fname" name="fname" value="John" disabled><br>
</form>
The size Attribute

The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.

Note: The size attribute works with the following input types: text, search, tel, url, email, and
password.
Example
Set a width for an input field:
<form>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
The maxlength Attribute

The input maxlength attribute specifies the maximum number of characters allowed in an input
field.
Note: When a maxlength is set, the input field will not accept more than the specified number of
characters. However, this attribute does not provide any feedback. So, if you want to alert the
user, you must write JavaScript code.
Example
Set a maximum length for an input field:
<form>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
The min and max Attributes

The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-
local, month, time and week.
Tip: Use the max and min attributes together to create a range of legal values.
Example
Set a max date, a min date, and a range of legal values:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>

<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>

<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more than one value in
an input field.
The multiple attribute works with the following input types: email, and file.
Example
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
The pattern Attribute

The input pattern attribute specifies a regular expression that the input field's value is checked
against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email,
and password.
Example1
<!DOCTYPE html>
<html>
<body>
<form action="#.ext" method="post">
<label for="plz">PLZ: </label>
<input required
type="text"
id="plz" name="plz"
pattern="[0-9]{5}"
placeholder="12345"
title="Please enter the 5-digit postcode">
<input type="submit">
</form>
</body>
</html>
An input field that can contain only three letters (no numbers or special characters):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
character selection
With the square parenthesis [ ] you can specify a list of characters as a pattern. However,
the parenthesis only stands for one characters from the selection. [ABCD] So only A or B or
C or D would be valid here. Since the letters in this example are continuous, you can also
write the expression with the hyphen. [A-D] .
All upper case letters [A-Z] , all lower case letters [a-z] and all numbers. [0-9] .
Example
Only a capital letter from the selection A-D is accepted as correct input here.
<input type="text" pattern="[ABCD]">
A E
B H
C U
D Z
a number
<input type="text" pattern="[0-247-9]">
0 3
1 5
7 6
Exclude characters
As the list in the square parenthesis stands for only one element, you can exclude
characters by skilful selection. The patterns [0-247-9] or [01247-9] allow only the numbers 0
to 2, the 4 and the numbers 7 to 9
Of course we often need all upper and lower case letters [A-Za-z]
Setting the area backwards doesn't work by the way. [Z-A]or [9-0]are invalid, the pattern is ignored, so any
input is valid. And that's not what we want.
<input type="text" pattern="[9-0]">

A
b
X
#
Multiple characters with character selection
The pattern [a-z][a-z][a-z][a-z] stands for 4 letters from a list of a-z each.
[A-Z][a-z][a-z][a-z][a-z] stands for a character with uppercase letters, followed by 4
characters with lowercase letters.
noun with 5 letters Format: Xxxxx
<input type="text" pattern="[A-Z][a-z][a-z][a-z][a-z]">
Bauer haben
Ahorn Kind
Mocca Kissen
Halle Die 3
Number with 5 digits Format: nnnnn

<input type="text" pattern="[0-9][0-9][0-9][0-9][0-9]">
12345 123456
98765 1234
85219 Kissen
01022 Die 3
DE - Vehicle registration number Format: XX-Xnnn

<input type="text" pattern="[A-Z][A-Z]-[A-Z][0-9][0-9][0-9]">
AB-C123 AB-c123
DE-R568 AB-CD12
ZU-M852 A-C123
UL-M800 AB-CD1234
Character selection with repetitions
In curly parenthesis { } you can specify the number of repetitions. You simply write it
directly after your character selection. [A-Z]{20}
For a 10-digit order number of a mail order company you could instead of [0-9][0-9][0-
9][0-9][0-9][0-9][0-9][0-9][0-9][0-9] so [0-9]{10} write as a sample
DE- Postcode 5 digits: Format: nnnnn
<input type="text" pattern="[0-9]{5}">
12345 123456
98765 1234
85219 Kissen
01022 Die 3
German IBANFormat: DEnnnnnnnnnnnnnnnnnnnn

Test
<input type="text" pattern="DE[0-9]{20}">
DE98123412341234123412 De98123412341234123412
DE12345678901234567890 DE123456789O1234567890
Character selection with minimum and maximum length
For example, if you want to allow at least five, but no more than 10 characters, you would
write [A-Za-z0-9]{5,10}
If you only want to specify a minimum number of characters, you can omit the max
parameter {2, } , but you must specify the comma, otherwise the number in parenthesis
would be the fixed number of characters. If you only want to specify a maximum number of
characters, the minimum number must be specified anyway. {0,4}
Another possibility is to use the plus sign, the asterisk or the question mark.
The plus sign stands for at least one occurrence of the expression [0-9]+ .
The asterisk [0-9]* stands for none or any number of occurrences.
The question mark [0-9]? stands for once or no time.
<input type="text" pattern="[A-z]{1,3}">
<input type="text" pattern="[A-Z][a-z]{0,12}">
<input type="text" pattern="[A-Z][a-z]{2,}">
<input type="text" pattern="[A-Z][a-z]?">

<input type="text" pattern="[A-Z][a-z]+">
<input type="text" pattern="[A-Z][a-z]*">
Character selection with alternatives
If you want to offer alternatives, so coffee or tea is the pipe sign | the appropriate means, it separates the
alternatives. We would label coffee or tea or juice as follows:coffee|tea|juice.
<input type="text" pattern="Kaffee|Tee|Saft">
Kaffee Expresso
Tee Punsch
Saft Glühbier
The dot . stands for any character on the one hand

Predefined (meta)characters
\d [0-9]
\D [^0-9] oder [^\d].
\w [a-zA-Z_0-9]
\W [^a-zA-Z_0-9]
\s (whitespace)
\S [^ ] oder [^\s]
<input type="text" pattern="[\d]{5}">
12345 123456
98765 1234
85219 Kissen
01022 Die 3
<input type="text" pattern="\D+">
Bauer 3sel
Ahorn 123456
Mocca 5alz
Halle Die 3
Positive predictions
a total of 5 characters long, the dot somewhere in the middle Format: n.nnn oder nn.nn oder nnn.n
<input type="text" pattern="(?=.{5}$)\d+\.\d+">
1.234 1234
12.34 .1234
123.4 1234.
The string 'tan' must appear in the response.

<input type="text" pattern="(?=.*[Tt]an.*).*">
Zustand Berlin
Tanz Natur
Wutanfall Wutach
Password must be at least 8 characters long and must contain upper case letters, lower case letters, numbers
and special characters!
<input type="text" pattern="(?=.{8,}$)(?=.*[A-Z])(?=.*[a-
z])(?=.*\d)(?=.*\W).*">
The placeholder Attribute

The input placeholder attribute specifies a short hint that describes the expected value of an
input field (a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, tel, email, and
password.
Example
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
The required Attribute

The input required attribute specifies that an input field must be filled out before submitting the
form.
The required attribute works with the following input types: text, search, url, tel, email,
password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
The step Attribute

The input step attribute specifies the legal number intervals for an input field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: This attribute can be used together with the max and min attributes to create a range of
legal values.
The step attribute works with the following input types: number, range, date, datetime-local,
month, time and week.
Example
An input field with a specified legal number intervals:
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get focus when
the page loads.
Example
Let the "First name" input field automatically get focus when the page loads:
<form>
<input type="text" id="fname" name="fname" autofocus><br>
<input type="text" id="lname" name="lname">
</form>
The height and width Attributes
The input height and width attributes specify the height and width of an <input
type="image"> element.
Example
Define an image as the submit button, with height and width attributes:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
The autocomplete Attribute

The input autocomplete attribute specifies whether a form or an input field should have
autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the
browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with <form> and the following <input> types: text, search, url,
tel, email, password, datepickers, range, and color.
Example
An HTML form with autocomplete on, and off for one input field:
<form action="/action_page.php" autocomplete="on">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
CSS stands for Cascading Style Sheets
➢ Cascading Style Sheets, referred to as CSS, is a simple design language intended to simplify
the process of making web pages presentable.
➢ It allows you to create great-looking web pages
➢ It is generally used with HTML to change the style of web pages and user interfaces
➢ CSS saves a lot of work.
➢ It can control the layout of multiple web pages all at once.
➢ CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document.
What does CSS do
o You can add new looks to your old HTML documents.
o You can completely change the look of your website with only a few changes in CSS code.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are
two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property.
CSS can be added to HTML elements in 3 ways:

➢ Inline - by using the style attribute in HTML elements
➢ Internal - by using a <style> element in the <head> section
➢ External - by using an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the < h1> element to blue:
<title>Page Title</title> </head>

<body>
</body>
Internal CSS: An internal CSS is used to define a style for a single HTML page. An internal CSS
is defined in the <head> section of an HTML page, within a <style> element:
An internal stylesheet is declared using the <style> tag.
The <style> tag specifies the content type of a stylesheet with its type attribute which should be
set to "text/css".
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS:-
An external style sheet is used to define the style for many HTML pages. With an external style
sheet, you can change the look of an entire web site, by changing one file! To use an external
style sheet, add a link to it in the <head> section of the HTML page:
<html>
<head>
<link rel="stylesheet" href="a.css">
</head>
<body>
</body>
</html>
An external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body { background-color: powderblue; }
h1 { color: blue; }
p { color: red; }
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements
according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector

The element selector selects the HTML element by name.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>
Output:
This style will be applied on every paragraph.
Me too!
Exception Handling in Java - Javatpoint
And me!
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen
to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
Lets take an example with the id "para1".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello Trident</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>
Output:
Hello Trident
This paragraph will not be affected.
3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol)
followed by the class name.
Note: A class name should not be started with a number.
Let's take an example with a class "center".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>
Output:
This heading is blue and center-aligned.

This paragraph is blue and center-aligned.
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then you should use the element name with class selector.
Let's see an example.
1. <!DOCTYPE html>
1. <html>
2. <head>
3. <style>
4. p.center {
6. color: blue;
7. }
8. </style>
9. </head>
10. <body>
11. <h1 class="center">This heading is not affected</h1>
12. <p class="center">This paragraph is blue and center-aligned.</p>
13. </body>
14. </html>
Output:
This heading is not affected

This paragraph is blue and center-aligned.
Classes
Classes are created by placing the class attribute in a tag.

Example:
<p class="text">This text will be green, bold, arial, and have a font size of 10</p>
Styles for classes are specified with the . (dot) character followed by the class name in an
internal or external stylesheet.
Example:
<style type="text/css"> .text { font-family: arial; font-size: 10pt; font-weight: bold; color:
#008000; } </style>
In the above example, the class text is specified to have a font of arial, a font size of 10 points,
to be bold, and green. Any tag specified as part of the text class will get these properties and will
display its text as such.
Based on the stylesheet from above:
<p class="text"> This text will be green, bold, arial, and have a font size of 10 </p>
will be displayed as:
This text will be green, bold, arial, and have a font size of 10
ID's
ID's are created by placing the id attribute in a tag.

Example:
<div id="data"> This data will have a light blue background, a blue border, its font will be
Verdana, and it will be black. It will also be positioned inside a container that is 200 pixels in width
and 200 pixels in height. </div>
ID's are specified with the # (pound sign) followed by the ID name in an internal or external
stylesheet.
<style type="text/css"> #data { background-color: lightblue; border: 1px solid #8da1b5; font-
family: Verdana; color: #4f4f4f; } </style>
In the above example, the data ID is specified to have a light blue background, a blue border,
Verdana font, and black text. It is also specified to be positioned inside a container that is 200
pixels in width and 200 pixels in height. Any element that is specified with the data id will get
these properties.
Based on the stylesheet from above:
<div id="data"> This data will have a light blue background, a blue border, its font will be
Verdana, and it will be black. It will also be positioned inside a container that is 200 pixels in width
and 200 pixels in height. </div>
will be displayed as:
This data will have a light blue background, a blue border, its font will be Verdana, and it will be
orange. It will also be positioned inside a container that is 200 pixels in width and 200 pixels in
height.
Difference between Classes and ID's
It seems that classes and id's can be used for the same purpose, is there a real
difference between them?
ID’s are unique

• Each element can have only one ID
Classes are not unique
• You can use the same class on multiple elements.
• You can use multiple classes on the same element.
Any styling information that needs to be applied to multiple objects on a page should be done
with a class. Take for example a page with multiple “widgets”:
<div class="widget"></div>
While you could technically use them for the same purpose, they should be used differently. ID's
are used to specify specific elements on a webpage that will not repeat again, and so ID's should
be used for these elements (such as a container for the main content of a webpage, menus, and
footers). Classes specify that an element is part of a group.
4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. *{
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>This is heading</h2>
13. <p>This style will be applied on every paragraph.</p>
14. <p id="para1">Me too!</p>
15. <p>And me!</p>
16. </body>
17. </html>
Output:
This is heading
This style will be applied on every paragraph.
Me too!
And me!
5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.
Let's see the CSS code without group selector.
1. h1 {
3. color: blue;
4. }
5. h2 {
7. color: blue;
8. }
9. p{
11. color: blue;
12. }
As you can see, you need to define CSS properties for all the elements. It can be grouped in following ways:
1. h1,h2,p {
3. color: blue;
4. }
Let's see the full example of CSS group selector.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Trident </h1>
13. <h2>Hello Trident (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html>
CSS Basic Properties
Here are some basic CSS properties to work with.
• Text Properties
• List Properties
• Border Properties
• Font Properties
Text Properties
Property Description Values

color Sets the color of a text RGB, hex, keyword
line-height Sets the distance between lines normal, number, %
Increase or decrease the space between
letter-spacing normal, length
characters
text-align Aligns the text in an element left, right, center, justify
text- none, underline, overline, line-
Adds decoration to text
decoration through
text-indent Indents the first line of text in an element length, %
none, capitalize, uppercase,
text-transform Controls the letters in an element
lowercase
List Properties

Sets all the properties
list-style for a list in one list-style-type, list-style-position, list-style-image, inherit
declaration
URL
list-style- Specifies an image as ul {
image the list-item marker list-style-image: url('sqpurple.gif');
}
inside, outside
list-style-position: outside; means that the bullet points will be

outside the list item. The start of each line of a list item will be aligned
vertically:
• Coffee - A brewed drink prepared from roasted coffee beans...

Specifies where to • Tea
list-style- • Coca-cola
place the list-item
position
marker list-style-position: inside; means that the bullet points will be inside
the list item. As it is part of the list item, it will be part of the text and
push the text at the start:
• Coffee - A brewed drink prepared from roasted coffee beans...

• Tea
• Coca-cola
none, disc, circle, square, decimal, decimal-leading-zero,

list-style- Specifies the type of
armenian, georgian, lower-alpha, upper-alpha, lower-greek,
type list-item marker
lower-latin, upper-latin, lower-roman, upper-roman, inherit
Border Properties

Sets all the border properties
Border border-width, border-style, border-color
in one declaration
Sets all the bottom border border-bottom-width, border-bottom-style,
border-bottom
properties in one declaration border-bottom-color
border-bottom- Sets the color of the bottom
border-color
color border
border-bottom- Sets the style of the bottom
border-style
style border
border-bottom- Sets the width of the bottom border-width
width border
Sets the color of the four color_name, hex_number,
border-color
borders rgb_number, transparent, inherit
Sets all the left border border-left-width, border-left-style, border-left-
border-left
properties in one declaration color
Sets the color of the left
border-left-color border-color
border
Sets the style of the left
border-left-style border-style
border
Sets the width of the left
border-left-width border-width
border
Sets all the right border border-right-width, border-right-style, border-
border-right
properties in one declaration right-color
border-right- Sets the color of the right
border-color
color border
border-right- Sets the style of the right
border-style
style border
border-right- Sets the width of the right
border-width
width border
Sets the style of the four none, hidden, dotted, dashed, solid, double,
border-style
borders groove, ridge, inset, outset, inherit
Sets all the top border border-top-width, border-top-style, border-top-
border-top
properties in one declaration color
Sets the color of the top
border-top-color border-color
border
Sets the style of the top
border-top-style border-style
border
Sets the width of the top
border-top-width border-width
border
Sets the width of the four
border-width thin, medium, thick, length, inherit
borders
Font Properties

font-style, font-variant, font-weight, font-size/line-
Sets all the font properties in
Font height, font-family, caption, icon, menu, message-
one declaration
box, small-caption, status-bar, inherit
Specifies the font family for
font-family family-name, generic-family, inherit
text
xx-small, x-small, small, medium, large, x-large, xx-
font-size Specifies the font size of text
large, smaller, larger, length, %, inherit
Specifies the font style for
font-style normal, italic, oblique, inherit
text
Specifies whether or not a
font-variant text should be displayed in a normal, small-caps
small-caps font
normal, bold, bolder, lighter,
font-weight Specifies the weight of a font 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
Careful, many of these are not supported!
CSS Background
CSS background property is used to define the background effects on element. There are 5 CSS background properties that affects the HTML
elements:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1) CSS background-color
The background-color property is used to specify the background color of the element.
You can set the background color like this:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2,p{
6. background-color: #b0d4de;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>My first CSS page.</h2>
12. <p>Hello Trident. This is an example of CSS background-color.</p>
13. </body>
14. </html>
Output:
My first CSS page.

Hello Trident. This is an example of CSS background-color.
Exception Handling in Java - Javatpoint
2) CSS background-image
The background-image property is used to set an image as a background of an element. By default the image covers the entire element. You
can set the background image for a page like this.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("paper1.gif");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello TRIDENT.ac.in</h1>
13. </body>
14. </html>
Note: The background image should be chosen according to text color. The bad combination of text and background image may be a cause
of poor designed and not readable webpage.
3) CSS background-repeat
By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only
horizontally or vertically.
The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-x;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello TRIDENT</h1>
13. </body>
14. </html>
background-repeat: repeat-y;
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-y;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Trident</h1>
13. </body>
14. </html>
4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window.
If you set fixed the background image then the image will not move during scrolling in the browser. Lets take an example with fixed
background image.
1. background: white url('bbb.gif');

2. background-repeat: no-repeat;
3. background-attachment: fixed;
5) CSS background-position
The background-position property is used to define the initial position of the background image. By default, the background
image is placed on the top-left of the webpage.
You can set the following positions:
1. center
2. top
3. bottom
4. left
5. right
1. background: white url('good-morning.jpg');

2. background-repeat: no-repeat;
3. background-attachment: fixed;
4. background-position: center;
CSS Border
The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border properties are given below
o border-style
o border-color
o border-width
o border-radius
1) CSS border-style
The Border style property is used to specify the border type which you want to display on the web page.
There are some border style values which are used with border-style property to define a border.
Value Description
none It doesn't define any border.
dotted It is used to define a dotted border.
dashed It is used to define a dashed border.
solid It is used to define a solid border.
double It defines two borders wIth the same border-width value.
groove It defines a 3d grooved border. effect is generated according to border-

color value.
ridge It defines a 3d ridged border. effect is generated according to border-

color value.
inset It defines a 3d inset border. effect is generated according to border-color

value.
outset It defines a 3d outset border. effect is generated according to border-

color value.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.none {border-style: none;}
6. p.dotted {border-style: dotted;}
7. p.dashed {border-style: dashed;}
8. p.solid {border-style: solid;}
9. p.double {border-style: double;}
10. p.groove {border-style: groove;}
11. p.ridge {border-style: ridge;}
12. p.inset {border-style: inset;}
13. p.outset {border-style: outset;}
14. p.hidden {border-style: hidden;}
15. </style>
16. </head>
17. <body>
18. <p class="none">No border.</p>
19. <p class="dotted">A dotted border.</p>
20. <p class="dashed">A dashed border.</p>
21. <p class="solid">A solid border.</p>
22. <p class="double">A double border.</p>
23. <p class="groove">A groove border.</p>
24. <p class="ridge">A ridge border.</p>
25. <p class="inset">An inset border.</p>
26. <p class="outset">An outset border.</p>
27. <p class="hidden">A hidden border.</p>
28. </body>
29. </html>
Output:
No border.
Hello Java Program for Beginners
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
17.
CSS Fonts: The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body>
</html>
CSS Border: The CSS border property defines a border around an HTML element.
CSS Padding: The CSS padding property defines a padding (space) between the text and the
border.
CSS Margin: The CSS margin property defines a margin (space) outside the border.
DIV tag with Stylesheet
<!doctype html>
<html>
<body>
<h4>Example Div with style</h4>
<p>The CSS properties that define the graphics of each DIV are specified in the
<b>style</b> attribute (length in pixels, background and border).</p>
<div style='width:250px; background:#aaee88; border:1px solid blue;'>

<form action='#' method='post'>
Nume: <input type='text'></input><br>
E-mail:<input type='text'></input><br>
<input type='submit' value='Send'></input>
</form>
</div>
<p>Another DIV</p>
<div style='width:180px; background:#88aafe; border:5px outset #888888;'>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
</ul>
</div>
</body>
</html>
Example Div with style
The CSS properties that define the graphics of each DIV are specified in the style attribute (length in
pixels, background and border).
Nume:
E-mail:
Send
Another DIV
• Line 1
• Line 2
• Line 3
Example of absolute vs relative Position

<!DOCTYPE html>
<html>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned
ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div style="background-color:green" >This div element has position: relative;
<div style="background-color:red;
position:absolute;top:20px;left:150px;width:20%">This div element has position:
absolute;</div>
</div>
</body>
</html>
position: sticky;
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position.
Note: Internet Explorer does not support sticky positioning.
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning
works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you
reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no
quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no
quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
position: static
By default, position an element based on its current position

in the flow. The top, right, bottom, left and z-
index properties do not apply.
position: relative
Position an element based on its current position without

changing layout.
position: absolute
Position an element based on its closest positioned

ancestor position.
Take an example
To start with, create a parent container with 4 boxes side by side.
index.html
<div class=”parent”>
<div class=”box” id=”one”>One</div>
<div class=”box” id=”two”>Two</div>
<div class=”box” id=”three”>Three</div>
<div class=”box” id=”four”>Four</div>
</div>
style.css
.parent {
border: 2px black dotted;
display: inline-block;
}.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}#two {
background: green;
}
What happens when we want to move the GreenBox but do not want
to affect the layout around it?
This is where position relative comes in. Move the green box relative to its
current position to 20px from the left and top without changing the layout
around it. Thus, leaving a gap for the green box where it would have been
had it not been position.
#two {
top: 20px;
left: 20px;
background: green;
position: relative;
}
Position: absolute is the opposite.

By applying position: absolute to the GreenBox, it will not leave any gap where
it would have been. The position of the GreenBox is based on its parent
position (the dotted border). Thus, moving 20px to the left and bottom from
the top-left origin of the dotted border.
#two {
top: 20px;
left: 20px;
background: green;
position: absolute;
}
In a nutshell …
position: relative places an element relative to its current position without
changing the layout around it, whereas position: absolute places an element
relative to its parent’s position and changing the layout around it.
s
Example of z-index property

Z-index is a CSS property that allows you to position elements in layers on top of one another.
It’s super useful, and honestly a very important tool to know how to use in CSS.
<html>
<head>
</head>
<body>
<div style = "background-color:red;
width:300px;
height:100px;
position:absolute;
top:10px;
left:20px;
z-index:3">
</div>
<div style = "background-color:yellow;

width:300px;
height:100px;
position:absolute;
top:15px;
left:35px;
z-index:2;">
</div>
<div style = "background-color:green;

width:300px;
height:100px;
position:absolute;
top:20px;
left:60px;
z-index:1;">
</div>
</body>
</html>
JavaScript:
What is JavaScript?
Java Script is one popular scripting language over internet. Scripting means a small sneak (piece). It is
always independent on other languages.
Difference between JavaScript and Java
JavaScript Java
Cannot live outside a Web page Can build stand-alone applications or live in a
Web page as an applet.
Doesn‘t need a compiler Requires a compiler
Java Script is a scripting language that always dependent in HTML language. It is mainly used for creating
DHTML pages & validating the data. This is called client side validations.
Because Scripting Language do not require compilation step to execute code.
Scripting languages are typically converted into machine code on the fly during runtime by a program called
an interpreter.
Runtime reffered as : code executed sequentially.
Why we Use JavaScript?

Using HTML we can only design a web page but you can not run any logic on web browser like
addition of two numbers, check any condition, looping statements (for, while), decision making
statement (if-else) at client side. All these are not possible using HTML So for perform all these
task at client side you need to use JavaScript.
Features of JavaScript
JavaScript is a client side technology, it is mainly used for gives client side validation, but it have lot of
features which are given below;
→ Java script is object based oriented language.
Inheritance does not support in JavaScript, so it is called object based oriented language.
→ JavaScript was developed by Netscape (company name) & initially called live script.
Later Microsoft developed & adds some features live script then it is called “Jscript”.
Jscript is nothing but Java script.
→JavaScript made its first appearance in Netscape 2.0 in 1995 with the
name LiveScript.
→ Java script is designed to add interactivity to HTML pages. It is usually embedded
directly into html pages.
→ Java script is mainly useful to improve designs of WebPages, validate form data at
client side, detects (find) visitor‘s browsers, create and use to cookies, and much more.
→JavaScript is an object-based scripting language which is lightweight and cross-

platform.
→Lightweight programming language are those which have following features:
• Syntax and features uses the least hardware and software resources possible.
• Use very less memory to execute.
• Easily portable/Less size.
→JavaScript is not a compiled language
→ Java script is also called interpreted language , because script code can be executed
without preliminary compilation.
→ It Handling dates, time, onSubmit, onLoad, onClick, onMouseOver & etc .

→ JavaScript is case sensitive.
→ Most of the javascript control statements syntax is same as syntax of control statements
in C language.
→ An important part of JavaScript is the ability to create new functions within scripts.
Declare a function in JavaScript using function keyword.
Advantages of JavaScript
• More interactive websites . This includes buttons, but also hover-interactivity, menu functionality,
animation.
• Speed, as the language is executed on the user’s device instead of the website’s server. This
minimizes server requests, accelerating the user’s experience.
• Reduced server load, as once again the user’s device does most of the heavy lifting, conserving both
bandwidth and load.
• Popularity: Nearly every mainstream browser and major online retailer supports JavaScript. Browsers
include Chrome, Firefox, Safari, Edge, Internet Explorer, and many others. Online retailers include
Amazon, PayPal, Google, and numerous others.
• No need for compilation. Browsers interpret JavaScript as HTML tags.
• Code is relatively easy to learn, write, and debug. Syntax is simple and flexible.
• Interoperability with other programming languages and scripts, and JavaScript can be inserted into any
page regardless of the file extension
Creating a java script: - html script tag is used to script code inside the html page.
<script> </script>
The script tag specifies that we are using JavaScript.
The script is containing 2 attributes . They are
1) Language attribute: -
It represents name of scripting language such as JavaScript, VbScript.
<script language=JavaScript>
2) Type attribute: -
<script type=text / JavaScript>

Places to put JavaScript code
1. Between the body tag of html
2. Between the head tag of html
3. In .js file (external javaScript)
1) JavaScript Example : code between the body tag
In the above example, we have displayed the dynamic content using JavaScript. Let’s see the simple example of
JavaScript that displays alert dialog box.
<script type="text/javascript">
alert("Hello TRIDENT");
</script>
2) JavaScript Example : code between the head tag
1. <html>
2. <head>
3. <script type="text/javascript">
4. alert("Hello TRIDENT ");
5.
6. </script>
7. </head>
8. <body>
9. <script type="text/javascript">
10. alert("Hello TRIDENT ");
11. </script>
12.
13. </body>
14. </html>
External JavaScript file

We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in several html pages.
message.js
1. function msg(){
2. alert("Hello TRIDENT");
3. }
index.html
1. <html>
2. <head>
3. <script type="text/javascript" src="message.js"></script>
4. </head>
5. <body>
6. <p>Welcome to JavaScript</p>
7. <form>
8. <input type="button" value="click" onclick="msg()"/>
9. </form>
10. </body>
11. </html>
Program: -
<html>
<head>
<script language="JavaScript">
document.write("hi my name is Kalpana")
</script>
</head>
<body text="red">
<marquee>
<script language="JavaScript">
document.write("hi my name is Sunil Kumar Reddy")
</script> </marquee>
</body>
</html>
O/P: - hi my name is Kalpana
hi my name is Sunil Kumar Reddy

Types of JavaScript Comments
There are two types of comments in JavaScript.
Comment lines: - comments lines are not executable.
// single line comment

/* this is multi line comment */
JavaScript Variable
Declaring variable: - variable is a memory location where data can be stored. In java script variables
with any type of data are declared by using the keyword var. All keywords are small letters only.
var a; a=20;
var str; str= “Sunil”;
var c; c=‟a‟;
var d; d=30.7;
But the keyword is not mandatory when declare of the variable.
→ During the script, we can change value of variable as well as type of value of variable.
Ex: -
a=20;
a=30.7;
JavaScript syntax rules: - JavaScript is case sensitive language. In this upper case lower case letters
are differentiated (not same).
Ex: - a=20;
A=20;
The variable name “a‟ is different from the variable named “A‟.
Ex: - myf( ) // correct
myF( ) // incorrect
→ ; is optional in general JavaScript.
Ex: - a=20 // valid
b=30 // valid
A=10; b=40; // valid
var x=5;
● Observe that no type is specified, this is found in run-time and can change.
x = 'abc'; // no problem
There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.
Correct JavaScript variables

1. var x = 10;
2. var _value="sonoo";
Incorrect JavaScript variables
1. var 123=30;
2. var *aa=320;
Example of JavaScript variable

Let’s see a simple example of JavaScript variable.
1. <script>
2. var x = 10;
3. var y = 20;
4. var z=x+y;
5. document.write(z);
6. </script>
There are two types of variables in JavaScript : local variable and global variable.
JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible within the function or block only. For
example:
1. <script>
2. function abc(){
3. var x=10;//local variable
4. }
5. </script>
Or,
1. <script>
2. If(10<13){
3. var y=20;//JavaScript local variable
4. }
5. </script>
JavaScript Global Variable

A JavaScript global variable is declared outside the function or declared with window object. It can be accessed from
any function.
1. <script>
2. var value=50;//global variable
3. function a(){
4. alert(value);
5. }
6. function b(){
7. alert(value);
8. }
9. </script>
Declaring JavaScript global variable within function
To declare JavaScript global variables inside function, you need to use window object. For example:
1. window.value=90;
Now it can be declared inside any function and can be accessed from any function. For example:
1. function m(){
2. window.value=100;//declaring global variable by window object
3. }
4. function n(){
5. alert(window.value);//accessing global variable from other function
6. }
Internals of global variable in JavaScript

When you declare a variable outside the function, it is added in the window object internally. You can access it through
window object also. For example:
1. var value=50;
2. function a(){
3. alert(window.value);//accessing global variable
4. }
Javascript Data Types

JavaScript provides different data types to hold different types of values. There are two types of data types in
JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
1. var a=40;//holding number

2. var b="Rahul";//holding string
3. var isReading = true; // holding boolean datatype
JavaScript primitive data types

There are five types of primitive data types in JavaScript. They are as follows:
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
The Undefined Data Type

If a variable has been declared, but has not been assigned a value, has the value undefined.
1. var a;
2. var b = "Hello World!"
3. alert(a) // Output: undefined
4. alert(b) // Output: Hello World!
The Null Data Type

A null value means that there is no value. It is not equivalent to an empty string ("") or 0, it is simply nothing.
Example
var a = null;
alert(a); // Output: null
var b = "Hello World!"
alert(b); // Output: Hello World!
b = null;
alert(b) // Output: null
The non-primitive data types are as follows:
Data Type Description

Object represents instance through which we can access members
Array represents group of similar values
Function
The Array Data Type

An array is a type of object used for storing multiple values in single variable. Each value (also called an element) in an
array has a numeric position, known as its index, and it may contain data of any data type-numbers, strings, booleans,
functions, objects, and even other arrays. The array index starts from 0, so that the first array element is arr[0] not
arr[1].
The simplest way to create an array is by specifying the array elements as a comma-separated list enclosed by square
brackets, as shown in the example below:
var colors = ["Red", "Yellow", "Green", "Orange"];
var cities = ["London", "Paris", "New York"];
alert(colors[0]); // Output: Red
alert(cities[2]); // Output: New York
Arrays use C-like notation
var arr = [ 'a', 2 , 'c' ]; //different types OK
arr.length == 3
arr[2] == 'c'
● Elements are indexed from 0 up to arr.length-1

● to add elements!
arr[3] = 'd'; // arr == [ 'a', 2, 'c', 'd']
The Function Data Type

The function is callable object that executes a block of code. Since functions are objects, so it is possible to assign them
to variables, as shown in the example below:
Example
var greeting = function(){

return "Hello World!";
}
// Check the type of greeting variable

alert(typeof greeting) // Output: function
alert(greeting()); // Output: Hello World!
Example
<script>
function createGreeting(name){
return "Hello, " + name;
}
var result = createGreeting( "Peter");

alert(result); // Output: Hello, Peter
</script>
Objects in js are
● Again the . (dot) operator is used to access methods/properties
var myobj = { }; // empty object
alert(obj2.key2 == 15); //true
obj2.key3 = 'hello'; //OK to add fields!
alert(obj2.key2);
● Object/Array variables are references (Java-like?)
● Arrays are objects! (verify with typeof)
Example:
var car = {type:"Fiat", model:"500", color:"white"};
Example
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
JavaScript includes following categories of operators.
1. Arithmetic Operators
2. Comparison Operators
3. Logical Operators
4. Assignment Operators
5. Conditional Operators
Arithmetic Operators
Arithmetic operators are used to perform mathematical operations between numeric operands.
Operator Description
+ Adds two numeric operands.
- Subtract right operand from left operand
* Multiply two numeric operands.
/ Divide left operand by right operand.
% Modulus operator. Returns remainder of two operands.
++ Increment operator. Increase operand value by one.
-- Decrement operator. Decrease value by one.
The following example demonstrates how arithmetic operators perform different tasks on operands.
Example: Arithmetic Operator

var x = 5, y = 10, z = 15;
x + y; //returns 15
y - x; //returns 5
x * y; //returns 50
y / x; //returns 2
x % 2; //returns 1
x++; //returns 6
x--; //returns 4
+ operator performs concatenation operation when one of the operands is of string type.
The following example shows how + operator performs operation on operands of different data types.
Example: + operator
var a = 5, b = "Hello ", c = "World!", d = 10;
a + b; // "5Hello "
b + c; // "Hello World!"
a + d; // 15
Comparison Operators
JavaScript language includes operators that compare two operands and return Boolean value true or
false.
Operators Description
== Compares the equality of two operands without considering type.
=== Compares equality of two operands with type.
!= Compares inequality of two operands.
> Checks whether left side value is greater than right side value. If yes then returns true otherwise false.
< Checks whether left operand is less than right operand. If yes then returns true otherwise false.
>= Checks whether left operand is greater than or equal to right operand. If yes then returns true otherwise false.
<= Checks whether left operand is less than or equal to right operand. If yes then returns true otherwise false.
The following example demonstrates how comparison operators perform different tasks.
Example: Comparison Operators

var a = 5, b = 10, c = "5";
var x = a;
a == c; // returns true
a === c; // returns false
a == x; // returns true
a != b; // returns true
a > b; // returns false
a < b; // returns true
a >= b; // returns false
a <= b; // returns true
a >= c; // returns true
a <= c; // returns true

DVERTISEMENT
Logical Operators
Logical operators are used to combine two or more conditions. JavaScript includes following logical
operators.
&& && is known as AND operator. It checks whether two operands are non-zero (0, false, undefined, null or "" are
considered as zero), if yes then returns 1 otherwise 0.
|| || is known as OR operator. It checks whether any one of the two operands is non-zero (0, false, undefined, null or
"" is considered as zero).
! ! is known as NOT operator. It reverses the boolean result of the operand (or condition)
Example: Logical Operators
var a = 5, b = 10;
(a != b) && (a < b); // returns true
(a > b) || (a == b); // returns false
(a < b) || (a == b); // returns true
!(a < b); // returns false
!(a > b); // returns true
Assignment Operators
JavaScript includes assignment operators to assign values to variables with less key strokes.
Assignment
operators Description
= Assigns right operand value to left operand.
+= Sums up left and right operand values and assign the result to the left
operand.
-= Subtract right operand value from left operand value and assign the result to
the left operand.
*= Multiply left and right operand values and assign the result to the left operand.
/= Divide left operand value by right operand value and assign the result to the
left operand.
%= Get the modulus of left operand divide by right operand and assign resulted
modulus to the left operand.
Example: Assignment operators
var x = 5, y = 10, z = 15;
x = y; //x would be 10
x += 1; //x would be 6
x -= 1; //x would be 4
x *= 5; //x would be 25
x /= 5; //x would be 1
x %= 2; //x would be 1
Ternary Operator
JavaScript includes special operator called ternary operator :? that assigns a value to a variable based
on some condition. This is like short form of if-else condition.
Syntax:
<condition> ? <value1> : <value2>;
Example: Ternary operator

var a = 10, b = 5;
var c = a > b? a : b; // value of c would be 10

var d = a > b? b : a; // value of d would be 5
JavaScript String Operators

The + operator can also be used to add (concatenate) strings.
Example
var txt1 = "John";
var txt2 = "Doe";
var txt3 = txt1 + " " + txt2;
The result of txt3 will be:

John Doe
The += assignment operator can also be used to add (concatenate) strings:
Example
var txt1 = "What a very ";
txt1 += "nice day";
The result of txt1 will be:
What a very nice day
When used on strings, the + operator is called the concatenation operator.
Adding Strings and Numbers

Adding two numbers, will return the sum, but adding a number and a string will return a string:
Example
var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
The result of x, y, and z will be:
10
55
Hello5
JavaScript Type Operators

typeof Returns the type of a variable
returns a string indicating the data type typeof 3; // "number"
instanceof Returns true if an object is an instance of an object type
returns true if the specified object is of of the specified object type

object instanceof object_type

form-css-javascript part1

Uploaded by

form-css-javascript part1

Uploaded by

WEB TECHNOLOGIES

Text Input Controls:-

<input type="text"> defines a one-line input field for text input:

<input type="password"> defines a password field:

Radio Button Control:-

<input type="image" name="imagebutton" src="test1.png" />

Input Type Color

Input Type Date

Input Type Datetime-local

Input Type Email

Input Type Month

Input Type Number

You can also set restrictions on what numbers are accepted.

HTML Input Attributes

The disabled Attribute

A disabled input field is unusable and un-clickable.

The size Attribute

The default value for size is 20.

The maxlength Attribute

The min and max Attributes

<label for="datemin">Enter a date after 2000-01-01:</label>

<label for="quantity">Quantity (between 1 and 5):</label>

The multiple Attribute

The pattern Attribute

<input type="text" pattern="[9-0]">

Number with 5 digits Format: nnnnn

DE - Vehicle registration number Format: XX-Xnnn

German IBANFormat: DEnnnnnnnnnnnnnnnnnnnn

<input type="text" pattern="[A-Z][a-z]?">

<input type="text" pattern="Kaffee|Tee|Saft">

The dot . stands for any character on the one hand

<input type="text" pattern="[\d]{5}">

<input type="text" pattern="\D+">

The string 'tan' must appear in the response.

The placeholder Attribute

The required Attribute

The step Attribute

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

The autofocus Attribute

The autocomplete Attribute

<form action="/action_page.php" autocomplete="on">

Each declaration contains a property name and value, separated by a colon.

CSS can be added to HTML elements in 3 ways:

<title>Page Title</title> </head>

body { background-color: powderblue; }

There are several different types of selectors in CSS.

1. CSS Element Selector

1) CSS Element Selector

This style will be applied on every paragraph.

Exception Handling in Java - Javatpoint

Lets take an example with the id "para1".

This paragraph will not be affected.

3) CSS Class Selector

Let's take an example with a class "center".

This heading is blue and center-aligned.

CSS Class Selector for specific element

Let's see an example.

This heading is not affected

Classes are created by placing the class attribute in a tag.

ID's are created by placing the id attribute in a tag.

ID’s are unique

4) CSS Universal Selector

This style will be applied on every paragraph.

5) CSS Group Selector

Let's see the CSS code without group selector.

Let's see the full example of CSS group selector.

CSS Basic Properties

Here are some basic CSS properties to work with.

Property Description Values

Property Description Values

list-style-position: outside; means that the bullet points will be

• Coffee - A brewed drink prepared from roasted coffee beans...

• Coffee - A brewed drink prepared from roasted coffee beans...

none, disc, circle, square, decimal, decimal-leading-zero,

Property Description Values

Property Description Values