Making Web Pages Dynamic HTML Forms Jeff Offutt

Making Web Pages Dynamic HTML Forms Jeff Offutt https: //www. cs. gmu. edu/~offutt/ SWE 432 Design and Implementation of Software for the Web

HTML basic terms We need to build programs that “write” HTML • Element : A piece of a document sentence, paragraph, list, table, head, … • Tag : A command to control the format <name> </name> Not case sensitive • Attribute : An option or parameter to a tag • Rendering : A browser formats the text into a window according to the formatting rules 20 October 2021 © Offutt 2

HTML structure Not rendered <html> <head> <title>My Little Web Page</title> </head> <body bgcolor=“#FFFFFF”> </body> </html> 20 October 2021 Rendered © Offutt Hex: RRGGBB 000000 – Black FFFFFF – White 3

Some HTML tags • • Headers : <h 1>, <h 2>, … Breaks : <p>, , <hr> Fonts : <b>, <em>, <i>, <tt>, <u> Lists : <ul><li>, <ol><li>, <dl><dt>A<dd>stuff • Color : <font color=“#RRGGBB” size=“-1”> • Special chars : < > & ö (ö) ñ (ñ) è (È) <font> is deprecated, but still widely used 20 October 2021 © Offutt 4

Links in HTML • <a href=“classes/432/”>432</a> • Relative links are: – Faster – Easier to move – Require less typing, thus less mistakes • • target=“_blank” // new window (or tab) href=“#NAME” // within the current file <a href=“mailto: offutt@gmu. edu”>offutt</a> <img src=“X. jpg” alt=“a picture”> 20 October 2021 © Offutt 5

HTML Tables <table> <tr> <td></td> </tr> </table> <table border=2 cellspacing=2 bgcolor=“#FFFFFF” width=500 align=“center”> 20 October 2021 bgcolor and align are deprecated, but still widely used CSS is “preferred” © Offutt 6

A small form <form method="post" action="http: //cs. gmu. edu: 8080/offutt/servlet/calculate"> <table border=1> <tr> <td> <table align=“center”> <tr> <td>First val: <td><input type="text" name="LHS" value="" size=5> </tr> <td>Second val: <td><input type="text" name="RHS" value="" size=5> </tr> <td>Result: <td><input type="text" name="RSLT" value="" size=6> </tr> </table> <tr> <td><input type="submit" name="Operation" value="Add"> <td><input type="submit“ name="Operation" value="Subtract”> <td><input type="submit" name="Operation" value="Multiply"> <td><input type="submit" name="Operation" value="Divide"> </table> <tr> <td align=center><input type="reset" name="reset" value="Reset"> </table> </form> 20 October 2021 © Offutt Server software will get “Operation=Add” 7

Radio buttons <form> <input type="radio" name=“Year“ id=“freshman“ value=“freshman“ /> Usability: Users can <label for=“freshman“>freshman</label> click the text, not <br/> just the circle/> <input type=“radio" name=“Year“ id=“sophomore“ value=“sophomore“ <label for=“sophomore“>sophomore</label> <br/> <input type=“radio" name=“Year“ id=“junior“ value=“junior“ /> <label for=“junior">junior</label> <br/> <input type=“radio" name=“Year“ id=“senior“ value=“senior“ /> <label for=“senior">senior</label> <br/> </form> All “name” values must be the same in a radio box 20 October 2021 © Offutt 8

Checkboxes <form> I have a bike: <input type=“checkbox" name=“vehicle“ value=“Bike“ /> <br/> I have a car: <input type=“checkbox" name=“vehicle“ value=“Car“ /> <br/> I have an airplane: <input type=“checkbox“ name=“vehicle“ value=“Airplane“ /> </form> 20 October 2021 © Offutt 9

Dropdown <form> <select name=“major“> <option value=“SWE” selected=“selected”>SWE</option> <option value=“CS”>CS</option> <option value=“ISA”>ISA</option> <option value=“INFS”>INFS</option> </select> </form> 20 October 2021 © Offutt 10

Select box <form> <select name=“classes“ size=“ 5” multiple=“multiple”> <option value=“ 619”>619</option> <option value=“ 620”>620</option> <option value=“ 621”>621</option> <option value=“ 622”>622</option> <option value=“ 623”>623</option> <option value=“ 625”>625</option> <option value=“ 626”>626</option> <option value=“ 630”>630</option> <option value=“ 632”>632</option> <option value=“ 637”>637</option> <option value=“ 641”>641</option> <option value=“ 642”>642</option> <option value=“ 645”>645</option> <option value=“ 699”>699</option> </select> </form> 20 October 2021 © Offutt 11

Text area <p style=“text-align: justify”> Enter your message in the box below: </p> <form> <textarea rows=“ 10“ cols=“ 70“> This text goes inside initially; leave this blank for an empty box. </textarea> </form> 20 October 2021 © Offutt 12

Buttons <form> <input type=“button“ value=“Don’t click me!“ /> </form> 20 October 2021 © Offutt

Fieldset borders and mailto <fieldset> <legend> Contact Information </legend> <form action=“mailto: offutt@gmu. edu” method=“post” enctype=“text/plain”> Name: <input type=“text“ name=“the. Name“> EMail: <input type=“text“ name=“EMail“> Phone: <input type=“text“ name=“Phone“ maxlength=“ 12“ size=“ 12“> <center> <input type=“reset “ value=“Reset“> <input type=“submit“ value=“Send“> </center> </form> </fieldset> 20 October 2021 © Offutt 14

Fieldset Borders and Mailto <fieldset> <legend> Contact Information </legend> <form action=“mailto: offutt@gmu. edu” method=“post” enctype=“text/plain”> Name: <input type=“text“ name=“the. Name“> EMail: <input type=“text“ name=“EMail“> Phone: <input type=“text“ name=“Phone“ maxlength=“ 12“ size=“ 12“> <center> <input type=“reset “ value=“Reset“> <input type=“submit“ value=“Send“> </center> </form> </fieldset> 20 October 2021 © Offutt 15

HTML suggestions • Don’t build: Borrow, modify, experiment • Maintenance is crucial: Make your HTML readable – – Choose a style and stick with it Use white space and carriage returns Use comments liberally Indent lists and nested elements • Let the browsers make as many decisions as possible when they render your HTML – Don’t over-specify the fonts • Look at your HTML with different browsers 20 October 2021 © Offutt 16

More HTML suggestions • Always use descriptive titles • Specifying the height and width of images will help browsers display faster – But may not work as well on different size browser windows • Use ALT on every image • Forms: – Be sure to use unique descriptive names – Radio buttons must have the same name or users can select multiple buttons • Close tags (SGML standard) 20 October 2021 © Offutt 17