JimYuan's Blog

Sharing the things I learned

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
<table>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">ID</th>
    <th colspan="2">Membership Dates</th>
    <th rowspan="2">Balance</th>
  </tr>
</table>

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Heaviset Bird</h1>
    <table>
        <thead>
            <tr>
                <th>Subscription</th>
                <th>Price</th>
                <th>Support</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Free</td>
                <td>Free</td>
                <td>N/A</td>
            </tr>
            <tr>
                <td>Personal</td>
                <td>$9.99</td>
                <td>Weekdays</td>
            </tr>
            <tr>
                <td>Business</td>
                <td>$49.99</td>
                <td>24/7</td>
            </tr>
        </tbody>
    </table>

    table>tr>td*5
</body>
</html>

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
<form action="/tacos">
    <input type="text" name="" id="">
    <input type="button" value="">
    <input type="color" name="" id="">
    <input type="image" src="" alt="">
    <input type="text" placeholder="default">
</form>

The All-important Label label

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

The 

1
2
3
4
5
6
7
8
9
<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

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
4
<button class="favorite styled"
        type="button">
    Add to favorites
</button>

alternative

1
<input type="submit">

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
<form action="https://www.reddit.com/search">
        <input type="text" name="q">
        <button>Search Reddit</button>
    </form>
    <form action="https://www.google.com/search">
        <input type="text" name="q">
        <button>Search google</button>
    </form>
    <form action="https://www.youtube.com/results">
        <input type="text" name="search_query">
        <button>Search youtube</button>
    </form>

Radio Buttons, Checkboxes, & Selects

Checkboxes

1
2
3
4
5
<form action="/birds">
    <input type="checkbox" name="agree_tos" id="agree" >
    <label for="agree">I agree to everything</label>
    <button>Submit</button>
</form>

Radio Buttons

1
2
3
4
5
6
7
8
<p>
    <label for="s">S:</label>
    <input type="radio" name="size" id="s" value="s">
    <label for="m">M:</label>
    <input type="radio" name="size" id="m" value="m">
    <label for="l">L:</label>
    <input type="radio" name="size" id="l" value="l">
</p>

1
2
3
4
5
6
7
8
<p>
    <label for="meal">Please select an Entree</label>
    <select name="meal" id="meal">
        <option value="fish">Fish</option>
        <option value="steak">Steak</option>
        <option value="orange">Orange</option>
    </select>
</p>

Range & Text Area

Range

1
2
3
4
<p> 
    <label for="cheese">Amount of Cheese:</label>
    <input type="range" id="cheese" min="1" max="100" name="cheese_level">
</p>

Text Area

1
2
3
4
<p>
    <label for="req">Any Special Request?</label><br>
    <textarea name="req" id="req" cols="100" rows="10"></textarea>
</p>