Web Site Design and Development Lecture 23. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

Transcription

1 Web Site Design and Development Lecture 23 CS 0134 Fall 2018 Tues 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 specifies 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 2

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> 3

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 4

5 Textarea example <textarea placeholder= Enter a bio > </textarea> 5

6 Label The label element provides a label for a form field When used on a checkbox or radio button, you can activate the checkbox or radio button by clicking on the label. This makes the checkbox or radio button more accessible Attribute for: the id of the form field that the label is labeling 6

7 Label example <input type= checkbox id= active name= active > <label for= active >Active</label> 7

8 Fieldset and legend The fieldset element groups multiple form fields The default styling for a fieldset is a thin border around the grouped fields The legend element provides a label for the fieldset The default styling for a legend is to place the label along the fieldset s border 8

9 Fieldset and legend example <fieldset> <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> </fieldset> 9

10 File upload <input type= file > The <input type= file > element is used to upload a file Attributes accept: a comma separated list of mime types that are accepted by the file upload field. Without this attribute, the file upload field will accept all files. multiple: boolean attribute that allows user to upload multiple files with the file upload field In order to upload the file, 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 10

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

12 Tabindex and accesskey Like the <a> element, you can use tabindex and accesskey on form fields tabindex: tabindex sets the order in which a form field 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 field 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 sp 12

13 HTML5 Form Elements HTML5 introduced several new input types that help make our forms more semantic 13

14 <input type= > The <input type= > element can be used to accept addresses from users Browsers will validate the data provided by the user to ensure that they have entered an address and warn the user if they have not If a browser doesn t support the field, it will treat it like a text box making it safe to use now 14

15 example <input type= id= name= > 15

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 field, it will treat it like a text box making it safe to use now 16

17 URL example <input type= url id= webpage name= webpage > 17

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 field as phone numbers vary greatly worldwide If a browser doesn t support the tel field, it will treat it like a text box making it safe to use now 18

19 Tel example <input type= tel id= number name= number > 19

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 field, it will treat it like a text box making it safe to use now 20

21 Number example <input type= number id= quantity name= quantity min= 0 max= 10 step= 1 > 21

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 field, it will treat it like a text box making it safe to use now 22

23 Range example <input type= range id= quantity name= quantity min= 0 max= 10 step= 1 > 23

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 field, it will treat it like a text box making it safe to use now 24

25 Date example <input type= date id= birthday name= birthday > 25

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 field, it will treat it like a text box making it safe to use now 26

27 Time example <input type= time id= meetingstart name= meeting-end > 27

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 field, it will treat it like a text box making it safe to use now 28

29 Time example <input type= week id= week name= week > 29

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 field, it will treat it like a text box making it safe to use now 30

31 Month example <input type= month id= month name= month > 31

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 field, it will treat it like a text box making it safe to use now 32

33 Month example <input type= datetime id= meeting name= meeting > 33

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 field, it will treat it like a text box making it safe to use now 34

35 Month example <input type= datetime-local id= meeting name= meeting > 35

36 Search <input type= search > The <input type= search > element can be used to create search box When used in conjunction with some hidden fields and a submit button with the value Search, you can send search requests to search engines If a browser doesn t support the search field, it will treat it like a text box making it safe to use now 36

37 Search example The following example comes from the book and uses Google search <form method= get action= > <input type= search name= q size= 30 maxlength= 255 > <input type= hidden name= domains value= > <input type= hidden name= sitesearch value= > <input type= submit id= search value= Search > </form> 37

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 field, it will treat it like a text box making it safe to use now 38

39 color example <input type= color id= color name= color value= # > 39

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 fields that the output box is showing the output for If a browser doesn t support the output element, it will treat it like a text box making it safe to use now 40

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

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 filled the bar is Progress is supported by all browsers, meter is supported by all browsers but IE 42

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 43