Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
16 views

Introduction To Web Technology HTML Day3

Uploaded by

2mail2you
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views

Introduction To Web Technology HTML Day3

Uploaded by

2mail2you
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

* HTML Forms are required, when you want to

collect some data from the site visitor. For


example, during user registration you would
like to collect information such as name, email
address, credit card, etc.

*Forms
* action Backend script ready to process your passed data.
* method The most frequently used are GET and POST methods.
* target where the result of the script will be displayed. It takes
values like _blank, _self, _parent etc.
* enctype You can use the enctype attribute to specify how the
browser encodes the data before it sends it to the server.
Possible values are: application/x-www-form-urlencoded - This
is the standard method most forms use in simple scenarios.
mutlipart/form-data - This is used when you want to upload
binary data in the form of files like image, word file etc.

*Form Attributes
* Text input (single-line)

* Password input

* Text area (multi-line)

*Form Controls
* Radio buttons

* Checkboxes

* Drop-down boxes

*Form Controls
* Submit buttons

* Image buttons

* File upload

*Form Controls
* <form>
* Action
* Method
* id

*Form Structure
* Text * date
* Password * email
* Radio * url
* Checkbox * search
* File
* Image
* Submit
* Hidden

*Input Type
* datetime-local
* Datetime
* Date
* Month
* week
* Time
* Number (min – max - step)
* Range (min – max - step)
* Email
* url

*HTML5: <input> element


* <input>
* type="text“ / type="password"
* Name
* Size
* Maxlength
* <textarea>
* Cols
* rows

*Text input
* readonly the user cannot modify the input
value
* Disabled the input value is never sent with the
rest of the form data
* Placeholder text that appears inside the text
input box that describes the purpose of the box
briefly
* Autofocus Specifies that when the page loads
the <input> element automatically gets focus.

*Text input fields


* required="required“

*HTML 5: Form Validation


* All text fields created by (<input> or
<textarea>) can be constrained in size using
the minlength and maxlength attributes.
* For number fields (i.e. <input type="number">),
the min and max attributes also provide a
validation constraint

*Constraining the length of


your entries
* The <label> element is the formal way to
define a label for an HTML form widget. This is
the most important element if you want to
build accessible forms

*The <label> element


* <input>
* type="radio“ / type="checkbox“
* Name
* Value
* Checked

*Choices Input
* <select>
* Name
* <option>
* Value
* Selected

*Select Box
* The HTML <optgroup> tag is used for grouping
related options within your select list. This
makes it easier for users to comprehend their
choices when looking at a large list.

*HTML <optgroup> Tag


* There are various ways in HTML to create
clickable buttons. You can also create a
clickable button using <input> tag by setting its
type attribute to button

*Button Controls
*submit This creates a button that automatically
submits a form.
*reset This creates a button that automatically
resets form controls to their initial values.
*button This creates a button that is used to
trigger a client-side script when the user clicks
that button.
*image This creates a clickable button but we can
use an image as background of the button.

*Button Type
* Hidden form controls are used to hide data
inside the page which later on can be pushed
to the server

*Hidden Form Controls


* <fieldset>
* <legend>

*Grouping Form Elements


* The HTML <fieldset> tag is used for grouping
related form elements. By using the fieldset
tag and the legend tag, you can make your
forms much easier to understand for your
users.

*HTML <fieldset> Tag


* The HTML <legend> tag s used to define a
caption for <fieldset> tag.
* align (top - bottom – left - right )Deprecated-
Specifies the content alignment.

*HTML <legend> Tag


*HTML Layouts

You might also like