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

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. 2

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

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 4

Input example <input type=”text” id=”field” name=”field” disabled> 5

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. 6

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 7

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

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. 9

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 10

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

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 12

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

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. 14

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

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 16

Option ● The option element is used to create an option 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 17

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 option elements 18

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