Scribd
Upload
3 views40 pages

2b - CSC584 - HTML

The document provides an overview of HTML, the standard markup language for creating web pages, detailing its structure and elements such as forms, input types, and attributes. It explains how to use various HTML elements like <form>, <input>, <select>, and <textarea> to collect user input, along with attributes like action, method, and required. Additionally, it highlights the differences between GET and POST methods for form submission and includes examples for clarity.

Uploaded by

2023268792
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views40 pages

2b - CSC584 - HTML

The document provides an overview of HTML, the standard markup language for creating web pages, detailing its structure and elements such as forms, input types, and attributes. It explains how to use various HTML elements like <form>, <input>, <select>, and <textarea> to collect user input, along with attributes like action, method, and required. Additionally, it highlights the differences between GET and POST methods for form submission and includes examples for clarity.

Uploaded by

2023268792
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

Standard markup language for creating Web pages.

Describes the structure of Web pages using markup.

HTML (Hyper HTML elements are the building blocks of HTML


Text Markup pages.

Language) HTML elements are represented by tags.

HTML tags label pieces of content such as "heading",


"paragraph", "table", and so on.

Browsers do not display the HTML tags, but use


them to render the content of the page.
HTML structure
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- HTML content inside here -->
<p>Hello World!</p>
</body>
</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.
<input> Element
• The most important form element.
• Can be displayed in several ways, depending on the type attribute.
• Here are some examples:

Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many
choices)
<input type="submit"> Defines a submit button (for submitting the form)
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 below, the form data is sent to a page on the server
called "/action_page.jsp". This page contains a server-side script that
handles the form data:
<form action="/action_page.jsp">
• If the action attribute is omitted, the action is set to the current page.
Method Attribute
• The method attribute specifies the HTTP method (GET or POST) to be
used when submitting the form data:
• Example
<form action="/action_page.jsp" method="get">
• Example
<form action="/action_page.jsp" method="post">
GET method
• The default method when submitting form data is GET.
• However, when GET is used, the submitted form data will be visible in
the page address field:
/action_page.jsp?firstname=Mickey&lastname=Mouse
• It appends form-data into the URL in name/value pairs
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• GET is better for non-secure data
Post method
• 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.
• POST has no size limitations, and can be used to send large amounts
of data.
Name Attribute
• Each input field must have a name attribute to be submitted.
• If the name attribute is omitted, the data of that input field will not
be sent at all.
Name Attribute
• Example:
<form action="/action_page.jsp">
First name:<br><input type="text" value="Mickey"><br>
Last name:<br><input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
<input> Element
• The <input> element can be displayed in several ways, depending on
the type attribute.
• Example
<input name="firstname" type="text">
• If the type attribute is omitted, the input field gets the default type:
"text".
<select> Element
• The <select> element defines a drop-down list:
• Example
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select> Element
• 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:
• Example
<option value="fiat" selected>Fiat</option>
<select> Element
• Use the size attribute to specify the number of visible values:
• Example
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea> Element
• The <textarea> element defines a multi-line input field (a text area):
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.
<textarea> Element
• Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<button> Element

• The <button> element defines a clickable button:


• Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Input Type text
• <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>
Input Type password
• <input type="password"> defines a password field:
• Example
<form>
Password:<br><input type="password" name="psw">
</form>
Input Type submit
• <input type="submit"> defines a button for submitting the form data
to a form-handler.
• The form-handler is specified in the form's action attribute:
Input Type submit
• Example
<form action="/action_page.jsp">
First name:<br> <input type="text" name="firstname" value="Mickey"><br>
Last name:<br><input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Input Type reset

• <input type="reset"> defines a reset button that will reset all form
values to their default values:
Input Type reset

• Example
<form action="/action_page.jsp">
First name:<br><input type="text" name="firstname" value="Mickey"><br>
Last name:<br><input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset“ value=“Reset">
</form>
Input Type radio

• <input type="radio"> defines a radio button.


• Let a user select ONE of a limited number of choices:
Input Type radio

• Example
<form>
<input type="radio" name="gender" value="male" checked>Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>
Input Type checkbox
• <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
Input Type checkbox
• Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</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.
Input Type date
• Example
<form>
Birthday:<input type="date" name="bday">
</form>
Input Type date
• You can also use the min and max attributes to add restrictions to
dates:
• Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Input Type datetime-local
• The <input type="datetime-local"> specifies a date and time input
field, with no time zone.
Input Type datetime-local
• Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Input Type email
• The <input type="email"> is used for input fields that should contain
an e-mail address.
• Example
<form>
E-mail:
<input type="email" name="email">
</form>
Input Type month
• The <input type="month"> allows the user to select a month and
year.
• Example
<form>
Birthday (month and year):
<input type="month" 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>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
readonly Attribute
• The readonly attribute specifies that the input field is read only
(cannot be changed):
• Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
disabled Attribute
• The disabled attribute specifies that the input field is disabled.
• A disabled input field is unusable and un-clickable, and its value will
not be sent when submitting the form:
• Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
placeholder Attribute
• The placeholder attribute specifies a hint that describes the expected
value of an input field (a sample value or a short description of the
format).
• The 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
<input type="text" name="fname" placeholder="First name">
required Attribute
• The 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
Username: <input type="text" name="username" required>
Reference
• https://www.w3schools.com/html/

You might also like