html forms 1. overview of forms form – an html element that contains and organizes – form...

HTML

Forms

1

Overview of Forms• Form

– An HTML element that contains and organizes

– form controls such as

text boxes, check boxes, and buttons

that can accept information from website visitors.

2

Two Components of Using Forms

1. The HTML form -- the web page user interface

and

2. The server-side processing

Server-side processing works with the form data and sends e-mail, writes to a text file, updates a database, or performs some other type of processing on the server.

3

HTML Using Forms• <form>

– Contains the form elements on a web page– Container tag ends with </form>– Form elements cannot be nested inside each other

• <input>– Configures a variety of form elements including text boxes, radio

buttons, check boxes, and buttons– Stand alone tag

• <textarea>– Configures a scrolling text box– Container tag ends with </textarea>

• <select> – Configures a select box (drop down list)– Container tag ends with </select>

• <option> – Configures an option in the select box– Container tag ends with </option>

4

Form control elements

5

HTML form elementThe form element attributes:

◦ action URL or file name/path Required Specifies the server-side program or script that will process your form

data

◦ method get – default value,

form data passed in URL post – more secure,

form data passed in HTTP Entity Body◦ name

Identifies the form

◦ id Identifies the form

o Autocomplete Default value yes. Values: on & off.

<form name=“order” method=“post” id=“order” action=“demo.php>…form controls go here…</form> 6

HTML form Controls

1. The input element: <input>•A stand alone tag used to configure several different types of form controls.•Use the type attribute to specify the type of the form controls

7

Input Text box<input>Accepts text information

Attributes:◦ type=“text”◦ name◦ id◦ Size: numeric value◦ Maxlength: numeric value◦ Value: text or numeric characters, assigns an initial value

to the textbox◦ readonly: display only and cannot be edited◦ autocomplete◦ autofocus◦ Placeholder: text or numeric, brief info to assist the user◦ required: value is “required”◦ Accesskey: keyboard characters◦ tabindex: numeric, tab key order

8

Why use both name & id?

• The name attribute so it can be easily accessed by the client-side scripting language such as JavaScript or by server-side processing such as PHP.

• The id is for CSS & scripting.• The values assigned to the name or id

attribute on a particular element are the same.

9

Sample Form HTML<form> E-mail: <input type="text" name ="email" id="email"><br>

<input type="submit"> <input type=“reset">

</form>

10

input Submit Button• <input>• Submits the form information• When clicked:

– Triggers the action method on the <form> tag

– Sends the form data (the name=value pair for each form element) to the web server.

• Attributes:– type=“submit”– name– id– Value: configures the text displays on the button

e.g <input type=“submit”>11

input Reset Button

• <input>• Resets the form fields to their

initial values

• Attributes:– type=“reset”– name– id– Value: configures the text displays on the

button

e.g <input type=“reset”>12

Hands-On Practice1

• Create this form:

13

The code

14

______________________________________________________

Add the attribute value of to the submit button and render your page<input type=“submit” value=“Sign Up”>

input Password box<input>Accepts text information that needs to be

hidden as it is enteredDifferent browsers use different symbols

(shown as asterisks or circles)

Attributes:◦ type=“password”◦ name◦ id◦ Size◦ maxlength

e.g Password: <input type=“password” name=“pword” id=“pword”>

15

input Check box<input>Allows the user to select one or more of a group of

predetermined items

Attributes:◦ type=“checkbox”◦ name◦ Id◦ checked: value of “checked”◦ value: The value attribute defines this value which is send by

a post request. All check boxes can have the same value◦ Required◦ readonly◦ autofocus◦ accesskey◦ tabindex

e.g <input type="checkbox" name=”IE” id=“IE” value=“yes">Internet Explorer<br><input type="checkbox" name=”Firefox” id=“Firefox” value=“yes">Firefox<br><input type="checkbox" name=”Opera” id=“opera” value=“yes">Opera<br>

1

input Radio Button <input> Allows the user to select exactly one from a group of predetermined items

Each radio button in a group is given the same name and a unique value

Attributes:◦ type=“radio”◦ name◦ Id◦ checked: value of “checked”◦ value: The value attribute defines this value which is send by a post request.

Should be a unique value for each radio button in the group.◦ Required◦ readonly◦ Autofocus◦ accesskey◦ tabindex

e.g <input type=“radio” name=“Favbrowser” id=“favIE” value=“IE">Internet Explorer<br><input type=“radio” name=“Favbrowser” id=“favfirefox” value=“Firefox">Firefox<br><input type=“radio” name=“Favbrowser” id=“favOpera” value=“Opera">opera<br>

17

input Hidden form data• <input>• This form control is not displayed on the web page. • Hidden form fields

– Can be accessed by both client-side and server-side scripting – Sometimes used to contain information needed as the visitor

moves from page to page. • Use hidden fields to pass along information to the forms that is generated by the

program, script, or web page.• Remember that hidden fields are not hidden from view. Your readers can see them if

they view the source of your web page. So you should never use a hidden input field to store passwords or any other sensitive information.

• Attributes:– type=“hidden”– name– id– value

e.g <input type=“hidden” name=“sendto” id=“sendto” [email protected]>

18

mailto:[email protected]

Copyright © Terry Felke-Morris

textarea Scrolling Text Box• <textarea> </textarea>• Configures a scrolling text box• Attributes:

– name– id– Cols: the width in characters (required)– Rows: the height (required)– Wrap: values: hard or soft, configures the line breaks.– maxlength, disabled, readonly, placeholder, required,

accesskey, tabindex

e.g. <textarea name=“comments” cols=“40” rows=“2”> enter your comments here </textarea>

19


Select List<select></select>Configures a select list (along with option

elements)

Also known as: Select Box, Drop-Down List, Drop-Down Box, and Option Box.

Allows the user to select one or more items from a list of predetermined choices.

Attributes:◦ name◦ id◦ Size: no. of choices the browser will display◦ Multiple: value: multiple, to accept more than one choice

20


Options in a Select List• <option></option>• Configures the options in a Select List

• Attributes:– Value: assigns a value to the option– Selected: the initial option selected

21


Options in a Select List

<select size=“1” name=“favbrowser” id=“favbrowser”>

<option> select your favorite browser </option>

<option value=“internet Explorer”> Internet Explorer</option>

<option value=“Firefox”> Firefox</option>

<option value=“Opera”> Opera</option>

</select>

22


Options in a Select List

<select size=“5” name=“jumpmenu” id=“jumpmenu”>

<option value=“index.html”> Home</option>

<option value=“product.html”> Products</option>

<option value=“services.html”> Services</option>

<option value=“about.html”> About</option>

<option value=“contact.html”> Contact</option>

</select>

23


Image button & Button element

24

Changing the plain submit button to have more visually interesting.


Input Image Button<input>Submits the formWhen clicked:

◦ Triggers the action method on the form tag ◦ Sends the form data (the name=value pair for each

form element) to the web server.

Attributes:◦ type=“image”◦ name◦ id◦ src

◦ e.g. <input type=“image” src=“login.gif” alt=“login button”>

25


BUTTON ELEMENT<button></button>A container tagWhen clicked, its function depends on the value of the

type attribute. Can contain a combination of text, images, and mediaOften is not usedAttributes:

◦ type=“submit”, type=“reset”, type=“button”◦ name◦ id◦ alt◦ value

◦ e.g. <button type=“submit”><img src=“signup”.gif width=“80” height=“28” alt=“Sign up for free

newsletter”></button>

26


Accessibility & Forms

• Label Element• Fieldset Element• Legend Element• Tabindex Attribute• Accesskey Attribute

27


Label element• <label></label>• Associates a text label with a form control• Helpful to people who are using assistive

technology

• Two Different Formats:<label>Email: <input type="text" name=“email" id ="email"></label>

Or

<label for="email">Email: </label><input type="text" name="CustEmail" id= "email">

28


Fieldset and Legend Elements• The Fieldset Element

– Container tag– Groups elements of similar purpose together– More visually pleasing form

• The Legend Element– Container tag– Creates a text label within the fieldset

29

<fieldset><legend>Customer Information</legend> <label>Name: <input type="text" name="Name" id="Name“></label> <br><br> <label>Email: <input type="text" name="Email" id="Email"></label> </fieldset>


HTML5: Email Text Box <input>Similar to textbox but accepts text information in

e-mail address format

Common Attributes:◦ type=“email”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required

30


HTML5: URL Text Box<input>Accepts text information in URL format

Common Attributes:◦ type=“url”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required

31


HTML5: Telephone Number Text Box<input>Accepts text information in telephone number

format

Common Attributes:◦ type=“tel”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required

32


HTML5: Datalist Control • Selection of choices are offered along with a text

box for entry.

<label for="color">Favorite Color:</label> <input type="text" name="color" id="color" list="colors" >

<datalist id="colors"> <option value="red"> <option value="green"> <option value="blue"> <option value="yellow"> <option value="pink"> <option value="black"></datalist>

33


HTML5: Spinner Control

<label for="myChoice">Choose a number between 1 and 10:</label><input type="number" name="myChoice" id="myChoice"

min="1" max="10">

34


HTML5: Calendar Control <label for="myDate">Choose a Date</label>

<input type="date" name="myDate" id="myDate">

35


More Information

• Forms: http://www.w3schools.com/html/html_forms.asp

• Form Attributes: http://www.w3schools.com/html/html_form_attributes.asp

• Form Types: http://www.w3schools.com/html/html_form_input_types.asp

36

html forms 1. overview of forms form – an html element that contains and organizes – form...

Documents