client-side web technologies
TRANSCRIPT
Client-Side Web TechnologiesHTML Part II
The form element• Categories:
• Flow content
• Content model:
• Flow content, but with no form element
descendants
• Represents a collection of form-associated
elements, some of which can be edited and submitted for server-side processing
https://www.w3.org/TR/html51/sec-forms.html#the-form-element
The form element (continued)• Some additional attributes:
• action
• Specifies the URL where the form data should be sent when
submitted
• enctype
• Specifies how form data should be encoded when being sent to
server
• application/x-www-form-urlencoded (default)
• multipart/form-data
• text/plain
• method
• Specifies the HTTP method to use for sending form data to
server
• get
• post
https://www.w3.org/TR/html51/sec-forms.html#the-form-element
The fieldset element• Categories:
• Flow content
• Content model:
• Optional legend element, followed by Flow
content
• Represents a set of form controls
• Some additional attributes:
• disabled
• form
• namehttps://www.w3.org/TR/html51/sec-forms.html#the-fieldset-element
The legend element• Categories:
• None
• Content model:
• Phrasing content
• Represents a caption for its parent fieldset element
https://www.w3.org/TR/html51/sec-forms.html#the-legend-element
The label element• Categories:
• Flow content
• Phrasing content
• Content model:
• Phrasing content
• Represents a caption for a specific form
control
• Additional attributes:• form
• for
https://www.w3.org/TR/html51/sec-forms.html#the-label-element
The input element• Categories:
• Flow content
• Phrasing content
• Depending on value of type attribute, can also
be others
• Content model:
• Empty
• Represents a typed data field that usually
allows a user to edit data
https://www.w3.org/TR/html51/sec-forms.html#the-input-element
The input element (continued)• Defines a lot of additional attributes
• Some are:• autofocus
• checked
• disabled
• list
• name
• placeholder
• pattern
• readonly
• required
• type
• value
https://www.w3.org/TR/html51/sec-forms.html#the-input-element
The input element (continued)• The type attribute is an enumerated attribute
• Some values are:• hidden
• text
• url
• password
• date
• checkbox
• radio
• file
• submit
• reset
• button
https://www.w3.org/TR/html51/sec-forms.html#the-input-element
The button element• Categories:
• Flow content
• Phrasing content
• Interactive content
• Content model:
• Phrasing content
• Represents a button labeled by its contents
https://www.w3.org/TR/html51/sec-forms.html#the-button-element
The button element (continued)• Defines additional attributes
• Some are:• autofocus
• disabled
• name
• type
• Enumerated attribute:• submit
• reset
• button
• value
https://www.w3.org/TR/html51/sec-forms.html#the-button-element
The textarea element• Categories:
• Flow content
• Phrasing content
• Interactive content
• Content model:
• Text
• Represents a multiline plain text edit control
https://www.w3.org/TR/html51/sec-forms.html#the-textarea-element
The textarea element (continued)• Defines additional attributes
• Some are:• autofocus
• disabled
• name
• placeholder
• readonly
• required
https://www.w3.org/TR/html51/sec-forms.html#the-textarea-element
The datalist element• Categories:
• Flow content
• Phrasing content
• Content model:
• Phrasing content or zero or more option
elements
• Represents a set of predefined option for use
by other controls
https://www.w3.org/TR/html51/sec-forms.html#the-datalist-element
The select element• Categories:
• Flow content
• Phrasing content
• Interactive content
• Content model:
• Zero or more option or optgroup elements
• Represents a control for selecting from a set
of options
https://www.w3.org/TR/html51/sec-forms.html#the-select-element
The select element (continued)• Defines additional attributes
• Some are:• autofocus
• disabled
• multiple
• name
• required
• size
https://www.w3.org/TR/html51/sec-forms.html#the-select-element
The optgroup element• Categories:
• None
• Content model:
• Zero or more option elements
• Represents a group of option elements
with a common label
• Additional attributes:
• disabled
• label
https://www.w3.org/TR/html51/sec-forms.html#the-optgroup-element
The option element• Categories:
• None
• Content model:
• Text
• Represents an option in a select element or as
part of a list in a datalist element
• Additional attributes:
• disabled
• label
• selected
• value
https://www.w3.org/TR/html51/sec-forms.html#the-option-element
The progress element• Categories:
• Flow content
• Phrasing content
• Content model:
• Phrasing content
• Represents the completion status of determinate or
indeterminate task
• Additional attributes:
• value
• max
https://www.w3.org/TR/html51/sec-forms.html#the-progress-element
The meter element• Categories:
• Flow content
• Phrasing content
• Content model:
• Phrasing content
• Represents a scalar measurement within a known range
• Additional attributes:• value
• min
• max
• low
• high
https://www.w3.org/TR/html51/sec-forms.html#the-meter-element
Form Element Examples
• Let’s look at some examples
• https://csw08724.appspot.com/Forms.html
• https://csw08724.appspot.com/FormsMultipart.html
The canvas element• Categories:
• Flow content
• Phrasing content
• Embedded content
• Content model:
• Transparent
• Provides scripts with a resolution-dependent bitmap
canvas for rendering graphics on the fly
• We will discuss this in detail when we cover
JavaScript
https://www.w3.org/TR/html51/semantics-scripting.html#elementdef-canvas
The video element• Categories:
• Flow content
• Phrasing content
• Embedded content
• Content model:
• Varies
• Used for playing videos or movies
• Some additional attributes:• src
• controls
• autoplay
• preload
• muted
• Example:
• https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video
https://www.w3.org/TR/html51/semantics-embedded-content.html#the-video-element
The audio element• Categories:
• Flow content
• Phrasing content
• Embedded content
• Content model:
• Varies
• Used for playing audio
• Some additional attributes:• src
• controls
• autoplay
• preload
• Muted
• Example:
• https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all
https://www.w3.org/TR/html51/semantics-embedded-content.html#the-audio-element
The svg element• Categories:
• Flow content
• Phrasing content
• Embedded content
• Content model:
• SVG related elements as defined in the SVG
specification
• Used to define inline SVG graphic data
https://www.w3.org/TR/html51/semantics-embedded-content.html#elementdef-svg
Vector Graphics VS Raster Graphics• Vector graphics
• Use mathematical expressions using points, lines,
curves, shapes, etc.
• Scale up and down to any size without loss of quality
• Good for logos, illustrations, fonts
• Not good for photograph images
• Useful for responsive web design
• Raster graphics
• Use pixels
• Generally lose quality when scaled up and down
• Good for photograph images
• Examples: .jpg, .png, .bmp
Scalable Vector Graphics• Uses XML so it is text-based
• Can be defined inline with svg element or linked to
externally (img source, CSS background, etc.)
• Vector graphics format
• Supports animation and scripting
• SVG docs:• https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
• See SVG examples