Web Site Design and Development Lecture 23 CS 0134 Fall 2018 T ues and Thurs 1:00 – 2:15PM
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 2
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
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
Textarea example <textarea placeholder=”Enter a bio”> </textarea> 5
Label ● The label element provides a label for a form fjeld ● 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 fjeld that the label is labeling 6
Label example <input type=”checkbox” id=”active” name=”active”> <label for=”active”>Active</label> 7
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 8
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> 9
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” 10
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> 11
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 12
HTML5 Form Elements ● HTML5 introduced several new input types that help make our forms more semantic 13
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 14
Email example <input type=”email” id=”email” name=”email”> 15
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 16
URL example <input type=”url” id=”webpage” name=”webpage”> 17
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 18
Tel example <input type=”tel” id=”number” name=”number”> 19
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 20
Number example <input type=”number” id=”quantity” name=”quantity” min=”0” max=”10” step=”1”> 21
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 22
Range example <input type=”range” id=”quantity” name=”quantity” min=”0” max=”10” step=”1”> 23
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 24
Date example <input type=”date” id=”birthday” name=”birthday”> 25
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 26
Time example <input type=”time” id=”meeting- start” name=”meeting-end”> 27
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 28
Time example <input type=”week” id=”week” name=”week”> 29
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 30
Month example <input type=”month” id=”month” name=”month”> 31
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 32
Month example <input type=”datetime” id=”meeting” name=”meeting”> 33
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 34
Month example <input type=”datetime-local” id=”meeting” name=”meeting”> 35
Recommend
More recommend
