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.

1. Prepared By: Er. Nawaraj
Bhandari
DESIGNING AND DEVELOPING A
WEBSITE
Topic 7:
HTML FORMS

2. Learning Outcomes

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 :

8. Form Controls

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.

25. CSS and Forms

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.

28. Form Layout

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?