Scribd
Upload
206 views

Conquer Forms With HTML5 and CSS3

The document discusses various HTML form elements and their attributes. It provides examples of how to create forms and define form fields like text, search, radio, checkbox, submit buttons. It also covers form attributes such as action, method, autocomplete, enctype. The document is intended to teach readers how to explore and style HTML forms with CSS.

Uploaded by

vaishali khairnar
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
206 views

Conquer Forms With HTML5 and CSS3

The document discusses various HTML form elements and their attributes. It provides examples of how to create forms and define form fields like text, search, radio, checkbox, submit buttons. It also covers form attributes such as action, method, autocomplete, enctype. The document is intended to teach readers how to explore and style HTML forms with CSS.

Uploaded by

vaishali khairnar
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 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

You might also like