ISTM 420 Chp. 11 - Working w/Forms

Fieldset / Legend elements

-fieldset element is used to group controls . -The legend element can be coded within a fieldset element. It is used to label the group of controls.

Attributes of the form element

-name: can be referred to by a client-side or server-side code. -action: the URL of the file that will process the data in the form. -method: the HTTP method for submitting the form data. It can be set to either "get" or "post". The default value is "get" -target : Where to open he page that is specified in the action attribute. If you specify, _blank, the page is opened in a new window or tab.

(drop down list)Attributes of the outgroup and option elements

outgroup: label - The text that's used to identify a group of options . option:value - The value of the selected option that will be sent to the server for processing. option:selected - A Boolean attribute that causes the option to e selected when the page is loaded.

Attributes for using regular expression

pattern: Specifies the regular expression that is used to validate the entry. title: Text that is displayed in the tooltip when the mouse hovers over a field. This text is also displayed after the browser's error message.

Attributes for the textarea element

rows: the approximate number of rows in the text area cols: the approximate number of columns in the text area. wrap: Specifies how the text should wrap. Possible values include soft and hard, and soft is the default.

Attribute of the select element for list boxes

size: The number of items to display in the control. If the value is 1, the control will be a drop-down list. The default value is 1. multiple: A Boolean attribute that determines whether multiple items can be selected. It is only valid if size is greater than 1.

attributes for setting the tab order and access keys

tabindex: set the tab order fora control, use a value of 0 or more . To take a control out of the tab order, use a negative value like-1. acceskey: A keyboard that can be pressed in combination with a control key to move the focus to the control.

HTML5 attributes for data validation

Autocomplete: set this attribute to off to tell the browser to disable auto-completion. This can be coded for a form or a control. Required:This Boolean attribute indicates that a value is required for a field. If the form is submitted and the field is empty, the browser displays its default error message. novalidate: This boolean attribute tells the browser that it shouldn't validate the form or control that it is coded for.

attributes for the progress and meter elements

-high -low -min -max -optimum -value

Difference between the input and button elements

..input element only allows a button to contain plain text or an image, but the button element allows a button to contain formatted text as well as other HTML elements such as images.

Creating a drop down list

You code a select element that contains option elements.

Attribute for label element

for: Should be set to the id of the related control. Although the id attribute i optional in forms that don't rely on client-side scripting, it is required when using labels and the for attribute.

The CSS for the alignment controls

label { float: left; width: 5em; text-align: right;} input { margin-left: 1em; margin-bottom: .5em;} #button { margin-left: 7em;}

CSS for the textarea

textarea { height: 5em; width: 25em; font-family: Arial, Helvetica, sans-serif; }

Attributes for the options elements within a datalist element

value: The value of an option in the datalist. It is left aligned. label: The description of the item in the data list. It is right-aligned

Rules for Radio Buttons/Check Boxes

- Only one radio button in a group can be selected at one time. The radio button in a group must have the same name attribute, but different values. - Check boxes are unrelated, so more than one check box can be checked at the same time.

an attribute for the output element

- for <p>Enter numbers in both fields and click the Calculate button.</p> <form onsubmit="return false"> <input name="x" type="number" min="100" step="5" value="100"> + <input name="y" type="number" min="100" step="5" value="100"><br><br> <input type="button" value="Calculate" onClick="result.value = parseInt(x.value) + parseInt(y.value)"> <br><br> Total: <output name="result" for="x y"></output> </form>

Attributes of the input element for text fields

-type: Th type of text field. Valid values include "text","password",and "hidden". -value:The default value for the field but the user can change this value. If a reset button is clicked, the field will revert to this value. -maxlength: The maximum number of characters that the user can enter in the field -size: The width of the field in characters based on the average character width of the font. However it's best to use the CSS to set the size of the field. -autofocus: New to HTML5, a Boolean attribute that tells the browser to set the focus on the field when page is loaded. -placeholder: New to HTML5, this attribute puts a default value or hint in the field. Unlike the value attribute, though, this value is removed when the users's cursor enters the control.

Attributes common to most input elements

-type: The type of control like "button", text", or "checkbox". -name: A name that can be referred to by a client-side or server-side code. -disabled: A Boolean attribute that disables and grays out the control. Then the control can't receive the focus, the user can't tab to it, and the value isn't submitted with the form. -readonly: A Boolean attribute that means a user can't change the control's value. But the control can receive the focus, the user can tab to it, and the value is submitted with the form.

Attributes for the input element for buttons and for the button element

-type: the type of button. Valid values include "submit","reset","button", or "image". The "submit" and "image" types submit the form to the server, the "reset" type resets all fields to their default value, and the "button" type is typically used to run a client-side script. -value: The text that's displayed on the button and submitted to the server when the button is clicked. -src: For the image button, the relative or absolute URL for the image to display. -alt: For an img button, alternate text to display in place of img. -height: For an img button, the height of the button (pixel/percent) -width: For an img button, the width of the button (pixels/percent)

Attributes of the input element for radio buttons and check boxes

-type: the type of control, either "radio" or "checkbox". -value: The value to submit to the server when the control is checked and the form is submitted. -checked: A Boolean attribute that causes the control to be checked when the page is loaded. If a reset button is clicked, the control reverts to the checked state.

The CSS3 pseudo-code for required,valid,and invalid fields A CSS attribute selector for all controls with the required attribute

:required :valid :invalid input[required]

The HTML for progress and meter elements

<body onLoad="setProgressAndMeter()"> <h3>Progress Element</h3> Progress set by JavaScript on page load: <progress id="progressBar" max="100" value="0"></progress> <h3>Meter Element</h3> Meter set by JavaScript on page load: <meter id="meterBar" max="100" value="0" optimum="50" high="60"></meter> </body>

HTML for using google search engine

<form method="get" action="http://www.google.com/search"> <input type="search" name="q" size="30" maxlength="255"> <input type="hidden" name="domains" value="http://www.murach.com"> <input type="hidden" name="sitesearch" value="http://www.murach.com"> <input type="submit" name="search" value="Search"> </form>

The HTML for a form

<form name="email_form" action="subscribe.php" method="post"> <p>Please enter your e-mail address to subscribe to our newsletter.</p> <p>E-Mail: <input type="text" name="email"></p> <p><input type="submit" name="submit" value="Subscribe"></p> </form>

Example of email , url, and tel (telephone) controls

<form name="email_form" action="survey.php" method="post"> <h3>Your information:</h3> <label for="email">Your email address:</label> <input type="email" name="email" id="email" required><br> <label for="link">Your website:</label> <input type="url" name="link" id="link" list="links"><br> <label for="phone">Your phone number:</label> <input type="tel" name="phone" id="phone" required><br><br> <input type="submit" name="submit" value="Submit Survey"> </form>

The HTML for a file upload that accepts JPEG and GIF images

<form name="upload_form" action="sendemail.php" method="post" enctype="multipart/form-data"> Attach an image:<br> <input type="file" name="fileupload" accept="image/jpeg, image/gif"> </form>

Four buttons that created by the input element

<input type="button" name="message" value="Alert Me"> <input type="submit" name="checkout" value="Checkout"> <input type="reset" name="resetform" value="Reset"> <input type="image" src="images/submit.jpg" alt="Submit button" width="114" height="42">

HTML for a form with label elements

<label for="quantity" id="quantity">Quantity:</label> <input type="text" name="quantity" id="quantity" value="1" size="5"><br><br> Crust:<br> <input type="radio" name="crust" id="crust1" value="thin"> <label for="crust1">Thin Crust</label><br> <input type="radio" name="crust" id="crust2" value="deep"> <label for="crust2">Deep Dish</label><br> <input type="radio" name="crust" id="crust3" value="hand"> <label for="crust3">Hand Tossed</label><br><br>

The HTML for a list box

<select name="toppings" size="4" multiple> <option value="pepperoni">Pepperoni</option> <option value="sausage" selected>Sausage</option> <option value="mushrooms">Mushrooms</option> <option value="olives">Black olives</option> <option value="onions">Onions</option> <option value="bacon">Canadian bacon</option> <option value="pineapple">Pineapple</option> </select>

The HTML for a textarea with default text

Comments:<br> <textarea name="comments" placeholder="If you have any comments, please enter them here."> </textarea>

The HTML for radio buttons and check boxes

Crust:<br> <input type="radio" name="crust" value="thin"> Thin Crust<br> <input type="radio" name="crust" value="deep" checked>Deep Dish<br> <input type="radio" name="crust" value="hand"> Hand Tossed<br><br> Toppings:<br> <input type="checkbox" name="topping1" value="pepperoni"> Pepperoni<br> <input type="checkbox" name="topping2" value="mushrooms"> Mushrooms<br> <input type="checkbox" name="topping3" value="olives"> Olives

Label, text box, and button controls aligned on a form

HTML for the Form: <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" autofocus><br> <label for="lastname">Last name:</label> <input type="text" name="lastname" id="lastname"><br> <label for="address">Address:</label> <input type="text" name="address" id="address"><br> <label for="city">City:</label> <input type="text" name="city" id="city"><br> <label for="state">State:</label> <input type="text" name="state" id="state"><br> <label for="zip">Zip code:</label> <input type="text" name="zip" id="zip"><br> <input type="submit" name="register" id="button" value="Register"> <input type="reset" name="reset" id="reset">

HTML that uses regular expressions

Name: <input type="text" name="name" required autofocus><br> Zip: <input type="text" name="zip" required pattern="\d{5}([\-]\d{4})?" title="Must be 99999 or 99999-9999"><br> Phone: <input type="text" name="phone" required pattern="\d{3}[\-]\d{3}[\-]\d{4}" title="Must be 999-999-9999"><br> <input type="submit" name="submit" value="Submit Survey"

HTML that uses the validation attributes

Name: <input type="text" name="name" required><br> Address: <input type="text" name="address" novalidate><br> Zip: <input type="text" name="zip" required><br> Phone: <input type="text" name="phone" required autocomplete="off"><br> <input type="submit" name="submit" value="Submit Survey

The HTML for text fields

Quantity:<input type="text" name="quantity" value="1" size="5" readonly><br><br> Username:<input type="text" name="username" autofocus><br><br> Password:<input type="password" name="password" maxlength="6" placeholder="Enter your password"> <br><br> Hidden:<input type="hidden" name="productid" value="widget">

Accessibility guideline for tab order and access keys

Setting a proper tab order and providing access keys improves the accessibility for users who can't use a mouse

The HTML for a drop down list

Style:<br> <select name="style_and_size"> <optgroup label="The New Yorker"> <option value="ny10">10"</option> <option value="ny12">12"</option> <option value="ny16">16"</option> </optgroup> <optgroup label="The Chicago"> <option value="chi10">10"</option> <option value="chi12">12"</option> <option value="chi16">16"</option> </optgroup> </select>

Accessibility guidelines for labels

Use labels with radio buttons and check boxes so the user can click on the label text to select the control that the label is associated with. This also helps with assistive devices.

Pattern for common entries

Used for/Pattern Password (6+ alphanumeric)--> [a-zA-Z0-9]{6,} Zip code (99999 or 99999-9999)--> \d{5}([\-]\d{4})? Phone number (999-999-9999)--> \d{3}[\-]\d{3}[\-]\d{4} Date (MM/DD/YYYY)--> [01]?\d\/[0-3]\d\/\d{4} URL (starting with http:// or https://)--> https?://.+ Credit card (9999-9999-9999-9999)--> ^\d{4}-\d{4}-\d{4}-\d{4}$

Attributes of the input element for the file upload control

accept: The types of files that are accepted for upload. When the operating system's open dialog box opens, only files of those types will be shown. multiple:A boolean attribute that lets the user upload more than one file * To create a file upload control, code the input element with "file" as the type attribute. This control lets the users select the files they want to upload to your web server.

attributes for number and range controls

min max step(sliding scale)