topic 07
DESCRIPTION
TRANSCRIPT
![Page 1: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/1.jpg)
Topic 7 – HTML Forms
Er. Pradip Kharbuja
![Page 2: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/2.jpg)
Learning Outcomes
![Page 3: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/3.jpg)
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
![Page 4: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/4.jpg)
The Structure of Forms
▪ All HTML forms are constructed using the <form> element.– Identifies the start and end of an HTML form
![Page 5: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/5.jpg)
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>.
![Page 6: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/6.jpg)
Form Controls
We can create button using <input> tag or <button> tag. What is the difference?
![Page 7: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/7.jpg)
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 :
![Page 8: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/8.jpg)
Form Controls
![Page 9: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/9.jpg)
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.
![Page 10: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/10.jpg)
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.
![Page 11: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/11.jpg)
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.
![Page 12: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/12.jpg)
Form Controls – Radio Buttons
![Page 13: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/13.jpg)
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.
![Page 14: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/14.jpg)
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
![Page 15: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/15.jpg)
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.
![Page 16: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/16.jpg)
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.
![Page 17: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/17.jpg)
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.
![Page 18: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/18.jpg)
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.
![Page 19: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/19.jpg)
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.
![Page 20: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/20.jpg)
Accessible Forms – The <fieldset> and <legend> Elements
![Page 21: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/21.jpg)
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.
![Page 22: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/22.jpg)
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
![Page 23: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/23.jpg)
Accessible Forms
▪ We have the same disadvantages discussed previously.
– Browser support
– How does the user know the access key?
– Tab order breaking conventional flow
![Page 24: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/24.jpg)
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.
![Page 25: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/25.jpg)
CSS and Forms
![Page 26: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/26.jpg)
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.
![Page 27: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/27.jpg)
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.
![Page 28: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/28.jpg)
Form Layout
![Page 29: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/29.jpg)
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
![Page 30: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/30.jpg)
Form Layout – Using <br/> Elements
▪ <br/> elements can be used to place different elements on different lines.
– Limited control
– Adding presentation information through HTML!
![Page 31: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/31.jpg)
Form Layout – Using Tables
▪ A simple table can be used to control form layout
![Page 32: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/32.jpg)
Form Layout – Using Tables
![Page 33: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/33.jpg)
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.
![Page 34: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/34.jpg)
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.
![Page 35: Topic 07](https://reader034.vdocument.in/reader034/viewer/2022051412/54bb63ad4a7959a71c8b4589/html5/thumbnails/35.jpg)
End of Topic -07
Topic 7 – HTML Forms