Web Forms Part I HTML. Instructor: Dr. Wei Ding Fall Instructor: Wei Ding. CS 437/637 Database-Backed Web Sites and Web Services

Size: px

Start display at page:

Download "Web Forms Part I HTML. Instructor: Dr. Wei Ding Fall Instructor: Wei Ding. CS 437/637 Database-Backed Web Sites and Web Services"

Magnus Hopkins
5 years ago
Views:

1 Web Forms Part I Instructor: Dr. Wei Ding Fall HTML Instructor: Wei Ding 2

2 Getting Started: How does the WWW work? All the computers uses a communication standard called HTTP. Web information is stored in documents called Web pages. Web pages are files stored on computers called Web servers. Computers reading the Web pages are called Web clients. Web clients view the pages pg with a program called a Web browser. 3 What is an HTML file? HTML stands for Hyper Text Markup Language. An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page. An HTML file must have an htm or html file extension. An HTML file can be created using a simple text editor, such as Notepad, or Vi. 4

3 .html versus.htm Windows systems usually use.htm extension, while UNIX systems are.html specific. Originally most Web servers were Unix based and.html was the accepted file extension structure. Hence some people think.htm is a little bit informal. Now most Web servers are configured to recognize both. For DCM Web server both extensions work. To be on the safe side, always ask the system administrator which file extension they support and/or prefer. 5 HTML Editors Some WYSIWYG (What You See Is What You Get) editors are also available. It means that you design your HTML document visually, as if you were using a word processor, instead of writing i the markup tags in a plaintext file and imagining what the resulting page will look like. However, if you want to be a skillful Web developer, you should use a plain text editor primarily to learn your primer HTML. In this class, writing HTML source code from scratch is your primary choice. 6

4 HTML Tags HTML tags are used to mark up HTML elements. HTML tags are surrounded d by the two characters < and > >. Anything that is written between the < and > brackets will be invisible, and not appear on the resulting Web page. HTML tags normally come in pairs start tag and end tag. HTML tags are NOT case sensitive. To get ready for the next generations of HTML - XHTML, you should start using lowercase tags. 7 Example: A simple bare-bone document <html> <head> <title>a Simple HTML Example</title> </head> <body> <h1>html is Easy To Learn</h1> <p>welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</p> <p>and this is the second paragraph.</p> </body> </html> 8

5 HTML Documents: Basic Elements All HTML documents should follow the same basic format - otherwise some commands may not function properly: p <html> <head> <title>here comes the title</title> </head> <body> Here comes the body part </body> </html> 9 HTML Documents: Required Elements The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags). Because you should include these tags in each file, you might want to create a template file with them. (Some browsers will format your HTML file correctly even if these tags are not included. But some browsers won't! So make sure to include them.) In this class you are required to write your HTML file with those basic elements. 10

6 Basic HTML Tags The most important tags in HTML are tags that define headings, paragraphs and line breaks. Headings Paragraphs Line breaks Horizontal rules Comments 11 HTML Linking The chief power of HTML comes from its ability to link text (an image) to another document or section of a document. A browser highlights the identified text or image with color (underlines) to indicate that it is a hypertext link (often shortened to hyperlink or just link). 12

7 HTML Linking HTML uses the <a> (anchor) tag to create a link to any resource on the web: an HTML page, an image, a sound file, a movie, etc. <a href= url >Text/Image to be displayed </a> <a href=" /h f "> <img src=" alt="valid lid XHTML 1.0!" height="31" ht width="88" /> </a> 13 Relative pathnames vs. absolute pathnames You can link to documents in other directories by specifying the relative path from the current document to the linked document. You can also use the absolute pathname (the complete URL) of the file. Compared with absolute pathname, relative links are more efficient in accessing a server. They also have the advantage of making your documents more "portable" -- for instance, you can create several web pages in a single folder on your local computer, using relative links to hyperlink one page to another, and then upload the entire folder of web pages to your web server. Without changing the HREF s, The pages on the server will then link to other pages on the server, and the copies on your hard drive will still point to the other pages stored there. 14

8 Example.. Parent folder. Current folder FolderA FolderC A.html C.html FolderB B.html Q: Inside A.html, how to set the relative path for C.html and B.html? A: A.html: <a href=./folderc/c.html >C.html</a> <a href=../folderb/b.html >B.html</a> 15 HTML Linking Links to specific sections Links between sections of different documents Links to specific sections within the current document Linking -- mailto: <a 16

9 HTML Lists Lists Unordered lists: <ul>, <li> Ordered lists: <ol>, <li> 17 Common Mistake: Nested Lists <ul> <li>first layer item 1</li> <li>first layer item 2 <ul> <li>second layer item 1</li> <li>second layer item 2</li> </ul> </li> <li>first layer item 3</li> </ul> The nested list must be defined inside another list item 18

10 Character Entities Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. Some characters does not exist on your keyboard. To display < in HTML, we have to use a character entity. A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon(;). Character entities are case sensitive. To display < in HTML we must write: < or < 19 The Most Common Character Entities Non-breaking space: or Less than: < or < Greater than: > or > Ampersand: & or & Copyright: or Registered Trademark: or 20

11 Case Study: Set up your own web site at 1. Create the HTML files for your web site at your local computer. 2. Use relative path names for the hyperlinks. 3. Use index.html (or index.htm) as the homepage of your web site. 4. Set up the connection with using Network Driver Mapping or FTP. 5. Upload HTML files to the public_html html folder under your web account. 6. Use the virtual path URL, to test your web site at dcm. is mapped to the index.html, index.htm, default.htm, or default.html under your public_html folder. You do NOT need to put public_html inside the URL. E.X., if you create another folder 637 under the public_html folder, to access file blah.html html under /public_html/637 folder, the URL is URL must skip /public_html folder 21 HTML Form While almost all other elements in HTML are for controlling the display and presentation, HTML <FORM>, <INPUT>, <SELECT>, and <TEXTAREA> tags add interactivity ty to the web site. The HTML forms handle operations like taking orders, surveys, user registration and so on. 22

12 <form> <FORM>: All the input elements should be enclosed within the opening and closing <FORM> tags. The important attributes for the form tag are: ACTION="handlerpage" This Attribute specifies the page which handles the input from the user. Usually, this will be a script or a CGI program which h processes the data supplied by the user. METHOD ="GET" "POST" ( is either GET or POST.) In simple terms, if you use GET method, the input values are passed as part of the URL. If it is POST, the information is sent to the server as part of the data body and will not be visible in the URL box in the user's browser. If you don't specify the method, GET is taken by default. 23 The input items You can define different types of input tags like text boxes, check boxes, radio buttons, submit buttons, reset buttons, imagine buttons with <input> tag. 24

13 Text input Text input is used to collect single line of text from the user like name, address etc. It is the most commonly used input type. <INPUT TYPE="TEXT" > There are some attributes that you can specify with the text input item: NAME= internalname : defines the name of the field. This name will be used at the server side to identify this input item. VALUE="default value : the text you give as VALUE will be displayed by default in the text box. MAXLENGTH="maxChars : specifies the maximum number of characters the user can enter into this text box. SIZE="lengthChars : the length of the input text box, in number of characters. 25 More input objects <INPUT> <input type= submit > other attributes are: NAME ="name : This attribute is to identify if the submit button by the name. There can be more than one submit buttons in a form. At the server side, the submit button which was pressed can be identified using the NAME attribute. VALUE="label : The string given in the VALUE attribute is displayed as the label of the submit button in the form. Reset buttons: <input type= reset > 26

14 Select list and multi-line text <SELECT> It is possible to allow multiple selection in the list. Use MULTIPLE attribute in the SELECT tag. To display more than one item at a time in the list box, you can use SIZE attribute. <TEXTAREA> COLS="columns : defines the width (number of characters per line) the text area can accommodate without scrolling. ROWS="rows : defines the number of lines (number of rows) the text area can accommodate without scrolling. 27 HTML Form Design Usability rules the Web. Simply stated, if the customer can t find a product, the he or she will not buy it. Websites should make the main things users want to do very simple. Reset Button: Do we always need this button? Other concern: How to design a form based on the usability? 28

15 Acknowledgments WWWW3Schools The National Center for Supercomputing applications (NCSA) Jakob Nielsen, Designing Web Usability HTML homepage 29 ASP.NET Web Form 30

16 Controls Controls are the building blocks of a graphical user interface. For example, familiar controls include buttons, checkboxes, list boxes, etc. Controls provide a means for a user to indicate a preference, enter data, or make selections. 31 Controls There are five types of web controls in ASP.NET: 1. HTML controls --The original controls in HTML available to any HTML page. pg These all work in ASP.NET exactly as they work in other Web pages. 2. Web server controls Provide the same functionality as HTML server controls but integrated into the ASP.NET programming model. 3. Validation controls Provide a full range of built-in form validation capability. 4. HTML server controls -- Based on original HTML controls, but executed by ASP.NET web server. 5. User controls o and custom controls o Controls created by the developer. 32

17 The ASP.NET Web Form The term web form refers to the grouping g of two distinct blocks of code: The HTML template containing page layout information and ASP.NET server controls. This is responsible for the presentation of the web form on the browser. The ASP.NET code that provides the web form's processing logic. This is responsible for generating dynamic content to be displayed within the web form. This content is typically exposed via server controls defined in the HTML presentation block. Although a web form may also be an HTML form (that is, there's nothing to stop us using <form> elements inside an ASPX), remember that these two entities are defined in quite distinct terms. 33 How the <form> tag works in ASP.NET ASP.NET has a set of form controls that can be used just like their HTML form control equivalents, the main difference being that they are actually constructed dynamically on the server and then sent out. The ASP.NET version of the <form> tag looks like this: <form runat="server">... ASP.NET web form... </form> 34

18 How the <form> tag works in ASP.NET It takes only one attribute (runat="server") ), which tells the web server that it should process the form itself, rather than just sending it out to the browser (which won't be able to interpret this ASP.NET-specific attribute). Even though we haven't specified the contents of the method and get attributes, ASP.NET is able to handle this itself and provide its own values. In fact all ASP.NET forms are sent by the POST method. 35 ASP.NET and Browsers The browser never sees the Web server control. The server processes the Web server control and sends standard HTML to the browser. ASP.NET considers browsers to be either uplevel or downlevel. Uplevel l browsers support script Version 1.2 (ECMA Script, JavaScript, Jscript) and HTML 4.0; typical uplevel browsers would include Internet Explorer 4.0 and later releases. ASP.NET can tell you which browser is being used to display the page. The web server will automatically convert your HTML to reflect the capabilities of the client browser. 36

19 Web Server Controls web server controls are special ASP.NET tags understood by the server. Web server controls are created on the server and they require a runat="server" attribute to work. Web server controls do not necessarily map to any existing HTML elements and they may represent more complex elements. The syntax for creating a web server control is: <asp:control_name id="some_id" runat="server" /> or <asp:control_name id="some_id" " id" runat="server" " > text </asp:control_name> ol name> 37 The <asp:label> Control The <asp:label> control provides an effective way of displaying text on your web page in ASP.NET. It mimics i the HTML <span> tag, a tag that t has no effect on the text it contains, but can be used to logically group text t together th into sections, paragraphs, pages, or sentences. This control is actually vital to us if we want to separate our HTML from our ASP.NET code. 38

20 The <asp:label> Control Attributes The <asp:label> control is just like any normal HTML form control in that it has a collection of attributes you can set. Besides runat= server, part of the attributes t you may want to use are: id sets a unique identifier for that particular instance of the label Text sets the text that you want the label to display Visible determines whether the label control is currently visible on the page: this must be either true or false BackColor sets the background color of the label ForeColor sets the foreground color of the label Height sets the height in pixels of the label Width sets the width of the label control 39 <asp:label> control To create the control with the minimum of information needed, you can just supply the runat and id attributes: <asp:label id= msg1" runat="server">hello</asp:label> The id attribute is used to uniquely identify the <asp:label> control so you can refer to it in your ASP.NET code. The runat="server" attribute tells the server to process the control and generate HTML code to be sent to the client. Alternatively, you can use the text attribute. This way, everything can be contained within the opening tag, in which case you need to close the tag in the following way: <asp:label id= msg1" text="hello" runat="server" /> 40

21 How it works The <asp:label> controls are translated into HTML <span> tags, to which h they are functionally equivalent. <asp:label id="message1" runat="server" text="tom"/> <span id="message1">tom</span> <asp:label id="message2" runat="server" text="houston International Festival"/> <span id="message2">houston International Festival</span> 41 Control Attributes: labelcontrol_csharp.aspx and labelcontrol_csharp.aspx.cs The Page_Load event is triggered whenever an ASP.NET page loads, and ASP.NET will automatically call the subroutine Page_ load, and execute ecute the code inside it. <%@ Page language= C#" %> is the page directive. Page directives enable you to select settings that apply to the entire page. 42

22 Handling Control Events ASP.NET is an event-driven, server-side side programming language. ASP.NET controls can generate events when clients interact with them. When users interact with ASP.NET controls, their actions trigger events corresponding to each control to respond to user actions. 43 Control Attributes: labelcontrol_csharp.aspx and labelcontrol_csharp.aspx.cs ASP.NET has allowed us to directly influence the contents of the <asp:label> control, and set it separately, independently from our HTML code. You can reference any of the attributes of the server control as follows: [ServerControl].[ServerControlAttribute] 44

23 The <asp:dropdownlist> Control HTML Drop-down listboxes ASP.NET Drop-down list Control <select name="list1"> <option value= Cat >Cat</option> o <option value= Dog >Dog</option> <option value= Bird >Bird</option> </select> <asp:dropdownlist d tid="list1" runat="server"> <asp:listitem>cat</asp:listitem p > <asp:listitem>dog</asp:listitem > <asp:listitem>bird</asp:listitem > </asp:dropdownlist d t> 45 The <asp:dropdownlist> Control different from HTML drop-down listboxes There are three important differences from the HTML form control: The <asp:dropdownlist> tag directly replaces the <select> tag The <asp:listitem> tag replaces the <option> tag The id attribute replaces the name attribute 46

24 id vs. name Up until now, in all HTML form controls, the name attribute has been used to pass the identity of the form control to the ASP.NET code. The id attribute, for all but form controls, provides exactly the same function for any other HTML tags. The server-side control is therefore being brought up to date, by using the id attribute to perform this function, rather than the name attribute. 47 <asp:listitem> control All three of the following lines are equivalent: <asp:listitem>item 7</asp:listItem> <asp:listitemtext= text= Item 7 ></asp:listitem> <asp:listitem text= Item 7 /> text is used for the text string displayed for a ListItem. The value is not displayed, but is available programmatically. If only value is used, the associated string value will be displayed. 48

25 Using the <asp:dropdownlist> Control: dropdown_csharp.aspx & dropdown_csharp.aspx.cs The Page_Load subroutine runs EVERY time the page is loaded. If you want to execute the code in the Page_Load subroutine only the FIRST time the page is loaded, you can use the Page.IsPostBack property. If the Page.IsPostBack property is false, the page is loaded for the first time, if it is true, the page is posted back to the server (i.e. from a button click on a form). 49 Page.IsPostBack Property Page.IsPostBack P kproperty: Gets a value indicating whether the page is being loaded in response to a client postback, or if it is being loaded and accessed for the first time. 50

26 How it works <form runat= server > is converted to an HTML form, which automatically includes method, action, name, and id attributes. POST is used by default method for the form control. You can define these attributes if you do not want the default values, but you cannot change the action attribute in ASP.NET. <form runat="server"> <form name="_ctl0" method="post" action="dropdown_csharp.aspx" id="_ctl0"> 51 How it works Which h is your favoriate pet? <br/><br/> b/ b/ <asp:dropdownlist id="list1" runat="server"> <asp:listitem>cat</asp:listitem> <asp:listitem>dog</asp:listitem> <asp:listitem>bird</asp:listitem> </asp:dropdownlist> p <input type="hidden" name=" VIEWSTATE" value="ddwtmtmyntu5mzc0njt0pdtspgk8mt47pjtsphq8cdxwpgw8vgv4d Ds+O2w8WW91IGhhdmUgc2VsZWN0ZWQgQ2F0Oz4+Oz47Oz47Pj47PmqN2 2V Q2F0O 47O 47Pj47P N2 gx3s+bbhcvy4nlqdvnv9/ql" /> Which is your favorite pet?<br /><br /> <select name="list1" id="list1"> <option selected="selected" value="cat">cat</option> <option value="dog">dog</option> <option value="bird">bird</option> </select> 52

27 How it works There is a hidden control called VIEWSTATE, whose value is an encoded representation of the overall state of the form (as it was when last submitted). This is used by ASP.NET to keep track of all the server control settings from one page refresh to another otherwise, our drop-down d listbox would revert to a static default setting every time we submitted a value. It may not be immediately obvious how useful this can be : consider a registration form in which you have to enter a full set of personal details. If you forget to fill in a required field, and then submit the form, you may well be prompted with the same form again. Perhaps the field you missed will be highlighted, but unless the page has been very carefully coded (or is running on a sophisticated technology like ASP.NET), all the data you just entered will have to be typed in again. Thanks to VIEWSTATE, all that data is automatically persisted through to the refreshed page, and we (as developers) haven't even to raise a finger! 53 How it works list1.selecteditem.text: As list1 is unique on the page, it refers directly to our drop-down listbox. The SelectedItem keeps a record of which item the user has selected. ecte The Value item returns the corresponding contents of the <asp:listitem> tag. 54

CST272 Getting Started Page 1

CST272 Getting Started Page 1 1 2 3 4 5 6 8 Introduction to ASP.NET, Visual Studio and C# CST272 ASP.NET Static and Dynamic Web Applications Static Web pages Created with HTML controls renders exactly