SlideShare a Scribd company logo

Html forms

•Download as PPTX, PDF•
•
E
Er. Nawaraj Bhandari

This document discusses HTML forms, including: - HTML forms allow users to enter and submit data through text boxes, buttons, checkboxes, radio buttons, and other controls. - Forms are defined using <form> tags which specify an action and method for submitting data. - Common form controls include text fields, passwords, checkboxes, radio buttons, buttons, textareas, and select menus. - Accessible forms should use <label> tags, <fieldset> and <legend> elements to organize groups of controls. - CSS can style forms and individual controls using properties like :focus and outline. - Form layout can be controlled through <br>, tables, or CSS float and clear properties.

Related slideshows

Html forms
Html formsHtml forms
Html forms
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
Javascript
JavascriptJavascript
Javascript
 
1 of 35
Prepared By: Er. Nawaraj Bhandari DESIGNING AND DEVELOPING A WEBSITE Topic 7: HTML FORMS
Learning Outcomes
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
The Structure of Forms  All HTML forms are constructed using the <form> element.  Identifies the start and end of an HTML form
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>.
Form Controls We can create button using <input> tag or <button> tag. What is the difference?
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 :
Form Controls
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.
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.
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.
Form Controls – Radio Buttons
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.
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
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.
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.
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.
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.
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.
Accessible Forms – The <fieldset> and <legend> Elements
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.
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
Accessible Forms  We have the same disadvantages discussed previously.  Browser support  How does the user know the access key?  Tab order breaking conventional flow
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.
CSS and Forms
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.
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.
Form Layout
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
Form Layout – Using <br/> Elements  <br/> elements can be used to place different elements on different lines.  Limited control  Adding presentation information through HTML!
Form Layout – Using Tables  A simple table can be used to control form layout
Form Layout – Using Tables
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.
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.
Topic 7 – HTML Forms Any Questions?

More Related Content

Html forms

  • 1. Prepared By: Er. Nawaraj Bhandari DESIGNING AND DEVELOPING A WEBSITE Topic 7: HTML FORMS
  • 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. The Structure of Forms  All HTML forms are constructed using the <form> element.  Identifies the start and end of an HTML form
  • 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. Form Controls We can create button using <input> tag or <button> tag. What is the difference?
  • 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 :
  • 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. 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. 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. Form Controls – Radio Buttons
  • 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. 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. 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. 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. 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. 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. 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. Accessible Forms – The <fieldset> and <legend> Elements
  • 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. 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. 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. 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.
  • 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. 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.
  • 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. 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. Form Layout – Using Tables  A simple table can be used to control form layout
  • 32. Form Layout – Using Tables
  • 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. 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. Topic 7 – HTML Forms Any Questions?