other types of input element

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

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

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

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

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>

select element vs. input element of type='radio

• The following select element<select name='products’>



<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

Allowing multiple selections• If we use the atttribute multiple in the

select tag, multiple selections are allowed:<select name='products’ multiple=‘multiple’>




</select>

• See the next slide

Preselection

This is done as follows:<select name='products’ multiple=‘multiple’>


<option value='Superman’ selected=‘selected’>

Superman's cloak (our best-selling item)</option>


</select>

Preselection when only one selection is allowed

• Consider the following:<select name='products’>


<option value='Superman selected=‘selected’>



</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

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

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='Superman’ selected=‘selected’>



</select>

• See what results on the next slide

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

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.

The remaining types of input element

• Now we can consider the input element that we did not consider before:– type='hidden’– type='image’

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

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

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 isproducerID=1053

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

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

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

<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>

Example program

Fresh form

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

The user enters his name and....

The user enters his name andclicks on the image and …

The user enters his name andclicks on the image and

the name is sent to the server, which replies

other types of input element

Documents