HTML 7

3 form controls for making choices:

radio buttons, check boxes, drop-down boxes

Which form controls put the input element inside the <p>?

radio, checkbox, password input, text input,

(drop down list box) the option element is used to......

specify the options that the user can select from. The text between <option>text</option> will be shown on the browser.

form controls for submitting forms:

submit buttons, image buttons, file upload

3 types of Form controls for adding text:

text input, password input, text area

The form element should always include:(3)

the action attribute. And will usually have a method and id attribute too.

The name attribute identifies......

the form control

If the method attribute is not used, the form data will be sent using which method?

the get method

note4

the name attribute, simply names the form control!!!! ex.what would you like to name this form?

The value attribute indicates:

the value sent to the server if this checkbox is checked.

How does the get method work?

the values from the form are added to the end of the URL specified in the action attribute.

How are values sent in the post method:

they are sent in HTTP headers.

Within the form element, the textarea element is used......

to create a multi-line text input.

What is the input element used for within the form element:

to create several different form controls.

maxlength attribute is used......

to limit the number of characters a user may enter into the text field.

Date input form control code:

type="date" in the input element. page 166

Email input form control code:

type="email" within the input element *only in html5

How to create a password input:

type="password" The characters will be blocked out when entered for security.

single line search input form control code:

type="search" within the input element

url input form control code:

type="url" within the input element *only in html5

You should use the post method if your form: (4)

1. allows users to upload a file 2. is very long 3. contains sensitive data 4. adds information to, or deletes information from, a database.

The get method is ideal for: (2)

1. short forms (like google search) 2. when you are just retrieving data from the web server *need examples of what retrieving data from web server is????

code for the <button> element:

<button><img src="image.jpg" alt="add" width="10" height="10" />textadded</button>

<label> element when used to wrap around the form input code:

<label>Age: <input type="text" name="age" /></label> **treat the label element as a <p> element

If you want to allow users to upload a file, what form box should you use?

A file input box

note2:

If the form control allows you to choose from a fixed set of answers, the web page author will add code that gives each option an automatic value.

What is the advantage of using the label element on the radio buttons or checkboxes?

It allows the visually impaired to click on either the button or on the label.

The checked attributed does what:

It indicates which value should be selected when the page loads.

What does the action attribute do in the form element:

It's value is the URL for the page on the server that will receive the information in the form when it is submitted. **question, how do you know what page on the server will receive the data?

Which form controls should have the same name value for their options?

Radio button, checkbox

Although the password is hidden, this does not mean the information is secure, therefore when doing anything that requires security precautions, the server needs to be set up to communicate with users' browsers using.......

Secure Sockets Layer.

What does the <legend> element do?

contains a caption/description of what is being grouped together.

Forms can be sent using one of two methods:

get or post

Note:

if the form control allows the user to enter text, then the value of the form control is whatever the user has typed in.

code for form validation:

use the required="required" attribute inside the input element.

code for a form using text area:

<form action="url.com"> <p>What do you think?</p> <textarea name="comments">enter comments here</textarea> </form> **use CSS when controlling the height and width of the textbox

Drop down list box form control code:

<form action="url.com"> <p>What device do you listen to music on?</p> <select name="devices"> <option value="ipod">ipod</option> </select> </form>

How does a form work? (4 stages)

1. user fills in form and then submits it. 2. name of each form control is sent to the server along with the value the user enters or selects. 3. server processes the information using a programming language. 4. server creates a new page to send back to the browser based on the information received.

code for fieldset element:

<fieldset> <legend>contact details</legend> form controls </fieldset> *page 164 for detailed code.

code for the radio button form control:

<form action="url.com" <p>Please select your favorite genre: <br /> <input type="radio" name="genre" value="rock" checked="checked" /> Rock </p> </form> *the value of the name attribute should be the same for all of the radio buttons used to answer a question. *only one radio button should have the checked attribute. **Each radio button has its own input element

code for a form password input:

<form action="url.com" <p>password: <input type="password" name="password" /> </p> </form>

Generic Full code for the form element:

<form action="url.com" method="get"> <p>form control appears here.</p> </form>

What is the code for a file input box?

<form action="url.com" method="post"> <p>upload your song here</p> <input type="file" name="usersong" /><br /> <input type="submit" value="upload" /> </form>

Form code for a text input:

<form action="url.com"> <p> username: <input type="text" name="username" maxlength="30" /> </p> </form> *think of the input element as an inline block element since it is inside the <p> element.

Multiple select box code:

<form action="url.com"> <p>Do you play any of the following instruments: (you can select more than one option by holding down the control on a PC or command key on a Mac while selecting different options.)</p> <select name="instruments" size="3" multiple="multiple"> <option value="guitar">guitar</option> </selected> </form> *this form control box must be test thoroughly because browsers do not render it perfectly.

code for checkbox form control:

<form> <p>Please select you favorite music service provider: <br /> <input type="checkbox" name="service" value="itunes" checked="checked" /> Itunes </p> </form> *name attribute value should be the same for all.

What is the form element coded as:

<form></form>

code used to label a form control using a for attribute:

<input id="female" type="radio" name="gender" value="f"> <label for="female">Female</label> *as you can see, the for attribute must equal the id attribute in the form control.

Code for an image button:

<input type="image" src="image.jpg" width="100" height="100" />

submit button code in the form element:

<input type="submit" value="nameofthebutton" /> *the value should be the name of the button as you want it to appear. *you do not need a name attribute, although you can have one if you'd like.

Grouping Form Elements: You can group related form controls together inside which element?

The <fieldset> element

type="text"....the text value creates.......

a single line text input form

The <button> element is used to....

allow the author more control over how their buttons appear and allow other elements appear inside the button.

GFE: By default most browsers show the <fieldset> with......

border lines around the grouped controls. *CSS allows you to change this.

selected="selected" attribute is used for which form controls to indicate option to be selected when first opening........

drop down list box and multiple select box. *if this option is not used, the first option will be shown when the page loads.

What is a form validation?

forms that give users messages if the form control has not been filled in correctly. *Usually javascript is best for this.

note 7

html5 does not require all elements to have values like the required attribute.....html 4 does. And therefore, it is best policy to add a value because not all browsers are up to date.

note3

in any new forms you write, CSS should be used to control the width of form elements.

Any text in between <textarea>text</textarea> will appear.....

in the text box when the page loads. *Java automatically deletes the text when user clicks on the box....If you do not use Java, then the user must delete the text or it will be sent to the server.

Key note on radio buttons:

once a radio button has been selected it cannot be deselected. If you want to allow multiple selections, you should use the checkbox form control.

note5

page 162 for hidden buttons

In a password input, the name attribute value should be?

password

Name the four programming languages:

php, C#, VB.net, Java

What attribute is used to allow you to show text in the textbox area until the user clicks on it?

placeholder="enter text here" ....this should be placed within the input element

When you are allowing users to upload files, the method attribute on the <form> element must have a value of......

post

The multiple attribute allows........

users to select multiple options from the list. The value of this attribute must be multiple.

The value of the type attribute determines.......

what kind of input they will be creating

The <label> element can be used in two ways:

wrapped around the text description and the form input. 2. be kept separate from the form control and use the FOR attribute. See page 163