other types of input element there are some types of input element that we have not considered:...
Post on 21-Dec-2015
222 views
TRANSCRIPT
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='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
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
Preselection
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>
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
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='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
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