HTML
HTML Hyper Text Markup Language
It is a standard markup language for creating Web pages.
It is an interpreter based language.
HTML is independent of OS.
It is a browser understandable language.
Every browser has interpreter to interpret HTML.
It is a language used for presenting results with good look and feel.
It is used to develop GUI for end users.
It is used for browser based outputs.
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
Browsers do not display the HTML tags, but use them to render the content of the page
Structure of HTML script:
1) Document Type
2) Title
3) Head
4) Body
HTML Basics:
HTML Documents
All HTML documents must start with a document type declaration:
<!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Sample script with title:
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>this is my first title </title>
</head>
</html>
HTML Comments
<!-- Write your comments here -->
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading:
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1> First header </h1>
<h2> Second header </h2>
<h3> Third header </h3>
<h4> Fourth header </h4>
<h5> Fifth header </h5>
<h6> Sixth header </h6>
</body>
</html>
Commenting multiple lines .
<!- -
This is
Multiple lines
commenting
- ->
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1> First header </h1>
<h2> Second header </h2>
<!--
<h3> Third header </h3>
<h4> Fourth header </h4>
<h5> Fifth header </h5>
<h6> Sixth header </h6>
-->
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Eg:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>
<h1>
My first paragraph.
hello this is html.
hello I am learning html.
</h1>
</p>
<p>
<h2>
My second paragraph.
hello I am in second paragraph.
Hello end of second paragraphs.
</h2>
</p>
</body>
</html>
HTML line break tag <br> to get next line.
Eg:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>
<h1>
My first paragraph.<br>
hello this is html. <br>
hello I am learning html. <br>
</h1>
</p>
<p>
<h2>
My second paragraph. <br>
hello I am in second paragraph.<br>
Hello end of second paragraphs. <br>
</h2>
</p>
</body>
</html>
HTML Forms:
Forms are user interface, which is used to collect user input.
The <form> Element
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on
the type attribute.
HTML Input Types
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="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">
If the type attribute is omitted, the input field gets the default
type: "text".
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form >
First Name <input /> <br>
Last Name <input /> <br>
</form>
</body>
</html>
Text Input
<input type="text"> defines a one-line input field for text input:
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form>
First Name <input type="text" /> <br>
Last Name <input type="text" />
</form>
</body>
</html>
Result:
Text filed attributes:
Name attribute.
<input type="text" name="fname" />
Value attribute .
Used for default value.
<input type="text" name="fname" value="Nageswar Rao"/>
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form >
First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>
</form>
</body>
</html>
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices ( single
selection )
<input type="radio" name="gender" value="male" checked>
Eg:
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
</body>
</html>
Description for the above:
<input type="radio" name="gender" value="male" checked> Male<br>
type="radio" input type
" name="gender" it must be same for all as all radio buttons are under a single group.
Value = “male” it is default value for that group
Checked default selection
Male<br> it is a label.
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
<!DOCTYPE html>
<html>
<body>
<form action="">
<h1>You can chose mutliple items form below </h1>
<input type="checkbox" name = "house" value="house"> I have a house <br>
<input type="checkbox" name ="car" value="car"> I have a car <br>
<input type="checkbox" name="bike" value="bike"> I have a bike <br>
<input type="checkbox" name="computer" value="computer"> I have a laptop <br>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Default selection: checked
<!DOCTYPE html>
<html>
<body>
<form action="">
<h1>You can chose mutliple items form below </h1>
<input type="checkbox" name = "house" value="house" > I have a house <br>
<input type="checkbox" name ="car" value="car" > I have a car <br>
<input type="checkbox" name="bike" value="bike" checked > I have a bike <br>
<input type="checkbox" name="computer" value="computer" checked> I have a laptop <br>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Submit Button
<input type="submit"> defines a button for submitting the form data to
a form-handler.
The form-handler is typically a server page with a script for processing input
data.
The form-handler is specified in the form's action attribute:
<input type="submit" value="Submit">
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form >
First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Action Attribute
The action attribute defines the action to be performed when the form is
submitted.
Normally, the form data is sent to a web page on the server when the user
clicks on the submit button.
In the example above, the form data is sent to a page on the server called
"/registrationDetails ". This page contains a server-side script that handles the
form data:
<form action="/registrationDetails ">
If the action attribute is omitted, the action is set to the current page.
The Target Attribute
The target attribute specifies if the submitted result will open in a new browser
tab, a frame, or in the current window.
The default value is "_self" which means the form will be submitted in the
current window.
To make the form result open in a new browser tab, use the value " _blank":
<form action="/action_page.php" target="_blank">
Other legal values are "_parent", "_top", or a name representing the name of
an iframe.
" target="_self"
<form action="" target="_self" >
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form action="" target="_self">
First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Target = _blank
<form action="" target="_blank">
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form action="" target="_blank">
First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used
when submitting the form data:
<form action="/action_page" method="GET">
Using metho=”GET”
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form action="" method="GET" target="_blank">
First Name <input type = "text" name = "fname" value = "Nageswar
Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Browser new tab opens and below is request URL:
file:///D:/NRIT_HTML/test.htm ? fname=Nageswar+Rao&lname=Mandru
fname=Nageswar+Rao&lname=Mandru
input data is visible to end user
Using method=”POST”
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form action="" method="POST" target="_blank">
First Name <input type = "text" name = "fname" value = "Nageswar
Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
On submitting form data is not visible to end user.
Notes on GET:
Appends form-data into the URL in name/value pairs
The length of a URL is limited
Never use GET to send sensitive data! (will be visible in the URL)
Useful for form submissions where a user wants to bookmark the result
GET is better for non-secure data, like query strings in Google
When to Use POST?
Always use POST if the form data contains sensitive or personal information.
The POST method does not display the submitted form data in the page address
field.
Notes on POST:
• POST has no size limitations, and can be used to send large amounts of
data.
• Form submissions with POST cannot be bookmarked
Difference between method= GET / POST:
Features GET POST
Sending of data Client data is appended to URL Client data is sent implicitly
and sent
Storing in Browser As data is appended, the client As data is sent implicitly, the client
History data is stored in browser history data is not stored in browser history
Bookmark The URL with client data can be Not possible to bookmark
bookmarked. Thereby, later
without filling the HTML form,
the same data can be sent to server
Limitation of data Limited to 2048 characters Unlimited data
sent (browser dependent)
Hacking easiness Easy to hack the data as data is Difficult to hack
stored in browser history
Type of data sent Only ASCII data can be sent Any type of data can be sent
including binary data
Data secrecy Data is not secret as other people Data is secret as not stored in history
can see the data in browser history
When to be used Prefer when data sent is not secret. Prefer for critical and sensitive data
Do not use for passwords etc. like passwords etc.
Default Relatively faster as data is A separate message body is to be
appended to URL created
Which is to be preferred – GET or POST?
It depends on your application need. If client data includes only ASCII characters, no secrecy
and limited to 2KB length (depends on the browser), then prefer GET, else POST
Input Type Password
<input type="password"> defines a password field:
Eg:
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form action="">
First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>
Preferred Id <input type="text" name = "mailid" value = "[email protected]" /><br>
Password <input type="password" name= "passwd" /><br>
Retype Password <input type="password" name= "repasswd" /><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to
their default values:
<!DOCTYPE HTML>
<html>
<head>
<title>Rigistration form </title>
</head>
<body>
<h1> Rigistration Form </h1>
<form action="">
First Name <input type = "text" name = "fname" value = "Nageswar Rao"/> <br>
Last Name <input type = "text" name = "lname" value = "Mandru"/> <br>
Preferred Id <input type="text" name = "mailid" value = "[email protected]" /><br>
Password <input type="password" name= "passwd" /><br>
Retype Password <input type="password" name= "repasswd" /><br>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
The <select> Element
The <select> element defines a drop-down list:
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="">
<select name="category">
<option value="Software Engineer">Software Engineer</option>
<option value="Mechanical Engineer">Mechanical Engineer</option>
<option value="Mathmetics and Science">Mathmetics and
Science</option>
<option value="Electronics Engineer">Electronics Engineer</option>
<option value="Doctor">Doctor</option>
<option value="Lawyer">Lawyer</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
<option value="Mechanical Engineer" selected >Mechanical Engineer</option>
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="">
<select name="category">
<option value="Software Engineer" >Software Engineer</option>
<option value="Mechanical Engineer" selected >Mechanical
Engineer</option>
<option value="Mathmetics and Science">Mathmetics and
Science</option>
<option value="Electronics Engineer">Electronics Engineer</option>
<option value="Doctor">Doctor</option>
<option value="Lawyer">Lawyer</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
Visible Values:
Use the size attribute to specify the number of visible values:
Eg:
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="">
<select name="category" size="4">
<option value="Software Engineer" >Software Engineer</option>
<option value="Mechanical Engineer" selected >Mechanical
Engineer</option>
<option value="Mathmetics and Science">Mathmetics and
Science</option>
<option value="Electronics Engineer">Electronics Engineer</option>
<option value="Doctor">Doctor</option>
<option value="Lawyer">Lawyer</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
<!DOCTYPE html>
<html>
<body>
<form action="">
<h1>You can chose mutliple items form below </h1>
<select name="food" size="4" multiple>
<option value="rice" selected >Rice</option>
<option value="curry1" >Curr1</option>
<option value="curry2" >Curr2</option>
<option value="curd" >Curd</option>
<option value="pickle">Pickle</option>
<option value="bannana">Bannana</option>
<option value="Soft Drink">Soft Drink</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">Initial text.</textarea>
Eg:
<!DOCTYPE html>
<html>
<body>
<form action="">
<textarea name="message" rows="10" cols="30">This is Nageswar Rao,
Having 20 years of exepreince in the Software field </textarea>
<input type="submit">
</form>
</body>
</html>
The <button> Element
The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<!DOCTYPE html>
<html>
<body>
<form action="">
<h1>Click on below button for alert </h1>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</form>
</body>
</html>
Alert() is methods in java script to display message with popup window.
HTML5 Input Types
HTML5 added several new input types:
color
date
datetime-local
email
month
number
range
search
tel
time
url
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.
<!DOCTYPE html>
<html>
<head>
<title>Color Picker </title>
</head>
<body>
<form action="">
<h1>Select Favorite Color </h1>
<input type="color" name="favcolor" />
<input type="submit" value="Submit"/>
</form>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<body>
<form action="">
Select Birth Date <br>
<input type="date" name="bdate" />
<input type="submit" value="Submit"/>
</form>
</body>
</html>
You can also use the min and max attributes to add restrictions to dates:
<!DOCTYPE html>
<html>
<body>
<form action="">
Enter a date before 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit">
</form>
</body>
</html>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with
no time zone.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<form action="">
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
</body>
</html>
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.
Some smartphones recognize the email type, and add ".com" to the keyboard to
match email input.
<!DOCTYPE HTML>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="/action_page.php">
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
</body>
</html>
Input Type Month
The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE HTML>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="">
Birthday (month and year):
<input type="month" name="bdaymonth">
<input type="submit">
</form>
</body>
</html>
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:
<head>
<title>Registration Form</title>
</head>
<body>
<form action="">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
</body>
</html>
Input Restrictions
Here is a list of some common input restrictions (some are new in HTML5):
Attribute Description
disabled Specifies that an input field should be disabled
max 5 Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min 5 Specifies the minimum value for an input field
pattern 5 Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required 5 Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step 5 Specifies the legal number intervals for an input field
value Specifies the default value for an input field
min,max,step,value
The following example displays a numeric input field, where you can enter a
value from 0 to 100, in steps of 10. The default value is 30:
<head>
<title>Registration Form</title>
</head>
<body>
<form action="">
Quantity:
<input type="number" name="quantity"
min="0" max="100" step="10" value="30">
<input type="submit">
</form>
</body>
</html>
Input Type Range
The <input type="range"> defines a control for entering a number whose
exact value is not important (like a slider control). Default range is 0 to 100.
However, you can set restrictions on what numbers are accepted with
the min, max, and step attributes:
<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<p>Depending on browser support:<br>The input type "range" can be displayed as a slider control.<p>
<!DOCTYPE HTML>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="" method="get">
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>
</body>
</html>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves
like a regular text field).
<!DOCTYPE HTML>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="/action_page.php">
Search Google:
<input type="search" name="googlesearch">
<input type="submit">
</form>
</body>
</html>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a
telephone number.
Note: The tel type is currently only supported in Safari 8.
<!DOCTYPE HTML>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="/action_page.php">
Telephone:
<input type="tel" name="usrtel">
<input type="submit">
</form>
</body>
</html>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
<!DOCTYPE HTML>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="/action_page.php">
Select a time:
<input type="time" name="usr_time">
<input type="submit">
</form>
</body>
</html>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL
address.
Depending on browser support, the url field can be automatically validated
when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to
match url input.
<!DOCTYPE HTML>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="">
Add your homepage:
<input type="url" name="homepage">
<input type="submit">
</form>
</body>
</html>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE HTML>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="/action_page.php">
Select a week:
<input type="week" name="year_week">
<input type="submit">
</form>
</body>
</html>
HTML5 Form Elements
HTML5 added the following form elements:
<datalist>
<output>
Note: Browsers do not display unknown elements. New elements that are not
supported in older browsers will not "destroy" your web page.
HTML5 <datalist> Element
The <datalist> element specifies a list of pre-defined options for
an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>
</body>
</html>
HTML5 <output> Element
The <output> element represents the result of a calculation (like one performed
by a script).
Example
Perform a calculation and show the result in an <output> element:
<!DOCTYPE html>
<html>
<body>
<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet Explorer
and earlier versions.</p>
</body>
</html>
