Jim Chen's Blog
0%

IntroToTheWeb_Section_4

Posted on Edited on

HTML: Forms and Tables

Tables: TR, TD, and TH element

  • TR: The Table Row element
  • TD: The Table Data Cell element
  • TH: The Table Header element

TR: Table Row

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

TD: Table Data

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

TH: Table Header

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th

Tables: Thead, Tbody and Tfoot Elements

Tables: Colspan and Rowspan

1
2
3
4
5
6
7
8

  
Name
ID
Membership Dates
Balance

Coding Excersice

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40






Document


Heaviset Bird

    
        
            Subscription
            Price
            Support
        
    
    
        
            Free
            Free
            N/A
        
        
            Personal
            $9.99
            Weekdays
        
        
            Business
            $49.99
            24/7
        
    


table>tr>td*5


The Form Element

Creating Forms

  • The <form> element itself is a shell of container that doesn’t have any visual impact.
  • We then fill the form with a collection of inputs, checkboxes, buttons, etc.

<form>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

  • The form element represents a document section containing interactive contorls for submitting information.
  • The action attribute specifies WHERE the form data should be sent
  • The method attribute specifies which HTTP method should be used

<input> Common Input Types

  • The input element is used to create a variety of different form controls
  • We have 20+ possible types of inputs ranging from data pickers to checkboxes.
  • The type attribute is where the magic happens. Changing type dramatically alters the input’s behavior and appearance
1
2
3
4
5
6
7

The All-important Label label

https://developer.mozilla.org/en-US/search?q=label

The HTML element represents a caption for an item in a user interface.

1
2
3
4
5
6
7
8
9

Do you like cheese?




Do you like peas?


Do you like cheese?

Do you like peas?

HTML Buttons

The <button> HTML element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.

By default, button hold a type="submit" but if you want the button do not submit a form, you can do <button type="button">

1
2
3

Add to favorites

alternative

1

The name Attribute

We should put it on every single input that you use and it will be used when you send your data to a server eventually.

NameAttributes

Note that the webpage url changed after submitting the form.

1
2
3
4
5
6
7
8
9
10
11
12


Search Reddit
    
    

Search google
    
    

Search youtube

Search Reddit

Search google

Search youtube

Radio Buttons, Checkboxes, & Selects

Checkboxes

1
2
3
4
5


I agree to everything
Submit

Radio Buttons

1
2
3
4
5
6
7
8

S:

M:

L:


S: M: L: 

1
2
3
4
5
6
7
8

Please select an Entree

    Fish
    Steak
    Orange


Please select an Entree Fish Steak Orange

Range & Text Area

Range

1
2
3
4
 
Amount of Cheese:


Amount of Cheese:

Text Area

1
2
3
4

Any Special Request?


Any Special Request?