HTML Tables and Forms

HTML Tables and Forms
• Introduction to HTML
• HTML Tables
• Spanning Multiple Rows and Cells
• Cell Padding and Spacing
• HTML Forms
• HTML Form Attributes
• HTML Form Elements
• HTML Input Types and Attributes

1. DR. S. & S.S. GHANDHY GOVERNMENT ENGINEERING COLLEGE, SURAT A Presentation on subject W.T. (HTML Tables and Forms)

2. PRESENTED BY : Prof J. J. Patel (Faculty Guide) Electronics & Communication Department Name Enrollment number Hinesh Miyani 180230111035 HTML Tables and Forms

3. Introduction to HTML HTML Tables Spanning Multiple Rows and Cells Cell Padding and Spacing HTML Forms HTML Form Attributes HTML Form Elements HTML Input Types and Attributes

4. What is HTML? HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. We can apply this markup language to web pages to display text, images, sound and movie files, and almost any other type of electronic information . We use the language to format documents and link them together, regardless of the type of computer with which the file was originally created.

5. Tables represent tabular data A table consists of one or several rows Each row has one or more columns Tables comprised of several core tags: <table></table> : begin / end the table <tr></tr> : create a table row <td></td> : create tabular data (cell) Tables should not be used for layout Use CSS floats and positioning styles instead

6. < table   border =" 1 " >          < tr >              < td > Row 1 Cell 1 </ td >              < td > Row 1 Cell 2 </ td >          </ tr >          < tr >              < td > Row 2 Cell 1 </ td >              < td > Row 2 Cell 2 </ td >          </ tr >      </ table > Content is placed within tables cells. A table cell is defined by <td> and </td>. The border attribute defines how wide the table's border will be.

7. < table   border =" 1 " >          < thead >              < th > Name </ th >              < th > Salary </ th >          </ thead >          < tbody >              < tr >                  < td > Ramesh Shah </ td >                  < td > 5000 </ td >              </ tr >              < tr >                  < td > Amit  Bhaskar </ td >                  < td > 7000 </ td >              </ tr >          </ tbody >      </ table > The  < thead >  tag is used to group header content in an HTML table. The  < tbody >  tag is used to group the body content in an HTML table . The  < th >  tag defines a header cell in an HTML table.

8. < table   border =" 1 " >      < thead >          < th > Column 1 </ th >          < th > Column 2 </ th >          < th > Column 3 </ th >      </ thead >      < tbody >          < tr >              < td   rowspan =" 2 " > Row 1 Cell 1 </ td >              < td > Row 1 Cell 2 </ td >              < td > Row 1 Cell 3 </ td >          </ tr >          < tr >              < td > Row 2 Cell 2 </ td >              < td > Row 2 Cell 3 </ td >          </ tr >          < tr >              < td   colspan =" 3 " > Row 3 Cell 1 </ td >          </ tr >      </ tbody > </ table > We will use colspan attribute if we want to merge two or more columns into a single column. Similar way we will use rowspan if we want to merge two or more rows.

9. < table   border =" 1 "   cellpadding =" 20 " >      < thead >          < th > Column 1 </ th >          < th > Column 2 </ th >      </ thead >      < tbody >          < tr >              < td > Row 1 Cell 1 </ td >              < td > Row 1 Cell 2 </ td >          </ tr >          < tr >              < td > Row 2 Cell 1 </ td >              < td > Row 2 Cell 2 </ td >          </ tr >      </ tbody > </ table > There are two attributes called cellpadding and cellspacing which we will use to adjust the white space in our table cells. The cellpadding represents the distance between cell borders and the content within a cell.

10. < table   border =" 1 "   cellspacing =" 10 " >      < thead >          < th > Column 1 </ th >          < th > Column 2 </ th >      </ thead >      < tbody >          < tr >              < td > Row 1 Cell 1 </ td >              < td > Row 1 Cell 2 </ td >          </ tr >          < tr >              < td > Row 2 Cell 1 </ td >              < td > Row 2 Cell 2 </ td >          </ tr >      </ tbody > </ table > The cellspacing attribute defines space between table cells.

11. < form> is just another kind of HTML tag HTML forms are used to create GUIs on Web pages Usually the purpose is to ask the user for information The information is then sent back to the server A form is an area that can contain form elements The syntax is: < form parameters > . .. form elements... </form> Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc. Other kinds of HTML tags can be mixed in with the form elements A form usually contains a Submit button to send the information in the form elements to the server.

12. The <form arguments > ... </form> tag encloses form elements (and probably other HTML as well) The arguments to form tell what to do with the user input action=" url " (required) Specifies where to send the data when the Submit button is clicked method="get" (default) Form data is sent as a URL with ? form_data info appended to the end Can be used only if data is all ASCII and not more than 100 characters method="post" Form data is sent in the body of the URL request target=" target " Tells where to open the page sent as a result of the request target = _blank means open in a new window target = _top means use the same window

13. Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of element it is type can be text , checkbox , radio , password , hidden , submit , reset , button , file , or image Other common input tag arguments include: name : the name of the element value : the “value” of the element; used in different ways for different values of type readonly : the value cannot be changed disabled : the user can’t do anything with this element Other arguments are defined for the input tag but have meaning only for certain values of type

14. A text field:       < input   type =" text "   name =" textfield "   value =" with an initial value " > A multi-line text field:        < textarea   name =" textarea "   cols =" 24 "   rows =" 2 " ></ textarea > A password field:       < input   type =" password "   name =" textfield3 "   value =" secret " >

15. < div > A submit button:        < input   type =" submit "   name =" Submit "   value =" Submit " >      </ div >      < br >      < div > A reset button:        < input   type =" reset "   name =" Submit2 "   value =" Reset " >      </ div >      < br >      < div > A plain button:        < input   type =" button "   name =" Submit3 "   value =" Push Me " >      </ div > submit: send data reset: restore all form elements to their initial state button: take some action as specified by JavaScript

16. A checkbox: < input   type =" checkbox "   name =" checkbox” value= " checkbox "   checked > type: "checkbox" name: used to reference this form element from JavaScript value: value to be returned when element is checked Note that there is no text associated with the checkbox—you have to supply text in the surrounding HTML

17. Radio buttons:        < br >        < input   type =" radio "   name =" radiobutton "   value =" myValue1 "   checked >        Male        < br >        < input   type =" radio "   name =" radiobutton "   value =" myValue2 "  >        Female If two or more radio buttons have the same name, the user can only select one of them at a time This is how you make a radio button “group” If you ask for the value of that name, you will get the value specified for the selected radio button As with checkboxes, radio buttons do not contain any text

18. A menu:        < select   name =" select " >          < option   value =" red " > red </ option >          < option   value =" green " > green </ option >          < option   value =" BLUE " > blue </ option >        </ select > Additional arguments: size: the number of items visible in the list (default is "1") multiple: if set to "true", any number of items may be selected (default is "false ")