unit 6 – html forms instructor: brent presley. in class preparation download unit 6 - html forms...
TRANSCRIPT
Unit 6 – HTML Forms
Instructor: Brent Presley
Instructor’s Notes Web Programming HTML Forms
Web Programming 152-150
HTML Forms
Notes Activity Quick Links & Text References
<form> Element <input> Element
text password checkbox radio select submit reset button image (button) hidden
<label> Element <textarea> Element <fieldset> Element tabindex attribute accesskey attribute Form CSS New Input Types
number range date month time url email color pattern tel
Input Type Attribute Restrictions
IN CLASS PREPARATION
• download unit 6 - HTML Forms (start)– it's on onedrive in Web Programming/ Inclass
folder• download brackets and install on your
machine
FORM ELEMENTS
• Web pages, via HTML, have the ability to gather data from the user and return that data to the server
• Many of our favorite input objects such as text boxes, command buttons, check boxes are available to get data via a web form
• Form elements must be included in a <form> tag (2-sided)
FORM TAG
• The form tag is used to create an HTML form for user input
• the <form> element can contain one or more of the following:– <input> <textarea> <button> <select> <option>
<optgroup> <fieldset><label>
GET VS POST
• get: requests data from a specified source• post: submits data to be processed to a
specified source• https://www.youtube.com/watch?v=576WwU
7xlWU
• https://www.youtube.com/watch?v=9o_4lsOkQ3g
FORM TAG
• The method attribute defines how the browser should submit the form data. There are two methods you can use: get and post.
• method="post"• Sends form data to the server (invisible to user)
– method="get" .. this is the default• Adds form data to the site URL and sends to the server
(visible to the user)
ACTIONS
• action="your action here"– Designates the name of a script on the server that is to process the
form inputs– Can be empty for basic testing– This attribute tells the browser the location of the script that will
process this form. Normally, this is a JavaScript, Perl script, or other program located on the web server
• Use http://www.volkergaul.com/MSTC/HTMLFormTest.php as the action to send your form data to a test page on Volkers website. – The test page will display the data it received from your form.
• Capitalize the web address exactly as it appears above (web server is case sensitive)
QUICK TEST OF THE FORM
• Can use "mailto:[email protected]" as a quick test of your form.– Sends all form data concatenated into a string to
the address you specify.– all form data concatenated into a string to the
address you specify.– One page can include multiple form tags, but the
form tags cannot be nested inside each other
PRACTICE
• Add form tag
• id=”theForm” • method=”post”• link to your e-mail to test• then link to HTMLFormTest.php
INPUT TAG
• Most form objects are enclosed in an <input> tag• The tag’s type attribute defines what type of input control
this is:– type = "text"– type = "password"– type = "checkbox"– type = "radio"– type = "hidden"– type = "submit"– type = "reset"– type = "button"
• type = "image"
NAME ATTRIBUTE
• Valid only on <a>, <form>, <iframe>, <img>, <map>, <input>, <select>, <textarea>
• Name does not have to be unique, and can be used to group elements together such as radio buttons & checkboxes
• Can not be referenced in URL, although as JavaScript and PHP can see the URL there are workarounds
• Is referenced in JS with getElementsByName()• Shares the same namespace as the id attribute• Must begin with a letter• According to specs is case sensitive, but most modern browsers don't
seem to follow this• Used on form elements to submit information. Only input tags with a
name attribute are submitted to the server
ID ATTRIBUTE
• Valid on any element except <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>
• Each Id should be unique in the page as rendered in the browser, which may or may not be all in the same file
• Can be used as anchor reference in URL• Is referenced in CSS or URL with # sign• Is referenced in JS with getElementById(), and jQuery by $(#<id>)• Shares same name space as name attribute• Must contain at least one character• Must begin with a letter• Must not contain anything other than letters, numbers, underscores (_),
dashes (-), colons (:), or periods (.)• Is case insensitive
ADDITIONAL TAGS
• Each input tag should include an id element and a name element to distinguish one element from another in code.– ID can be used by JavaScript to validate
the contents of the form object.• Name sent to server side processing
(PHP)• I put prefix (txt, rdo, etc.) on name
– not on ID
• Text to appear next to the input control must be included after or before the input tag.
TEST YOUR FORM
• Add a textbox (username) to the form. • Test by going to the test website
– www.volkergaul.com/MSTC/HTMLFormTest.php– verify that the information you sent is what was
received by the page
LABEL
• NOT like labels in C#.• Tag that associates visible
text with a form element• Accessibility feature: easier
for screen readers to associate the label of an object with the object itself.
• Can click in either the label or the control to set focus to that control
LABEL
• Start each input with the <label> tag, – followed by the text to appear on the form (caption),
• followed by </label>
• followed by the input (or other) tag• The <label> tag should include a for="id" attribute that
designates which input this is the label for.• Allows label and input to be in different table cells
UPDATE YOUR FORM
• add a textbox to the form (username)• Test
• Add label for first element (for txtUsername)
• Test (click label)
TEXT BOXES
• input type= "text"• Text box can scroll if length>size• value="default" vs placeholder
– placeholder is html5• autofocus (HTML5)• Automatically places focus in this object on
page load
• <input type="text" name="sample" id="sample" autofocus>
AUTOFOCUS
• This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it
• Only one form element in a document can have the autofocus attribute
• It cannot be applied if the type attribute is set to hidden• (that is, you cannot automatically set focus to a hidden
control).
REQUIRED ATTRIBUTE
• This attribute specifies that the user must fill in a value before submitting a form.
• Cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button).
UPDATE YOUR FORMS TEXTBOX
• Modify txtUsername• Set size 20• Set length 50• Set length 20• Set default/placeholder value of "type here"• Add Title of "Enter a name"• Autofocus• Required
TEXT BOXES -AUTOCOMPLETE
• Autocomplete (HTML5)– Most browsers will remember previously typed values.
• Setting autocomplete to off (it’s on by default) prevents this from happening
<input type="text" name="sample" id="sample" autocomplete="off">
LIST
• Identifies a list of pre-defined options to suggest to the user.
• The value must be the id of a <datalist> element in the same document.
• The browser displays only options that are valid values for this input element.
• This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.
LIST
• Only works with input type="text"• No arrow to designate list is available• Almost looks like autocomplete, but list is fixed rather than
user-defined
PLACEHOLDER
• A hint to the user of what can be entered in the control. • Text must not contain carriage returns or line-feeds. • This attribute applies when the value of the type attribute is
text, search, tel, url or email; otherwise it is ignored.• as soon as the field receives focus, the text disappears
PLACEHOLDER VS LABEL
• Do not use the placeholder attribute instead of a <label> element. Their purposes are different
• The <label> attribute describes the role of the form element; that is, it indicates what kind of information is expected
• The placeholder attribute is a hint about the format the content should take.
• There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
UPDATE THE FORM
• Insert placeholder for textbox• create a list of any type
– the list must have 3 elements in it
TEXT AREA
• Multi-line text box• Note this input type is NOT included in an
<input> tag• <textarea>Default text </textarea>• rows="x" (height of text area)• cols="y" (width of text area, characters)• Scroll bars appear if more than "x" rows of
text are entered• Do not include any tabs or Enter keys
between <textarea> and </textarea> -- they will be included in the text area.
PASSWORD
• Similar text box but inputs are masked• Actual value typed (not mask) is sent to
server
UPDATE YOUR FORM
• Add label and textarea (comments) 5 rows 20 columns.– Add default text, then remove default text– Set vertical-align top
• Add label and password (pwd) size 20 length 20 minlength of 6 – verify you can only put 20 characters in the
password box
UPDATE YOUR FORM
• Set vertical-align top– textarea { vertical-align: top; }
BUTTONS
• type = "submit"– submits the form data to the server which causes the action method to
occur on the server. This is the default if the attribute is not spcified. • type = "reset"
– Clears/resets all the input objects on the form
• type="button"– No default behavior. It can have client side scripts (JavaScript) associated
with the elements events, which are triggered when the event occurs
• value = "caption" …. the text to appear on the button
UPDATE FORM
• Add Send Data button• Add Clear Form button
• Apply formStyle css to the form element
IMAGE BUTTONS
• Spruce up forms by replacing boring, standard buttons with image buttons in 2 ways
• 1. <input type="image" src="~~~" alt="~~~" >– Automatically results in a submit
• 2. <button type="submit"> <img src="~~" alt="~~~" width="#" height="#" > </button>
turns the entire form object into a button
IMAGE BUTTONS
• Adds a non-removable border around the image to make it look like a button
• If type is not provided, submits.• Type can be reset• Type can be button (do nothing, but link to
JavaScript)
UPDATE YOUR FORM
• obtain a green play button and red stop button
• Add GreenPlayButton.png as image button
• Add RedStopButton.png as image within button
CHECK BOXES
• type = "checkbox"• value = "text"
– value to be sent to the server when checked• Nothing sent to server when unchecked• If no value is specified, “on” sent to server
when checked• checked = "checked"
• Add label and check box for smoker.
• Checked• Unchecked
RADIO BUTTONS
• type = "radio"• All buttons in a group must have the same
name• Each must have a unique value
– Note values are not displayed on form• checked = "checked"
• Add text (not label) Select favorite color
• Add labels (favcolor) and radio buttons (red, blue, green)
• Assign values to each
COMBO/DROPDOWN/LIST BOXES
• Not an <input>• <select>
– size="1" (combo)• Size > 1 results in list box• multiple allows multiple selections in the list box
• Ctrl- or Shift-click to select multiple
• <option> text here </option>• <option selected>• Each option should have a value attribute. This is what is sent to the
server.– Values do not have to match the text in option
• BIG NOTE: if multi-select, name must include [ ]
• Combo boxes and list boxes don’t have placeholders, but you can provide an initial option such as Select your favorite color.– If this field is required, use JavaScript to ensure
the placeholder is not still selected• Add the disabled attribute to the select field to
prevent the user from reselecting the placeholder after selecting another option.
• Add label and select (favclass)• Systems Implementation• Web Data Management• RPG-Intermediate• PC Troubleshooting
• Select one
• Add label and select (favday), size=3, multiple (Mon-Sun)
GROUP BOXES
• Surround input objects with <fieldset> </fieldset>
• To add a caption to the group box (field set), include a <legend>Legend Text Here</legend> immediately after the <fieldset> tag
• Field set can include a legend – appears on top edge of border created by fieldset
• <legend>Your title here</legend>• Apply any formatting to the text in the
legend, not the legend itself
• Add fieldset and legend to radio buttons (remove text)
HIDDEN INPUTS
• Like constants• Allow you send data to the server that the user didn’t enter• type = "hidden"• value = "constant"
– Value to be sent to the server
HIDDEN INPUTS
• Examples:• <input type="hidden" name="recipient"• value="[email protected]" >
• <input type="hidden" name="subject"• value="Email subject here" >
• <input type="hidden" name="redirect"• value="someotherpage.htm" >
• Also used in PHP to send signals from one page to another
• Add hidden inputs below form tag
SETTING TAB INDEX
• Like in C#, you can control the tab order of your form objects
• In each input field tag include the following attribute:tabindex="#" (insert the appropriate number)– Start at 1 (not zero)
• Normally, HTML tries to visit the form objects from left to right, top to bottom.
• I only change tab index if default doesn’t work• Reverse the first 3 items on the form
DEFINING ACCESS KEYS
• To improve form usability, you can designate access keys for any form element.
• accesskey="E" (insert your own letter)• User must combine this letter with:
– the Alt key in Internet Explorer
• the Alt-Shift keys in Firefox• W3C suggests you underline or boldface the key in the
label– Note not done automatically
• Provide some visual clue to the access key• Set access keys for each radio button
FORM CSS
• The css file should be includd in your in-class example• To start, most of my styles are sub-styles of the formStyle
named style.• Apply this style to the form itself.
• .formStyle input, textarea, select, button {• margin-bottom:10px;• font-family: Times New Roman, serif;• font-size: 100%;• }
FORM CSS
– All inputs that are inside the formStyle form• Include a 10 pixel bottom margin. This adds vertical
spacing between the form objects
• Use the full-size Times New Roman font.• This font is the default font for the body of
my page. For some reason, inputs don’t adopt the body font. This makes the text used in the inputs the same as the form.
FORM CSS
• .formStyle label {• text-align:right;• float: left;• vertical-align:top;• width: 175px; • padding-right: 10px;• padding-top: 5px; }
– Align labels to the right. That way all the colons at the end of the labels align (optional)
• Float to the left so the inputs appear on the right• Vertically align top so the labels appear at the top of tall
inputs like Text Areas• Width 175 pixels. Adjust this to accommodate your longest
label.• Padding right so the label isn’t right against the input• Padding top to move the label down a little so the labels
align with the text in the inputs.
• .formStyle br {clear:both;}• When building the page, but a <br> after each input
• This styles the break to clear the previous input’s float style.
• .formStyle .flowLabel{• float:none;• width:0px;• text-align:left;
– Radio buttons and check boxes often have labels that follow them instead of precede them like the other inputs.
• Change these labels’ style so they don’t behave like the labels on the left side of the form that describe the other inputs.
• Be sure to include class="flowLabel" in the radio button’s label tag
• /* for error icons */• .formStyle img {• margin-left: 5px;
– vertical-align:top;• }
– Later we will be adding error icon images to our form.
• Move the away from the input by 5 pixels• Align the image to the top of the input.
ADDITIONAL INPUT TYPES
• number – Forces entry of a number
• Range (min, max) optional• Step optional
• Include decimal in step (0.1) to allow decimals in box. Leave off to force integers. Big Note: for some browsers, the leading 0 is required.
• To allow integers or decimals to be entered, designate “any” as the step.
– IE10 • On submit, if number is out of range, get error message
– FF35 • Trailing zeroes after decimal always removed
• Doesn’t like $ or comma
– Chrome • Can type letters, but Chrome designates errors on submit
• On submit, displays popup message designating whether to low or too high (including min or max). Pop up also includes title if designated.
• Removes formatting ($, comma) on blur – Opera
• On submit, displays popup message designating whether to low or too high (including min or max).
• Opera accepts $ and comma but posts nothing when they’re included (have to remove in JavaScript?)– Safari 5.1.7 (in Windows)
• Arrows work, limited to min/max
• Manually typed values are not validated for range limits• Removes manually typed value if includes $, restores most recent acceptable
value• Removes digits after commas
• range – Forces entry of a number in a range (min, max) with an optional step value
• IE10 • Slider does display whole numbers
• If decimals used, only whole number appears above slider– FF24
• Slider doesn’t display value currently selected
• See my New HTML 5 Input Types sample page for a solution to this (mirrored text box)– Chrome
• Slider doesn’t display value currently selected
• See my New HTML 5 Input Types sample page for a solution to this (mirrored text box)– Opera
• Slider doesn’t display value currently selected
• date– Attributes for min/max – IE10
• Not yet implemented– FF24
• Not yet implemented– Chrome
• Pretty easy to use
• Allows manual date typing• Arrows can control month or day or year, whichever is selected• If date is out range, error displays on submit
– Opera • See image to right
• Date must be selected from calendarNo manual date entryDifficult to move backwards or forwards many years
• month– For mobile device keyboard designation only(?)
• IE10• FF24• Chrome (see 1st image to right)
• Drop down looks like date picker, but only month and year are retained (yyyy-mm)
– Opera (see 2nd image to right• Drop down looks like date picker, but only month and year are retained (yyyy-
mm)
• time– Appears as a textbox in all browsers except where indicated
• IE10 • FF24 • Chrome
• Can type manually (easy)
• Arrows change minutes when minutes are selected; hours when hours are selected, AM/PM when they’re selected– Opera
• Can type manually (a little cumbersome)
• Arrows change minutes when minutes are selected; hours when hours are selected
• url – Appears as a textbox in all browsers
• Only accepts valid URLs• Compatible with data list
IE10 • On submit, displays popup message (designated in title attribute) if address is invalid
• To be valid, URL must include http:// or https://– FF24
• Colored border displays around field if invalid (no submit required)
• On submit, displays popup message (designated in title attribute) if address is invalid
• To be valid, URL must include http:// or https://– Chrome
• On submit, displays popup message (designated in title attribute) if address is invalid
• To be valid, URL must include http:// or https://– Opera
• Seems to accept anything, adding http:// to the beginning automatically
• email – Appears as a textbox in all browsers
• Only accepts valid Email addresses• Compatible with data list
• IE10• On submit, displays popup message (designated in title attribute) if address is invalid
– FF24• Colored border displays around field if invalid (no submit required)
• On submit, displays popup message (designated in title attribute) if address is invalid– Chrome
• On submit, displays popup message (designated in title attribute) if address is invalid
