HTML 표(table)와 양식(form)에 관련된 태그들

table, tr, th, td태그

table태그:
1데이터표(table)을 생성하여 열(tr)과 행(td)을 생성할 수 있게 해 준다
2 block요소는 아니지만 block요소와 유사하게 동작한다

caption태그 :
1 caption태그는 table에 제목을 설정해 준다.

tr태그:
1table안에서 열(줄)을 생성해준다 

td태그: 
1tr태그안에서 행(칸)을 생성해준다 
2 사용되는 속성들
colspan: 속성 값만큼 행을 확장한다 기본값 = "1" 
rowspan:속성 값만큼 열을 확장한다. 기본값 = "1"
colspan이나 rowspan을 사용할때에는 병합되는 칸에 td는 지워주어야 한다.

th태그:
1td태그와같이 행(칸)을 생성해주는데 th로 만들어진 행은 제목을 명시한다. 때문에 글자가 굵게 출력된다 
주로 1번째 열에 사용된다 
2 사용되는 속성들
colspan: 속성 값만큼 행을 확장한다 기본값 = "1" 
rowspan:속성 값만큼 열을 확장한다. 기본값 = "1"
colspan이나 rowspan을 사용할때에는 병합되는 칸에 td는 지워주어야 한다.

col: 표에 새로줄을 묶어주는 기능을 한다 colgroup안에 작성된다 span이라는 속성을 이용해 몇 번째 줄까지 새로 줄로 묶어줄지 설정할 수 있다.
colgroup: col에 대한 영역을 설정한다 주로 caption바로밑에 쓰인다.

ex1)
 

<style>
    table ,td,th{
      border: 1px solid black;
      border-collapse: collapse;
      padding: 10px;
    }
    th{
      background-color: gray;
    }
  </style>
<table>
  <caption>안녕하세요!</caption>
  <tr>
    <th colspan="2" rowspan="2">안녕</th>
    
    <th>안녕</th>
    <th>안녕</th>
  </tr>
  
  <tr>
    <td>안녕</td>
    <td>안녕</td>
  </tr>
  <tr>
    <td>안녕</td>
    <td>안녕</td>
    <td>안녕</td>
    <td>안녕</td>
  </tr>
  <tr>
    <td>안녕</td>
    <td>안녕</td>
    <td>안녕</td>
    <td>안녕</td>
  </tr>

위코드 와같이 4개의 4tr태그를 이용해 4줄(4열) 하나의 tr태그에 4개의 td, th태그를 이용해 줄마다 4행 4*4의 표를 작성할 수 있는데 
이때 style태그에서 사용된 border: 1px solid black;  =1px크기에 검은색 실선을만들고 border-collapse: collapse; = 테두리가 중복되어 나타나는 현상을 방지해준다.

부가적으로 1번째tr태그안에 th태그를 사용함으로써 주제의 제목을 설정함으로써 글자가 두껍게 출력되는 것을 확인할 수 있다.

ex2)
 

<style>
    table ,td,th{
      border: 1px solid black;
      border-collapse: collapse;
      padding: 10px;
    }  
  </style>
<table>
  <caption>안녕하세요!</caption>
  <colgroup>
  <col style="background-color: orange;">
  <col>
  <col>
  </colgroup>
  <tr>
    <td></td>
    <th>타입</th>
    <th>값</th>
  </tr>
  <tr>
    <th>1</th>
    <td>알파벳</td>
    <td>A</td>
  </tr>
  <tr>
    <th>2</th>
    <td>숫자</td>
    <td>7</td>
  </tr>

위코드를 확인해보면 colgroup안에 1번째 col에 style을 추가해줌으로써 1번째 세로줄에 색상이 orange로 바뀌었음을 확인할 수 있다.

thead, tbody, tfoot 태그 

thead태그 : 표안에서 머리글을 나타낸다
tbody태그 : 표안에서 본문을 나타낸다 
tfoot태그 : 표안에서 바닥글을 나타낸다.

위 태그 들은 표에 어떠한 영향도 주지 않는 태그로써 그냥 표 안에 머리글, 본문, 바닥글을 의미할 뿐이다.

양식과 관련된 태그들
form:
1 사용자가 내용을 작성하면 작성한 내용을 서버에 보내기 위한 양식의 범위를 정의한다
2 form태그안에 여러 속성들
action : 전송버튼을 클릭했을 때 내용이 전송될 페이지에 url을 명시한다.
autocomplete : 사용자가 전에 작성했던 내용에 대한 자동 완성 기능을 사용할지 안 할지에 대한 여부 
값으로 on off가있는데 기본값은 on이다 
name : 다른 form태그와 구별하기 위해 양식에 이름을 명시하는 속성이다.
method: form태그에 내용을 서버로 전송할 때 어떤 방식으로 전송할지에 대한 내용을 명시한다.
값: GET, POST 기본값 : GET 
GET: form태그에서 사용자가 작성한 내용이 전송과정에서 내용이 화면에 노출된다.
POST:form태그에서 사용자가 작성한 내용이 전송과정에서 내용이 화면에 노출되지 않는다.
3 form태그 안에 form 태그를 중복해서 사용할 수 없다. 즉 form태그의 자식으로 form태그를 쓸 수없다. 
4 블록요소이다 

input 태그 
1 사용자가 내용을 입력하는 양식을 만들어준다
2 input 태그에는 여러 가지 속성이 존재한다
autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 값 : on, off 기본값 :on
autofocus: 페이지가 로드되면 autofocus가 사용된 양식에 초점이 맞춰짐
checked: type이 radio, checkbox 일 때 cheked가 사용된 양식이 별도의 클릭 없이 선택되었음을 표시함
value: 양식의 초기 값
placeholder: 양식에서 사용자가 입력할 값의 힌트를 제공
readonly: 사용자가 값을 입력 할 수없고 오직 읽는 기능만 가능하기 하는 속성이다.
type: input태그의 양식이 어떤 형태인지를 명시함

type에 들어 갈 수 있는 값 모음:
button  일반 버튼 <button>처럼 사용
checkbox  체크박스 양식(여러 개 선택 가능)
radio: 체크박스와 같이 선택하는 양식이지만 radio가 여러 개 있을 경우 1가지만 선택할 수 있는 양식을 만듦 즉 하나만 선택 가능
radio가 여러개일때는 name이라는 속성에 동일한 값을 넣어주어 radio끼리 연결시켜줘야 한다 
email :이메일을 작성하는 양식 
password :비밀번호 양식
search: 검색을 할수있는 기능을 가진 양식
submit: form태그안에 내용을 제출하는 버튼을 만듦
tel: 전화번호를 입력하는 양식
text: 일반 텍스트를 입력하는 양식
reset: form태그안에 어떤 내용을 입력했을 때 해당 내용들을 전부 초기화하는 기능
number: 숫자만 입력할수있는 양식을 만든다 min과 max라는 속성을 명시해 최솟값과 최댓값을 설정할 수 있다. step이라는 속성을 이용하면 증가 감소에 대한 값을 1이 아니라 설정값으로 증감할 수 있게 하는 속성이다.
file : 어떠한 파일을 업로드 할 수 있는 양식을 만들어준다 속성 값으로 multiple을 사용하면 여러 개의 파일을 업로드할 수 있게 해 준다
image:  이미지를 삽입하고 해당 이미지를 클릭하면 제출되는 버튼의 기능을 내재한다.
ex)


label태그
1 input요소에 제목을 설정한다
2 for이라는 속성이 있는데 이값이 input 태그의 id값과 연결되어 input 태그에 제목을 설정해준다 
이때 input에 id값과 label의 for값은 동일해야한다.
3 input 태그를 작성할때는 2가지 방법이 있다 
4 inline요소이다. 
ex1)

<form>
    <label for="my-email" class="box1">email :</label>
    <input type="email" id="my-email" placeholder="이메일을 입력하세요">

</form>

위코드에서 ex1)을 보면 label의 for값과 input에 id값이 일치하여 연결되었음을 확인할 수 있다.
이때 label태그를 input태그 앞에 작성하면 제목이 앞에 생성되고 input 태그 뒤에 작성하면 input 태그 뒤에 제목이 생성된다.
ex2)

<form>
<lable><input type="email" id="my-email" placeholder="이메일을 입력하세요">이메일 :</lable>
<label for=""><input type="password" id="my-password" placeholder="비밀번호를 입력하세요"></label>
</form>

위코드와 input 태그를 label태그로 감싸면 for속성을 이용해 input 태그와 연결하지 않아도 label과 input이 연결된다.

button태그 :
1 button태그는 폼(양식)안에 있는 내용을 제출 또는 초기화시켜주는 버튼을 만들어준다 
2 이때 사용되는 속성들이 여러가지있다.
autofocus: 페이지가 로드되면 자동으로 해당 버튼에 초점이 맞춰진다
name: 버튼에 이름을 설정한다.
type : reset = 버튼을 클릭하면 폼(양식)에서 작성된 내용이 전부 초기화된다, submit= 버튼을 클릭하면 폼(양식)에서 작성된 내용이 전부 제출된다.
3 inline-block요소이다

textarea태그 :
1여러줄의  텍스트를 입력하는 공간을 제공한다 
2 이때 여러 가 지속이 있다.

textarea에 쓰이는 속성들
autofocus: 해당 textarea에 초점이 맞춰진다.
placehold: 사용자가 입력하기 전에 미리 어떠한 내용으로 힌트를 제공한다.
readonly: readonly는 사용자가 내용을 입력할 수 없고 오직 읽기만 가능하게 하는 기능을 제공한다.
rows: 화면에 표시되는 세로줄을 몇줄까지 보일지 설정하는 기능을 한다.  
maxlength: 최대 입력가능한 문자수를 지정한다. 
3 inline-block요소이다
ex)

<textarea
name="text1" id="" cols="30" rows="5"
placeholder="작성할 수 있는글자는 최대 100글자 입니다"
autofocus maxlength="100">
</textarea>

fieldset과 legend 태그
fieldset태그: 양식이 여러개일때 여러 개의 양식을 그룹화한다 
legend태그: 양식에 제목을 지정한다.
ex)

<form>
<fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
</fieldset>
</form

위 코드에서 form태그안에 fieldset으로 여러 양식(input 태그들)을 그룹화하였고 legend태그를 이용해 이 양식들에 이름을 지정해준 것을 볼 수 있다.

select, optgroup, option태그:

select태그: 옵션을 선택하는 메뉴를 만들어주는 기능을 한다. 
optgroup태그:option태그를 그룹하는 기능이 있고 이때 label속성을 이용해 제목을 설정해 줄 수 있다.
option태그: select태그로 만들어진 메뉴안에 내용(데이터)을 만들어준다.
ex)

<select>
    <optgroup label="Coffee">
      <option>Americano</option>
      <option>Caffe Mocha</option>
      <option >Cappuccino</option>
    </optgroup>
    <optgroup label="Latte" >
      <option>Caffe Latte</option>
      <option>Vanilla Latte</option>
    </optgroup>
    <optgroup label="Smoothie">
      <option>Plain</option>
      <option>Strawberry</option>
      <option>Banana</option>
      <option>Mango</option>
    </optgroup>
  </select>

progress태그:
1progress태그는 작업의 완료 진행률을 표시한다 일종의 로딩바라고 말할 수 있다
주로 js와 연결해서 사용한다
2 inline-block요소이다.
ex)

<progress value="70" max="100">70 %</progress>

이떄 max를 이용해 최대 진행률을 설정하고 value를 이용해 초깃값을 설정할 수 있다
로딩바는 수가 로딩률에 대비해 변하는데 이때 js를 이용해 값이 변하게 동작하게해야한다
즉 progress태그만으로는 로딩바를 제대로 만들 수 없다는 이야기이다