5. HTML: Forms & Tables

43. Tables: TR, TD and TH Elements

 

<td>: The Table Data Cell elements

<tr>: The Table Row element

<th>: The Table Head element

 

<h1>Heviest Birds</h1>
<table>
    <tr>
        <th>Animal</th>
        <th>Average mass [kg (lb)]</th>
        <th>Maximum mass [kg (lb)]</th>
        <th>Flighted</th>
    </tr>
    <tr>
        <td>Ostrich</td>
        <td>104(230)</td>
        <td>156.8(346)</td>
        <td>No</td>
    </tr>
    <tr>
        <td>Somali Ostrich</td>
        <td>90(200)</td>
        <td>130(287)</td>
        <td>No</td>
    </tr>
</table>

 

 

 

44. Tables: Thead, Tbody, and Tfoot Elements

 

<thead>: The Table Head element

<tbody>: The Table Body element

<tfoot>: The Table Foot element

 

semantic element라 생각하면 될 듯

 

<h1>Heviest Birds</h1>
<table>
    <thead>
        <tr>
            <th>Animal</th>
            <th>Average mass [kg (lb)]</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ostrich</td>
            <td>104(230)</td>
        </tr>
        <tr>
            <td>Somali Ostrich</td>
            <td>90(200)</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td>97(215)</td>
        </tr>
    </tfoot>
</table>

 

 

 

45. Tables: Colspan & Rowspan

 

<h1>Heviest Birds</h1>
<table>
    <thead>
        <tr>
            <th rowspan="2">Animal</th>
            <th colspan="2">Average mass</th>
        </tr>
        <tr>
            <th>kg</th>
            <th>lb</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ostrich</td>
            <td>104</td>
            <td>230</td>
        </tr>
        <tr>
            <td>Somali Ostrich</td>
            <td>90</td>
            <td>200</td>
        </tr>
    </tbody>
</table>

 

 

 

46. The Form Element

 

The action attribute specifies where the form data should be sent.

 

 

49 - 50. HTML Buttons & The Name Attribute

 

label의 for attribute는 input의 id attribute와 연동된다.

 

<h1>Form Demo</h1>
<form action="/login">
    <div>
        <label for="username">Username </label>
        <input type="text" name="username" id="username" placehoder="username">
    </div>
    <div>
        <label for="password">Password </label>
        <input type="password" name="password" id="password" placehoder="username">
    </div>
    <button>Enter</button>
</form>

After clicking Enter,

 

 

51. "Hijacking" Goggle & Reddit's Search

 

<h1>Query Demo</h1>
<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>

 

reddit에 chicken을 검색할 수 있다!