Web Site Design and Development Lecture 22 CS 0134 Fall 2018 Tues - - PowerPoint PPT Presentation

Web Site Design and Development Lecture 22

CS 0134 Fall 2018 Tues and Thurs 1:00 – 2:15PM

2

Form

• Forms that allow users to submit information to us are

created with the form element

• Attributes

– id: the id of the form – action: the URL that the form will be submitted to – method: The HTTP method used to submit the data; can be set to

“get” or “post”. The default is “get”

– target: where the action URL will be opened. Like with <a>, setting

this to “_blank” will open the page in a new tab.

• Within the form element, you place any number of form

fields or buttons, known as controls.

3

Form example

<form id=”my-form” action=”upload.php” method=”post”> <!-- Form controls --> </form>

4

Input

• The input element is used for the majority of form controls
• Common Attributes

– type: sets the type of control – id: the id of the input – name: a name for the element, used by client-side and server-side scripts – disabled: boolean attribute that sets if a control is disabled; data for that

control is not submitted with the form

– readonly: boolean attribute that sets if a control is readonly; data for that

form is submitted with the form

• Boolean attributes are used by just using the attribute name

without a value

5

Input example

<input type=”text” id=”field” name=”field” disabled>

6

Buttons

• Buttons can be created in two ways, with

the input element or with the button element

• The main difference between using input

and button is that input allows the button to just contain plain text or an image while button element allows you to use HTML in the button.

7

Buttons continued

• Attributes for both input and button

– type: the type of button. This can be set to:

• submit: submits the form to the action using the method
• reset: resets the form fields to their default values
• button: specifies a generic button that can be tied to JavaScript
• image: specifies a button that uses an image

– value: the text on the button and the value submitted with the

form

• For the image button type, you can also use the

attributes src, alt, height and width like you would the img element

8

Button examples

<input type=”submit” value=”Search”> <button type=”submit”> <img src=”spyglass.png” alt=”Spyglass”>Search </button>

9

Text inputs

• Text inputs include inputs of type=”text”,

type=”password” and type=”hidden”

• For the text and password types, a text box

is created that the user can use to input text

• For the password type, the text that is input

is obscured by bullets or asterisks.

• For the hidden type, no text box is created

and the value is hidden from the user.

10

Text inputs continued

• Attributes

– value: the default value of the text input – maxlength: how many characters can be entered in the

field

– size: the width of the text box in units of the average

width of the font. It is better to use CSS

– autofocus: boolean attribute that tells the browser to give

this input focus when the page is loaded

– placeholder: placeholder text for the field that will

disappear when a user’s cursor enters the text box

11

Text input examples

<input type=”text” id=”username” name=”username” placeholder= “Enter Username” autofocus> <input type=”hidden” id=”prodId” name=”prodId” value=”1001”>

12

Check box <input type=”checkbox”>

• The <input type=”checkbox”> element is used

to create check boxes

• Attributes

– name: name of the check box that can be used by

client-side and server-side scripts

– value: the value submitted if the check box is checked – checked: boolean attribute that sets if the check box

should be checked when the page is loaded. This is considered the default state of the check box

13

Check box example

<input type=”checkbox” name=”agree” id=”agree” value=”yes”>Do you agree to the terms and conditions?<br>

14

Radio button <input type=”radio”>

• The <input type=”radio”> element is used to create radio

buttons

• Attributes

– name: name of the radio button that can be used by client-side and

server-side scripts

– value: the value submitted if the radio button is checked – checked: boolean attribute that sets if the radio button should be checked

when the page is loaded. This is considered the default state of the radio button

• Radio buttons are grouped by giving them all the same name
• attribute. Only one option of a group of radio buttons can be

checked at a time.

15

Radio button example

<input type=”radio” name=”agree” id=”yes” value=”yes”>Yes<br> <input type=”radio” name=”agree” id=”no” value=”no”>No<br>

16

Select

• The select element is used to create drop-

down boxes

• The children of a select element are made

up of one or more optgroup and option elements

• By default, the first option element is

selected as the value of the select element

17

Option

• The option element is used to create an
• ption for a select element
• Attributes

– value: the value submitted if the option is selected – selected: tells the browser that this option should

be selected when the page loads

18

Optgroup

• The optgroup element groups option

elements under a label in a select element

• Attribute

– label: the label to be shown before the group of

• ption elements

19

Select example

<select id=”states” name=”states” <optgroup label=”East”> <option value=”PA”>Pennsylvania</option> <option value=”NY”>New York</option> </optgroup> <optgroup label=”West”> <option value=”OR”>Oregan</option> <option value=”CA”>California</option> </optgroup> </select>