Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Again GUI Items Originally HTML 4 Copyright © 2008-2017 Curt Hill.

Published byBertram Powers Modified over 7 years ago

Similar presentations

Presentation on theme: "HTML Again GUI Items Originally HTML 4 Copyright © 2008-2017 Curt Hill."— Presentation transcript:

1 HTML Again GUI Items Originally HTML 4 Copyright © Curt Hill

2 GUI items Recall that the original idea of a HTML was to produce technical papers Hyperlinks were used to make references easy to access Very little user input, other than clicking things This has some obvious disadvantages for e-commerce The GUI items provide this input ability Copyright © Curt Hill

3 Normally GUI items are most frequently found in the form tag
They may also be used outside of a form or no form at all This is the mechanism for sending user supplied input to the server Essential for e-commerce This will make for convenient script input Copyright © Curt Hill

4 GUI Items Also known as controls
Most of the ones will use the input tag Edits Buttons Check boxes Radio buttons Other tags will also be considered Copyright © Curt Hill

5 Inputs An input item uses the input tag
The tag should specify some items: The type of input object is required The name of the input object is sometimes required The id is used so it may be used in a script The value gives an initial value and is optional for some types and required for others The attributes available with the input tag depend on type Copyright © Curt Hill

6 Text Input This creates a single line edit box
A slot where the user may enter a value The type attribute is set to Text The id is used by JavaScript to access The value is used to give an initial or default value Others are possible as well Copyright © Curt Hill

7 Example The following HTML: <BODY> <H1><CENTER>JavaScript Test Page</CENTER></H1> <P>Here is the area.<P><HR> <P>Here is a raw input <input type=text id=in value=5> <HR> <P>Thats it. </BODY> Copyright © Curt Hill

8 Shows As Copyright © Curt Hill

9 Other Attributes size – gives the required width in characters
maxlength – gives the maximum that can be entered If the entry exceeds size but not maxlength, scrolling will occur Copyright © Curt Hill

10 Button The type is set to Button
The value supplies the button face caption The onclick identifies what to do when clicked Often a JavaScript function with parm Example: <input type=button value=“Yes" onclick="b1c('in2')"> Copyright © Curt Hill

11 Commentary Example: <input type=button value=“Yes" onclick="b1c('in2')"> b1c is the function and it is passed the string In this case ‘in2’ identifies an input area Notice the two different quotes Any constant data (or none) may be the parameter of the function Copyright © Curt Hill

12 Event Handlers There are a variety of event handlers
Almost every item has the onclick Executed when the item receives a click Others include: onblur Loss of focus onchange ondblclick Among others Copyright © Curt Hill

13 Event Handlers The event handler is a piece of script
Usually enclosed in quotes Usually a function call The parameters are also literally supplied May be any statements separated by commas Copyright © Curt Hill

14 Examples Notice the change in quotes: onclick="b1c('in3')“
The trailing semicolon usually seen in JavaScript is not needed here Could be one or more other statements onclick="count++; alert('b2 was clicked '+count+' times')“ count needs to have been initialized previously Copyright © Curt Hill

15 Identifying Controls The event handler thing does us no good unless we can access the contents or state of the controls Contents of text boxes States of check boxes No identification needed for a button – the event handler is enough The whole naming thing requires DOM Copyright © Curt Hill

16 DOM Document Object Model
Browsers provide an object that describes the document This is the document object we have already used The object has somewhat different implementation on different browsers This contains both properties and methods Copyright © Curt Hill

17 Properties and methods
The properties are generally other objects These include a head and body object Most of the description of this must await another presentation We have seen the method write It extends the document by producing new HTML It is a method that belongs to document, not any of the contained objects Copyright © Curt Hill

18 Another Method document also has a method named getElementById
This is given a string This is the ID attribute It returns an object If the control exists and it has an ID attribute the handle is returned Otherwise a null is returned This gives access to the control state or value Copyright © Curt Hill

19 Properties The property for a text input is value
Returns a string that is the current contents Other controls may have other property names Check box and radio buttons have checked as the property Copyright © Curt Hill

20 Connecting JavaScript and Control
In the HTML The id attribute gives a name that can be used Specify id attribute in the Input tag In the JavaScript Use getElementByID to get the handle Use the handle to obtain the item desired – such as value or checked Copyright © Curt Hill

21 Doubling Example Consider the following HTML: <input type=text id="in3" value=5 size=3> <P><input type=button value= “Change" onclick="b1c('in3')"> With this Script function b1c(txt){ value = document.getElementById(txt); value.value = value.value*2; } Copyright © Curt Hill

22 Check boxes Easy way to enter one of two choices The type is checkbox
The checked property contains a boolean There is no label, so it is supplied by the HTML Copyright © Curt Hill

23 Checkbox example HTML: <input type=checkbox id=c1> Love this stuff JavaScript function b1c(txt){ value = document.getElementById("c1"); if(value.checked) alert("They love it"); Copyright © Curt Hill

24 Commentary Notice in the above that the caption of the checkbox is outside the input tag This is true for radio buttons as well We usually put labeling for text boxes above or to left while check boxes and radio buttons to right Copyright © Curt Hill

25 Radio buttons Mostly the same as checkboxes The type is radio
Caption is outside the input tag The name attribute is required to tell the browser that the three are connected Leaving it out gives radio buttons that act like checkboxes Copyright © Curt Hill

26 Radio button example HTML: <P><input name=color type=radio id=r1> Red <P><input name=color type=radio id=r2> Blue <P><input name=color type=radio id=r3> Green The common name makes these three clear each other’s values Radio buttons rather than three checkboxes Copyright © Curt Hill

27 Checked The above examples started the check boxes and all the radio buttons unchecked The checked attribute will initialize it as checked If two radio buttons are checked, only the last one is left on Copyright © Curt Hill

28 Checked example HTML: <P><input name=color checked type=radio id=r1> Red <P><input name=color type=radio id=r2> Blue <P><input name=color checked type=radio id=r3> Green <P><input type=checkbox id=c checked> Love this stuff Copyright © Curt Hill

29 Multi-Line Text The input tag with the text attribute only allows a single line Another tag allows a multiple line edit: textarea This finally sounds like Java Use the rows and cols attributes to determine size The id attribute is used similarly to before The initial text, if any, is handled somewhat differently Copyright © Curt Hill

30 Enclosing text The input tag has an ending tag
Between the <textarea …> and </textarea> tag is where the text is placed Unlike most HTML, the white space is preserved Any redundant blanks will shown Extra lines will appear in the way it is laid out Copyright © Curt Hill

31 Example Will be produced by: <textarea id=ta rows=5 cols=30> The initial Text is here </textarea> Copyright © Curt Hill

32 Textarea The default value is left between the tags
The user may modify this The value property will hold the entire string It will have exactly the spacing left by the user It may also contain control characters such new line or carriage return Copyright © Curt Hill

33 Drop down lists Radio buttons are quite nice for small choices
For large number of choices they are not so nice A drop down list is much better if the number of options exceeds about three to five Use the Select tag for these Copyright © Curt Hill

34 Select Will display a drop down list with many possibilities
Like textarea the contents appear between the <select> and </select> tags within option tags The size attribute gives the vertical size This is the number that can show at once Copyright © Curt Hill

35 Option tag The contents of the drop down list sit between <option> and </option> tags There may be as many as desired Only one is selected at any time This will be returned as the value property of the select control Copyright © Curt Hill

36 Option Attributes The option tag may include the selected attribute to indicate initial selection It may also have an id attribute For single selection that is not needed Better to have if multiple selection is possible To access then selected is a property with boolean value Copyright © Curt Hill

37 Example The HTML <select id=dd size=2> <option>Green</option> <option selected>Red</option> <option>Blue</option> <option>Yellow</option> <option>Black</option> <option>White</option> </select> Copyright © Curt Hill

38 Demo Words in paragraph counter Create a textarea and button
Allow the user to type in a paragraph When they click count words Copyright © Curt Hill

Download ppt "HTML Again GUI Items Originally HTML 4 Copyright © 2008-2017 Curt Hill."

Similar presentations

HTML Forms. collect information for passing to server- side processes built up from standard widgets –text-input, radio buttons, check boxes, option lists,

HTML Forms. collect information for passing to server- side processes built up from standard widgets –text-input, radio buttons, check boxes, option lists,
23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.

23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.
24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.

24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.
Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.

Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.

JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
Creating Web Page Forms. Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a.

Creating Web Page Forms. Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a.
Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.

Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
Creating Web Page Forms

Creating Web Page Forms
Forms, Validation Week 7 INFM 603. Announcements Try placing today’s example in htdocs (XAMPP). This will allow you to execute examples that rely on PHP.

Forms, Validation Week 7 INFM 603. Announcements Try placing today’s example in htdocs (XAMPP). This will allow you to execute examples that rely on PHP.
CST 200 - JavaScript Validating Form Data with JavaScript.

CST JavaScript Validating Form Data with JavaScript.
Tutorial #9 – Creating Forms. Tutorial #8 Review – Tables Borders (table, gridlines), Border-collapse: collapse; empty-cells: show; and rowspan, colspan.

Tutorial #9 – Creating Forms. Tutorial #8 Review – Tables Borders (table, gridlines), Border-collapse: collapse; empty-cells: show; and rowspan, colspan.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.

4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.

XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.
Forms and Form Controls Chapter 6. 6.1 What is a Form?

Forms and Form Controls Chapter What is a Form?
The Bean Counter: A JavaScript Program

The Bean Counter: A JavaScript Program
Forms Sangeetha Parthasarathy 02/05/2001. Introduction to Forms A form makes it possible to transform your web pages from text to graphics to interactive.

Forms Sangeetha Parthasarathy 02/05/2001. Introduction to Forms A form makes it possible to transform your web pages from text to graphics to interactive.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.

Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
Suzanne J. Sultan Javascript Lecture 2. Suzanne J. Sultan function What is a function> Types of functions:  Function with no parameters  Function with.

Suzanne J. Sultan Javascript Lecture 2. Suzanne J. Sultan function What is a function> Types of functions:  Function with no parameters  Function with.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.

CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
Lecture # 6 Forms, Widgets and Event Handling. Today Questions: From notes/reading/life? Share Personal Web Page (if not too personal) 1.Introduce: How.

Lecture # 6 Forms, Widgets and Event Handling. Today Questions: From notes/reading/life? Share Personal Web Page (if not too personal) 1.Introduce: How.

Similar presentations

Ads by Google