Other types of input element

1. Other types of input element • There are some types of input element that we have not considered: • type='image’ • type='hidden’ • We will delay dealing with these until later

2. Other user-input elements • So far we have considered two classes of user-input elements: • the button element • the input element • There are two other kinds: • the select element • the textarea element

3. The select element • This type of element merely offers another way of capturing the kinds of user-selection that we have already seen how to capture with the input elements of type=‘checkbox’ and of type=‘radio’ • Consider the web page on the following slide

5. By clicking on the down-arrow, the user sees a range of options

6. This is implemented as follows: <form method="post" action="/cgi-bin/tshirts.cgi"> <h1> T-shirt Order form </h1> <fieldset> <legend>Order</legend> <p> What is your name? <input type='text’ name='name’ size='10’></p> <p>Sorry! Each order is limited to one T-shirt. select the one you want: </p> <select name='products’> <option value='Batman’> Batman's cloak </option> <option value='Superman’> Superman's cloak</option> <option value=‘Dr. Who’> Dr. Who's coat</option> </select> </fieldset> <fieldset> <legend>Form Submission</legend> <p> <button type='submit’>Submit order</button></p> </fieldset> </form>

7. select element vs. input element of type='radio • The following select element <select name='products’> <option value='Batman’> Batman's cloak </option> <option value='Superman’> Superman's cloak</option> <option value='Dr. Who’> Dr. Who's coat</option> </select> is equivalent to the following group of input elements: <input type='radio’ name='products’ value='Batman’> Batman's cloak <input type='radio’ name='products’ value='Superman’> Superman's cloak <input type='radio’ name='products’ value='Dr. Who’> Dr. Who's coat • They both allow ONLY ONE selection

8. Allowing multiple selections • If we use the atttribute multiple in the select tag, multiple selections are allowed: <select name='products’ multiple=‘multiple’> <option value='Batman’> Batman's cloak </option> <option value='Superman’> Superman's cloak</option> <option value='Dr. Who’> Dr. Who's coat</option> </select> • See the next slide

10. Preselection

11. This is done as follows: <select name='products’ multiple=‘multiple’> <option value='Batman’> Batman's cloak </option> <option value='Superman’ selected=‘selected’> Superman's cloak (our best-selling item)</option> <option value='Dr. Who’> Dr. Who's coat</option> </select>

12. Preselection when only one selection is allowed • Consider the following: <select name='products’> <option value='Batman’> Batman's cloak </option> <option value='Superman selected=‘selected’> Superman's cloak (our best-selling item)</option> <option value='Dr. Who’> Dr. Who's coat</option> </select> • Notice, on the next slide, that the Superman shirt is shown as a default, even though the Batman shirt is first in the list above

14. What happens when the user moves to the T-shirt selection part of the form:

15. Sizing the selection box • So far, the size of the selection box on the form has been determined by default by the browser • However, we can specify a size explicitly if we wish: <select name='products’ size='2’> <option value='Batman’> Batman's cloak </option> <option value='Superman’ selected=‘selected’> Superman's cloak (our best-selling item)</option> <option value='Dr. Who’> Dr. Who's coat</option> </select> • See what results on the next slide

17. The textarea element • With this element, we can allow the user to give us free-form feedback • Consider the following web page and what happens when the user fills it in as shown on the following slides

21. How it was done: <fieldset> <legend> Feedback </legend> <p>What do you think of our products?</p> <textarea name='feedback’ rows=‘3’ cols=’40’> type your answer here … </textarea> </fieldset> • A textarea is delimited by two tags: textarea and /textarea • The textarea tag has a name attribute and may have attributes which specify the size of the text-entry box -- but the user’s text can be much larger than this • The text between the two tags is the initial text that appears in the text-entry box.

22. The remaining types of input element • Now we can consider the input element that we did not consider before: • type='hidden’ • type='image’

23. input of type='hidden’ • This has many purposes • One common use is to avoid confusing a user by • hiding data which the server needs • but which the user does not need to see • For example, in the following interaction, we want to hide the ID number of the item being edited

24. Example usage, slide#1 • In the select element below, each option is of the form <option value=‘someID’>someName</option> • When the user clicks on the submit sutton, it is the ID, not the name, which is sent to the server

25. Example usage, slide#2 • Below, the user has selected Al Jazeera • its ID is 1053, but the user cannot see it • When the user clicks the submit button, the information sent to the server is producerID=1053

26. Example usage, slide#3 • Below, the user can change • the spelling of the TV station’s name, in the input element of type=‘text’ • the paragraph of information about the TV station, in the textarea element • But the ID number of the TV station must also be sent to the server when the submit button is clicked • So the ID number must be on the form • To avoid confusing the user, the ID number is in a hidden element

27. Source code for page on previous slide • Notice the input element of type=‘hidden’ • Near the bottom of the source code • Just above the button element

28. input of type='image’ • This is for using pictures to create submit buttons • It is not an element that I like to use • Later, we will see that its effect can be achieved by using JavaScript • But, in case you see other people use it, I will give an example of using it here

29. Example program <html> <head><title>Using an input of type=''image'</title> <style>form { width : 400; background-color:gray; padding:0.1in} legend { color : white } .myImage { height:25; width:25 } </style> </head> <body> <?php $surname=$_POST['surname']; if ($surname) {echo "Your surname is $surname";} else {?> <form method="post" action="<?php echo $PHP_SELF; ?>"> <fieldset> <legend>What is your surname?</legend><input type="text" name="surname"> </fieldset> <fieldset><legend>Submit data</legend> <input type="image" src="myButton.jpg" class="myImage" /> </fieldset> </form> <?php } ?> </body> </form>

30. Fresh form • We can see the input element of type=‘text’ • And, instead of a submit button, we see an image

31. The user enters his name and....

32. The user enters his name andclicks on the image and …

33. The user enters his name andclicks on the image andthe name is sent to the server, which replies