INT222 - Internet Fundamentals
Shi, Yue (Sunny)
Office: T2095
sunny.shi@senecacollege.ca
SENECA COLLEGE
Outline
• Form - <input>
• Next class:
– Client-side validation
2
Introduction to Forms
• Example:
form_ex_1.html
3
Introduction to Forms
• HTML forms are used to pass data to a server.
• An HTML form can contain input elements like text fields,
textarea, checkboxes, radio-buttons, submit buttons, select
lists, fieldset, legend, and label elements.
• The client fill-out some information and then the browser
sends the data from the form fields to the server for
processing, to an e-mail address, or to a JavaScript
subroutine.
4
Introduction to Forms
• Syntax:
<form id='formID’ method=‘…' action='url' >
• A document may have more than one form, but forms cannot
be nested.
5
Attributes for <form>
• method: specifies how the data will be transmitted.
• The method is the short way of saying HTTP request method. It tells
the server the request is being made of what kind of request it is.
- method=“get”: the default method. The fill-out form contents to be
appended to the URL as if they were a normal query (maximum of
256 characters).
- method=“post” : the fill-out form contents to be sent to the server in
a data body rather than as part of the URL
• Method “post” is more secure.
6
Attributes for <form>
<form method="post" id = "example1"
action=“http://formpost.azurewebsites.net/home/test">
• The action attribute tells browser where to post the form
data or which address to get with the appended data.
• This is the action that takes place when the user presses
the submit button.
7
<input /> tag
• The <input /> tag is used to specify a simple input element inside a
form that can receive user input.
• All <input /> tags are required to have a type attribute. Except for the
submit and reset buttons they must also have a name attribute.
• The type indicates what sort of input field the tag represents, such as
text boxes or radio buttons.
• The name/id attribute creates a named data field, or variable, to
assign values to.
• The name/id attribute must be unique within a form, although some
types of input may take multiple <input /> tags to define
8
<input /> type Attribute
•
type = “text”: single line text input field in which the user can enter text.
•
type = “password”: a text field where the content is masked, such as password
fields.
•
type = “checkbox” : a toggle that the user can select (switch on) or deselect (switch
off.)
•
type= “radio”: one of a set of radio buttons, which is a collection of selectable
check boxes where only one in the group can be chosen.
•
type= “file”: allows the user to select of file on their computer for submission to
the server.
•
type = “hidden”: denotes a hidden field, usually for sending additional system
generated information along with the form, for instance, the form version number.
9
<input /> type Attribute
• type= “reset”: reset all elements in the form to their default values.
• type= “submit”: when a user clicks a submit button, the form is
submitted, which means that the action specified for the form is
invoked.
• type=“image”: Places an image, serving as a custom button in place
of the submit button. When a user clicks the image, the form is
submitted to the server.
•
•
•
•
New in HTML5:
type =“email”: a field for email.
type = “number”: a field for number,
type = range: slider control for number range.
10
Attributes for <input/>
• checked: element is selected when page loads
• disabled: value cannot be submitted
• maxlength = “maximum amount of text”
maxlength can be larger than the size, -- scroll.
readonly
• size = width in number of characters
• value = “initial/ default value”
• multiple
11
Attributes for <input/>
• New in HTML5:
• autocomplete= “on” or ”off” (form_ex_3.html)
• autofocus: element automatically get focus when page
loads
• max: max value for an element
• min: min value for an element
• placeholder= “hint for input”
• Required
• list: with <datalist> to provide a list of predefined options
12
Text Fields in a Form
•
•
•
•
<input type="text" />
<input type="password" />
<input type="file" />
<textarea>
13
Text Fields in a Form
• <input type="text" />
• A text field is an empty field that is one line high and of a
given length that accepts a single line of input from a user.
<input type = "text" name ="courseName" size = "30"
maxlength="50" value = “INT222"/>
<input type="text" name="name" placeholder=“Your
name">
14
<datalist>
• <datalist>: specifies a list of pre-defined options for an
<input> element.
• To provide an "autocomplete" feature on <input> elements.
• Users will see a drop-down list of pre-defined options as they
input data.
(form_ex_3.html)
Department: <input list = "department"/>
<datalist id = "department">
<option value = "IT"> IT </option>
<option value = "Finance"> Finance </option>
<option value = "Sales"> Sales </option>
</datalist>
15
Text Fields in a Form
•
<input type=“password" />
•
what the user types does not display on the screen. Instead it is masked by some
masking character, such as an asterisk.
•
Note: the password type only secures the information from prying eyes, it does
not secure it from prying programs.
The data written into the field is still stored as a string of plain text and is still
transmitted unencrypted unless a secure transmission method is used.
Type in your password: <input type='password' name='password' />
16
Text Fields in a Form
• <input type="file“ multiple />
• Allows the user to select a file to be sent back to the server by browsing
the directories.
• The file name is included as a text string which the browser uses to
retrieve the document.
• In order to use this type of data field, you must set your method to post.
<p> Select a file: <input type="file" name = "listFile" /> </p>
17
Text Fields in a Form
• <textarea> </textarea>: allows for multi-line input fields.
• attributes:
- rows = “height of the textarea in character”
i.e., the number of lines up
- cols = “width of the textarea in character”
i.e., the number of characters across.
- name = “symbolic name of the text entry field“
<textarea name="comments“ cols="30“ rows="10">
Input your comments:
</textarea>
18
Selection Fields in a Form
• Selection fields allow you to choose from a selection of options.
• These choices can be exclusive, in the case of radio buttons, meaning you
can only select one, or can be non-exclusive, such as checkboxes, meaning
you can choose many from a list. The selection field types are:
• <input type="checkbox" />
• <input type="radio" />
• <select>
19
Selection Fields in a Form
• <input type="checkbox" />
• The checkbox input type creates an item that can be checked or
unchecked.
• When sending data from checkboxes, only the data from selected
checkboxes is sent. Blank, unselected checkboxes have no data sent.
•
•
•
•
Attributes:
value = “data” : data sent to server
checked = “checked”: pre-selected
Although the items appear to be in a list, each one is a separate data
field that is returned separately when the data is submitted.
Since the items are a list, you can choose to name each element
separately, or you can name all the elements in the list with the same
name.
20
Selection Fields in a Form
• <input type="radio" />
• similar to the function of the checkbox, except that only one option can
be selected at a time.
• All fields in a radio button group should also have the same name, since
they are all different possible values for the same variable
• The radio button list will always return only one value.
• Attributes:
- value = “data” : data sent to server
- checked = “checked”: pre-selected
- only one radio button in a button grouping can be marked as checked.
21
<label> tag
• Define a label <input> element.
• It does not render as anything special for the user.
• It provides a usability improvement for mouse users,
– if the user clicks on the text within the <label>
element, it toggles the control.
• The for attribute of the <label> tag should be equal to the
id attribute of the related element to bind them together.
22
Example
<p> <input type="checkbox" name="music" id = “music” value="music" />
<label for = “music”> music </label>
</p>
<p> <input type="checkbox" name="hobbies" value="sports" /> sports </p>
<p> <input type="checkbox" name="hobbies" value="reading" checked = "checked"/>
reading </p>
<input type="radio" name="gender" id = "female" value="Female"
checked/>
<label for ="female">Female </label>
<input type="radio" name="gender" id = "male" value="Male"/> Male
</p>
form_ex_2.html
23
Selection Fields in a Form
• <select> … </select>
• create a drop down menu or scrollable list of selectable
choices.
• Ex: (form_ex_2.html)
<p> the interested topics: </p>
<select name="topics">
<option value="web design"> web design </option>
<option value="programming" label="programming">
programming</option>
<option>database</option>
</select>
24
Selection List
• The selection list itself is defined by a
series of <option> tags.
• The name to the <select> tag applies to the
entire list.
• If more than one option is selected in the
list, the options are all sent to the server
under that one variable name as a comma
separated list.
25
Selection Fields in a Form
• <select> … </select>
• Attributes:
- multiple="multiple“: allows users to select more than one option,
usually by holding down the Control key while clicking on additional
choices.
Otherwise the selection functions like radio buttons where selecting
one deselects another.
- size = “ how many lines are display in the selection menu”
** If the size is not specified or if it is set to a value of one (size="1")
then a single line is displayed and the selection menu functions as a
drop down menu.
** If a number larger than one is specified, then the menu functions
as a scrollable list.
26
Selection Fields in a Form
• <select> … </select>
• The <option> … </option> tag is what is used to define the individual
selectable elements in the menu.
• one <option> tag <->for each item.
• The contents between the tag is what shows up in the menu listing.
• The value attribute is the value that is returned by selecting that option.
• If a value is not specified, the contents of the option tag are returned.
27
Selection Fields in a Form
• <select> … </select>
• <optgroup> tag to group things by category.
<p> the details of the topics: </p>
<select multiple="multiple" name="topics_detail" size="4">
<optgroup label="web design">
<option selected="selected" value="XHTML"> XHTML </option>
<option value="frames">Frames</option>
<option value="forms"> Forms </option>
</optgroup>
<optgroup label="programming">
<option selected = "c language" value="c language"> C language </option>
<option value = "Java"> Java </option>
</optgroup>
</select>
28
form_selection.html
Form Buttons
• Buttons are selectable icons that perform some action when clicked on.
•
They are sometimes called action buttons since some action occurs when
one is clicked on.
• The different types of buttons are:
- <input type="button" />
- <input type="image" />
- <input type="submit" />
- <input type="reset" />
- <button>
29
Form Buttons
• <input type="submit" />
<input type="reset" />
• Allow users to submit the data and to reset the form,
respectively.
• “submit”: submit form to the server as per the method and
action attributes of the form.
• “reset”: does not send anything back to the server. It clears
and resets the form.
30
Form Buttons
• If you do not provide value attributes for these buttons
then they have default names that are system dependent.
• If you provide a name attribute for the submit button,
then you must also provide a value, since that value will
be sent back associated with the name.
• There is no need to assign a name to reset button,
although it can be assigned a value if you want a reset
message other than the default.
31
Form Buttons - examples
Submit buttons:
• <input type="submit" />
• <input type="submit" value="This is a submit button" />
• <input type="submit" name="test1" value="This is another" />
Reset buttons:
<input type="reset" />
<input type="reset" value="My Reset Button" />
Example: form_ex_buttons.html
32
Form Buttons
• <input type="image" />
• Use image as the submit button.
• The submission includes:
- data of the form
- x, y coordinates of the mouse click within the image.
<input type="image" src= “../img/seneca_logo.gif" width = “90" height
= “40" border = "2"/>
Example: form_ex_buttons.html
33
Form Buttons
• <input type="button" />
• An action button that is neither a submit button nor a reset button.
• Does absolutely nothing, unless you tell it to.
• Needs to be associated with event attributes that determine what to do
when the button is selected.
<input type="button" value="Press This Button"
onclick="window.alert('using type =button....')" />
Example: form_ex_buttons.html
34
Form Buttons
• <button> </button>
• The <button> tag allows you to perform most of the above
actions with greater flexibility.
• <button> content showing as button </button>
• type attributes:
- <button type="submit">
- <button type="reset">
- <button type="button">
Example: form_ex_buttons.html
35
Accessing Fields
•
use the tabindex attribute to specify a tab order.
•
The tab index starts at one (1) and increases with adding items.
•
•
If tabindex=“0“ or tabindex="-1“ (negative number),
then the field cannot be tabbed to, although it can still be selected with the
mouse.
<p > Course: <input type = "text" name ="courseName" size = "30"
maxlength="50" value = “BTI220“ tabindex = "1" /> </p>
<p> Name: <input type="text" name="MyName" size="30"
maxlength="50" tabindex ="20"/> </p>
<p> Question: <input type="text" name="Quest" size="30"
maxlength="100" tabindex = "10"/> </p>
36
Grouping Fields
• <fieldset>: grouping the fields
• <legend>: specifying a title for the group
<fieldset>
<legend>Some Questions</legend>
<p > Course: <input type = "text" name ="courseName" size = "30"
maxlength="50" value = “BTI220"/> </p>
<p> Name: <input type="text" name="MyName" size="30"
maxlength="50“/> </p>
</fieldset>
Example: form_ex_advanced.html
37
Remarks about Forms
• HTML itself does not control what is entered in text fields or
validate the data entered.
• Two possible solutions:
(1) use clear and concise directions for the form
(2) write client-side or server-side programs to test the data
before sending it to the program that is supposed to process
it.
38
Remarks about Forms
• Try to make the browser window user-friendly.
• Clear directions for all form elements.
• Make sure fields are neatly arranged and are sized to
reflect the content that goes in them.
• Use selection buttons rather than text boxes whenever
possible to reduce the number of possible answers the
user can give or must choose from.
39
Remarks about Forms
• Nice structure and flow
- Structure: grouping the form into coherent units.
- Structure allows to break the form up into smaller units,
- Flow: having the coherent units cohere into a narrative
that the user can work their way through.
- Flow ensures that people don't get lost moving through
the form.
- In other words, things should be grouped sensibly and in a
sensible order.
40
Lab 5
• Practice on forms
41
Next Class
• Client-side validation
42
Thank you!