Web Design 13

Check Boxes

- Little boxes that can be turned on and off -Multiple choices can be made here <form> Which course(s) are you taking? <br> <input type="checkbox" name="course" value="Java"/> Java<br> <input type="checkbox" name="course" value="HTML" />HTML<br> <input type="checkbox" name="course" value="C++" />C++<br> </form> -Again all names are the same -Also you can use the "checked" attribute here

Buttons

-Buttons are used to allow users to interact with the forms Three types of buttons: 1. Submit buttons <button type="submit">Submit</button> 2. Reset buttons <button type="reset">Reset</button> 3. Other buttons When pressed, an action or event is triggered, based on a predefined script or function <button type="button">Press Here</button> -The buttons can be decorated with images <input type="image" src="savenow.gif" name="submit" alt="send message">

Radio Buttons

-Small round buttons that enable users to select a single option from a list of choices <form> How would you like to be contact? <br> <input type="radio" name="contact" value="email" checked="checked"> email <br> <input type="radio" name="contact" value="phone"> phone <br> <input type="radio" name="contact" value="regular mail"> phone<br> </form> -All options use the same name so that browser knows they belong to the same group of radio buttons - only one can be selected -Attribute "checked": selected by default

Hidden Fields

-Special marks that is not visible to the web users <input type="hidden" name="formmark" value= "#0003"> -This value will be passed back to the web server when the form is submitted for processing

Contact Methods

-They help identify certain types of contact methods -Very useful for mobile devices as they could change the displayed keyboard on screen Type: -Email -url -tel

Select Menus

-They let users select from a long list of options -Also called "drop-down" menu <form> Please pick your favorite color: <select name="favorite color" size="3"> <option value="blue">blue</option> <option value="green">green</option> <option value="red">red</option> </select> </form> Use attribute "multiple" to enable selecting multiple items from the menu

File Upload

-You can use this type of input to upload a file to the server <form> <input type="file" name="photoupload"> </form>

Sub Menus

-optgroup element is used to divide long menus into groups of submenus <form> Please pick the day/time that is best to call you: <select name="TimeDay"> <optgroup label="Monday"> <option value="Monday AM">Monday AM</option> <option value="Monday PM">Monday PM</option> </optgroup> <optgroup label="Tuesday"> <option value="Tuesday AM"> Tuesday AM</option> <option value="Tuesday PM"> Tuesday PM</option> </optgroup> </form>

Form

<form> content goes here </form> Input controls - Ways for users to enter data Text inputs - Check boxes - Radio buttons - Select menus - File selects - Buttons (submit/reset/push buttons) Hidden controls

Color Selectors

It gives users the ability to add color pickers to forms Shirt color: <input name="shirtcolor" type="color"> <br><br> Ink color: <input name="inkcolor" type="color"> <br><br> -Many web browsers are not supporting this input type yet -If not supported, the web browsers simply display the default text box

Text Input

Text field for passwords: -The characters entered in this type of text input field will be displayed as bullets <form> Enter your password: <input type="password" name="password"> </form> Text field for search boxes: <form> Enter your search here: <input type="search" name="search" placeholder="Enter your search here" size="50"> </form> Multiple-line text areas: <form> Please enter your comments here: <br> <textarea name="comments">Your comments ...</textarea> </form> If you want to give a specific dimension of the text area you can use: cols rows <form> Please enter your comments here: <br> <textarea name="comments" cols="30" rows="5"></textarea> </form> -You can use overflow property in CSS to control whether the scroll bar should be displayed for the text area Overflow: scroll/ Overflow: auto

Basic Form Structure

Text input - Single line text input <form> Please enter your name: <input type="text"> </form> Attributes: 1. Name - identifies the text input control so that the data can be processed (Do not put space within) 2. Size - specifies the length of the text field (default is about 20) 3. Maxlength - max. number of characters that can be entered in this field 4. Value - initial text put in the field 5. Placeholder - describes the expected value of the input

Date and Time Input

These are new input controls that only appear in HTML 5 They are: -Date -Datetime -Datetime-local -Month -Time -Week -Google Chrome, Opera, and Safari are the only browsers that support any of these new controls, and Opera is the only one that supports all six -The browser will display a text field if can't recognize i

Other Number Inputs

These inputs can be used to simply designate a textbox as a number field and use some additional attributes to customize the input <input type="number" min="0" max="12" step="2" value="8"> Please rate our service (10 is the best!): <br/> 1 <input type="range" min="1" max="10" step="1" value="5">10

Disabled Form Elements

Use these two attributes when you want to restrict a user's input for a specific element -Read only -Disabled Your username is: <input value="www1234" name= "UserName" readonly> Your username is: <input value="www1234" name= "UserName" disabled>