Web Site Design and Development Lecture 23 CS 0134 Fall 2018 T - - PowerPoint PPT Presentation

Web Site Design and Development Lecture 23

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

2

List box <select size=”#”>

• The <select size=”#”> element shows a

list of options in a scroll-able box when size is set to a number greater than 1

• Attribute

– multiple: boolean attribute that specifjes if the

user can select multiple options

• When the multiple attribute is set, the

user can select multiple items by holding Ctrl on Windows & Linux and Cmd on macOS

3

List box example

<select size=”2” multiple> <option value=”blue”>Blue</option> <option value=”black”>Black</option> <option value=”gold”>Gold</option> <option value=”green”>Green</option> </select>

4

Textarea

• The textarea element creates a multi-line

text box

• Attributes

– rows: sets the height of the textarea in rows of text – cols: sets the width of the textarea in columns of

characters

– wrap: sets the type of word wrapping to do. Can be

set to “hard” or “soft”.

• Even though we have the rows and cols

attributes, you should set the size with CSS

5

Textarea example

<textarea placeholder=”Enter a bio”> </textarea>

6

Label

• The label element provides a label for a

form fjeld

• When used on a checkbox or radio

button, you can activate the checkbox

• r radio button by clicking on the label.

This makes the checkbox or radio button more accessible

• Attribute

– for: the id of the form fjeld that the label is

labeling

7

Label example

<input type=”checkbox” id=”active” name=”active”> <label for=”active”>Active</label>

8

Fieldset and legend

• The fjeldset element groups multiple

form fjelds

• The default styling for a fjeldset is a

thin border around the grouped fjelds

• The legend element provides a label

for the fjeldset

• The default styling for a legend is to

place the label along the fjeldset’s border

9

Fieldset and legend example

<fjeldset> <legend>Number of Courses</legend> <input type=”radio” name=”num” value=”1”>1<br> <input type=”radio” name=”num” value=”2”>2<br> <input type=”radio” name=”num” value=”3”>3<br> </fjeldset>

10

File upload <input type=”fjle”>

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

upload a fjle

• Attributes

– accept: a comma separated list of mime types that are

accepted by the fjle upload fjeld. Without this attribute, the fjle upload fjeld will accept all fjles.

– multiple: boolean attribute that allows user to upload

multiple fjles with the fjle upload fjeld

• In order to upload the fjle, you must add the

attribute enctype to the form element and set it to ”multipart/form-data”. You must also set the method to “post”

11

File upload example

<form id=”upload_res” name=”upload_res” action=”upload.php” method=”post” enctype=”multipart/form-data”> Upload Resume: <input type=”fjle” id=”res” name=”res”> </form>

12

Tabindex and accesskey

• Like the <a> element, you can use tabindex and

accesskey on form fjelds

• tabindex: tabindex sets the order in which a form fjeld

is accessed when a user presses tab on a website. By default, the tab order is the order in which the elements were added to the page. Set tabindex equal to -1 to make a link no longer part of the tab order.

• accesskey: This sets a keyboard shortcut that can be

used by the user to access a form fjeld on a webpage. You set accesskey equal to a letter. How you use the shortcut depends on the browser and operating system the user is using. w3schools has a table on this at https://www.w3schools.com/tags/att_global_accesskey.a sp

13

HTML5 Form Elements

• HTML5 introduced several new input

types that help make our forms more semantic

14

Email <input type=”email”>

• The <input type=”email”> element

can be used to accept email addresses from users

• Browsers will validate the data

provided by the user to ensure that they have entered an email address and warn the user if they have not

• If a browser doesn’t support the email

fjeld, it will treat it like a text box making it safe to use now

15

Email example

<input type=”email” id=”email” name=”email”>

16

URL <input type=”url”>

• The <input type=”url”> element can

be used to accept a URL from users

• Browsers will validate the data

provided by the user to ensure that they have entered a URL

• If a browser doesn’t support the URL

fjeld, it will treat it like a text box making it safe to use now

17

URL example

<input type=”url” id=”webpage” name=”webpage”>

18

Tel <input type=”tel”>

• The <input type=”tel”> element can

be used to accept a telephone number from users

• Browsers do not currently validate

data entered into a tel fjeld as phone numbers vary greatly worldwide

• If a browser doesn’t support the tel

fjeld, it will treat it like a text box making it safe to use now

19

Tel example

<input type=”tel” id=”number” name=”number”>

20

Number <input type=”number”>

• The <input type=”number”> element can be used to

accept a number from users

• In supporting browsers, the number element is

displayed as a text box with an up and down arrow to increase and decrease the number

• Attributes

– min: the minimum value the user can enter – max: the maximum value the user can enter – step: the value that the number is increased or decreased when

the arrows are used

• If a browser doesn’t support the number fjeld, it will

treat it like a text box making it safe to use now

21

Number example

<input type=”number” id=”quantity” name=”quantity” min=”0” max=”10” step=”1”>

22

Range <input type=”range”>

• The <input type=”range”> element can be used

to accept a number from users

• In supporting browsers, the range element is

displayed as a slider bar

• Attributes

– min: the value at the left side of the slider – max: the value at the right side of the slider – step: the value that the number is increased or decreased

when the slide is moved

• If a browser doesn’t support the range fjeld, it

will treat it like a text box making it safe to use now

23

Range example

<input type=”range” id=”quantity” name=”quantity” min=”0” max=”10” step=”1”>

24

Date <input type=”date”>

• The <input type=”date”> element can be used

to accept a date from users

• How this is implemented depends on the

browser

• Attributes

– min: the minimum date that can be entered (YYYY-MM-DD) – max: the maximum date that can be entered (YYYY-MM-

DD)

• If a browser doesn’t support the date fjeld, it

will treat it like a text box making it safe to use now

25

Date example

<input type=”date” id=”birthday” name=”birthday”>

26

Time <input type=”time”>

• The <input type=”time”> element can be

used to accept a time from users

• How this is implemented depends on the

browser

• Attributes

– min: the minimum time that can be entered (HH:MM:SS) – max: the maximum time that can be entered (HH:MM:SS)

• If a browser doesn’t support the time fjeld, it

will treat it like a text box making it safe to use now

27

Time example

<input type=”time” id=”meeting- start” name=”meeting-end”>

28

Week <input type=”week”>

• The <input type=”week”> element

can be used to accept a week from users

• How this is implemented depends on

the browser

• If a browser doesn’t support the week

fjeld, it will treat it like a text box making it safe to use now

29

Time example

<input type=”week” id=”week” name=”week”>

30

Month <input type=”month”>

• The <input type=”month”> element

can be used to accept a month from users

• How this is implemented depends on

the browser

• If a browser doesn’t support the

month fjeld, it will treat it like a text box making it safe to use now

31

Month example

<input type=”month” id=”month” name=”month”>

32

Datetime <input type=”datetime”>

• The <input type=”datetime”>

element can be used to accept a date and time from users in UTC (Coordinated Universal Time)

• How this is implemented depends on

the browser

• If a browser doesn’t support the

datetime fjeld, it will treat it like a text box making it safe to use now

33

Month example

<input type=”datetime” id=”meeting” name=”meeting”>

34

Datetime-local <input type=”datetime-local”>

• The <input type=”datetime-local”>

element can be used to accept a date and time from users based on their computers current date and time

• How this is implemented depends on

the browser

• If a browser doesn’t support the

datetime-local fjeld, it will treat it like a text box making it safe to use now

35

Month example

<input type=”datetime-local” id=”meeting” name=”meeting”>

36

Search <input type=”search”>

• The <input type=”search”> element

can be used to create search box

• When used in conjunction with some

hidden fjelds and a submit button with the value “Search”, you can send search requests to search engines

• If a browser doesn’t support the

search fjeld, it will treat it like a text box making it safe to use now

37

Search example

• The following example comes from the

book and uses Google search

<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” id=”search” value=”Search”> </form>

38

Color <input type=”color”>

• The <input type=”color”> element displays

a color palette to the user for them to select a color

• When the form is submitted, the color is

sent in hexadecimal RGB

• Attribute

– value: a hexadecimal RGB value that is used as the

initial color

• If a browser doesn’t support the color fjeld,

it will treat it like a text box making it safe to use now

39

color example

<input type=”color” id=”color” name=”color” value=”#333333”>

40

Output

• The output element displays output

data to a user. This can come from JavaScript or server-side scripts

• Attribute

– for: one or more form fjelds that the output box

is showing the output for

• If a browser doesn’t support the
• utput element, it will treat it like a

text box making it safe to use now

41

• utput example

<input type=”text” id=”val1”> <input type=”number” id=”val2”> <output name=”result” for=”val1 val2”></output>

42

Progress and meter

• The progress and meter elements display output data

to a user in the form of a progress or meter bar

• Attributes

– high: the point at which the element’s value is considered high, the

bar will turn yellow.

– low: the point at which the element’s value is considered low, the

bar will turn yellow.

– min: the minimum value of the bar – max: the maximum value of the bar – optimum: the optimum value of the bar – value: the value of the bar, this translates to how fjlled the bar is

• Progress is supported by all browsers, meter is

supported by all browsers but IE

43

Progress and meter example

<progress id=”progress” name=”progress” max=”100” min=”0”> <meter id=”meter” name=”meter” min=”20” max=”80” optimum=”50”>

• In both cases, the value can be adjusted using

JavaScript