HTML crashcourse. general structure tables forms textfield textarea selectbox listbox hidden field checkbox radiobuttons submit button

Size: px

Start display at page:

Download "HTML crashcourse. general structure tables forms textfield textarea selectbox listbox hidden field checkbox radiobuttons submit button"

Sherman Wood
6 years ago
Views:

1 HTML crashcourse general structure tables forms textfield textarea selectbox listbox hidden field checkbox radiobuttons submit button Andreas Schmidt HTML Crash-Kurs 1/10

2 general structure <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>first HTML Document</title> </head> <body> <h1>look, my first HTML-Page</h1> Not really difficult, but a lot of < and >-characters in the code <p> A link to the <a href=" Google </a> Search Page </p> Information about the <a href=" IASTED </a> conferences </body> </html> Andreas Schmidt HTML Crash-Kurs 2/10

3 Tables layout is done by the browser tables can be nested nearly arbitrary content Example: <table border="1"> <tr> <th>name</th> <th>age</th> </tr> <tr> <td>bruno</td> <td>14</td> </tr> <tr> <td>inga</td> <td>54</td> </tr> <tr> <td>sabine</td> <td>22</td> </tr> </table> Andreas Schmidt HTML Crash-Kurs 3/10

4 Bullet list Example: <UL> <LI>Marketing <UL> <LI>Andy Hodges <LI>Trey Gregory </UL> <LI>Engineering <UL> <LI>Karen Joslin <LI>Sheila Malone <LI>Karl Heinz </UL> </UL> Andreas Schmidt HTML Crash-Kurs 4/10

5 forms HTML-forms allow the interaction between the user (client) and the server users complete a form and send the content to the server (by pressing the Submit Button) the script, specified by the action-attribut in the form tag, receives the data of the formular each input-field has a name and eventually a value the hidden-field is a special invisible field, only for the purpose of transmitting data to the server structure: <form action="a_script.php"> <input type="hidden" name="id" value="34633"> Age: <input type="text" name="age">... <input type="submit" value="store"> </form> Andreas Schmidt HTML Crash-Kurs 5/10

6 formular-fields Prename: <input type="text" name="prename"> Prename: <input type="text" name="prename" value="john"> Comments: <textarea name="comments" rows="5" cols="20"> </textarea> Comments: <textarea name="comments" rows="5" cols="20"> The film is a... </textarea> Andreas Schmidt HTML Crash-Kurs 6/10

formular-fields Genre: <select name="genre"> <option>horror</option> <option SELECTED>Slapstick</option> <option>thriller</option> </select> Genre: <select name="genre"> <option

7 formular-fields Genre: <select name="genre"> <option>horror</option> <option SELECTED>Slapstick</option> <option>thriller</option> </select> Genre: <select name="genre"> <option value="1">horror</option> <option value="2" SELECTED>Slapstick</option> <option value="3">thriller</option> </select> Genre: <select name="genre" size="3"> <option value="1">horror</option> <option value="2" SELECTED>Slapstick</option> <option value="3">thriller</option> </select> Andreas Schmidt HTML Crash-Kurs 7/10

formular-fields <input type="radio" name="genre" value="1">horror<br> <input type="radio" name="genre" value="2">slapstick<br> <input type="radio" name="genre" value="3" CHECKED>Thriller<br>

8 formular-fields <input type="radio" name="genre" value="1">horror<br> <input type="radio" name="genre" value="2">slapstick<br> <input type="radio" name="genre" value="3" CHECKED>Thriller<br> Ingredients <p> <input type="checkbox" name="ingr1">fungi<br> <input type="checkbox" name="ingr2" CHECKED>Tomatoes<br> <input type="checkbox" name="ingr3" CHECKED>Cheese<br> <input type="checkbox" name="ingr4">artichoke<br> Ingredients <br> <input type="checkbox" name="ingr[]" value="1">fungi<br> <input type="checkbox" name="ingr[]" value="2" CHECKED>Tomatoes<br> <input type="checkbox" name="ingr[]" value="3" CHECKED>Cheese<br> <input type="checkbox" name="ingr[]" value="4">artichoke<br> Andreas Schmidt HTML Crash-Kurs 8/10

9 formular-fields and -values in PHP <input type="submit" value="store"> <input type="reset" value="reset"> the transmitted data is assigned in the the predefined $_REQUEST variable examples: field name PHP access comments "prename" $_REQUEST[prename] $_REQUEST[prename] is a scalar variable in PHP "person[age]" $_REQUEST[person][age] $_REQUEST[person] is a dictionary in PHP "ingredients[]" $_REQUEST[ingredients] $_REQUEST[ingredients] is an array in PHP Andreas Schmidt HTML Crash-Kurs 9/10

10 Quellen zu HTML Programm 06eingabemaske.php in PHP-Entwicklungsumgebung (siehe Startseite) HTML Tutorial: Andreas Schmidt HTML Crash-Kurs 10/10

The Hypertext Markup Language (HTML) Part II. Hamid Zarrabi-Zadeh Web Programming Fall 2013

The Hypertext Markup Language (HTML) Part II Hamid Zarrabi-Zadeh Web Programming Fall 2013 2 Outline HTML Structures Tables Forms New HTML5 Elements Summary HTML Tables 4 Tables Tables are created with