Scribd
Upload
3 views

html_forms

This document covers the fundamentals of HTML forms, including their structure, various form controls (like text fields, checkboxes, and buttons), and accessibility features. It emphasizes the importance of attributes such as action, method, and the use of <label>, <fieldset>, and <legend> elements for better usability. Additionally, it discusses styling forms with CSS and considerations for mobile device compatibility.

Uploaded by

Borra ram kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

html_forms

This document covers the fundamentals of HTML forms, including their structure, various form controls (like text fields, checkboxes, and buttons), and accessibility features. It emphasizes the importance of attributes such as action, method, and the use of <label>, <fieldset>, and <legend> elements for better usability. Additionally, it discusses styling forms with CSS and considerations for mobile device compatibility.

Uploaded by

Borra ram kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

Module 2

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.
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.
 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
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.

You might also like