HTML Again GUI Items Originally HTML 4 Copyright © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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=in2 value=5> <HR> <P>Thats it. </BODY> Copyright © 2008-2017 Curt Hill
Shows As Copyright © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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=c1 checked> Love this stuff Copyright © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
Example Will be produced by: <textarea id=ta rows=5 cols=30> The initial Text is here </textarea> Copyright © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
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 © 2008-2017 Curt Hill
Demo Words in paragraph counter Create a textarea and button Allow the user to type in a paragraph When they click count words Copyright © 2008-2017 Curt Hill