Web Development

HTML & CSS

Shermeen Adnan
 HTML forms
• 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 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.
• <form action="/action_page.php">
– If the action attribute is omitted, the action is set to the current page.
 HTML forms
• 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":
– Example
• <form action="/action_page.php" target="_blank">
– Other legal values are "_parent", "_top", or a name
representing the name of an iframe.
 HTML forms
• The 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.php" method="get">
– Or
– Example
• <form action="/action_page.php" method="post">
 HTTP Request Methods
• The two most common HTTP methods are: GET and POST.
• What is HTTP?
– The Hypertext Transfer Protocol (HTTP) is designed to enable
communications between clients and servers.
– HTTP works as a request-response protocol between a client and
server.
– A web browser may be the client, and an application on a computer
that hosts a web site may be the server.
• Example: A client (browser) submits an HTTP request to the
server; then the server returns a response to the client. The
response contains status information about the request and
may also contain the requested content.
 HTTP Request Methods
• HTTP Methods
– GET
– POST
– PUT
– HEAD
– DELETE
– PATCH
– OPTIONS
 The GET Method
• GET is used to request data from a specified resource.
• GET is one of the most common HTTP methods.
• Note that the query string (name/value pairs) is sent
in the URL of a GET request:
– /test/demo_form.php?name1=value1&name2=value2
• 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
 The GET Method
• Some other notes on GET requests:
– GET requests can be cached
– GET requests remain in the browser history
– GET requests can be bookmarked
– GET requests should never be used when dealing with
sensitive data (will be visible in the URL)
– GET requests have length restrictions (about 3000 characters)
– GET requests is only used to request data (not modify)
– Appends form-data into the URL in name/value pairs
– Useful for form submissions where a user wants to bookmark
the result
– GET is better for non-secure data, like query strings in Google
 The POST Method
• POST is used to send data to a server to
create/update a resource.
• The data sent to the server with POST is stored
in the request body of the HTTP request:
– POST /test/demo_form.php HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
• POST is one of the most common HTTP
methods.
 The POST Method
• Some other notes on POST requests:
– POST requests are never cached
– POST requests do not remain in the browser
history
– POST requests cannot be bookmarked
– POST requests have no restrictions on data length
 GET vs. POST
  GET POST
BACK button/Reload Harmless Data will be re-submitted
(the browser should alert
the user that the data are
about to be re-
submitted)

Bookmarked Can be bookmarked Cannot be bookmarked

Cached Can be cached Not cached
Encoding type application/x-www-form- application/x-www-form-
urlencoded urlencoded or
multipart/form-data. Use
multipart encoding for
binary data

History Parameters remain in Parameters are not saved

browser history in browser history
 GET vs. POST
Restrictions on data Yes, when sending data, No restrictions
length the GET method adds the
data to the URL; and the
length of a URL is limited
(maximum URL length is
2048 characters)

Restrictions on data type Only ASCII characters No restrictions. Binary

allowed data is also allowed

Security GET is less secure POST is a little safer than

compared to POST GET because the
because data sent is part parameters are not stored
of the URL in browser history or in
web server logs
Never use GET when
sending passwords or
other sensitive
information!

Visibility Data is visible to everyone Data is not displayed in

in the URL the URL
 HTML forms
• enctype Attribute
– The enctype attribute specifies how the form-data
should be encoded when submitting it to the server.
• Note: The enctype attribute can be used only if
method="post".
• Syntax
– <form enctype="value">
 HTML forms
• 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.
– If the type attribute is omitted, the input field gets the
default type: "text".
• The 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.
 HTML Input Types
• Here are the different input • <input type="month">
types you can use in HTML: • <input type="number">
• <input type="button"> • <input type="password">
• <input type="checkbox"> • <input type="radio">
• <input type="color"> • <input type="range">
• <input type="date"> • <input type="reset">
• <input type="search">
• <input type="datetime-
• <input type="submit">
local">
• <input type="tel">
• <input type="email">
• <input type="text">
• <input type="file">
• <input type="time">
• <input type="hidden"> • <input type="url">
• <input type="image"> • <input type="week">
 HTML Input Types
• Input Type Text
– <input type="text"> defines a one-line text input
field:
• Example
– <form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
 HTML Input Types
• Input Type Password
– <input type="password"> defines a password field:
• The characters in a password field are masked (shown
as asterisks or circles).
• Example
– <form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>
 HTML Input Types
• Input Type Submit
– <input type="submit"> defines a button for submitting 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:
• Example
– <form action="/action_page.php">
  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>
 HTML Input Types
• Input Type Reset
– <input type="reset"> defines a reset button that will reset all
form values to their default values:
• Example
– <form action="/action_page.php">
  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">
</form>
 HTML Input Types
• Input Type Radio
– <input type="radio"> defines a radio button.
• Radio buttons let a user select ONLY ONE of a limited
number of choices:
• Example
– <form>
  <input type="radio" name="gender" value="male" checked> Mal
e<br>
  <input type="radio" name="gender" value="female"> Female<br
>
  <input type="radio" name="gender" value="other"> Other
</form>
 HTML Input Types
• Input Type Checkbox
– <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a
limited number of choices.
• 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>
 HTML Input Types
• Input Type Button
– <input type="button"> defines a button:
• Example
– <input type="button" onclick="alert('Hello
World!')" value="Click Me!">
 Assignment
• HTML5 Input Types
– color
– date
– date time-local
– email
– month
– number
– range
– search
– tel
– time
– url
– week
• New input types that are not supported by older web browsers,
will behave as <input type="text">.
 HTML forms
• Grouping Form Data with <fieldset>
– The <fieldset> element is used to group related data in a form.
– The <legend> element defines a caption for the <fieldset> element.
– Example
• <form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    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">
  </fieldset>
</form>
 HTML forms
• The <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>
– 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>
 HTML forms
• The <select> Element
– Visible Values:
• Use the size attribute to specify the number of visible values
– Allow Multiple Selections:
• Use the multiple attribute to allow the user to select more than one
value
– Example
• <select name="cars" size="3“ multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
 HTML forms
• The <textarea> Element
– The <textarea> element defines a multi-line input field (a
text area):
– Example
• <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
– The rows attribute specifies the visible number of lines
in a text area.
– The cols attribute specifies the visible width of a text
area.
 HTML forms
• The <button> Element
– The <button> element defines a clickable button:
– Example
• <button type="button" onclick="alert('Hello
World!')">Click Me!</button>
– Always specify the type attribute for the button
element. Different browsers may use different
default types for the button element.
 HTML forms
• HTML5 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.
 HTML forms
• <datalist>
– The <datalist> element specifies a list of pre-defined
options for an <input> element.
– he <datalist> tag is used to provide an "autocomplete"
feature on <input> elements.
– Users will see a drop-down list of the pre-defined
options as they input data.
– Use the <input> element's list attribute to bind it
together with a <datalist> element and it should refer to
the id attribute of the <datalist> element.
– The list attribute refers to a <datalist> element that
contains pre-defined options for an <input> element.
 HTML forms
• Difference between <select> & <datalist>
– Think of it as the difference between a
requirement and a suggestion.
– For the select element, the user is required
to select one of the options you've given.
– For the datalist element, it is suggested that the
user select one of the options you've given, but he
can actually enter anything he wants in the input.
 HTML forms
• Select-Option • Datalist-Option
<select name="browser"> <input type=text
<option value="firefox"> list="browsers"
Firefox</option> name="browser">
<option value="ie"> IE</option> <datalist id="browsers">
<option value="chrome"> <option value="Firefox">
Chrome</option>
<option value="IE">
<option value="opera">
Opera</option> <option value="Chrome">
<option value="safari"> <option value="Opera">
Safari</option> <option value="Safari">
</select> </datalist>
 HTML forms
• <output>
– The <output> element represents the result of a
calculation (like one performed by a script).
– Will cover later with scripts
 HTML forms
<form> attribute
 HTML Input Attributes
• The value Attribute
– The value attribute specifies the initial value for an
input field:
– Example
• <form action="">
  First name:<br>
  <input type="text" name="firstname" value="John">
</form>
 HTML Input Attributes
• The 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" re
adonly>
</form>
 HTML Input Attributes
• The 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" disable
d>
</form>
 HTML Input Attributes
• The size Attribute
– The size attribute specifies the size (in characters)
for the input field:
– Example
• <form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" siz
e="40">
</form>
 HTML Input Attributes
• The maxlength Attribute
– The maxlength attribute specifies the maximum allowed length for
the input field:
– Example
• <form action="">
  First name:<br>
  <input type="text" name="firstname" maxlength="10">
</form>
– With a maxlength attribute, the input field will not accept more than
the allowed number of characters.
– The maxlength attribute does not provide any feedback. If you want
to alert the user, you must write JavaScript code.
• Note: Input restrictions are not foolproof, and JavaScript
provides many ways to add illegal input. To safely restrict
input, it must be checked by the receiver (the server) as well!
 HTML Input Attributes
• HTML5 Input Attributes • HTML5 Input Attributes
• autocomplete • Assignment
• autofocus – min and max
• form – multiple
• formaction – pattern (regexp)
• formenctype – placeholder
• Assignment – required
– formmethod – Step
– Formnovalidate • and the following
– Formtarget attributes for <form>:
– height and width • autocomplete
– list
• novalidate
 HTML forms
• The autocomplete Attribute
– The autocomplete attribute specifies whether a form or
input field should have autocomplete on or off.
– When autocomplete is on, the browser automatically
completes the input values based on values that the user
has entered before.
– Tip: It is possible to have autocomplete "on" for the form,
and "off" for specific input fields, or vice versa.
– The autocomplete attribute works with <form> and the
following <input> types: text, search, url, tel, email,
password, datepickers, range, and color.
 HTML forms
• The autocomplete Attribute
– Example
• <form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-
mail: <input type="email" name="email" autocomplete
="off"><br>
  <input type="submit">
</form>
 HTML forms
• The novalidate Attribute
– The novalidate attribute is a <form> attribute.
– When present, novalidate specifies that the form
data should not be validated when submitted.
– Example
– Indicates that the form is not to be validated on
submit:
• <form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
 HTML Input Attributes
• The autofocus Attribute
– The autofocus attribute specifies that the input
field should automatically get focus when the
page loads.
– Example
– Let the "First name" input field automatically get
focus when the page loads:
• First name:<input type="text" name="fname" autofocus>
 HTML Input Attributes
• The form Attribute
– The form attribute specifies one or more forms an <input> element
belongs to.
– Tip: To refer to more than one form, use a space-separated list of form
ids.
– Example
– An input field located outside the HTML form (but still a part of the
form):
• <form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">
 HTML Input Attributes
• The formaction Attribute
– The formaction attribute specifies the URL of a file that will process
the input control when the form is submitted.
– The formaction attribute overrides the action attribute of
the <form> element.
– The formaction attribute is used with type="submit" , type="image“
and <button>.
– Example
– An HTML form with two submit buttons, with different actions:
• <form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>
 HTML Input Attributes
• Why would you want that?
– Since the formaction attribute is attached to
the submission button, you could use it with
multiple buttons to specify several different form
submission URLs.
 HTML Input Attributes
• The formenctype Attribute
– The formenctype attribute specifies how the form data should be
encoded when submitted (only for forms with method="post").
– The formenctype attribute overrides the enctype attribute of
the <form> element.
– The formenctype attribute is used
with type="submit" and type="image".
– Example
– Send form-data that is default encoded (the first submit button), and
encoded as "multipart/form-data" (the second submit button):
• <form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>