You are on page 1of 96

 Explore FORM elements

 Learn how to create a FORM


 Understand the style of HTML5 FORM with
CSS3
 <form> is just another kind of HTML tag
 Forms are used to create (rather primitive) GUIs on Web
pages
 Usually the purpose is to ask the user for information
 The information is then sent back to the server
 A form is an area that can contain form elements
 The syntax is: <form parameters> ...form elements... </form>
 Form elements include: buttons, checkboxes, text fields, radio
buttons, drop-down menus, etc
 Other kinds of tags can be mixed in with the form elements
 A form usually contains a Submit button to send the information
in he form elements to the server
 The form’s parameters tell JavaScript how to send the
information to the server (there are two different ways it could
be sent)
 Forms can be used for other things, such as a GUI for simple
programs
 The JavaScript language can be used to make pages
that “do something”
 You can use JavaScript to write complete programs, but...
 Usually you just use snippets of JavaScript here and there
throughout your Web page
 JavaScript code snippets can be attached to various form
elements
 For example, you might want to check that a zipcode field contains
a 5-digit integer before you send that information to the server
 Forms can be used without JavaScript, and JavaScript
can be used without forms, but they work well
together
 On submit, send the form-data to a file
named "/action_page.php" (to process the
input):
 The action attribute specifies where to send
the form-data when a form is submitted.
 <!DOCTYPE html>
 <html>
 <body>

 <form action="/action_page.php">
 First name: <input type="text" name="FirstName"
value="Mickey"><br>
 Last name: <input type="text" name="LastName"
value="Mouse"><br>
 <input type="submit" value="Submit">
 </form>

 <p>Click the "Submit" button and the form-data will be sent to a


page on the server called "/action_page.php".</p>

 </body>
 </html>
A form with autocomplete on:
 The autocomplete attribute specifies
whether a form should have autocomplete on
or off.
 When autocomplete is on, the browser
automatically complete values based on
values that the user has entered before.
 <!DOCTYPE html>
 <html>
 <body>

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


 First name:<input type="text" name="fname"><br>
 E-mail: <input type="email" name="email"><br>
 <input type="submit">
 </form>

 <p>Fill in and submit the form, then reload the page, start to fill in the form again -
and see how autocomplete works.</p>
 <p>Then, try to set autocomplete to "off".</p>

 <p><b>Note:</b> The autocomplete attribute of the form element is not supported


in Opera 12 and earlier versions.</p>

 </body>
 </html>
A form with an accept-charset attribute:
 The accept-charset attribute specifies the
character encodings that are to be used for
the form submission.
 The default value is the reserved string
"UNKNOWN" (indicates that the encoding
equals the encoding of the document
containing the <form> element).
 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".
 The method attribute specifies how to send form-data (the form-data is
sent to the page specified in the action attribute).
 The form-data can be sent as URL variables (with method="get") or as
HTTP post transaction (with method="post").
 Notes on GET:
 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)
 Useful for form submissions where a user want to bookmark the result
 GET is better for non-secure data, like query strings in Google
 Notes on POST:
 Appends form-data inside the body of the HTTP request (data is not
shown is in URL)
 Has no size limitations
 Form submissions with POST cannot be bookmarked

 The name attribute specifies the name of a
form.
 The name attribute is used to reference
elements in a JavaScript, or to reference
form data after a form is submitted.
 The novalidate attribute is a boolean
attribute.
 When present, it specifies that the form-data
(input) should not be validated when
submitted.
 The target attribute specifies a name or a
keyword that indicates where to display the
response that is received after submitting
the form.
 The target attribute defines a name of, or
keyword for, a browsing context (e.g. tab,
window, or inline frame).
 <input type="text"> defines a one-line input
field for text input:
 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
 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:
 The <input type="search"> is used for search
fields (a search field behaves like a regular
text field).
 The <input type="tel"> is used for input
fields that should contain a telephone
number.
 The tel type is currently supported only in
Safari 8.
 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.
 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.
 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.
 Definea file-select field and a "Browse..."
button (for file uploads):
 Define a hidden field (not visible to a user).
 A hidden field often stores a default value,
or can have its value changed by a JavaScript
 Define an image as a submit button
 The <button> tag defines a clickable button.
 Inside a <button> element you can put
content, like text or images. This is the
difference between this element and buttons
created with the <input> element.
A button located outside a form (but still a
part of the form)
A form with two submit buttons. The first
submit button submits the form data to
"action_page.php", and the second submits
to "action_page2.php"
 Create a drop-down list with four options
 The <option> tag defines an option in a
select list.
 <option> elements go inside
a <select> or <datalist> element.
 The <optgroup> is used to group related
options in a drop-down list.
 If you have a long list of options, groups of
related options are easier to handle for a
user.
 The <datalist> tag specifies a list of pre-
defined options for an <input> element.
 The <datalist> tag is used to provide an
"autocomplete" feature on <input> elements.
Users will see a drop-down list of pre-defined
options as they input data.
 Use the <input> element's list attribute to
bind it together with a <datalist> element.
 The <textarea> tag defines a multi-line text
input control.
 A text area can hold an unlimited number of
characters, and the text renders in a fixed-
width font (usually Courier).
 The size of a text area can be specified by
the cols and rows attributes, or even better;
through CSS' height and width properties.
 The <label> tag defines a label for an <input>
element.
 The <label> element does not render as
anything special for the user. However, it
provides a usability improvement for mouse
users, because if the user clicks on the text
within the <label> element, it toggles the
control.
 The for attribute of the <label> tag should be
equal to the id attribute of the related
element to bind them together.
 The <fieldset> tag is used to group related
elements in a form.
 The <fieldset> tag draws a box around the
related elements.
 The<legend> tag defines a caption for
the <fieldset> element.
 HTML form can be made responsive using the
new types of input elements and their
attributes.
 Using HTML5 and CSS3