Topic 07

Topic 7 – HTML Forms

Er. Pradip Kharbuja

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.

End of Topic -07

Topic 7 – HTML Forms