Chapter4: HTML Table and Script page, HTML5 new forms. Asst. Prof. Dr. Supakit Nootyaskool Information Technology, KMITL

Size: px

Start display at page:

Download "Chapter4: HTML Table and Script page, HTML5 new forms. Asst. Prof. Dr. Supakit Nootyaskool Information Technology, KMITL"

Abigail Payne
6 years ago
Views:

1 Chapter4: HTML Table and Script page, HTML5 new forms Asst. Prof. Dr. Supakit Nootyaskool Information Technology, KMITL

2 Objective To know HTML5 creating a new style form. To understand HTML table benefits To build a table design and show on web page To add image, hyperlinks or text on the table cell

3 Topics Sketching table Table components Adding borders CSS border properties Adjust height and width Padding and spacing Adding span Row spans Nest table Scripting web page Browser windows Solicit and verify user input Server side script Including Script Same script on multiple page

4 4.63 New style forms in HTML5 When we want to get input data from user, we will use <input>..</input> by typing in <form>..<form> Example <form> </form> <input type= xxx value= yyy > </input>

5 4.63 New style forms in Button HTML5 When we want to get input data from Image user, we Password will use <input>..</input> by typing in <form>..<form> Example <form> </form> <input type= xxx value= yyy > </input> Type of input data Checkbox File Hidden Ratio Reset Submit Text textarea Display text on webpage

6 <!DOCTYPE HTML> <html> <head> </head> <body> </body> <meta charset='utf-8'> Check code <form> <input type='button' value='true'> กดป มส <br/> </form> <input type='checkbox' value='1'> เล อกส <br/> <input type='file' value='หาไฟล '> ไฟล ไหน <br/> <input type='hidden' value='ซ อนไว '> ซ อนอย ในcode <br/> Don t forget save as UTF-8

7 <!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> </head> <body> <form> <input type = 'button' </form> </body> Test button onclick = "alert('hello world');" value = Say alert'> กดป มส <br/>

8 JS command

9 <!DOCTYPE HTML> <html> <head> </head> <body> </body> <meta charset='utf-8'> Submit to another page <form action="receiver.html" method="get"> </form> <input type = 'submit' value = 'Say alert'> กดป มส <br/>

10 method get No data

11 <!DOCTYPE HTML> <html> <head> </head> <body> </body> <meta charset='utf-8'> Submit to another page <form action="receiver.html" method="get"> </form> <input type = 'submit' name = message value = 'Say alert'> กดป มส <br/>

12 method get data

13 Method = get /test/demo_form.asp?name1=value1&name2=val ue2 Some other notes on GET requests: GET requests can be cached GET requests remain in the browser history GET requests can be bookmarked GET requests should never be used when dealing with sensitive data GET requests have length restrictions GET requests should be used only to retrieve data From:

14 <!DOCTYPE HTML> <html> <head> </head> <body> </body> <meta charset='utf-8'> <form action="receiver.php" method="get"> <input type = 'submit' </form> Lec4.html name = 'message' value = 'Say alert'> กดป มส <br/> <?php?> receiver.php $m = $_GET["message"]; <!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> </head> <body> <?php echo "Your message:". $m;?> </body>

16 icounter We will show communication concept of clientserver by icounter. Value = 1 Html Html value=2 php

17 <!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> </head> <body> <form action="receiver.php" method="get"> <input type = 'submit' name = 'data' value = '1'> กดป มส <br/> </form> </body> lec4.html

18 <?php $i = $_GET["data"];?> <!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> </head> <body> <form action="receiver.php" method="get"> <input type = 'submit' name = 'data' <?php $i=$i+1; echo "value = ".$i; </form> </body>?> > กดป มส <br/> receiver.php

19 Change data = 4 Press enter

20 4.0 Specific of Tables Benefit of table Using tables to arrange items on your web page. Turning border off, users can t see these tables A couple of way to create table Traditional (ho-hum) method Table doesn t resize when user resize their browser windows Fixed size Presentation-focus(wow) method Table resize itself when users resize their browser Percentage size P176

21 4.0 Specific of tables A table generally consists in three basic elements Borders Cell Cell span (Combine or merge cell)

22 4.1 Sketching your table 1. Grab a sheet of paper and a pencil so you can sketch out your idea 2. Evaluate what to include in your web and decide on the overall layout 1. How many column and row you need? 2. The width of the table and cells 3. Weather to make any cell span rows or columns 3. Draw it on a paper P179

23 P Constructing basic tables Component Table: <table> attribute border= 0 1, bgcolor= black Table row: <tr> Table data cell: Table header: <td> data </td> <th> text </th> CSS control <div class = name > STEP1: start table <table>. </table> STEP2: how many rows: two? <table border = 1 > <\table> <tr> </tr> <tr> </tr>

25 <table border = "1" bgcolor = "green"> <tr> <td> contents </td> </tr> <tr> <td> contents </td> <td> contents </td> </tr> </table> <table border = "1" bgcolor = "green"> <tr> <td colspan="2"> contents </td> </tr> <tr> <td> contents </td> </tr> </table> <td> contents </td>

26 4.3 Adjusting height and width P189 Most browsers determine the width of cell by looking the content of the cell. If you set width-limited at 100pixels and the picture size is 200pixels, the browser will expand as far as picture size. Text may expand and distort the layout Attribute of width and height can be used in <table> and <td> Width width = value Height height = value The value is number of the pixel.

28 4.4 Shifting alignment P195 The table or image will be controlled their placement in the browser windows by using alignment commands Horizontal alignment align = right left center justify char Cellpadding expands cell cellpadding = value Vertical alignment valign = top bottom middle baseline

29 <table border = "1" > <tr> <td colspan="2" align="justify"> this is the first table. it is easy to plan and write the code. the_table_contains_a lot_of_information to support user.</td> </tr> <tr> </tr> </table> <td width="200"> contents </td> <td width = "200"> contents </td>

30 <table border = "1" cellpadding="20" > <tr> <td colspan="2" align="char"> this is the first table. it is easy to plan and write the code. the_table_contains_a lot_of_information to support user.</td> </tr> <tr> </tr> </table> <td width="200" > contents </td> <td width = "200"> contents </td>

31 <html> <body> <table border= border > <tr> </tr> <th>alignment</th> <th>top</th> <th>baseline</th> <th>not align</th> <th>center</th> <th>bottom</th> <tr align= center > </tr> </table> </body> </html> <th><h1>baseline <br />Another line</h1></th> <td valign="top">aayy</td> <td valign="baseline">_aayy_</td> <td>_aayy_</td> <td valign="center">aayy</td> <td valign="bottom">aayy</td>

32 4.5 Adding spans Spanning table is the arrangement element of table shown on the web. The extend horizontally cell colspan = value The extending vertically cell rowspan = value P198

35 4.6 Nesting table To nest a table, simply add the <table> element within a <td> element. Draw the table from the code on right hand side

37 SCRIPT WEB PAGE

40 4.7 Script webpage Script language The script language changes from static web page into dynamic web page that can solicit and respond to user input. Script? Scripts are mini-program that is create to check or support a small solution. The script is usually interpreter (not change the source to byte code), for example language, JavaScript VB script Unix shell script Windows batch file Apple script Etc..

41 4.7 Script webpage (2) JavaScript is not Java Java is descendent of the C and C++ programming language. Java developed by Sun Microsystems. The JavaScript programming language, developed by Netscape, Inc., is not part of the Java platform. JavaScript, does not create applets or stand-alone applications. In its most common form today, JavaScript resides inside HTML documents, and can provide levels of interactivity to web pages that are not achievable with simple HTML. Listed are key differences between the Java and JavaScript. Java is an OOP programming language while Java Script is an OOP scripting language. Java creates applications that run in a virtual machine or browser while JavaScript code is run on a browser only. Java code needs to be compiled while JavaScript code are all in text. They require different plug-ins. Reference:

42 4.8 Work with browser windows JavaScript can tell your browser to open and close windows. Command <script language = javascript type= text/javascript > function newwindows() { myvar = window.open( image.jpg, picname, width=300,height=250 ) } P218

44 4.9 Solicit and verify user input A common use for JavaScript is to verify that user have filled out all the require field in a form before the browser actually submits the form to the form-processing program.

46 LAB3 CHECK STUDENT ID

Lab3.1 Enter student id Open text edit and write code (below) Save the code to /lab3/lab3_1.html Check your code, open browser and type http://localhost/lab3/lab3_1.

47 Lab3.1 Enter student id Open text edit and write code (below) Save the code to /lab3/lab3_1.html Check your code, open browser and type <html> <body> <form method="get" action="lab3_2.html" <p> Student ID <input type="text" name="id" /> <br/> </p> </form> </body> </html> Name <input type="text" name="name" /> <br/> <input type="button" value="say hi"/> <input type="submit" value="submit to the action file"/>

48 Check Lab3.1 Push button Say hi No response!! Push button Submit to the action file

49 Lab3.2 Modify lab3.1 by adding more code (below) <html> <body> <script language="javascript" type="text/javascript"> function sayhello(message) { alert(message) } </script> <form method="get" action="lab3_3.html" <p> Student ID <input type="text" name="id" /> <br/> Name <input type="text" name="name" /> <br/> <input type="button" value="say hi" onclick="sayhello('hi myfriend')"/> <input type="submit" value="submit to the action file"/> </p> </form> </body> </html>

50 Check Lab3.2 Push button Say hi Push button Submit to the action file

51 Lab3.3 Write code (below) and check output <html> <body> <script type="text/javascript"> </script> </body> </html> document.write("<p>" + Date() + "</p>"); document.write( Hello JavaScript</p> This is the first program");

Lab3.4 Write code (below) and check output <HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript"> function answer(){ var textbox = document.getelementbyid('mytext'); if(textbox.

52 Lab3.4 Write code (below) and check output <HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript"> function answer(){ var textbox = document.getelementbyid('mytext'); if(textbox.value!= "") alert("your name: " + textbox.value) else alert("you don't type login name") } </script> </HEAD> <BODY> Login name:<input type='text' id='mytext'/> <br/> <input type='button' onclick='answer()' value='check login' /> </BODY> </HTML>

Web Design and Application Development

Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi altamimi@yu.edu.jo Lecture 04 A. Al-Tamimi 1 Lecture Overview