Form Overview. Form Processing. The Form Element. CMPT 165: Form Basics
|
|
- Gyles Dean
- 5 years ago
- Views:
Transcription
1 Form Overview CMPT 165: Form Basics Tamara Smyth, School of Computing Science, Simon Fraser University October 26, 2011 A form is an HTML element that contains and organizes objects called form controls, e.g. text boxes, check boxes, and buttons, that allow you to intake information from a website visitor. Every time ou use a search engine, place an order, or join an online mailing list, you use a form and the form controls contained within. Example: Google s search form contains 3 form controls: 1. the text box that accepts the keywords to be searcehd; 2. a button labelled Google Search ; 3. a button labelled I m Feeling Lucky, which when clicked, takes the user directly to the first search result; 1 CMPT 165: Introduction to the Internet and the WWW: Form Basics 2 Form Processing The Form Element A form alone cannot do all the processing. The form needs to invoke a program or a script. There are usually 2 components to a form: 1. The HTML form itself, which are the collection of controls on the web page graphical user interface (GUI) 2. The server-side processing, which uses the form data in some way. The form element is created using the <form>...</form tags, which specifies the beinning and end of a form area. Though there can be multiple forms on a webpage, they cannot be nested. The form element can be configured with attributes that specify what server-side program will process the form (action), how the form information will be sent to the server (method), the name of the form (name) to be used by client-side script. Example: <form method="get" name="myform" action="demo.php" >... form controls go here... CMPT 165: Introduction to the Internet and the WWW: Form Basics 3 CMPT 165: Introduction to the Internet and the WWW: Form Basics 4
2 Details of Form Element Attributes action: value: URL of the processing script; purpose: indicates where to send the form information; mailto: address will launch the visitor s default application to send the form information. method: value: get, post ; purpose: determines how data is transmitted to the server get causes the form data to be appended to the URL and sent to the web server; post is more private and transmits the form data in the body of the HTTP response (preferred by W3C); default value is get. name: value: Alphanumeric, no spaces, begins with a letter, choose a form name that is descriptive but short. purpose:optional; names the form so that it can be easily accessed by client-side scripting, to edit and verify the form information before the server-side processing is invoked. autocomplete: (HTML5 attribute) value: on, off ; purpose: if on, browser will use autocompletion to fill form fields; default value is on. Example: <form name="order" method="post" id="order" action="demo.php">...form controls go here... configures a form with the name order, using the post method, and invoking a script called demo.php on your web server. CMPT 165: Introduction to the Internet and the WWW: Form Basics 5 CMPT 165: Introduction to the Internet and the WWW: Form Basics 6 Form Controls Input Element The purpose of a form is to gather information from a web page visitor. Form controls are the objects that accept the information. Types include: text boxes, scrolling text boxes, select lists, radio buttons, check boxes, and buttons. HTML5 offers new form controls includes those customized to addresses, URLs, dates and times, numbers, and date selection. The input element is a stand-along tag that is used to configure several different types of form controls. Use the type attribute to specify the type of form control that the browser should display: text box: type= text submit box: type= submit reset box: type= reset check box: type= checkbox radio button: type= raadio password box: type= password CMPT 165: Introduction to the Internet and the WWW: Form Basics 7 CMPT 165: Introduction to the Internet and the WWW: Form Basics 8
3 Text Box Example that configures a text box to accept an address: <input type="text" name=" " id=" "> Common input element attributes for text boxes are: type: value: text size: value: numeric maxlength: value: numeric value: value: text or numeric characters; assigns an initial value disabled: value: disabled; form control is disabled readonly: value: readonly; form control is for display only; cannot be edited; HTML5 attributes: autocomplete: value: on, off; default is on; browser will use autocompletion to fill the form control autofocus: value: autofocus; browser places cursor in the form contro and sets focus CMPT 165: Introduction to the Internet and the WWW: Form Basics 9 list: value: datalist element id; associates the form control with a datalist element paceholder: value: text or numeric characters; brief information inteded to assist the user required: value: required; browser verifies entry of information before submitting the form accesskey: value: keyboard character; configures a hot key for the form control tabindex: value: numeric; configures the tab order of the form control The name attribute names the form element so that it can be easily accedd by client-side scripting languages such as Java Script. The value should be unique to that form. The id element is included for use with CSS and scripting. It is common to make the same assignment for both id and name attributes. CMPT 165: Introduction to the Internet and the WWW: Form Basics 10 Submit and Reset Buttons Check Box The submit button form control is used to submit the form. When clicked, it triggers the action method on the <form> tag and causes the browser to send the form data to the web server. <input type="submit"> The web server will invoke the server-side processing program listed on the form s action property. You can change the text appearing on the submit button by setting the value attribute. The reset button form control is used to reset hte form fields to their initial values. <input type="reset"> None of these buttons will do anything until you enclose them in a form element. Example: <form method="get"> <input type="text" autofocus="autofocus"><br> <input type="submit" value="sign me up!"> <input type="reset"> The check box form control allow the user make one or more selection(s) from a group of predetermined items. <input type="checkbox" value"yes"> The value attribute can have a text of numeric value, and assigns a vlaue to the ckech box that is triggered when the check box is checked; this can be accessed by both client and server. CMPT 165: Introduction to the Internet and the WWW: Form Basics 11 CMPT 165: Introduction to the Internet and the WWW: Form Basics 12
4 Radio Button Password Box The radio button form control allows the user to select exactly one (and only one) choise from a group of predeterined items. <input type="radio"> The value attribute can have a text of numeric value, but it should be a unique value for each radio button in a group; this can be accessed by both client and server. Give each radio button in a group the same name, e.g. name= favbrowser to ensure that only one is selected. Each radio button in the same group can be uniquely identified by its value attribute. The checkbox and radio button have the most of the attributes already seen In addition, they have the checked attribute, where the value checked configures a check box to be checked by default when displayed by the browser. The password box form control is similar to the text box, but it is used to accept information that must be hidden as it is entered, such as a password. <input type="password" name="pword"> When the user types, asterisks or dots are shown (depending on the browser). Though this hides the information from someone looking over your shoulder, the actual characters typed are sent to the server, and the information is not really secret or hidden. CMPT 165: Introduction to the Internet and the WWW: Form Basics 13 CMPT 165: Introduction to the Internet and the WWW: Form Basics 14 Textarea Element Select Element The scrolling text box form control accepts free-form comments, question, or descriptions. Unlike the other form controls seen so far, it does not used the input tag, but rather the <textarea>...</textarea> tags to delimit the beginning and end of the scrolling text box. Text between the tags will display in the scrolling text box area. Comments:<br> <textarea name="comments" cols="40" rows="2"> Enter your comments here </textarea> The cols and rows attributes are required to confiugre the width and height. If omitted, the browser will use its default values. The wrap attribute, hard or soft, configures line breaks within the infomration entered. CMPT 165: Introduction to the Internet and the WWW: Form Basics 15 The select list form control is also known as a drop-down box and is configured using the <select>... </select> tags. The select element contains one or more option elements (discussed next slide). Attributes configure the number of options to display and whether multiple items may be selected: size: value: numeric; purpose: configures the number of choices the browser will display; if 1, element functions as a drop-down list; scroll bars are automatically added by if the number of options exceeds the space allowed. multiple: value: multiple ; purpose: configures to accept multiple choices; default is only one choice. CMPT 165: Introduction to the Internet and the WWW: Form Basics 16
5 Option Element Label Element The option element contains and configures an option item displayed in the select list using the <option>...</option> tags. Attributes configure the value of the option and whether they are preselected. value: value: text or numeric characters; purpose: assigns a value to the option; selected: value: selected ; purpose: configure an option to be initially selected when displayed by a browser. <select size="1" name="favbrowser"> <option>select your favorite browser</option> <option value="internet Explorer">Internet Explorer</option> <option value="firefox">firefox</option> <option value="opera">opera</option> </select> If the number of items exceeds the size, a scroll bar will appear. The label element is a container tag that associates a text description with a form control. Clicking anywhere on either a form control or its associated text label will set the cursor focus to the form control. There are two different methods to associate a label with a form control: 1. The label element is placed as a container around both the text description and the HTML form element. <label> <input type="text" name=" "></label> In this case, the text label and the form control must be adjacent elements. 2. The for attribute is used to associate the label with a particular HTML form element. <label for=" "> </label> <input type="text" name=" " id=" "> This is more flexible and does not require elements to be adjacent. Notice that the value of the for attribute on the label element is the same as the value of the id attribute CMPT 165: Introduction to the Internet and the WWW: Form Basics 17 CMPT 165: Introduction to the Internet and the WWW: Form Basics 18 on the input element, creating an association between the text label and the form control. The label element does not display on the web page but works behind the scenes. Fieldset Element and Legend Element The fieldset and legend elements work together to visually group form controls together. The fieldset element allows you to group elements of a similar pupose by containing them within the <fieldset>...</fieldset> tags. The legend element provides a text description for the fieldset grouping by containing text within the <legend>...</legend> tags. Example: <fieldset> <legend>billing Address</legend> <label>street: <input type="text" name="street" id="street" size="54"></label><br><br> <label>city: <input type="text" name="city" id="city"></label> <label>province: <input type="text" size="2" name="prov" id="prov"></label> <label>postal code: <input type="text" size="6" name="pcode" id="pcode"></label> </fieldset> And don t forget to use CSS to add a little style! fieldset { width: 500px; border: 2px ridge #ff0000; } legend { font-family: Georgia, serif; font-weight: bold; } label { padding-left: 10px; } CMPT 165: Introduction to the Internet and the WWW: Form Basics 19 CMPT 165: Introduction to the Internet and the WWW: Form Basics 20
6 Style a Form with CSS HTML5 Form Controls And speaking of CSS... The following HTML... <h1>contact Us (formatted with CSS)</h1> <form method="post" id="myform"> <label for="myname">name:</label> <input type="text" name="myname" id="myname"> <label for="my "> </label> <input type="text" name="my " id="my "> <label for="mycomments">comments:</label> <textarea name="mycomments" id="mycomments" rows="2" cols="20"></textarea> <div id="mysubmit"> <input type="submit" value="submit"> </div>... can be styled with CSS: #myform { background-color: #eaeaea; font-family: Arial, sans-serif; width: 400px; } label { float: left; width: 120px; clear: left; text-align: right; padding-right: 10px; margin-top: 10px; } HTML5 offers us a few more options of form controls. Text boxes can be specified, for example, by the type of text they are to accept, thus making sure the input is correctly formatted: addres: type= URL: type= url telephone number: type= tel search: type= search When the text is entered, an error message will pop up if it s not properly formatted according to its type. Browsers that do not support this feature will render as a normal text box. input, textarea { margin-top: 10px; } #mysubmit { margin-left: 130px; padding-bottom: 10px; } CMPT 165: Introduction to the Internet and the WWW: Form Basics 21 CMPT 165: Introduction to the Internet and the WWW: Form Basics 22 HTML5 Datalist Element HTML5 Slider and Spinner Controls The datalist form control offers choices as well as a text box for entry. It is configured using 3 elements: <input>, <datalist> and one or more <option> elements. Browsers that do not support this feature will render as a normal text box. The slider form control provides a visual, interactive user interface that accepts numerical information, with a default range of 1 to 100. Change the range using the max and min attributes, as well as the step. CMPT 165: Introduction to the Internet and the WWW: Form Basics 23 CMPT 165: Introduction to the Internet and the WWW: Form Basics 24
7 HTML5 Date and Time Controls CMPT 165: Introduction to the Internet and the WWW: Form Basics 25
HTML Forms. By Jaroslav Mohapl
HTML Forms By Jaroslav Mohapl Abstract How to write an HTML form, create control buttons, a text input and a text area. How to input data from a list of items, a drop down list, and a list box. Simply
More informationSpring 2014 Interim. HTML forms
HTML forms Forms are used very often when the user needs to provide information to the web server: Entering keywords in a search box Placing an order Subscribing to a mailing list Posting a comment Filling
More informationWeb Site Design and Development Lecture 23. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM
Web Site Design and Development Lecture 23 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM List box The element shows a list of options in a scroll-able box when size is
More informationRow and Column Spans. Homework. Column and Row Span Example (2) Column and Row Span Example. tables: Live Demo. like the following using forms:
table-colspan colspan-rowspan.html cell[1,1] cell[2,1] cell[1,2] cell[2,2] cell[3,2]
More informationCMPT 165: More CSS Basics
CMPT 165: More CSS Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 14, 2011 1 The Favorites Icon The favorites icon (favicon) is the small icon you see
More informationWeb Designing Course
Web Designing Course Course Summary: HTML, CSS, JavaScript, jquery, Bootstrap, GIMP Tool Course Duration: Approx. 30 hrs. Pre-requisites: Familiarity with any of the coding languages like C/C++, Java etc.
More information1 Form Basics CSC309
1 Form Basics Web Data 2! Most interesting web pages revolve around data! examples: Google, IMDB, Digg, Facebook, YouTube! can take many formats: text, HTML, XML, multimedia! Many of them allow us to access
More informationOverview of Forms. Forms are used all over the Web to: Types of forms: Accept information Provide interactivity
HTML Forms Overview of Forms Forms are used all over the Web to: Accept information Provide interactivity Types of forms: Search form, Order form, Newsletter sign-up form, Survey form, Add to Cart form,
More informationDreamweaver: Web Forms
Dreamweaver: Web Forms Introduction Web forms allow your users to type information into form fields on a web page and send it to you. Dreamweaver makes it easy to create them. This workshop is a follow-up
More informationSummary 4/5. (contains info about the html)
Summary Tag Info Version Attributes Comment 4/5
More informationCreating Forms. Speaker: Ray Ryon
Creating Forms Speaker: Ray Ryon In this lesson we will discuss how to create a web form. Forms are useful because they allow for input from a user. That input can then be used to respond to the user with
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationHTML Tables and Forms. Outline. Review. Review. Example Demo/ Walkthrough. CS 418/518 Web Programming Spring Tables to Display Data"
CS 418/518 Web Programming Spring 2014 HTML Tables and Forms Dr. Michele Weigle http://www.cs.odu.edu/~mweigle/cs418-s14/ Outline! Assigned Reading! Chapter 4 "Using Tables to Display Data"! Chapter 5
More informationHTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS
MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version
More informationCreating and Building Websites
Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 7 Slide 1 of 25 Week 7 Unfinished
More informationPHP with MySQL: What you need to know Chapter 3. This section is on using PHP script tags appropriately in your PHP program.
Chapter 3 PHP Basics 3.1 Using PHP Script Tags This section is on using PHP script tags appropriately in your PHP program. The beginning PHP tag () and the code in between those
More informationHTML: Fragments, Frames, and Forms. Overview
HTML: Fragments, Frames, and Forms Michael B. Spring Department of Information Science and Telecommunications University of Pittsburgh spring@ imap.pitt.edu http://www.sis. pitt.edu/~spring Overview Fragment
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationCS 350 COMPUTER/HUMAN INTERACTION. Lecture 6
CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r
More informationIslamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab.
Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM 5049 Advanced Internet Technology Lab Lab # 1 Eng. Haneen El-masry February, 2015 Objective To be familiar with
More informationCSS Review. Objec(ves. Iden(fy the Errors. Fixed CSS. CSS Organiza(on
Objec(ves CSS Review Discuss: Ø How Google Search Works Ø What Images You Can Use HTML Forms CSS Review Why CSS? What is the syntax of a CSS rule? What is the order of applying rules in the cascade? How
More informationHTML HTML/XHTML HTML / XHTML HTML HTML: XHTML: (extensible HTML) Loose syntax Few syntactic rules: not enforced by HTML processors.
HTML HTML/XHTML HyperText Mark-up Language Basic language for WWW documents Format a web page s look, position graphics and multimedia elements Describe document structure and formatting Platform independent:
More informationHTML Forms IT WS I - Lecture 11
HTML Forms IT WS I - Lecture 11 Saurabh Barjatiya International Institute Of Information Technology, Hyderabad 04 October, 2009 Contents Seeing submitted values 1 Seeing submitted values 2 3 Seeing submitted
More informationCOMPUTER APPLICATIONS IN BUSINESS FYBMS SEM II
CHAPTER 1: HTML 1. What is HTML? Define its structure. a. HTML [Hypertext Markup Language] is the main markup language for creating web pages and other information that can be displayed in a web browser.
More informationHTML Element A pair of tags and the content these include are known as an element
HTML Tags HTML tags are used to mark-up HTML elements. HTML tags are surrounded by the two characters < and >. The surrounding characters are called angle brackets HTML tags are not case sensitive,
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Project #3 Review Forms (con t) CGI Validation Design Preview Project #3 report Who is your client? What is the project? Project Three action= http://...cgi method=
More informationFigure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel.
Adobe Dreamweaver CS6 Project 3 guide How to create forms You can use forms to interact with or gather information from site visitors. With forms, visitors can provide feedback, sign a guest book, take
More informationIntroduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100
Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!
More informationThe 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
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationCOMP1000 Mid-Session Test 2017s1
COMP1000 Mid-Session Test 2017s1 Total Marks: 45 Duration: 55 minutes + 10 min reading time This examination has three parts: Part 1: 15 Multiple Choice Questions (15 marks /45) Part 2: Practical Excel
More informationHTML Tables and. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar
HTML Tables and Forms Chapter 5 2017 Pearson http://www.funwebdev.com - 2 nd Ed. HTML Tables A grid of cells A table in HTML is created using the element Tables can be used to display: Many types
More informationCMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB
CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 8 HTML Forms and Basic CGI Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you will
More informationChapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure?
LATIHAN BAB 1 Chapter 1 Self Test 1. What is a web browser? 2. What does HTML stand for? 3. Identify the various parts of the following URL: http://www.mcgrawhill.com/books/ webdesign/favorites.html ://
More informationCHAPTER 6: CREATING A WEB FORM CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
CHAPTER 6: CREATING A WEB FORM INTERACTION BETWEEN A WEB FORM AND A WEB SERVER Without a form, a website is read-only. It only provides information. EXAMPLES OF FORMS USAGE Performing searches Posting
More informationHTML 5 Tables and Forms
Tables for Tabular Data Display HTML 5 Tables and Forms Tables can be used to represet information in a two-dimensional format. Typical table applications include calendars, displaying product catelog,
More informationChapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10
CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties
More informationLEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
cc 2007 AARON GUSTAFSON EASY! DESIGNS, LLC AARON GUSTAFSON EASY! DESIGNS, LLC 2/72 EASY! DESIGNS, LLC FORMS ARE A NECESSARY EVIL 3/72 EASY! DESIGNS, LLC CONTACT US 4/72 EASY! DESIGNS, LLC CONTACT US FORM
More informationChapter 1 FORMS. SYS-ED/ Computer Education Techniques, Inc.
Chapter 1 FORMS SYS-ED/ Computer Education Techniques, Inc. Objectives You will learn: How to use forms and the related form types. Controls for interacting with forms. Menus and presenting users with
More informationHTML5. HTML5 Introduction. Form Input Types. Semantic Elements. Form Attributes. Form Elements. Month Number Range Search Tel Url Time Week
WEB DESIGNING HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments HTML - Lists HTML - Images HTML
More informationPBwiki Basics Website:
Website: http://etc.usf.edu/te/ A wiki is a website that allows visitors to edit or add their own content to the pages on the site. The word wiki is Hawaiian for fast and this refers to how easy it is
More informationCSE 154 LECTURE 8: FORMS
CSE 154 LECTURE 8: FORMS Web data most interesting web pages revolve around data examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes can take many formats: text, HTML, XML, multimedia many
More informationPage Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning
Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1
More informationWanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.
Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationWeb Design and Development ACS Chapter 13. Using Forms 11/27/2018 1
Web Design and Development ACS-1809 Chapter 13 Using Forms 11/27/2018 1 Chapter 13: Employing Forms Understand the concept and uses of forms in web pages Create a basic form Validate the form content 11/27/2018
More informationCSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax
CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets
More informationLAB MANUAL SUBJECT: WEB TECHNOLOGY CLASS : T.E (COMPUTER) SEMESTER: VI
LAB MANUAL SUBJECT: WEB TECHNOLOGY CLASS : T.E (COMPUTER) SEMESTER: VI INDEX No. Title Pag e No. 1 Implements Basic HTML Tags 3 2 Implementation Of Table Tag 4 3 Implementation Of FRAMES 5 4 Design A FORM
More informationProgrammazione Web a.a. 2017/2018 HTML5
Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text
More informationCSS Cascading Style Sheets
CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with
More informationHTTP and HTML. We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms.
HTTP and HTML We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms. HTTP and HTML 28 January 2008 1 When the browser and the server
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationINFS 2150 Introduction to Web Development
INFS 2150 Introduction to Web Development 3. Page Layout Design Objectives Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
More informationINFS 2150 Introduction to Web Development
Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
More informationComp-206 : Introduction to Software Systems Lecture 23. Alexandre Denault Computer Science McGill University Fall 2006
HTML, CSS Comp-206 : Introduction to Software Systems Lecture 23 Alexandre Denault Computer Science McGill University Fall 2006 Course Evaluation - Mercury 22 / 53 41.5% Assignment 3 Artistic Bonus There
More informationART170. The ART170 Final Project
The Final Project TABLE OF CONTENTS Define the site and set up the layout pg. 2 Ordering and externalizing the style sheet pg. 2 Creating the template pg. 3 Generating pages from the template pg. 4 Updating
More informationWelcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
More informationChapter 3 HTML Multimedia and Inputs
Sungkyunkwan University Chapter 3 HTML Multimedia and Inputs Prepared by D. T. Nguyen and H. Choo Web Programming Copyright 2000-2018 Networking Laboratory 1/45 Copyright 2000-2012 Networking Laboratory
More informationHTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web
HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationFrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
More informationITEC447 Web Projects CHAPTER 9 FORMS 1
ITEC447 Web Projects CHAPTER 9 FORMS 1 Getting Interactive with Forms The last few years have seen the emergence of the interactive web or Web 2.0, as people like to call it. The interactive web is an
More informationCOPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1
59313ftoc.qxd:WroxPro 3/22/08 2:31 PM Page xi Introduction xxiii Chapter 1: Creating Structured Documents 1 A Web of Structured Documents 1 Introducing XHTML 2 Core Elements and Attributes 9 The
More informationTAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a
> > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any
More informationWeb Engineering CSS. By Assistant Prof Malik M Ali
Web Engineering CSS By Assistant Prof Malik M Ali Overview of CSS CSS : Cascading Style Sheet a style is a formatting rule. That rule can be applied to an individual tag element, to all instances of a
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
More informationWeb Forms. Survey or poll Contact us Sign up for an newsletter Register for an event
Web Forms Survey or poll Contact us Sign up for an email newsletter Register for an event Web Forms All our web pages thus far have had a one-way flow of information, from us to our web visitors. Now we'll
More informationGoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.
Getting Started From the Start menu, located the Adobe folder which should contain the Adobe GoLive 6.0 folder. Inside this folder, click Adobe GoLive 6.0. GoLive will open to its initial project selection
More informationcore programming HTML Forms Sending Data to Server-Side Programs Marty Hall, Larry Brown
core programming HTML Forms Sending Data to Server-Side Programs 1 2001-2003 Marty Hall, Larry Brown http:// Agenda Sending data from forms The FORM element Text controls Push buttons Check boxes and radio
More informationForms, CGI. Objectives
Forms, CGI Objectives The basics of HTML forms How form content is submitted GET, POST Elements that you can have in forms Responding to forms Common Gateway Interface (CGI) Later: Servlets Generation
More informationHTML5, CSS3, JQUERY SYLLABUS
HTML5, CSS3, JQUERY SYLLABUS AAvhdvchdvchdvhdh HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments
More informationIntroduction to WEB PROGRAMMING
Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
More informationBy completing this practical, the students will learn how to accomplish the following tasks:
By completing this practical, the students will learn how to accomplish the following tasks: Learn different ways by which styles that enable you to customize HTML elements and precisely control the formatting
More informationCSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
More informationDeccansoft Software Services
Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module
More informationDear Candidate, Thank you, Adobe Education
Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:
More informationOU EDUCATE TRAINING MANUAL
OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface
More informationWeb Technologies - by G. Sreenivasulu Handout - 1 UNIT - I
INTRODUCTION: UNIT - I HTML stands for Hyper Text Markup Language.HTML is a language for describing web pages.html is a language for describing web pages.html instructions divide the text of a document
More informationPositioning in CSS: There are 5 different ways we can set our position:
Positioning in CSS: So you know now how to change the color and style of the elements on your webpage but how do we get them exactly where we want them to be placed? There are 5 different ways we can set
More informationHTML and JavaScript: Forms and Validation
HTML and JavaScript: Forms and Validation CISC 282 October 18, 2017 Forms Collection of specific elements know as controls Allow the user to enter information Submit the data to a web server Controls are
More informationBuilding Web Based Application using HTML
Introduction to Hypertext Building Web Based Application using HTML HTML: Hypertext Markup Language Hypertext links within and among Web documents connect one document to another Origins of HTML HTML is
More informationStudent, Perfect Final Exam May 25, 2006 ID: Exam No CS-081/Vickery Page 1 of 6
Student, Perfect Final Exam May 25, 2006 ID: 9999. Exam No. 3193 CS-081/Vickery Page 1 of 6 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives aid on
More informationCreating Forms in SOCS
Training Creating Forms in SOCS Use the Form option on the Advanced Tool Bar to create a form to post to your SOCS site. The form allows visitors to complete the information online. The information gathered
More informationHTML and CSS MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University
HTML and CSS MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University 2 HTML Quiz Date: 9/13/18 next Thursday HTML, CSS 14 steps, 25 points 1 hour 20 minutes Use class workstations
More informationForm Processing in PHP
Form Processing in PHP Forms Forms are special components which allow your site visitors to supply various information on the HTML page. We have previously talked about creating HTML forms. Forms typically
More informationBOOTSTRAP FORMS. Wrap labels and controls in a <div> with class.form-group. This is needed for optimum spacing.
BOOTSTRAP FORMS http://www.tutorialspoint.com/bootstrap/bootstrap_forms.htm Copyright tutorialspoint.com In this chapter, we will study how to create forms with ease using Bootstrap. Bootstrap makes it
More information<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***
Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember
More informationUNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013
UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013 SUBJECT CODE : SCSV1223 (Section 05) SUBJECT NAME : WEB PROGRAMMING YEAR/COURSE : 1SCSV TIME : 2.00 4.00 PM DATE : 18 APRIL 2013 VENUE : KPU 10
More informationWebsite Development with HTML5, CSS and Bootstrap
Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on
More informationPHP,HTML5, CSS3, JQUERY SYLLABUS
PHP,HTML5, CSS3, JQUERY SYLLABUS AAvhdvchdvchdvhdh HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments
More informationWEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:
WEBSITE PROJECT 2 PURPOSE: The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters
More informationGetting Started with CSS Sculptor 3
Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use
More informationCSS Selectors. element selectors. .class selectors. #id selectors
CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors
More informationDesigning the Home Page and Creating Additional Pages
Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From
More informationLesson 3. Form By Raymond Tsang. Certificate Programme in Cyber Security
Lesson 3 Form By Raymond Tsang Certificate Programme in Cyber Security What is a form How to create a form Getting input from users Generate a result It s a section of a document containing normal content,
More informationSession 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style
Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use
More informationHyperlinks, Tables, Forms and Frameworks
Hyperlinks, Tables, Forms and Frameworks Web Authoring and Design Benjamin Kenwright Outline Review Previous Material HTML Tables, Forms and Frameworks Summary Review/Discussion Email? Did everyone get
More informationUSER GUIDE MADCAP FLARE Tables
USER GUIDE MADCAP FLARE 2018 Tables Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished
More informationS4B Video to Flash Soft4Boost Help S4B Video to Flash www.sorentioapps.com Sorentio Systems, Ltd. All rights reserved Contact Us If you have any comments, suggestions or questions regarding S4B Video to
More informationFormatting an APA style Paper in Google Docs 1
Formatting an APA style Paper in Google Docs 1 IMPORTANT: Google Docs has default settings you need to understand before starting to format a paper. Paragraphs can be further indented left only. Normal
More information