TIL 02 | HTML Form & Table

Form (1) - 기본구조

<form action="" method=""></form>

• 사용자로부터 인풋input을 받기 위한 태그
• action = "API 주소"
• method = "GET | POST"

Form (2) - Input

<input type="text">
<form action=""method="GET">
  <input type="email" placeholder="이메일을 입력하세요"/>
  <input type="password" placeholder="비밀번호를 입력하세요" minlength="6"
  />
  <input type="URL" placeholder="포트폴리오 URL를 적으시오" />
  <input type="number" min="12" placeholder="나이를 입력하세요(12세 이상 ~ 122세 이하)" />
  <input type="file" accept=".png,.jpg" />

Form (03) - Label

<label>라벨</label>
<label for="누구">라벨</label>
<label for="인풋id">라벨</lable>
<input id="인풋id" type="text"/>

Form (04) - Radio & Checkbox

<input type="radio" name="subscription" id="subscribed" />
<label for="subscribed">구독중</label>
<input type="radio" name="subscription" id="unsubscribed" />
<label for="unsubscribed">미구독</label

Form (05) - Select & Option

<form action="" method="GET">
        <label for="skills">스킬</label>
        <select multiple name="skills" id="skills">
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="js">JavaScript</option>
        </select>
        <button type="submit">
            Submit
        </button>
    </form>

Form (06) - Textarea

<input type="text" />
    <label for="field">자기소개:</label>
    <textarea id="field" placeholder="자기소개를 입력하세요"></textarea>

Form (07) - Buttons

<button type="button">
        버튼
</button>
    <form actions="">
        <input type="text">
        <button type="submit">제출하기</button>
        <button type="reset">다시쓰기</button>
    </form>

표 Table (1) - 기본구조

데이터를 담은 표를 만들 때 사용

<table>
<tr>
	<th>테이블 헤더</th>
	<td>테이블 데이터</td>
</tr>
</table>

ID	이름	개발분야	기타
0001	제이	프론트엔드
00002	JayKim	프론트엔드

표 Table (02) - 심화

<table>
        <thead>
            <tr>
                <th></th>
                <th>월</th>
                <th>화</th>
                <th>수</th>
                <th>목</th>
                <th>금</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1교시</th>
                <td rowspan="2"> HTML &amp; CSS</td>
                <td>모각코</td>
                <td rowspan="2"> HTML &amp; CSS</td>
                <td>모각코</td>
                <td rowspan="2"> HTML &amp; CSS</td>
            </tr>
            <tr>
                <th>2교시</th>
                <!--<td >왕초보 HTML &amp; CSS</td>-->
                <td rowspan="2">JavaScript 스킬업</td>
                <!--<td>왕초보 HTML &amp; CSS</td>-->
                <td rowspan="2">JavaScript 스킬업</td>
                <!--<td>왕초보 HTML &amp; CSS</td>-->
            </tr>
            <tr>
                <th>3교시</th>
                <td>JavaScript 시작반</td>
                <!--<td rowspan="2">JavaScript 스킬업</td>-->
                <td>JavaScript 시작반</td>
                <td>JavaScript 시작반</td>
            </tr>
            <tr>
                <th colspan="6">점심시간</th>
            </tr>
        </tbody>
    </table>

rowspan = "숫자"
colspan = "숫자"
scope ="row | col"