Building and styling forms

392 views

Published on

A basic tutorial on how to build and style a form using HTML5 and CSS.

Done as part of an assignment for CIT.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
392
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building and styling forms

  1. 1. Form element CSS Tutorial
  2. 2. IntroductionHello, this is a tutorial on how to style a form usingCascading Style Sheets (CSS).This tutorial will attempt to make a form look attractive andbecome more user-friendly with some styling techniques.This tutorial uses HTML5 to build the form and assumesthat you have a basic undersanding of HTML (how to usethe <header>, <title> and <body> tags, basic knowledge ofform controls etc).The tutorial is split into two parts: Part I – Building itand Part II – Styling it.
  3. 3. Part IBuilding it
  4. 4. Step 1The first step to creating a HTML5 document is to make a Document Type Definition(DTD). This goes at the top of the page. • Type <!DOCTYPE html> at the top of the page
  5. 5. Step 2• After entering the DTD, you can add elements such as <head>, <title> and <body> to build your page. Remeber to save it as a html file (eg; mysite.html).• Indenting after main elements is good practice as it makes the code easier to read.
  6. 6. The FormA form is extremely important as it allows a business operator to collect essentialinformation such as client information, contact details and product order details.Therefore, it is extrememly important that a form is easy to use.It is also good practice to make elements in your website (such as a form) usasbleas outlined by the Web Content Accessibility Guidelines (WCAG) 2.0.Principles of WCAG 2.0 that our form will meet: • Principle 1: perceivable – use of colours to distinguish content from the background • Principle 2: operable – the form controls can be used with keyboard keys • Principle 3: understandable – form questions are descriptive and written in simple language • Principle 4: robust – the form content can be interpreted by a variety of browsers and electronic readers
  7. 7. 1 What we want to achieve 41. Title to let the user know what the form is 3 for2. Fieldset to group the questions and break the form into smaller sections3. Legend to give the fieldset a meaningful name 24. Descriptive labels so that screen readers can give useful information to the visually impaired5. Elements are aligned to make the form neat and easy to read
  8. 8. Step 1 adding a title• The title is placed in a header tag, written as <h1>• In the <body> of the document, type title of the form between a <h1> tag. You must close the tag with </h1>.
  9. 9. Step 2 creating a fieldset and legend• Below the form title, type in <fieldset>. This will create a group for the options on the form. Close it off with </fieldset>.• Beneath the <filedset> tag, type <legend> and add the title you wish to assign for the first group of options. Close it off with </legend>.
  10. 10. Step 3 text boxesWe’re going to add the first five text fields in the form. • Beneath <fieldset>, type <p><label for="first_name">First name</label><input type="text" id="first_name" /></p> • Do this for the next four text fields: “Surname”, “Alias”, “Email” and “Age”.We’ll break the syntax down in the next slide.
  11. 11. • <p></p> the form control and label is put in a paragraph tag so that each one appears on a separate line, and it allows us to style it more flexibly later on.• <label for="first_name">First name</label> gives the label “First name” the name “first_name”. Label names should be meaningful so that electronic screen readers can give useful information to the visually impaired. Labels should also be placed to the left or above a form element so that screen readers will recognise it as prompt text.• <input type=“text” id=“first_name”/> specifies that the form control is a text box and gives the text box the name (id) “first_name”.
  12. 12. Step 4 radio buttonsNow we’ll add the two radio buttons. • Underneath the code of the last textbox, type <p><input type="radio" name="gender" value="female" /><label for="female">Female</label></p> • Do this for the next radio button: “Male”.We’ll break the syntax down in the next slide.
  13. 13. • <input type="radio" name="gender" value="female" /> specifies that the form control is a radio button and gives the radio button the name “gender”. The “value” records “female” when the user selects it and enters it into a database on the server that hosts the form (the way a form works is beyond the scope of this tutorial).• <label for="female">Female</label> gives the label “Female” the name “female”.In this case, the label is placed after the <input> tag because we want the label toappear on the right hand side of the radio button.
  14. 14. Step 5 drop down menu Next, we’re going to add the drop down menu that lists all of the countries.
  15. 15. • Under the last radio button, enter a description for the drop down menu in a <p> tag. • Below the description type <select name="country" id="country_of_residence"> • Then type <optgroup label="Africa"> underneath • Then enter the first option in the list by typing <option>Algeria</option> underneath • Make as many <option> tags for as many countries as you can think of in AfricaWe’ll break the syntax down in the next slide.
  16. 16. • <select name="country" id="country_of_residence"> The <select> tag defines a drop down menu. In this <select> tag, we are giving the drop down menu the name “country”. In this case, id is also giving the drop down menu the name “country_of_residence”. Some browsers don’t support name or id, so it can help to have both.• <optgroup label="Africa"> This creates a group within the list of options called “Africa”.• <option>Algeria</option> This enters the option “Algeria” into the drop down list.Now that you have a better understanding of the <select> and <optgroup> tags, addas many country regions and countries as you can to the list.Don’t forget to close the tags with </optgroup> and </select> at the end of eachgroup of options and at the end of the drop down menu, respectively.
  17. 17. Halfway pointYou have now completed the first fieldset (group of form questions) in your form. Theform and drop down menu should currently look like this.If it doesn’t, check that you have the closing tags </body> and </html> at the bottom,respectively.
  18. 18. Step 6 the second fieldsetNow we will add the second fieldset in the form, “Additional information”, where theuser will use checkboxes to indicate their interests.• Below the previous fieldset, type in <fieldset>. This will create a group for the options on the form. Close it off with </fieldset>.• Beneath the <filedset> tag, type <legend> and type “Additional information” to give a title to the second fieldset. Close it off with </legend>.
  19. 19. Step 7 checkboxes• Type a description for what you want the user to do with the checkboxes in a <p> tag• Underneath the description, type <p><input type="checkbox" name="interests" value="design" /><label for="design">Design</label></p>• Do this for the next seven checkboxes: “Crafts”, “Music”, “Theatre”, “Dance”, “Sculpture”, “Literature” and “Poetry”We’ll break the syntax down in the next slide
  20. 20. • <input type="checkbox" name="interests" value="design" /> specifies that the form control is a checkbox and gives the checkbox the name “interests”. The “value” records “design” when the user selects it and enters it into a database on the server that hosts the form (the way a form works is beyond the scope of this tutorial).• <label for="design">Design</label> gives the label “Design” the name “design”.In this case, the label is placed after the <input> tag because we want the label toappear on the right hand side of the checkbox.
  21. 21. I’ve added some breaks <br /> to space out the elements and make it easier to read. Feelfree to remove them if you think they are unnecessary.People’s interests can vary widely, so it can be a good idea to add a field for “other”That’s the end of the second fieldset! Make sure you’ve closed off with </fieldset>
  22. 22. Step 8 submit!To finish off the form, we need a submit button.• Below the last fieldset, add a thankyou message using the <p> tag.• Underneath the message type <input type="submit" value="Submit"/>• Finish off your HTML document by closing the body with </body> and closing the html with </html>We’ll break down the syntax in the next slide
  23. 23. • <input type="submit" value="Submit"/> specifies that the form control is a submit button and gives the submit button the name “submit”. The “value” records “Submit” when the user selects it and enters it into a database on the server that hosts the form (the way a form works is beyond the scope of this tutorial).
  24. 24. The road so far... Now, your form should look something like this
  25. 25. Part II Styling it
  26. 26. Step 1 making the style sheetLet’s make this form better to look at and to use. Well apply colours and alignment to theform controls using Cascading Style Sheets (CSS). • Create a new file in your text editor and save it as a css file (eg; page_styles.css) • Go back to your html file. Beneath the <title> and <header> tags, type <link rel="stylesheet" type="text/css" href="page_styles.css" />. This links the style sheet to the html document and enables the html to call the styles written in the css file.We’ll break the syntax down further in the next slide.
  27. 27. • <link rel="stylesheet" tells the html document that the relation of the link to the document is a stylesheet.• type="text/css“ tells the html document that the type of the stylesheet is text/css (currently the only option available).• href="page_styles.css" /> tells the html document what the file name of the stylesheet is.
  28. 28. Step 2 the body• We’ll start by styling the main content of the page – the text and objects in the body. At the top of the style sheet, type the following: body This defines a style for the tag <body>. { It is telling the html document that everything in the <body> tag is to be displayed with font-family: Helvetica, sans- serif; • The font Helvetica, from a sans-serif font library • the minimum width of the body is 760 pixels – this makes min-width: 760px; the content fit into the page container, which we’ll talk about font-size: small; later. text-align: justify; • Use a small font size color: #330000; • Justify the text background-color: #FFFFCC; • Set the text colour to #330000 - a dark brown } • Set the background colour to #FFFFCC – soft yellowThe font choice makes the words easier to read and the background colour makesthe page softer on the eyes. The brown for the text is purely a stylistic choice. Thesestyles conform to the first principle of the WCAG2.0 guidelines – making a pageperceivable by distingushing the content from the background.
  29. 29. Your page should now look like this:
  30. 30. Step 3 the form - h1• We should make the heading of the form stand out more so that it’s easily differentiated from the rest of the content. Type the following beneath the body style: h1 This defines a style for the tag <h1>. { It is telling the html document that everything in the <h1> tag is to be displayed with font-family: Georgia, serif; • The font Georgia, from a serif font library font-size: x-large; • Use an extra-large font size color: #8C6239; • Set the text colour to #8C6239 - a light brown }
  31. 31. Your form should now look like this:
  32. 32. Step 4 the form - colouring the fieldset• Colouring the fieldset will make them stand out in the form and make it easier for the user to differentiate between sections in the form. Type the following beneath the ol style: fieldset This defines a style for the tag <fieldset>. { It is telling the html document that everything in the <fieldset> tag is to be displayed with width: 500px; • A width of 500px. Long scrolling horizontal text is padding: 20px; difficult to read a form that borders to the edge of the background-color: #CEBBA5; page looks unattractive border: 0px; • Padding of 20px to add space between the edge of the } fieldset and the form content • Set the text background-colour to #CEBBA5 - a medium brown to contrast it with the background • We don’t want the fieldset to have a border as background colour is enough to make it stand outColouring the fieldset also conforms to the first principle of the WCAG2.0 guidelinesby contrasting the form with the other elements on the page and making it moreperceivable.
  33. 33. Your form should now look like this:
  34. 34. Step 5 the form - colouring the legend• Now we’ll make the legend stand out to improve the form’s legability. Type the following beneath the fieldset style: legend This defines a style for the tag <legend>. { It is telling the html document that everything in the font-family: Helvetica, sans- <legend> tag is to be displayed with serif; • The font Helvetica from a sans-serif font library font-size: small; • Use a small font size font-weight: bold; • Make the font bold padding: 5px 10px; • Add 5px padding to the top and bottom and 10px color: #990000; padding to the left and right side of the legend to allow background-color: #CEBBA5 some space between the legend and form controls } • Set the text colour to #990000 – a dark red • Set the background-colour to #CEBBA5 – the same brown that we used for the fieldset
  35. 35. Your form should now look like this:
  36. 36. Step 6 the form – floating the labels• The labels and text fields look very unorganised at the moment so we will tidy them up by aligning them using the float technique. Setting something to “float” means that it will be pushed as far to the left or right as possible. Type the following below the legend style: label This defines a style for the tag <label>. { It is telling the html document that everything in the width: 50px; <label> tag is to be displayed with margin-right: 10px; • The maximum width of the label as 50px. Eventhough text-align: right; the labels differ in character length, this would ensure that they all line up at the same point. It would have to float: left; be longer if there are labels with more characters. } • The margin to the right of the label is 10px, to give a little space between the label and the input field • Align the text to the right so that it comes up straight against the input field • Float to the left – ie, push everything in the label as far to the left as possible Because we have specified margins for the label, the “float” aligns everything neatly as they’re pushed next to each other.
  37. 37. Your form should now look like this:
  38. 38. Step 7 the form – creating a class to align the radio buttons and check boxes• When there are many options listed in the form of radio buttons and checkboxes, it can make the form look very long and daunting. We’re going to float them horizontally to make it look more user friendly and attractive. Type the following below the label style: #radio_label This is creating a class called radio_label. Define a class with the “#” symbol. Classes give you more freedom with styling as you can add { extra styles within the standard html tags like <body> or <label>. width: 70px; It is telling the html document that whatever is assigned the class margin-left: 5px; radio_label is to be displayed with text-align: left; • A width of 70px. Again, this is to set a maximum width for the float: left; radio_label so that they can all line up at the same point } • The margin to the left of the radio_label is 5px, to add some space between it and the form control #check_label • We want the labels to appear on the right side of the form control, so we’re goign to align the text to the left so that it comes up straight { against the form control width: 70px; • Float to the left – ie, push everything in the label as far to the left as margin-left: 5px; possible text-align: left; float: left; Because we have specified margins for the label, the “float” aligns } everything neatly as they’re pushed next to each other.
  39. 39. We also have to create a class that tells the radio buttons and checkboxes to float left.Type the following below the #radio_label and #check_label classes:#float_left We want the radio buttons and checkboxes to appear before the labels,{ so we specify that the radio buttons and check boxes should float to thefloat: left; left}Classes are assigned to the id of a control. For the radio buttons: • Go to your html document • In the <label> tag for each of the radio buttons, type the following before the closing bracket: id="radio_label“ • Do the same for the <label> tag for each of the checkboxes but type id=“check_label” instead
  40. 40. Now we will assign the float_left class to the <input> tags for each of the radiobuttons and check boxes • Go to your html document • In the <input> tag for each of the radio buttons and checkboxes, type the following before the closing bracket: id=“float_left“
  41. 41. Your form radio buttons and checkboxes should now look like this:
  42. 42. The road so far...At the moment, your webpage is looking like this:Although the form has improved greatly, the body text at the top looks awkward andthe page doesn’t look very exciting. Let’s add some graphics and align the page.
  43. 43. Step 8 adding graphics with cssWe are going to add a graphic for the header of the page and a graphic to divide theparagraph of text and the form into different sections. As these graphics are fordecorative purposes only, we’ll add them using css. I’ll be using some graphics I’vemade beforehand.Back in the css file, define another class for the header image by typing the followingbelow the #float_left class:#mushroom_banner This is creating a class called mushroom_banner.{ Define a class with the “#” symbol.background-image: It is telling the html document that whatever isurl(images/banner.png); assigned the class mushroom_banner is to bebackground-repeat: no-repeat; displayedbackground-position: center; • Using a background image retreived from a folder called images with a file calledheight: 178px; banner.png. The images folder must be in the} same location as the html file for it to work • Not to repeat the background image as we only want to display one instance of it • Position it in the center of the background • Has a height of 178px as that is the height of the graphic
  44. 44. We’re going to define another class for an image that will act as a page divider. Typingthe following below the #mushroom_banner class:#mushroom_divider This is creating a class called{ mushroom_divider. Define a class withbackground-image: the “#” symbol.url(images/mushroom_divider.png); It is telling the html document thatbackground-repeat: no-repeat; whatever is assigned the class mushroom_divider is to be displayedbackground-position: center; • Using a background image retreivedheight: 71px; from a folder called images with a file} called mushroom_divider.png. The images folder must be in the same location as the html file for it to work • Not to repeat the background image as we only want to display one instance of it • Position it in the center of the background • Has a height of 71px as that is the height of the graphic
  45. 45. We’re going to use <div> tags to insert these images. We will be assigning the#mushroom_banner and #mushroom_divider classes that we just created to the idof the <div> tag. • Go to your html file • Above the <body> tag and below the closing </head> tag, type <div id="mushroom_banner"></div> we don’t need to add anything in this div section so it is left blank • Below the last <input> tag and above the closing </body> type <div id="mushroom_divider"></div> we don’t need to add anything in this div section so it is left blank
  46. 46. We’ll also add a divider between the paragraph of text and form to make thepage easier to read. Below the paragraph and above the heading of the form,type<div id="mushroom_divider"></div>
  47. 47. Your page should now look like thisThe text that scrolls the full width of the page is pretty hard to read, if not awkward tolook at. We’ll fix that in the next step.
  48. 48. Step 9 aligning the page with a containerWe’re going to make a “container” for the page so that the contents will remain thesame size and always be centered on the page, no matter how big the screen is. Wedo this by defining a #container class. Type the following below the previous class: #container This is creating a class called container. { It is telling the html document that whatever is assigned the width: 760px; class container is to be displayed margin: 0 auto; • In a width of 760 pixels. This is so that the content will } still fit on a 800x640 screen. • Set the margins to 0 with auto align. This will automatically align the content in the center of the pageOnce again, we’re going to assign this class to the id of a <div> tag. • At the top of the page, before the <body> tag and before the <div> tag that contains the mushroom_banner, type <div id="container"> • At the bottom of the page after the closing </body> tag, close off with the </div> tag
  49. 49. Finished!Your page should now look likethis. Congratulations! You’vesuccesffully made a form that isboth accessible and attractive.The last few slides will show thatour form works in a variety ofbrowsers. This is important as wewant to conform with the fourthprinciple of the WCAG2.0 – thatthe form is robust enough to beinterpreted by various browsers.
  50. 50. Cross-browser compatibilityThis is how the page and form looks in IE8
  51. 51. This is how the page and form looks in Firefox
  52. 52. This is how the page and form looks in Chrome
  53. 53. This is how the page and form looks in Safari
  54. 54. It appears that only IE8 parses the page and form perfectly whether it is viewed at100% or 45%. The other browsers however, seem to missalign the checkboxes whenzoomed at a small scale (Firefox, Chrome and Safarai don’t have a visible zoomscale).However, I think 95% of the time people will be viewing the page at 100%magnification or more, so I don’t believe that this will be a problem.In conclusionI believe we have created a form that is accessible to users by being perceivable,operable, understandable and robust. We managed to acheive this by • using background colousr and font colours to make the content stand out • The logical placement of form controls created a coherent tab order when using keyboard keys • Using simple and descriptive language for the form control labels • The code works across 4 major browsers so it is robust enough for a wide audience. The descriptive labels also allows screen readers to give meaningful information to the visually impaired.

×