other types of input element there are some types of input element that we have not considered:...
Post on 21-Dec-2015
223 views
TRANSCRIPT
![Page 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/1.jpg)
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
![Page 2: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/4.jpg)
![Page 5: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/5.jpg)
By clicking on the down-arrow, the user sees a range of options
![Page 6: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/6.jpg)
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>
![Page 7: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/9.jpg)
![Page 10: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/10.jpg)
Preselection
![Page 11: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/11.jpg)
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>
![Page 12: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/12.jpg)
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
![Page 13: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/13.jpg)
![Page 14: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/14.jpg)
What happens when the user moves to the T-shirt selection part of the form:
![Page 15: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/16.jpg)
![Page 17: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/17.jpg)
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
![Page 18: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/18.jpg)
![Page 19: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/19.jpg)
![Page 20: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/20.jpg)
![Page 21: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/21.jpg)
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.
![Page 22: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/22.jpg)
The remaining types of input element
• Now we can consider the input element that we did not consider before:– type='hidden’– type='image’
![Page 23: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/24.jpg)
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
![Page 25: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/25.jpg)
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
![Page 26: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/26.jpg)
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
![Page 27: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/27.jpg)
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
![Page 28: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/28.jpg)
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
![Page 29: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/29.jpg)
<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
![Page 30: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/30.jpg)
Fresh form
• We can see the input element of type=‘text’• And, instead of a submit button, we see an image
![Page 31: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/31.jpg)
The user enters his name and....
![Page 32: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/32.jpg)
The user enters his name andclicks on the image and …
![Page 33: 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](https://reader036.vdocuments.site/reader036/viewer/2022062407/56649d5c5503460f94a3b19f/html5/thumbnails/33.jpg)
The user enters his name andclicks on the image and
the name is sent to the server, which replies