The document discusses adding forms to web pages to collect user input data. It describes the various form elements like text fields, radio buttons, text areas, checkboxes, drop-down lists and buttons that can be added using HTML tags. It provides code examples to add these different form elements to a sample application form, and explains how form data is sent to a processing program on form submission.
Tutorial Share Point Happy Birthday Workflow Slidesharegueste5cf3a6
Tutorial on creating a SharePoint workflow that sends a Happy Birthday card (as a content type) that is paritally populated using an InfoPath form. It is then emailed to the recipient of the card. The interesting part is the disabling of the InfoPath form once the workflow is completed by using a secondary data source.
Thsi is the presentation I gave at TritateLug (in NYC) that covers just about every possible thing that's new in Lotus iNotes and the Notes Client 8.5.2.
Do you have IBM Lotus Notes as a mail and collaboration platform in your company? See this whitepaper how currently used functionality in IBM Lotus Notes maps to Google Apps functionality.
Tutorial Share Point Happy Birthday Workflow Slidesharegueste5cf3a6
Tutorial on creating a SharePoint workflow that sends a Happy Birthday card (as a content type) that is paritally populated using an InfoPath form. It is then emailed to the recipient of the card. The interesting part is the disabling of the InfoPath form once the workflow is completed by using a secondary data source.
Thsi is the presentation I gave at TritateLug (in NYC) that covers just about every possible thing that's new in Lotus iNotes and the Notes Client 8.5.2.
Do you have IBM Lotus Notes as a mail and collaboration platform in your company? See this whitepaper how currently used functionality in IBM Lotus Notes maps to Google Apps functionality.
This shows the some screen shots of the MS Project database that has been implemented within the Division of Medical Countermeasure Strategy and Requirements
My slides for the IWMW 2010 conference, Sheffield, July 13th 2010. I discuss the use of WordPress in the context of my work at the University of Lincoln.
This shows the some screen shots of the MS Project database that has been implemented within the Division of Medical Countermeasure Strategy and Requirements
My slides for the IWMW 2010 conference, Sheffield, July 13th 2010. I discuss the use of WordPress in the context of my work at the University of Lincoln.
A Contribution to the Critique of the Political Economy of Academic LabourJoss Winn
Slides for the Academic Identities conference, 8-9th July, 2014.
In this paper we analyse ‘academic labour’ using categories developed by Marx in his critique of political economy. In doing so, we return to Marx to help understand the work of academics as productive living labour subsumed by the capitalist mode of production. In elaborating our own position, we are critical of two common approaches to the study of academic labour, especially as they emerge from inside analyses of 'virtual labour' or 'digital work' (Fuchs and Sevignani, 2013; Newfield, 2010; Roggero, 2011).
First, we are critical of efforts to define the nature of our work as ‘immaterial labour’ (Hardt and Negri, 2000; Peters and Bulut, 2011; Scholtz, 2013) and argue that this category is an unhelpful and unnecessary diversion from the analytical power of Marx’s social theory and method. The discourse around ‘immaterial labour’ raised by the Autonomist or Operaismo tradition is thought-provoking, but ultimately adds little to a critical theory of commodity production as the basis of capitalist social relations (Postone, 1993; Sohn-Rethel, 1978). In fact they tend to overstate network-centrism and its concomitant disconnection from the hierarchical, globalised forces of production that shape our objective social reality (Robinson, 2004).
Second, we are cautious of an approach which focuses on the digital content of academic labour (Noble, 2002; Weller, 2012) to the neglect of both its form and the organising principles under which it is subsumed (Camfield, 2007). Understandably, academics have a tendency to reify their own labour such that it becomes something that they struggle for, rather than against. However, repeatedly adopting this approach can only lead to a sense of helplessness (Postone, 2006). If, rather, we focus our critique on the form and organising principles of labour, we find that it shares the same general qualities whether it is academic or not. Thus, it is revealed as commodity-producing, with both concrete and abstract forms. By remaining focused on the form of labour, rather than its content, we can only critique it rather than reify it.
This then has implications for our understanding of the relationships between academics and virtual work, the ways in which technologies are used to organise academic labour digitally, and struggles to overcome such labour. It is our approach to conceive of ‘academic labour’ in both its concrete and abstract forms and in relation to a range of techniques and technologies. The purpose of this is to unite all workers in solidarity against labour (Krisis-Group, 1999), rather than against each other in a competitive labour market.
http://josswinn.org/2014/02/a-contribution-to-the-critique-of-the-political-economy-of-academic-labour/
As a one-stop shop, Tele-efficiency provides a unified conferencing solution; audio-video-WEBconference at a fixed price for an unlimited number of meetings up to 25 participants. It integrates with most CRM applications as well as with Outlook and Skype. The greeting is customizable for each client's company image with their logo. It is hosted on the WEB as a service or can be installed on the Intranet of a client. A 30 days free trial is offered.
Birds of a Feather? - Do Participants’ Hierarchical Positions activate Homoph...Martin Rehm
Communities of Learning (CoL) are promoted to foster interpersonal knowledge transfer among participants of organizational training initiatives. Moreover, previous studies have posited that homophily can significantly affect the communication processes among participants that exhibit differing background characteristics. However, past research has largely neglected a particular background characteristic, namely hierarchical positions, which have been suggested to constitute a major obstacle for collaborative learning processes. By providing empirical evidence from 25 CoL of a global organization, where participants from different parts of an organization’s hierarchical ladder collaboratively enhanced their knowledge and skills, the current study addresses this shortcoming and investigates whether and to what extent the applicable CoL have been subject to homophily. Based on an underlying social network analysis, our results show no signs of homophily. Instead, we rather find an “externalness”, whereby participants particularly turned to colleagues from outside their own hierarchical position. By incorporating these findings into the design and implementation, organizers of future CoL can device learning activities and facilitation strategies that can further enhance participants’ learning experience and outcomes.
2009 Minne Web Con Social Connections In Scientific ResearchTimothy Kunau
Social Media tools can create useful links between Big Science and Small Science. Examples include collaborative efforts within genomics, cancer research, space exploration, and high energy physics. I will discuss existing methods and future opportunities.
Getting Started with Iron Speed DesignerIron Speed
Getting Started with Iron Speed Designer is an entry-level course designed to make you productive fast! It covers the basics of application generation, customization, and deployment.
Take a quick tour of Iron Speed Designer, learn how to prepare your database and creating your first application. More: http://bit.ly/ebFENo
Getting the Most out of Data Page and Rich Data Definition in Portlet FactoryDavalen LLC
2010 Exceptional Web Experience Conference
Getting the Most out of Data Page and Rich Data Definition in Portlet Factory
Session Code: TECH-D04Presented By: Michael “Spoon” Witherspoon
Lead Architect – Portlet Factory
Davalen, LLC
Agenda:
Introduction of Concepts
What is Data Page?
Business Value of Page Automation
Portlet Factory application development cycle
How does Data Page work?
Data Display / Data Entry
Control over generated User Interfaces
Modifier Builders, HTML Templates, Stylesheets
Custom HTML pages
Control over Data Entry fields
Builders, Rich Data Definition
Rich Data Definition Files
Advanced uses of Data Page - Demos
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Monitoring Java Application Security with JDK Tools and JFR Events
Unit 2.11 - Forms
1. Programming and Development Tools Web Programming
UNIT
2.11
Web Programming
Forms
OBJECTIVES
This unit helps you to add Forms to your Web page to get the data from the
user.
At the end of this unit, you will be able to
Add a Form to your Web page.
Add a Text Field to a Form.
Add a Radio Button to a Form.
Add a Text Area to a Form.
Add a Check Box to a Form.
Add a Drop-Down List Box to a Form.
Add a Button to a Form.
Benchmark standard
Design Web pages with Forms to get the data from the user for
further processing.
Forms 2.11-1
2. Programming and Development Tools Web Programming
Let us Revise!
1. Define Frame.
2. Name the different types of Framesets.
3. Write the code segment to create a Web page with horizontal frames..
4. State the use of <NOFRAMES> tag.
5. Write the code segment to create a Web page with Inline Frame.
Introduction
You would have filled up a Form in many places. For example, when joining
the school you would have given the particulars about yourself such as Name,
Age and Date of Birth in a Form. Similarly, the Form in HTML is an element
used to get the data from the user. The Form is like a container having
elements called controls. The controls used to get data from the user are Text
Field, Check box, Radio button, Text area and Drop-down List box.
2.11.1 Designing the Form
A Form should be carefully designed keeping in mind certain conditions like
the questions to be asked and the controls to be used to get the data from the
user.
Identifying the questions
Before adding a form, you should know the requirement such as the data to
be received, the control to be used to receive the data and placement of the
controls in the Form element. For example, the data to be received from a
student applying for admission in a college are Name, Date of Birth, Address,
Grade obtained in his schooling, etc.
Hands-On!
The following example illustrates the use of forms in a Webpage.
Open the HTML file Form.html in Internet Explorer.
The code in Form.html file is given below:
<HTML>
<HEAD>
<TITLE> Form </TITLE>
</HEAD>
<BODY Bgcolor="LightYellow">
Forms 2.11-2
3. Programming and Development Tools Web Programming
<FORM> <FONT Size="4">
<H2 Align="Center"> ABC College of Engineering </H2>
<H2 Align="Center"> Application Form </H2>
1) Name
&nb
sp;
&nb
sp; :
<INPUT Type="Text" Name="Name" Size="60"> <BR><BR>
Adds a Text Box
2) Date of Birth
&nb
sp;
:
<INPUT Type="Text" Name="DOB"> <BR><BR>
Adds a Text Box
3) Sex
&nb
sp;
&nb
sp; :
<INPUT Type="Radio" Name="Gender">Male
<INPUT Type="Radio" Name="Gender">Female <BR><BR>
Adds a Radio Button
4) Nationality
&nb
sp;
:
<INPUT Type="Text" Name="Nation" Size="40"> <BR><BR>
Adds a Text Box
5) Parent/Guardian Name
:
<INPUT Type="Text" Name="Name" Size="60"> <BR><BR>
Adds a Text Box
6) Address <BR>
Forms 2.11-3
4. Programming and Development Tools Web Programming
&nb
sp;
&nb
sp;
<TextArea Rows="5" Cols="50"></TextArea><BR><BR>
7) Extra Curricular Activities Adds a Text Area
:
<INPUT Type ="Checkbox" Name="Extra"> Football
<INPUT Type ="Checkbox" Name="Extra"> Hockey
<INPUT Type ="Checkbox" Name="Extra"> Badminton
<INPUT Type ="Checkbox" Name="Extra"> Tennis
<INPUT Type ="Checkbox" Name="Extra"> Others <BR><BR>
Adds a Check Box
8) Grade obtained
&nb
sp; : 
;
Mathematics
<INPUT Type="Text" Name="Grade1" Size="10">
Physics
<INPUT Type="Text" Name="Grade2"
Size="10">
Chemistry <INPUT Type="Text" Name="Grade3" Size="10">
<BR><BR>
9) Course Applied for
&nb
sp; :
<SELECT> Adds a Drop-Down List Box
<OPTION Value="Mech" Name="Mech">Bachelor of Mechanical
Engineering
<OPTION Value="Civil" Name="Civil">Bachelor of Civil
Engineering
<OPTION Value="Electrical" Name="Electrical">Bachelor of
Electrical Engineering
Forms 2.11-4
5. Programming and Development Tools Web Programming
<OPTION Value="Electronics" Name="Electronics">Bachelor
of Electronics Engineering
</SELECT>
&nb
sp;
<BUTTON Type="Submit">Submit</BUTTON>
<BUTTON Type="Reset">Reset</BUTTON> Adds a Button
</FONT>
</FORM>
</BODY>
</HTML>
Code Sample 2.11.1
The Web page shown in Figure 2.11.1 is displayed in the browser window.
Text Box
Radio Button
Text Area
Check Box
Drop-Down List Box
Button
Figure 2.11.1: A Web Page Containing a Form
Forms 2.11-5
6. Programming and Development Tools Web Programming
The Web page shown in Figure 2.11.1 contains an application form displayed
in it. When the Submit button is clicked after entering the values in the
controls, the entered data are passed to a program that takes care of further
processing. In this unit you will be learning to add Forms and controls to your
Web page.
A Form is added to a Web page using the <FORM> tag. The <FORM> tag has
two important attributes. They are Action and Method.
The URL of the program file that processes the data entered by the
user is assigned to the Action attribute.
The Method attribute can have either Get or Post as its value. Get is the
default value. If Method = “Get”, the names and values of the data
entered are send to the program along with the URL specified in the
Action attribute. If Method = “Post”, the names and values of the data
entered are send to the program as separate entity.
Self-Check Exercise 2.11.1
Say true or false:
1. <FORM> tag is used to add a form to a Web page.
2. Action is the only attribute used with <FORM> tag.
3. The two values of the Method attribute are Get and Post.
Activity 2.11.1
1. Draw a form to enter your personal details (Bio-Data).
2.11.2 Working with Form Elements
The different controls that can be added to a Form are Text Fields, Radio
buttons, Text area, Check box, Drop-down List box and Push buttons. Most of these
controls can be added to the form using the <INPUT> tag along with Type
attribute.
The Text Field
The Text Field is a control that is used to get a text from the user and to
display a text to the user. It can be added to a form using the <INPUT> tag
along with the Type attribute.
The following are the codes used to display the Text Fields shown in Figure
2.11.1.
<INPUT Type="Text" Name="Name" Size="60"> <BR><BR>
<INPUT Type="Text" Name="DOB"> <BR><BR>
<INPUT Type="Text" Name="Nation" Size="40">
<INPUT Type="Text" Name="P_Name" Size="60">
Forms 2.11-6
7. Programming and Development Tools Web Programming
<INPUT Type="Text" Name="Grade1" Size="10">
<INPUT Type="Text" Name="Grade2" Size="10">
<INPUT Type="Text" Name="Grade3" Size="10">
The attribute Type = “Text” instructs the browser to display a Text Field. The
attribute Name = “Name” assigns a name to the Text Field for future use. The
attribute Size = “60” specifies the width of the Text Field. The attributes of the
<Input> tag related to the Text Field are given in Table 2.11.1.
Attribute Value Use
Type Text Displays a Text Field
Password Displays a Text Field that
is used to enter secret
information. The text in
this field appears as
asterisks (*).
Name Any Text The value given will be
assigned to the Name
attribute that can be used
for future reference.
Size Any Integer value Defines the width of the
Text Field.
Maxlength Any Integer value Defines the maximum
number of characters that
can be typed in a Text
Field.
Readonly --- Can read from the Text
Field but you cannot write
in the Text Field.
Value Any String value The value given in Value
attribute will be displayed
inside the Textbox by
default.
Disabled --- Makes the control visible
but cannot be used.
Table 2.11.1: Attributes of <INPUT> tag related to Text Field
The Radio Button
The Radio Button is a control that is used to display an option to the user. If the
option is applicable to the user, he can select the option by clicking it. Two or
more Radio Buttons can be grouped together. The user can select only one
option in that group. Radio Button can be added to a form using the <INPUT>
tag along with the Type attribute.
Forms 2.11-7
8. Programming and Development Tools Web Programming
The following are the codes used to display the Radio Buttons shown in
Figure 2.11.1.
<INPUT Type="Radio" Name="Gender" Value=”M”>Male
<INPUT Type="Radio" Name="Gender" Value=”F”>Female
The attribute Type = “Radio” instructs the browser to display a Radio Button.
The attribute Name = “Gender” assigns a name to the Radio Button for future
use. The two Radio Buttons are grouped together by giving the same value
for the Name attribute. The value given in Value attribute will be send to the
URL specified in the Form’s Action attribute, if the button is selected. The
attributes of the <Input> tag related to the Radio Buttons are given in Table
2.11.2.
Attribute Value Use
Type Radio Displays a Radio Button.
Name Any String value The value given will be
assigned to the Name
attribute that can be used
for future reference.
Checked --- Indicates that the option
remains selected when
the form is opened.
Disabled --- Makes the control visible
but cannot be used.
Value Any String value The value given in Value
attribute will be send to
the URL specified in the
Form’s Action attribute, if
the button is selected.
Table 2.11.2: Attributes of <INPUT> tag related to Radio Buttons
The Text Area
The Text Area is a control that is used to get a text from the user and to display
a text to the user. The difference between a Text Field and a Text Area is that
a Text Field can accept or display only one line of text. But, a Text Area can
accept or display more than one line of text. It can be added to a form using
the <TEXTAREA> tag and Rows and Cols attributes.
The following is the code used to display the Text Area shown in Figure
2.11.1.
<TextArea Rows="5" Cols="50"></TextArea>
The attributes Rows = “5” and Cols=”50” instructs the browser to display a
Text Area of 5 rows and 50 columns. The attributes of the <TEXTAREA> tag
are given in Table 2.11.3.
Forms 2.11-8
9. Programming and Development Tools Web Programming
Attribute Value Use
Rows Any Integer value Specifies the number of
rows visible in the Text
Area
Cols Any Integer value Specifies the number of
columns visible in the
Text Area
Name Any String value The value given will be
assigned to the Name
attribute that can be used
for future reference.
Readonly --- Can read from the Text
Area but you cannot write
in the Text Area.
Disabled --- Makes the control visible
but cannot be used to
modify the text.
Table 2.11.3: Attributes of <TEXTAREA> tag
Lab Exercise
Lab Exercise 1: Open D11_1.html in Internet Explorer. The following code will be present in
D11_1.html.
<HTML>
<HEAD>
<TITLE>
STUDENT INFORAMTIONS
</TITLE>
</HEAD>
<BODY>
<H1 Align =CENTER> STUDENT INFORMATIONS </H1>
<BR>
<FORM>
NAME:
<INPUT Type ="TEXT" NAME="TXT_NAME" Size=5
Maxlength=5 ><BR><BR>
PASSWORD:
<INPUT Type ="PASSWORD" Name = "TXT_NAME"
Size = 5 Maxlength=5><BR><BR>
ADDRESS: <TEXTAREA Name = "TXT_ADDRESS" Rows=4
Cols=30></TEXTAREA><BR><BR>
PHONE : <INPUT Type = "TEXT" Name="TXT_PHONE"
Forms 2.11-9
10. Programming and Development Tools Web Programming
Size=8><BR><BR>
</FORM>
</BODY>
</HTML>
1. Name attributes which are used in input tag.
2. Identify the attribute which is used to specify the input type.
3. Identify the attribute which is used to set the length of the text box.
4. Observe the difference between size and maxlength.
5. Identify the tag which is allows to enter the multiline text entry.
6. Name the attribute which are used in textarea.
Lab Exercise 2: Open D11_1.html in Internet Explorer.
1. View the source code in the Notepad.
2. Increase the size of the Name textbox to 10.
3. Insert value into Name textbox and observe the difference.
4. Change the Password textbox type to password.
5. Increase the no of columns of the textarea to 40.
6. Decrease the no of row of the textarea to 3.
Self-Check Exercise 2.11.2
Name the tag and attribute to be used for the following:
1. To add a Text Field whose width is 9 characters and maximum number of characters that
can be entered is 25.
2. To add 2 Radio Buttons of same group displaying Yes and No. The values of the 2 Radio
Buttons should be “Y” and “N”.
3. To add a Text Area of 6 rows and 50 columns.
The Check Box
The Check Box is a control that is used to display an option to the user. If the
option is applicable to the user, he can select the option by clicking it. Two or
more Check Boxes can be grouped together. The user can select any number
of Check Boxes in that group. Check Box can be added to a form using the
<INPUT> tag along with the Type attribute.
The following are the codes used to display the Radio Buttons shown in
Figure 2.11.1.
<INPUT Type ="Checkbox" Name="Extra"> Football
<INPUT Type ="Checkbox" Name="Extra"> Hockey
<INPUT Type ="Checkbox" Name="Extra"> Badminton
<INPUT Type ="Checkbox" Name="Extra"> Tennis
<INPUT Type ="Checkbox" Name="Extra"> Others
The attribute Type = “Checkbox” instructs the browser to display a Check Box.
The attribute Name = “Extra” assigns a name to the Check Box for future use.
Forms 2.11-10
11. Programming and Development Tools Web Programming
The five Check Boxes are grouped together by giving the same value for the
Name attribute. The attributes of the <Input> tag related to the Check Boxes
are given in Table 2.11.4.
Attribute Value Use
Type Checkbox Displays a Check Box.
Name Any String value The value given will be
assigned to the Name
attribute that can be used
for future reference..
Checked --- Indicates that the option
remains selected when
the form is opened.
Disabled --- Makes the control visible
but cannot be used.
Value Any Text The value given in Value
attribute will be send to
the URL specified in the
Form’s Action attribute, if
the button is selected.
Table 2.11.4: Attributes of <INPUT> tag related to Check Boxes
Note
The difference between a Radio Button and a Check Box is that only one option can be
selected in a group of Radio Buttons whereas more than one option can be selected in a group
of Check Boxes.
The Drop-Down List Box
The Drop-Down List Box is a control that is used to display a list of items in a
rectangular box from which the user can select an option. If the option is
applicable to the user, he can select the option by clicking it. Drop-Down List
Box can be added to a form using the <SELECT> tag along with <OPTION>
tag.
The following are the codes used to display the Drop-Down List Box shown in
Figure 2.11.1.
<SELECT>
<OPTION Value="Mech" Name="Mech">Bachelor of
Mechanical Engineering
<OPTION Value="Civil" Name="Civil">Bachelor of Civil
Engineering
<OPTION Value="Electrical" Name="Electrical">Bachelor
of Electrical Engineering
Forms 2.11-11
12. Programming and Development Tools Web Programming
<OPTION Value="Electronics"
Name="Electronics">Bachelor of Electronics
Engineering
</SELECT>
The <SELECT> tag instructs the browser to display a Drop-Down List Box.
The <OPTION> tag is used to display the items inside the Drop-Down List
Box. In the above example, the four items are grouped together in a Drop-
Down List Box by giving the same value for the Name attribute of the
<OPTION> tag. The item to be displayed in the Drop-Down List Box is
assigned to the Value attribute of the <OPTION> tag. The attributes of the
<SELECT> tag are given in Table 2.11.5.
Attribute Value Use
Name Any String value The value given will be
assigned to the Name
attribute that can be used
for future reference.
Size Any Integer value Specifies the number of
items visible in the Drop-
Down List Box.
Disabled --- Makes the control visible
but cannot be used.
Multiple --- Specifies that more than
one item can be selected.
Table 2.11.5: Attributes of <SELECT> tag
The attributes of the <OPTION> tag are given in Table 2.11.6.
Attribute Value Use
Selected --- Specifies that this option
appears as the selected
option by default
Value Any Text The value given in Value
attribute will be send to
the URL specified in the
Form’s Action attribute, if
the option is selected.
Disabled --- Makes the option visible
but cannot be selected
Table 2.11.6: Attributes of <OPTION> tag
The Button
The Button is a control that is used to display a push button. The function of
the Push Button varies depending upon the type of the button. The button can
Forms 2.11-12
13. Programming and Development Tools Web Programming
be of 3 types. They are Submit button, Reset button and a Push button. The
Submit button sends the values entered by the user to the URL specified in
the Form’s Action attribute. The Reset button sets the values of all the
controls to their initial values. For the normal buttons, commands should be
given for the action to be taken if it is clicked. Buttons can be added to a form
using the <BUTTON> tag along with the Type attribute.
The following are the codes used to display the buttons shown in Figure
2.11.1.
<BUTTON Type="Submit">Submit</BUTTON>
<BUTTON Type="Reset">Reset</BUTTON>
The attribute Type = “Submit” instructs the browser to send the values entered
by the user to the URL specified in the Form’s Action attribute. The attribute
Type = “Reset” instructs the browser to set the values of all the controls to
their initial values. The attributes of the <BUTTON> tag are given in Table
2.11.7.
Attribute Value Use
Type Submit Instructs the browser to
send the values entered
by the user to the URL
specified in the Form’s
Action attribute.
Reset Instructs the browser to
set the values of all the
controls to their initial
values.
Button Instructs the browser to
execute the commands
given for the action to be
taken if it is clicked.
Name Any Text The value given will be
assigned to the Name
attribute that can be used
for future reference.
Disabled --- Makes the control visible
but cannot be used.
Value Any Text Specifies the initial value
to the button.
Table 2.11.7: Attributes of <BUTTON> tag
Lab Exercise
Lab Exercise 3: Open D11_2.html in Internet Explorer. The following code will be present in
D11_2.html.
Forms 2.11-13
14. Programming and Development Tools Web Programming
<HTML>
<HEAD>
<TITLE>
HOBBIES
</TITLE>
</HEAD>
<BODY>
<H3> CHOOSE YOUR HOBBIES </H3>
<FORM>
<INPUT Type ="CHECKBOX" Name = "CHK_HOBBY"
Value="SONGS" > Hearing Songs
<INPUT Type ="CHECKBOX" Name = "CHK_HOBBY"
Value="GAMES" >Playing Games
<INPUT Type ="CHECKBOX" Name = "CHK_HOBBY"
Value="BOOKS" > Reading Books
<INPUT Type ="CHECKBOX" Name = "CHK_HOBBY"
Value="TRAVELLING"> Travelling <BR> <BR> <BR>
<H3> CHOOSE YOUR PET </H3>
<INPUT Type="RADIO" Name="PET" Value ="DOG"
Checked> Dog
<INPUT Type="RADIO” Name="PET" Value ="CAT"
Checked> Cat
<INPUT Type="RADIO" Name="PET" Value ="DOVE"
Checked> Dove <BR><BR>
<H3> CHOOSE YOUR FAVOURATE GAME </H3>
<SELECT Name ="FOOD" Size=3>
<OPTION > FOOTBALL
<OPTION> HOCKEY
<OPTION> TABLE TENNIS
<OPTION> TENNIS
<OPTION> SWIMMING
</SELECT>
<BR><BR>
<INPUT Type="SUBMIT" Value ="SUBMIT">
<INPUT Type="RESET" Value ="RESET"><BR>
</FORM>
</BODY>
</HTML>
1. Locate the input type which is used to choose more than one option.
2. Name the input type which is used to choose single option.
3. Identify the tag which is used to display the drop-down menu options.
4. Name attributes which are used in <SELECT>.
Forms 2.11-14
15. Programming and Development Tools Web Programming
Lab Exercise 4: Write a HTML code to display the output as given in the following Figure
2.11.2 using <FORM> tag.
Figure 2.11.2: Student Mark Sheet Form
Forms 2.11-15
16. Programming and Development Tools Web Programming
Lab Exercise 5: Write a HTML code to display the output as given in the following Figure
2.11.3 using <FORM> tag.
Figure 2.11.3: Student Informations Form
Forms 2.11-16
17. Programming and Development Tools Web Programming
Lab Exercise 6: Write a HTML code to display the output as given in the following Figure
2.11.4 using <FORM> tag.
Figure 2.11.4: Master Card Application From
Forms 2.11-17
18. Programming and Development Tools Web Programming
Lab Exercise 7: Write a HTML code to display the output as given in the following Figure
2.11.5 using <FORM> tag.
Figure 2.11.5: Online Booking
Forms 2.11-18
19. Programming and Development Tools Web Programming
Lab Exercise 8: Write a HTML code to display the output as given in the following Figure
2.11.6 using <FORM> and <TABLE> tag.
Figure 2.11.6: Employment Application Form
Forms 2.11-19
20. Programming and Development Tools Web Programming
Lab Exercise 9: Write a HTML code to display the output as given in the following Figure
2.11.7 using <FORM> and <FRAME> tag.
Figure 2.11.7: School Application Form
Self-Check Exercise 2.11.3
Rewrite the following sentences correctly, if they are wrong:
1. The Checked attribute of the <INPUT> tag indicates that the checkbox option remains
selected when the form is opened.
2. The Multiple attribute of the <SELECT> tag specifies that more than one item can be
selected in a Drop-Down List Box.
3. Buttons can be added to a form using the <BUTTON> tag along with the Type attribute.
Activity 2.11.2
1. Create a Web page that displays a form to enter user’s personal details
(Bio-Data).
2. Save the HTML file as Activity1.html.
Forms 2.11-20
21. Programming and Development Tools Web Programming
Activity 2.11.3
1. Create a Web page that explains the Form as shown in Figure 2.11.8.
2. Save the HTML file as Activity2.html.
3. The hyperlink Adding Controls at the bottom of the page should be linked to
Add_Controls.html.
Figure 2.11.8: A Web page Explaining the Form
Activity 2.11.4
1. Create a Web page that explains the controls as shown in Figure 2.11.3.
2. Save the HTML file as Add_Controls.html.
3. The content of the same page is continued in Figure 2.11.9.
Forms 2.11-21
22. Programming and Development Tools Web Programming
Figure 2.11.9: A Web page Explaining the Controls
Figure 2.11.10: Continuation of Web page shown in Figure 2.11.9
Forms 2.11-22
23. Programming and Development Tools Web Programming
Technical Terminologies
Form - A Form in HTML is an element used to get
the data from the user.
Text Field - The Text Field is a control that is used to get
a text from the user and to display a text to
the user.
Radio Button - The Radio Button is a control that is used to
display an option to the user.
Text Area - The Text Area is a control that is used to get a
text from the user and to display a text to the
user.
Check Box - The Check Box is a control that is used to
display an option to the user.
Drop-Down List Box - The Drop-Down List Box is a control that is
used to display a list of items in a rectangular
box from which the user can select an option.
Button - The Button is a control that is used to display
a push button.
Summary
In this unit, you learnt that
The Form is like a container containing elements called controls.
Text Field, Check box, Radio button, Text area and Drop-down List box
are some of the controls used to get data from the user.
The <FORM> tag has two important attributes namely, Action and
Method.
Text Field, Radio Button and Check Box can be added to a form
using the <INPUT> tag along with the Type attribute.
Text Area can be added to a form using the <TEXTAREA> tag
and Rows and Cols attributes.
Drop-Down List Box can be added to a form using the <SELECT>
tag along with <OPTION> tag.
Buttons can be added to a form using the <BUTTON> tag along
with the Type attribute.
Assignment
I. Answer the following questions:
1. Give any 3 general examples of forms.
2. Name any 5 controls that can be added to a Form.
Forms 2.11-23
24. Programming and Development Tools Web Programming
3. Mention the use of Action and Method attributes of <FORM> tag.
4. Mention the use of any 3 common attributes of Radio Button and Check
Box controls.
5. Name the types of Buttons and mention their functions.
.
Forms 2.11-24
25. Programming and Development Tools Web Programming
Criterion Referenced Test
Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.
Name:
Subject: Programming and Development Tools
Unit: Forms
Please tick [ √ ] the appropriate box when you have achieved the respective
competency.
Date Forms
C1 C2
Comment
Competency codes:
C1 = Draw a form with Text Field, Radio Button, Text Area, Check Box, Drop-
Down List Box and Button for a candidate to apply for a vacancy in a
company.
C2 = Create a Web page with Text Field, Radio Button, Text Area, Check
Box, Drop-Down List Box and Button for a candidate to apply for a
vacancy in a company.
Forms 2.11-25