Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Topic 07


Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

Topic 07

  1. 1. Topic 7 – HTML Forms Er. Pradip Kharbuja
  2. 2. Learning Outcomes
  3. 3. HTML Forms ▪ HTML Forms are a common and important part of the web. – Registration / login systems – Search facilities ▪ HTML can be used to build forms. – Define the text boxes, buttons, checkbox, radio buttons, etc. ▪ HTML has no power to process the data entered into a Form. – The browser passes the data to scripts on the web server. – e.g. PHP, ASP.NET, Ruby
  4. 4. The Structure of Forms ▪ All HTML forms are constructed using the <form> element. – Identifies the start and end of an HTML form
  5. 5. The Structure of Forms ▪ The action attribute specifies the URL of the script to which the data will be sent. – It is a required attribute ▪ The method attribute specifies how the data will be sent. – The values can be get or post. ▪ We can nest most elements inside the <form> element, e.g. <p>,<div>, <table>.
  6. 6. Form Controls We can create button using <input> tag or <button> tag. What is the difference?
  7. 7. Form Controls ▪ Form controls are the elements like the text boxes and buttons used to gather data from the user. ▪ Most form controls are created using the <input/> element. – Empty element – The type attribute is used to specify the type of control. – The name and id attribute is used by the script that receives the data. ▪ Syntax :
  8. 8. Form Controls
  9. 9. Form Controls – Text Fields ▪ A value of ‘text’ for the type attribute specifies a text field. ▪ The size attribute is used to define the visible size of the text field. ▪ The maxlength attribute is used to limit the number of characters that can be entered. ▪ The value attribute can be used to specify a default value for the text field.
  10. 10. Form Controls - Password ▪ A value of ‘password’ for the type attribute creates a password field. ▪ The characters entered will be replaced with asterisk or bullet characters.
  11. 11. Form Controls – Checkboxes ▪ Checkboxes allow users to select multiple options from a list. ▪ A value of checkbox for the type element specifies a checkbox. ▪ The checked attribute can be used to make the box checked when the page loads. ▪ The value attribute is used to associate a piece of data with the checkbox.
  12. 12. Form Controls – Radio Buttons
  13. 13. Form Controls – Radio Buttons ▪ Radio buttons allow users to select a single option from a group. ▪ Selecting one deselects all the others ▪ To work together, all the radio buttons must have the same value for the name attribute. ▪ The checked attribute allows the radio button to be selected.
  14. 14. Form Controls – Buttons ▪ A value of submit for the type element specifies a submit button. ▪ The submit button submits the form and sends the contents of to the URL specified in the action attribute. ▪ The value attribute can be used to change the default text on the button
  15. 15. Form Controls – Buttons ▪ A value of reset for the type element specifies a reset button. ▪ The reset button sets all controls back to their default values. ▪ Reset buttons are rarely used. ▪ A value of button for the type element specifies a normal button. ▪ The normal button does nothing by default.We put JavaScript code in such button.
  16. 16. Form Controls – Multiline Text Field ▪ The <textarea> element is used to create a multiline text field. ▪ The cols and rows attributes specify the size of the text area. ▪ A default value can be added as content in the <textarea> element.
  17. 17. Form Controls – Select Menus ▪ The <select> element is structured like a list – The <option> element defines each item in the list. – Again a value can be associated with the item.
  18. 18. Form Controls – Select Menus ▪ By default, the select menu works as a drop down list. – We can add a size attribute to make it a scrolling menu.
  19. 19. Accessible Forms – The <label> Element ▪ The <label> element is used to associate a text description with a form control. – The form control needs an id attribute. – The for attribute of the label element links the label to the control. ▪ Clicking on the label automatically places focus on the form element. ▪ All forms should use label elements.
  20. 20. Accessible Forms – The <fieldset> and <legend> Elements
  21. 21. Accessible Forms – The <fieldset> and <legend> Elements ▪ The <fieldset> element is used to group related form controls together. ▪ The <legend> element is used to give this group a title. ▪ Browsers provide default styling for the <fieldset> element.
  22. 22. Accessible Forms – The <fieldset> and <legend> Elements ▪ Browsers render the <fieldset> as a box containing the form controls that are part of the <fieldset>. ▪ Screen readers will read the <legend> content before the each <label> element. ▪ E.g. Contact Details Email
  23. 23. Accessible Forms ▪ We have the same disadvantages discussed previously. – Browser support – How does the user know the access key? – Tab order breaking conventional flow
  24. 24. Form Controls and Valid Documents ▪ The <label>, <input/>, <textarea> and <select> elements are all inline elements. – Need to be nested inside a block level element for the page to be valid. ▪ Form controls must be nested inside a <form> element.
  25. 25. CSS and Forms
  26. 26. CSS and Forms ▪ The :focus pseudo class specifies a style for when the form control is being focused. ▪ The outline property is commonly used to highlight the form control.
  27. 27. CSS and Form – Attribute Selectors ▪ We can use an attribute selector to target specific types of form control. ▪ In this example, only form controls with a type attribute of text will be affected by the rule.
  28. 28. Form Layout
  29. 29. Form Layout ▪ By default, browsers apply little styling to form. ▪ Possible approaches 1. Use <br/> elements 2. Use an HTML table 3. Use the CSS property
  30. 30. Form Layout – Using <br/> Elements ▪ <br/> elements can be used to place different elements on different lines. – Limited control – Adding presentation information through HTML!
  31. 31. Form Layout – Using Tables ▪ A simple table can be used to control form layout
  32. 32. Form Layout – Using Tables
  33. 33. Form Layout – Using CSS ▪ We can use the float property to make form controls wrap onto the same lines. ▪ The clear property makes the labels start new lines.
  34. 34. Forms and Mobile Devices ▪ ‘free text’ input is difficult for many mobile devices. – Mobile devices often have input limitations. – Use controls that do not require the user to type. ▪ Tab order can help users select controls.
  35. 35. End of Topic -07 Topic 7 – HTML Forms