The document discusses various HTML form elements and their proper semantic use. It begins by explaining why standards-compliant elements like buttons and anchors are preferable to custom elements for accessibility and cross-browser compatibility. Examples are given of using anchor tags and checkbox inputs semantically. Styling challenges are discussed for different browsers, with screenshots showing output. The conclusion debates whether appearance or functionality should take priority in design decisions.

1. HTML Elements
Standards
by: Tiago Cardoso

2. Why bother? I can still do it
● I can do it all with client-side handling
● Every element is standard-natively clickable
● Prevent any native handling in every custom
element event scripting (e.preventDefault...)
● it only works with javascript in some cases.

3. Well, you kinda should bother!
● Yahoo: 2% of their users are jscript-disabled
● Statistics don't tell whole story: No-js-users
can't reach all pages in only-javascript
websites and tend not to come back if
nothing works.

4. ● Browser native styling for elements.
● Screen readers, Mobile Devices, etc...
devices with other user inputs. Semantics
very important.
● Focusable elements (tabindex does not
solve it all)
● Navigable through keyboard tab key.

5. ● Specific events. ex: visited/clicked/etc.... for
anchor tags.
● - anchor tags get crawled, button tags do not
("nofollow" rule is not followed 100%)

6. Part 1
Anchor Tags and Buttons

7. Elements
Anchor Tag: <a ....></a>
Button Tag: <button>....</button>
Input Submit: <input type="submit"/>
Input Button: <input type="button"/>

8. <a href=#a> The Anchor Tag </a>
● A link is a connection from one Web resource to another.
● The link starts at the "source" anchor and points to the "destination"
anchor, which may be any Web resource (e.g., an image, a video clip, a
sound bite, a program, an HTML document, an element within an HTML
document, etc.)
x.html c.html
<a href="#b">..</a> <html....>
...
<a id="b" href="c.html"
>...</a>

9. <button> The Button Tag </button>
● form inner element
● Defines a push button, submission of form.
● Inside the element you can put content, like
text or images.

10. <input type=submit value=Submit/>
● form inner element
● Defines a button for submission of form.
● Label of the button is defined by its value
attribute. No option to change background
image natively.

11. <input type=button value=but /input>
● form inner element
● The input buttons represents a button in a
form with no default behavior.
● Input buttons and input submits are styled
similarly (the same difficulties, therefore).
● Typically associated to client-side behaviour.

12. Conclusion
Links vs. buttons
- Links must never change state, while buttons could potentially change state.
- similar to RESTful semantics; GET vs. POST/PUT/DELETE

13. Use case: the post action links
Like/Comment/Share

14. Use case: the post action links
like

15. Use case: the post action links
comment

16. Use case: the post action links
share

17. Use case: the post action links
like

18. Use case: the post action links
comment

19. Use case: the post action links
share

20. Semantic Analysis
Like Action
Adds a new “Like/Follower” to a post -> changes state in the server.
Comment Action
Makes the comment form visible to the client -> client side flickering.
Share Action
Facebook: Opens a pop-up form
Restorm: Loads an inline form

21. Use case: the post action links
semantic match
3-1

22. Questions?
Possible Topics:
● discuss the nofollow attribute;
● web-crawling implications in our HTML documents;

23. End of Part 1

24. Part Deux
Form Elements

25. Intro
● Design and Appearance decisions sometimes drive the
Architectural Design.
● Clients sometimes (most of times?) base their requisites
on something they saw, like how it looked, but don't
know what it does. Developers tend to sometimes follow
that lead.
Should it be the other way round?
Is there a balance?

26. Why you should use? (form elements)
● No need to provide script that handles
functionality
● Works for JS and no-JS forms ( <3 )
● All reasons described in Part 1 that apply to
them

27. Why would you run away from it?
● Form native elements are usually hard to
style.
● Cross-browser styling on top of that (<3 your
IEs)
(please interrupt me if you have something to add to this list)

28. Radio Buttons and Checkboxes
Radio Buttons:
- used for selection of an item from a list of items.
Checkboxes:
- used for selection of multiple items from a list of items.
checked: Gives the default checkedness of the input element.
name: Gives the name of the input element.
required: When specified, the element is required.
value: Gives the default value of the input element.

29. Radio Buttons and Checkboxes
Issues:
● how to style them like tag buttons?
● how to make the radio/checkboxes
disappear and leave only the label?
● And how to make them work in every used
browser?

30. Use case - Rightclearing
The Tags
● Multiple selection of items, orthodoxly represented by
checkboxes;
● styling concerns led to the decision of implementing
them with anchor tags supported by an hidden input
field and a javascript plugin;

31. Use case - Rightclearing
Pros:
● looks really good in all of the supported browsers!
Cons:
● a lot of client-side scripting (the better part of a custom
plugin of ours) was written to simulate part of the
behaviour that the checkbox natively provides.
● non-focusable, does not respond to keyboard events
(no mouse, no fun. could be part of the plugin
mentioned above, but it would just bloat it).
● javascript-dependent, main reason why the RC search
doesn’t work without script (correct me if I’m wrong).

32. LET THE BROWSER WARS BEGIN!
standard css:
.genres { div, span, applet, object, iframe, h1, h2,
border: medium none; h3, h4, h5, h6, p {
border-radius: 0 0 3px 3px; background: none repeat scroll 0 0
float: left; transparent;
margin: 0; border: 0 none;
padding: 5px; font-size: 100%;
display: inline-block; margin: 0;
vertical-align: middle; outline: 0 none;
background: url("http://www. padding: 0;
rightclearing.com/images/rightclearing/blue. vertical-align: baseline;
png?54f75c7") repeat scroll 0 0 transparent; }
margin-right: 0;
}

33. Tryout 1: Anchor Tag Tags (present)
a {
HTML: border: 1px solid rgba(33, 33, 38, 0.55);
color: rgba(33, 33, 38, 0.9);
cursor: pointer;
float: left;
font-size: 13px;
<div class="genres"> font-weight: normal;
line-height: 24px;
<a href="#" data-value="2" class="genres_2"> margin: 0 0 3px 3px;
position: relative;
<div class="left"></div> white-space: nowrap;
border: medium none;
<div class="center"> opacity: 1;
background: none repeat scroll 0 0 transparent;
border: 0 none;
<span class="tag_text">Alternative</span> font-size: 100%;
outline: 0 none;
</div> vertical-align: baseline;
text-decoration: none;
<div class="right"></div> }
.left {
</a> border-radius: 3px 0 0 3px;
width: 5px;
<a href="#" data-value="3" class="genres_3 selected"> }
.right {
<div class="left"></div> border-radius: 0 3px 3px 0;
width: 5px;
}
<div class="center"> a:hover {
color: #0096E6;
<span class="tag_text">Rock</span> text-shadow: 0 0 4px rgba(0, 150, 230, 0.4);
}
</div> a:hover > div {
background: none repeat scroll 0 0 #0096E6;
<div class="right"></div> color: #FFFFFF;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
</a> }
a.selected {
</div> background: url("http://www.rightclearing.com/images/rightclearing/blue.png?
54f75c7") repeat scroll 0 0 transparent;
}
CSS:
a div {
display: inline-block;
float: left;
height: 24px !important;
color: #FFFFFF;
}

34. Anchor Tag Tags: Output
Firefox

35. Anchor Tag Tags: Output
Firefox
Chrome

36. Anchor Tag Tags: Output
Firefox
Chrome
Opera

37. Anchor Tag Tags: Output
Firefox
Chrome
Opera
IE9

38. Anchor Tag Tags: Output
Firefox
Chrome
Opera
IE9
IE8

39. Anchor Tag Tags: Output
Firefox
Chrome
Opera
IE9
IE8
IE7

40. Tryout Deux: Checkbox Tags (future?)
HTML: CSS:
label {
border: 1px solid rgba(33, 33, 38, 0.55);
color: rgba(33, 33, 38, 0.9);
<div class="genres"> cursor: pointer;
float: left;
<label> font-size: 13px;
font-weight: normal;
<input type="checkbox" name="search[genres]" line-height: 24px;
margin: 0 0 3px 3px;
value="2"> position: relative;
white-space: nowrap;
<div class="title"> border: medium none;
opacity: 1;
Alternative background: none repeat scroll 0 0 transparent;
border: 0 none;
</div> font-size: 100%;
outline: 0 none;
</label> vertical-align: baseline;
}
<label>
.title:hover {
<input type="checkbox" name="search[genres]" background: none repeat scroll 0 0 #00AAFA;
value="3"> color: #FFFFFF;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
<div class="title"> }
:root input {
Rock position: absolute;
clip: rect(0,0,0,0);
</div> }
</label> .title {
display: inline-block;
</div> *display: inline;
border-radius: 3px;
padding: 0 5px;
}
input:checked + .title {
background: none repeat scroll 0 0 #0096E6;
color: #FFFFFF;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
}

41. Checkbox Tags: Output
Firefox

42. Checkbox Tags: Output
Firefox
Chrome

43. Checkbox Tags: Output
Firefox
Chrome
Opera

44. Checkbox Tags: Output
Firefox
Chrome
Opera
IE9

45. Checkbox Tags: Output
Firefox
Chrome
Opera
IE9
IE8

46. Checkbox Tags: Output
Firefox
Chrome
Opera
IE9
IE8
IE7

47. Checkbox Tags: Output
Firefox
Chrome
Opera
IE9
IE8
IE7
Safari
(it will work in IE 10)

48. Conclusions
Appearance
1 - Everything looks good. (unsupported css features in the IE <=9, like border-radius and text-shadow)
2 - Everything looks at least functional. Graceful
Degradation.
Functionality
1 - Works with javascript.
2 - Works. point.

49. Appearance over Functionality
or
Functionality over Appearance?

50. Questions?
Possible Topics:
● Why doesn’t the checkbox disappear in the IEs 8-?
(hint: IE is evil)

51. References
http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/
http://www.w3.org/TR/html401/struct/links.html
http://www.w3schools.com/tags/tag_button.asp
http://discuss.joelonsoftware.com/default.asp?design.4.541972.17
http://www.w3.org/wiki/HTML/Elements/input/submit
http://www.w3.org/wiki/HTML/Elements/input/button
http://www.w3.org/wiki/HTML/Elements/input/radio
http://www.w3.org/wiki/HTML/Elements/input/checkbox
http://jsfiddle.net/
http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/
http://yfrog.com/h7ja8ep