3. Forms
Used to send data back to the server to be processed.
<form></form>
Contains:
control elements that get data from the user
label elements
Attributes:
action url of page where data is sent
method GET/POST http request method
4. Controls
Controls must have name and value attributes to be
submitted.
Controls can be disabled using disabled attribute.
Each control has an initial value and a current value.
Initial values are set by value attribute.
Current value when first rendered is set to initial
value.
5. Control Types
Buttons:
To submit form:
<input type=“submit” />, <button
type=“submit”></button>
To reset form:
<input type=“reset” />, <button type=“reset”></button>
Just a button with no default behavior
<input type=“button” />
<button type=“button”></button>
Offers richer rendering capabilities then <input
type=“text” />
6. Control Types
Checkboxes:
On/off switches.
Must have name to be submitted .
if no value is set, off is the value
Checked attribute is set to make initial value
“on”
<input type=“checkbox”/>
7. Control Types
TextBox:
Single line text input
<input type=“text”/>
Password:
Similar to TextBox, but input text is rendered as
a series of asterisks or similar characters
But submitted as plain clear text
<input type=“password” />
8. Control Types
Radiobuttons:
On/off switches but are mutually exclusive.
More than one share the same name to create a
mutually exclusive group.
Checked attribute is set to make initial value
“on” only one of the group at a time.
<input type=“radio”/>
9. Control Types
DropDown Lists/Menus:
To choose one/more from multiple options.
Uses
<select name=“……”></select>
To select multiple options use multiple attribute
<select name=“……” multiple></select>
To define items use
<option></option>
Option can have name, value and selected
attributes
11. Control Types
DropDown Lists/Menus:
To logically group options use optgroup
<optgroup label=“…..”></optgroup>
label attribute is the value that appears in the list.
13. Control Types
File select:
Allow users to select files to be submitted to a
form.
<input type=“file” />
14. Control Types
Hidden controls:
Not rendered visually.
Values are submitted with the other form data,
can help overcome stateless nature of HTTP.
<input type=“hidden”
name=“….” value=“….” />
15. Control Types
Textarea controls:
Multiline text input.
Value is the content nested in the control.
<textarea>Content </textarea>
Has rows and cols attributes to set size of textarea.
16. label
Specify a label for controls that don‟t have an
implicit label.
for attribute MUST match ID value of the control
attached to it.
Useful for speech synthesizers readers,
<label for=“fname”>First Name :</label>
<input type=“text” id=“fname”/>
17. Structuring form
Use <fieldset> and <legend> to group related
controls and labels.
Makes forms more accessible especially when
rendered visually.
21. Cascade Style Sheets (CSS)
“A language for describing the rendering of structured
document as HTML and XHTML” from w3.org
Provides formatting and layout of html documents.
Controls presentation, assign styling information to elements.
Not a markup language
“cascade” means multiple stylesheets can be blended
together to affect a page. If conflict occurs the last applied or
the most specific rule is applied.
22. CSS Rules Syntax
Selector
{
property1: value1;
property2: value2;
property3: value3;
}
Example
body
{
}
p
{
}
background-color:blue;
color:white;
font-size:24pt;
color:yellow;
23. Where to add CSS?
Inline style attribute
Applied to a single element
<p style=“color : pink ; font-size : 30pt ;”
In <head>
Applied to an entire single page
<head>
<style>
body{
font-family : arial ;
background-color : black ;
color : white ;
}
p { color : pink ; }
</style>
</head>
24. Where to add CSS?
• In external sheet (.css)
•
Applied to any html file linked to it
page.html
style.css
<head>
……………………..
<link rel=“stylesheet”
type=“text/css” href=“style.css” />
</head>
url to css file
(no markup only css rules)
body{
font-family : arial ;
background-color : black
color : white ;
}
p { color : pink ; }
25. CSS Selectors
Types of Selectors:
Simple Selectors
type, class, ID, attribute, pseudo-class
Group Selectors
coma-separated list of selectors
26. Type Selector
Select by name of element (h1, p, div, span, …..etc.
Example:
p
{
font-size:20pt;
}
27. Attribute Selector
Select an element by the attributes defined in it.
Example:
[href] /*select any element with attribute named href*/
{
font-size : 20pt ;
}
h1[title] /*select any h1 element with title attribute defined */
{
color : red ; }
a[href=“http://www.google.com”]
/*select any a element with href exactly equal
http://www.google.com */
{
color : blue ; }
28. Class Selector
Select an element by the class attributes defined in it.
Class is an attribute of most html elements, specifies one or
more class names (space-separated list)
Example:
.maincontent /*select any element with class=“maincontent” */
{
font-size : 20pt;
}
H1.headerTitle /*select the all h1 with class=“headerTitle” */
{
color : red; }
29. ID Selector
Select an element by the ID attributes defined in it.
ID is an attribute of all html elements, it must be unique
throughout a certain html page
Example:
#maincontent /*select the element with id=“maincontent” */
{
font-size : 20pt;
}
h1#headerTitle /*select the only h1 with id=“headerTitle” */
{
color : red; }
30. PseudoClass Selector
Selection based on special effects, Identified by „:‟
Link:
:link, :visited, :target
User actions:
:hover, :active, :focus
UI elements states:
:enabled, :disabled, :checked
Structural :
:first-child, :last-child, :nth-child(), :empty, :not()
31. PseudoClass Selector
(Cont‟d)
Example:
a:hover /*applied when mouse hover over any link */
{
font-size:20pt; }
a.red:hover /*applied when mouse hover over link with
class=“red” */
{
font-size:20pt; }
Input[type=“text”]:disabled /*applied to any textbox which is
disabled */
{
color:red; }
32. PseudoElement Selector
Selection based on parts of elements, Identified by „::‟
::first-letter
::before
::after
::first-line
Examples:
p::after
{
content:”this content is added after the p”
color:red;
}
33. Combinators
Combine selectors specified by relation between elements
Descendant
Direct Childof (>)
Adjacent Sibling (+)
General Sibling(~)
Examples:
h1 em {……..} /*em descendant of h1*/
div ol > li p{…….} /*p descendant of li which is a direct child
of ol which is a descandent of div*/
span+p{……..} /*p that is a direct adjacent sibling to a span*/
a~p{………} /*p that is sibling of a it may be adjacent or not*/
34. Example
body{
background-color : black;
color : green ;
}
[href] {
color:pink; }
a[name="next”]{
text-decoration: underline;
}
p.boldp{ font-weight: bold; }
p#pid::first-letter{
font-size: 30px;
}
p::before {
content: "Red text before p”;
color:red;
}
p::after{
content: "Yellow text after p”;
color:yellow;
}
<body>
Trying Style Sheets
<p>This is a paragraph tag <span>a span
nested</span> in it</p>
<p class="boldp">A new paragraph with
more text to be shown describing</p>
<a href="#next">NEXT</a>
<br><br><br>
<a name="next">Here is NEXT</a>
<p id="pid">Next is more data to
continue desribing the text</p>
</body>
36. Colors
Colors can be set using:
Keywords
#-hexadecimal
rgb() and rgba()
hsl() and hsla()
To get full list of color keywords:
https://developer.mozilla.org/enUS/docs/CSS/color_value
37. Units in css
pixel (px) absolute value
em: ratio of context size
percentage: percentage of context size
39. CSS Font
font-family: list of font-names to chose from in order if not
supported by browser
font-size: smaller|larger|xx-small|x-small|small|medium|
larger|x-large|xx-large|length|percentage;
font-weight: normal|bold|bolder|lighter|100-900|
font-style: normal|italic|oblique
font-variant: normal|small-caps
font: font-family font-size font-weight font-style font-variant;
41. Block vs. Inline Elements
Inline
No newlines before or after it
Page flow is not broken
Has no width and height
Takes as much width of the
page as the content
Can contain only inline
elements
Examples:<span>, <a>,
<img>, <b>, <em>,<input>
Block
Newlines appears before
and after it.
Can have a width and
height
Takes the whole page
width
Can contain inline or block
elements
Examples:<p>, <div>
Get for idempotent forms that has no side effects, ex. Search forms, name=value pair appended to url after ‘?’Post for forms that will cause side effect like database modifications. name=value pairs are send in request body.
Mutually exclusive only one is “on” at ant time.
Example of multi-select menu
Example select with options groups
There are more in each category, refer to w3.org for full lists
There are more in each category, refer to w3.org for full lists
In html 5text-shadow: if right is –ve, then acts as left, if bottomis –ve, then acts as top
Default font-size is 16pxRecommended use by w3.org body{ font-size:100%;} All other elements {font-size: ….em}
Background-size in CSS3 can be 100px 100px (length of width then height) 20% 30% (percentage of width then height)
Block boxes laid vertically, starting at the top, Inline boxes laid horizontally, starting at the top, vertical margins are ignored, width and height can’t be specified.