Forms Data Entry and Capture Creating Web Pages with HTML CIS 133 Web Programming Concepts

Creating Web Forms Control elements Elements in a form in which a user can enter information Input boxes Selection lists Option buttons Check boxes Group boxes Text areas Buttons

Parts of a Web Form

Form tag Surrounds all form related tags (input, textarea, etc.) SYNTAX <form id=“formname” name=“formname” action=“page2.html” method=“get” > other form elements go in between </form>

Input tag Used for a variety of input boxes SYNTAX <input type=“sometype” ……./>

Text boxes, Password boxes, Hidden boxes By default, displays 20 characters of text on a single line To change width, add width <input type=“text” size="value“ value=“show me in box” width=“30”/> <input type=“hidden” value=“show me in box” /> <input type=“password” />

TextArea Used to display a tall and wide textbox SYNTAX <textarea cols=“number” rows=“number”> content </textarea>

Radio button types Also called option buttons (buttons with circles) SYNTAX Football <input type=“radio” name=“mydot” value=“F” checked/> Baseball <input type=“radio” name=“mydot” value=“B” /> Tennis <input type=“radio” name=“mydot” value=“T” /> Choose a sport: Football ● Baseball o Tennis o

Checkbox button types Also called option buttons (buttons with circles) SYNTAX Football <input type=“checkbox” name=“box1” value=“Football” /> Baseball <input type=“checkbox” name=“box2” value=“B” checked/> Tennis <input type=“checkbox” name=“box3” value=“Tennis” /> Choose a sport: Football □ Baseball ■ Tennis □

Button types 3 types SYNTAX Submit – sends web page to server Reset – clears all form fields Push – performs activity on web page SYNTAX <input type=“submit” name=“submitButton” value=“Submit Form” /> <input type=“button” name=“pushButton” onclick=“javascript functionx();” /> <input type=“reset” name=“reset” value=“Reset Form” /> <script> functionx() { statements ….. } </script>

HTML 5 HTML5 has several new input types for forms. These new features allow better input control and validation. Color - used for input fields that should contain a color Date - select a date Datetime - select a date and time (with time zone) datetime-local - select a date and time (no time zone) Month - select a month and year Time - select a time Week - select a week and year

HTML 5 HTML5 has several new input types for forms. These new features allow better input control and validation. Email – an email address. * Number - input fields that should contain a numeric value – can restrict values Range - used for input fields that should contain a value from a range of numbers Search - used for search fields (a search field behaves like a regular text field) Tel – a telephone number url - used for input fields that should contain a URL address *