se-2840 dr. mark l. hornick 1 html input elements and forms
TRANSCRIPT
SE-2840Dr. Mark L. Hornick
1
HTML input elements and forms
SE-2840Dr. Mark L. Hornick
2
A Form is a webpage containing HTML input elements that allow a user to enter information
A form consists of static HTML markup…
…as well as controls that permit input of various kinds of data
SE-2840Dr. Mark L. Hornick
3
Text boxes Textareas
(multi-line text boxes) Radio buttons Checkboxes Menus Pushbuttons
And others…
What are some of the special input elements?
SE-2840Dr. Mark L. Hornick
4
Text boxes
<input type="text" title=“type here” name="message" id=“message” value="hello" maxlength="10" />
<input type="text" name="message" id=“message” value="hello" readonly="readonly" disabled="disabled"/>
<input type="password" name="pwd" id=“pwd” value="secret"/>
The value attribute specifies the text that initially appears
type=password indicates that the browser should display the input with neutral characters
“readonly” means that the text cannot be modified while “disabled” means that the text box cannot be selected
The title attribute specifies the text that appears in the tooltip
See http://www.w3schools.com/tags/tag_input.asp
CS-4220 Dr. Mark L. Hornick 5
name vs. id <input type="text" title=“type here” name="message"
id=“message” value="hello" maxlength="10" />
When applied to form elements, name and id mean have separate meanings
The id is a CSS style id The element is usually accessed in JavaScript via the id
The value of name is the element’s object name The element’s can also be accessed via its name from
JavaScript, but id’s are usually used instead The name of an element (along with it’s value) is passed to a
server when the form containing the element is submitted. The id is not. The name and id are usually the same
SE-2840Dr. Mark L. Hornick
6
Text areas
<textarea title=“comments” name="feedback“ rows="5" cols="25"> State your opinion here:</textarea>
The rows attribute specifies the number of rows occupied by the field, while cols specifies the width
The title attribute is used by a tooltip to provide an indication of the purpose of the field
SE-2840Dr. Mark L. Hornick
7
Radio buttons
<fieldset>
<legend>Bands</legend>
<!-- only the last button containing the checked attribute is checked --> <label> <input type="radio" name="trans" value="AM" checked="checked"/>AM </label> <br/>
<label> <input type="radio" name=“trans" value="FM" checked="checked"/>FM </label> <br/>
<label> <input type="radio" name="trans" value="XM" />XM </label>
</fieldset>
The fieldset element creates a logical group of controls
The legend element may be used within a fieldset to provide a description of the group in the bounding box
The label element is used to associate some descriptive text with a field
SE-2840Dr. Mark L. Hornick
8
Checkboxes
<fieldset>
<legend>Condiments</legend>
<!-- all checkboxes containing the checked attribute are checked --> <label> <input type="checkbox" name=“con." value="pickles" checked="checked"/>Pickles </label> <br/>
<label> <input type="checkbox" name=“con." value="onions" checked="checked"/>Onions </label> <br/>
<label> <input type="checkbox" name=“con." value="tomatoes" />Tomatoes </label></fieldset>
SE-2840Dr. Mark L. Hornick
9
Menus
<select name="burgers" title="menu“ multiple=“multiple”> <option value="hamburger">Hamburger</option>
<option value="cheeseburger" selected="selected">Cheeseburger
</option>
<option value="mushroomburger"> Mushroom-Swiss burger </option>
<option value="baconburger"> Baconburger </option>
</select>
The select element creates a menu of options
Only one option at a time can be selected unless the multiple attribute specifies “multiple”
CS-4220 Dr. Mark L. Hornick 10
Cascading Menus<select name="dessert" title="dessert"> <optgroup label="ice cream" >
<option value="vanilla" selected="selected">Vanilla</option> <option value="chocolate">Chocolate</option> <option value="strawberry">Strawberry</option>
</optgroup>
<optgroup label="Malt" >
<option value="vanilla" selected="selected">Vanilla</option> <option value="chocolate">Chocolate</option> <option value="strawberry">Strawberry</option>
</optgroup></select>
The optgroup element organizes logical groups of options
SE-2840Dr. Mark L. Hornick
11
Buttons
<input title="submit button" type="submit" value="Send" />
<input type="reset" value="Start over" />
<input type="button" value="Push me!" />
<input type="image" src="msoe1.gif" />
<button type="submit" name=“submitbutton"> Try again <img src="msoe1.gif" alt="try again"/></button>
The image pushbutton functions like the submit pushbutton
The reset pushbutton resets all fields in the form to their original values
The submit pushbutton sends all data in the fields to the server specified in the action attribute of the form
The button pushbutton doesn't do anything without scripting
An alternate way of specifying a submit button using a button element
SE-2840Dr. Mark L. Hornick
12
As with any HTML element, CSS rules can be used on form controls
There is still debate regarding the best way to layout a form Laying out forms with CSS can be complex Forms are generally tabular in nature
So using tables for layout control is still accepted When laying out a form using a table, nest the table
within the form
…but use CSS for all other aspects of styling a form (colors, fonts, widths, etc)
SE-2840Dr. Mark L. Hornick
13
<body>
<h3>Fill out the fields below:</h3>
<form action=“http://...” method=“post”> <p>Your name: <br /> </p> <p>Press <strong>Send</strong> to submit your information. </p> </form></body>
First: <input type="text" name=“firstname" /> <br /> Last: <input type="text" name=“lastname" /> <br /> <input type="submit" value="Send" />
A <form> element is used to contain input elements whose data will be submitted to a web server when the submit event takes place
A <form>’s function is as a container of form controls, but a <form> can contain any web content
…as well as a new set of elements that can only nest inside a <form>
More than one form can be placed on a single webpage
SE-2840Dr. Mark L. Hornick
14
Required attributes of the <form> element that we’ll get back to later
<form action=“http://...” method=“post”>…</form>
The opening <form> tag – all form elements go between the opening and closing tag.
The required action attribute normally specifies the url of the resource that will receive the form’s data
The action attribute specifies what happens when the form is submitted.
For now, we’ll just use an empty string for the action.
SE-2840Dr. Mark L. Hornick
15
BTW: What happens when forms are submitted?
Web Browser
Web Server
1) You browse to a webpage containing forms and fill it out.
2)The browser packages the data in the form and sends it to the web server.
3)The server receives the form data and passes it on to a resource for processing.
4) The Web application generates a response and sends it to the browser.
CGIWebApp
SE-2840Dr. Mark L. Hornick
16
Form validation on Submit
<form action="http://..." method="get"onsubmit=“return checkForm();" >…</form>
The onsubmit attribute of a form specifies the JavaScript method that will be called when the submit button is pressed
If checkForm() returns “true”, the data within the form’s elements is submitted to the url specified by the action attribute.
If checkForm() returns “false”, no action is taken and no communication to the server occurs (saving time).