Computer 8

• Online forms


  Webpages purposely designed for gathering information on the internet
• HTML form


  Used to collect user input, often sent to a server for processing
• Form element


  HTML <form> element is used to create an HTML form for user input
• Form element


  • Container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
• Input element


  Specifies an input field where the user can enter data
• Input types


  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
• Radio button


  Defines a radio button, part of a radio group where only one can be selected at a time
• Radio button


  • Radio group must have the same name, selecting one deselects others in the group
  • Value attribute defines the unique value associated with each radio button
• Checkbox


  Defines a checkbox, allowing the user to select zero or more options
• Submit button


  Defines a button for submitting the form data to a form-handler
• Submit button


  • The form-handler is specified in the form's action attribute
• Textarea


  Defines a multi-line text input control, often used in forms to collect user inputs like comments or reviews
• Textarea


  • Can hold an unlimited number of characters, renders in a fixed-width font
  • Size specified by cols and rows attributes or with CSS
• Select field


  Used to create a drop-down list, often used in forms to collect user input
• Select field


  • Name attribute needed to reference form data after submission
  • Id attribute needed to associate with a label
  • Option tags define the available options in the drop-down list
• Submit and reset buttons

  Buttons with type attribute specifying the button type
• Form processing


  Method attribute specifies how to send form-data (as URL variables or HTTP post)
• The form-data is sent to the page specified in the action attribute
• Script


  A set of computer instructions or commands that puts together or connects existing components to accomplish a new related task
• JavaScript


  A powerful scripting language used to create web functionalities
• JavaScript


  • Interpreted language that requires a browser to run
  • Scripting language created to perform simple repetitive tasks
  • Client-side scripting language executed on the user's machine
  • Object-oriented programming language that treats elements as objects
• To start scripting, you will need a text editor and a web browser
• Objects


  Items that exist in the browser, like the window, page, status bar, date and time
• Methods


  Actions to be performed on or by an object, representing functions designed for a specific purpose
• Properties


  Existing subsections of an object
• Event


  Something which happens or is done, like loading a page, holding a mouse over a link, or clicking a link
• Parameter


  Data or other objects which describe the characteristics of an object
• Type


  The type of variable, such as integer, string, floating point, or Boolean
• Type conversion


  The act of converting a variable from one type to another
• Grouping selector


  The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element.
• Grouping selector


  • article, p, img
• Class selector


  The class selector selects HTML elements with a specific class attribute.
• Layout table


  A table used to provide some sort of visual structure to a page, sometimes people want to design columns on a page, some people find using layout tables easier for Forms, etc. When you use a table for anything but providing data, you are using a table for layout.
• CSS positioning


  The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
• CSS positioning properties


  • Static
  • Relative
  • Absolute
  • Fixed
  • Float
• Static


  The default position. The element would be in this position if you did not specify any value. Static is the default position for HTML elements. Elements with position: static are positioned based on the normal flow of the page, as you would expect them to be without any CSS styling. They are not affected by the top, right, bottom, or left properties.
• Relative


  This position depends on the other element. Even if you resize the browser window, it will not overlap into other element (unlike the absolute value). You set values for the top, right, bottom, and/or left properties. Surrounding elements won't be affected, but there will be space where the repositioned element would have been (in static positioning).
• Absolute


  The element stays in one place if you resize the browser window, it will remain in the part of the page you assigned. An element ignores the normal document flow.
• Fixed


  The elements stays in place even if you scroll up or down, left or right. Its positions depends on the browser window not on the page itself.
• Float


  The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.