Scribd
Upload
98 views39 pages

Understanding Web Form Elements and Controls

Forms are user interfaces that allow users to input data. They are commonly used to submit data to web servers or trigger client-side scripts. Form controls like text fields, checkboxes, radio buttons, menus, and buttons allow users to enter text, select options, and submit the form. The form data is sent to the server or used by client-side scripts upon submission of the form.

Uploaded by

ananthmt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
98 views39 pages

Understanding Web Form Elements and Controls

Forms are user interfaces that allow users to input data. They are commonly used to submit data to web servers or trigger client-side scripts. Form controls like text fields, checkboxes, radio buttons, menus, and buttons allow users to enter text, select options, and submit the form. The form data is sent to the server or used by client-side scripts upon submission of the form.

Uploaded by

ananthmt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd

Forms

Forms are user interfaces for data input


Main application: to provide user input for
programs and databases located on a web server
local (client-side) scripts associated with the form

Server-based programs may return data to the


client as a web page
Client-side scripts can read input data
To validate the data, prior to sending to server
To use in local processing which may output web page
content that is displayed on the client

Forms

Forms
Each form is content of a form element

Forms
action specifies URL where form data is sent in an HTTP request

Forms
HTTP request method (lower case)

Forms
div is the block element analog of span (no-style block element)

Forms
Form control elements must be content of a block element

Forms

Text field control (form user-interface element)

Forms

Text field used for one-line inputs

Forms

Forms

Name associated with this controls data in HTTP request

Forms

Width (number of characters) of text field

Forms

input is an empty element

Forms

Use label to associate text with a control

Forms

Form controls are inline elements

Forms

textarea control used for multi-line input

Forms

Height and width in characters

Forms

textarea is not an empty element; any content is displayed

Forms

Forms
Checkbox control

Forms
Value sent in HTTP request if box is checked

Forms
Controls can share a common name

Jackson, Web Technologies: AComputer Science Perspective, 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0

Forms

Submit button: form data sent to action URL if button is clicked

Forms

Forms
Form data (in GET request)

Forms

Displayed on button and sent to server if button clicked

Forms

Radio buttons: at most


one can be selected at
a time.

Forms
Radio button control

Forms

All radio buttons with the same name form a button set

Forms

Only one button of a set can be selected at a time

Forms

This button is initially selected


(checked attribute also applies
to check boxes)

Forms

Boolean attribute: default false,


set true by specifying name as
value

Forms

Represents string: >50

Forms

Menu

Forms
Menu control; name given once

Forms

Each menu item has its own value

Forms

Item initially displayed in menu


control

Forms

Other form controls:

Fieldset (grouping)
Password
Clickable image
Non-submit buttons
Hidden (embed data)
File upload
Hierarchical menus

Forms

You might also like