Tables, 폼(양식, Forms) 구성 요소

08
21

스마트팩토리/HTML

Tables, 폼(양식, Forms) 구성 요소

Tables - table, caption, col, tr, th, td, ...

테이블은 X축, Y축으로 정보를 나열할 때 유용하게 사용할 수 있는 구성 요소이다. 테이블은 반드시 사용자에게 정보를 제공하기 위한 제목인 caption이 필요하고, 그 아래에는 테이블에 해당하는 몸체에 필요한 태그들이 있다.

table

<table>은 테이블 몸체에 해당되며, 행(row)/열(column) 및 셀(cell)을 포함한다. 복잡한 내용을 x, y축에 따라 이해하기 쉽게 데이터를 구조화하는데 테이블을 사용한다. 가장 좋은 테이블 디자인은 최대한 단순하게 표를 구성하는 것이고, 테이블 내 테이블을 중첩해서는 안되고 테이블을 레이아웃(배치) 목적으로 사용해서는 안된다. 테이블의 속성 값으로 border 속성을 사용해 테두리를 그릴 수 있으나 CSS로 대체하는 것이 좋다.

caption

<caption>은 테이블의 제목으로 반드시 명시적으로 제공하며, 제작자는 표의 내용을 이해할 수 있도록 정보를 제공해야 한다. caption은 table 태그 바로 다음에 선언해야 하며, 테이블의 제목이 UI상 표현하지 않아야 한다면 blind 스타일을 적용하여 감출 수 있다.

설명(각주, summary)을 추가하는 방법

aria-describedby 속성을 사용해 설명 단락(paragraph)을 연결
<figure> 태그에 aria-labelledby 속성을 사용해 제목(caption)을 연결

tr(table row)

테이블의 행(row)을 말하며 내부의 셀 제목(th-table heading), 셀 내용(td-table data)을 포함한다.

th(header cell in a table)

<th>는 테이블 셀 제목으로 행(tr) 내부에 포함되어야 한다.

scope : 행(row) 또는 열(col), 행 그룹(rowgroup), 열 그룹(colgroup)의 제목임을 명시
abbr : 제목이 길어 축약(Abbreviation)이 필요할 때 사용
colspan : 열(column)을 그룹 지을 때 사용
rowspan : 행(row)을 그룹 지을 때 사용

td(table data)

<td> 태그는 테이블 셀 내용(data cell in a table)으로 행(tr) 내부에 포함되어야 한다.

colspan : 열(column)을 그룹 지을 때 사용
rowspan : 행(row)을 그룹 지을 때 사용
headers : 셀 제목을 하나 이상 연결하여 읽기 용이하도록 구성할 때 사용

thead

테이블 행 블록(row block) 내에 제목 열 그룹(column headers)으로 구성할 경우 사용하고, 선택적(option)으로 사용한다.(필수 아님)

tbody

행 블록 내에 테이블 데이터로 구성할 때 사용하고, 선택적(option)으로 사용한다.(필수 아님)

tfoot

행 블록 내에 열 요약(column summaries)으로 구성할 때 사용하고, 선택적(option)으로 사용한다.(필수 아님)

col

테이블 열(column)을 하나 이상 묶고자 할 때 사용하고, 일반적으로 <colgroup> 태그 내부에 포함시켜 사용한다. 필수가 아닌 선택적(option)으로 사용할 수 있다.

span : 열 묶음 개수 설정

colgroup

테이블 열(column) 그룹을 만들고자 할 때 사용하며, 내부에 col 태그를 포함하거나, 포함하지 않을 수 있다. 필수가 아닌 선택적(option)으로 사용할 수 있다.

span : colgroup 태그가 col을 포함하지 않을 경우, 열 묶음 개수 설정

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <p id="compare-shoes-table">국제(한국,미국,영국,유럽) 성인 남성 운동화 사이즈 비교 표로 4행 12열로 구성되어 있습니다.</p>
    <table border="1" aria-describedby="compare-shoes-table">
      <caption>성인 남성 운동화 사이즈표</caption>
      <tr>
        <th scope="row">한국(mm)</th>
        <td>240</td>
        <td>245</td>
        <td>250</td>
        <td>255</td>
        <td>260</td>
        <td>265</td>
        <td>270</td>
        <td>275</td>
        <td>280</td>
        <td>285</td>
        <td>290</td>
      </tr>
      <tr>
        <th scope="row">미국(US)</th>
        <td>6</td>
        <td>6.5</td>
        <td>7</td>
        <td>7.5</td>
        <td>8</td>
        <td>8.5</td>
        <td>9</td>
        <td>9.5~10</td>
        <td>10~10.5</td>
        <td>11</td>
        <td>11.5</td>
      </tr>
      <tr>
        <th scope="row">영국(UK)</th>
        <td>5</td>
        <td>5.5</td>
        <td>6</td>
        <td>6.5</td>
        <td>7</td>
        <td>7.5</td>
        <td>8</td>
        <td>8.5~9</td>
        <td>9~9.5</td>
        <td>10</td>
        <td>11</td>
      </tr>
      <tr>
        <th scope="row">유럽(EU)</th> <td>38~39</td>
        <td>39</td>
        <td>40</td>
        <td>40~41</td>
        <td>41</td>
        <td>42</td>
        <td>42~43</td>
        <td>43</td>
        <td>44</td>
        <td>44~45</td>
        <td>45</td>
      </tr>
    </table>
  </body>
</html>

폼(양식, Forms) 구성요소들

폼 요소들은 사용자 입력 양식을 표현하기 위해 사용한다. 일반적으로 회원가입이나 로그인할 때 사용자가 입력하는 컨트롤이 있는 UI(User Interface)를 말한다. 다시 말해, form은 텍스트 필드, 버튼, 체크박스와 같은 폼 컨트롤을 포함하는 웹 페이지의 컴포넌트다. 폼 요소는 웹 문서가 서로 상호작용을 할 수 있도록 하는 역할을 담당하며 form 태그는 폼(form)의 범위를 표시하고, 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력 필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 form 요소에 의해 정의된다.

폼 요소는 블록 레벨 요소로서 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있다.

<form method="get" action="http://www.example.com/addresscheck.html/">
	<fieldset>
    
	</fieldset>
</form>

fieldset 요소는 관련 있는 폼 필드 셋(Form Field Set)를 표시한다.
폼 필드 셋은 폼 내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 말한다.
form 태그는 해당 fieldset 요소가 속해 있는 폼 태그 등을 지정한다.
이 속성을 지정하면 특정 form과 fieldset 태그의 관계를 명시적으로 연결할 수 있다.
이렇게 연결하면 브라우저는 두 태그 사이의 상호작용이 좀 더 쉽게 이루어질 수 있도록 해준다.
폼을 효과적으로 계층화할 수 있다.
legend 태그를 함께 사용해야 한다.

action 속성

action 속성은 실행 애플리케이션을 지정하는 것이다. 실행 애플리케이션은 입력된 데이터를 처리하는 서버 또는 프로그램으로 이곳으로 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하며, 이를 위해 action 속성을 사용한다. 프런트엔드단에서는 action에 대한 속성 값을 모르더라도 속성 값을 비워둔 채 정의해 두도록 한다. action을 사용하지 않으면 문서 검사를 하는 validation에서 오류가 나기 때문에 기본적으로 넣어서 사용한다. method 속성은 HTTP 메서드(HTTP method)를 지정한다. HTTP 메서드는 클라이언트와 서버 간 데이터를 주고받기 위한 방식을 의미하며 주로 사용되는 방식은 GET, POST 방식이다.

데이터 전송 방식

GET방식 : 입력된 데이터가 URL에 의해 전송되므로 암호화하지 않으면 URL만으로도 어떤 데이터를 입력했는지 알 수 있다. POST 방식보다 상대적으로 보안에 취약하고 전송할 수 있는 데이터도 제한적이다. method를 사용하지 않으면 기본적으로 GET방식이 기본값이다.
POST 방식 : 입력된 데이터를 HTTP Body에 담아 전송하면서 서버 측에서 데이터를 처리하는 방식이다. 주로 민감한 정보 데이터인 사용자의 아이디나 패스워드, 이메일 등의 개인 정보를 전송하는 경우에 이용하는 방식이다. HTTP Body는 URL에 비해 더 많은 정보를 담을 수 있기 때문에 POST 방식은 GET 방식보다 더 많은 양의 데이터를 전송할 수 있으며 상대적으로 보안이 높은 편이다.

<input type="text">

<select>
  <option>Seoul</option>
  <option>Incheon</option>
</select>

<textarea cols="5" rows="15"></textarea>
<button type="buttono">도움말</button>

INPUT 태그

input 태그는 웹페이지에서 입력 영역(Input Field)을 표시하는 데 사용한다. 즉, 사용자의 데이터를 입력받을 수 있는 폼 컨트롤을 말한다. input 영역은 데이터 입력이나 편집을 위한 컨트롤이 위치하는 곳이고, 입력 컨트롤의 종류는 type 속성에 의해 지정된다. 그래서 input 태그의 종류를 지정하는 속성 값은 입력 컨트롤러의 종류를 나타내며, 이에 따라 지정된 입력 컨트롤의 형태가 만들어진다. 다시 말해, 다양한 유형(type) 설정이 가능하며, 유형에 맞는 역할을 수행하게 된다. 이 중에 몇몇 속성 값들은 모바일에도 영향을 미쳐 편리한 키보드 자판을 출력해 주는 데 사용한다.

type="text" : 속성 값 text는 input 태그의 기본값으로 텍스트를 입력할 수 있는 텍스트 필드가 만들어진다.
텍스트 필드의 세로 크기는 정해져 있고 가로 크기만 설정할 수 있다.
크기는 글자 수를 기준으로 정해지며 기본 크기가 20이다.

레이블(label) 태그

label 태그는 컨트롤에 레이블(이름)을 붙이고자 하는 경우에 사용한다.
레이블은 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 말한다.
브라우저가 레이블과 컨트롤 사이의 관계를 알 수 있도록 label 태그를 사용해야 한다.

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <form>
      <label for="userName">이름 : </label>
      <input type="text" name="" id="userName" value="KHJ"><br>

      <label>암묵적인 레이블<input type="text" name=""></label><br>
     
      <label for="member">
        <span>회원</span>
        <input type="text" name="" id="member">
       </label>
    </form>
  </body>
</html>

for 속성 : for 속성은 레이블과 관련된 컨트롤을 지정한다. 그리고 컨트롤에 레이블을 제공하는 방법은 크게 암시적 방법과 명시적 방법으로 나뉜다.

암시적 레이블 선언 방법

이 방법은 label 태그 내에 컨트롤을 둔다.
즉 label 태그 내에 있는 컨트롤은 굳이 밝히지 않아도 관련이 있다고 본다.

명시적 레이블 선언 방법

이 방법은 for 속성을 이용하여 컨트롤의 id 값을 정확하게 지정한다.
즉 레이블이 어떤 컨트롤과 관련 있다는 사실을 명확하게 밝히는 것이다.
명확하게 밝힌다는 것은 기계적인 연결이 가능하다는 것을 의미한다.
이렇게 되면 브라우저는 사용자가 레이블을 클릭하더라도 관련된 컨트롤이 선택되도록 처리할 수 있고 레이블과 컨트롤이 서로 떨어져 있더라도 둘 사이의 관계를 손쉽게 연결할 수 있다.

input의 속성 값

name : 서버에 값을 전송하기 위해 사용
placeholder : 사용자가 어떤 말을 입력해야 될지 도움말을 주기 위해서 사용
value : 타입 요소에 입력되어 있거나 입력받은 값
readonly : 읽기만 가능하고 사용자가 입력할 수 없도록 설정(읽기 전용)
required : 필수 입력값으로 입력되어 있지 않다면 서버 전송 시 오류가 발생(필수 입력 사항의 경우 사용)
disabled : 비활성화 상태로 어떠한 작업도 할 수 없는 상태로 놓이게 됨
minlength : 입력할 수 있는 값의 최대 길이를 설정
maxlength : 입력할 수 있는 값의 최소 길이를 설정

type(유형)의 종류

text, password, checkbox, radio, file, submit, button, image, reset, hidden, search, url, tel, email, date, month, week, time, datetime-local, number, range, color

ex)

<form>
  <input type="password" placeholder="비밀번호 6자리를 입력해주세요."><br>
  <input type="submit value="전송"><br>
  <input type="button" value="버튼"><br>
  <input type="image" src="http://goo.gl/Ng66oQ" alt="체크인" width="20" height="20"><br>
  <input type="reset" value="초기화"><br>
  <input type="hidden" name="using-ajax" value="true"><br>
  <input type="number" name="" id="" min="100" step="10" max="1000" value="150"><br>
  <input type="range" name="" id="" min="10" step="5" max="25" value="15"><br>
  <input type="color" name="" id="" value="#F7CC60">
</form>

type="submit"

전송 버튼
전송 버튼은 폼이 서버로 보내는 역할을 수행할 뿐 어떻게 어디로 보낼지는 form 태그에서 정한다.
버튼 이름은 value 속성에 의해 지정되는데, 이 속성을 지정하지 않으면 브라우저가 지정하는 이름이 표시된다.

type="reset"

초기화 버튼, 초기화는 폼이 입력된 값을 초기값으로 되돌린다.

type="button"

푸시 버튼
다양한 용도로 사용되며 기본 기능은 없고 기능 실행을 위해서는 자바스크립트와 같은 클라이언트 사이드 스크립트가 필요하다.
value 속성으로 입력된 텍스트는 버튼 이름이며, 이 이름은 실제 버튼 위에 나타난다.

type="password"

패스워드 필드
화면 상에서 읽히지 않도록 별이나 원모양의 기호로 표시된다.

ex)

<form>
  <label for="user_pass">비밀번호 : </label>
  <input type="password" name="user_pass" id="user_pass" required placeholder="비밀번호 6자리를 입력해주세요.">
</form>

type="file"

파일 업로드 컨트롤
파일 업로드 컨트롤은 로컬 컴퓨터에 있는 파일을 선택하기 위한 컨트롤이며 파일명이 입력되는 텍스트 필드와 파일 탐색기를 호출하기 위한 버튼으로 구성
accept 속성을 사용하면 브라우저가 지정된 파일 형식만 찾을 수 있도록 파일 업로드 컨트롤을 구성할 수 있다.
파일을 전송하고자 할 때는 form 태그에 인코딩 타입을 enctype="multipart-formdata"로 정의하여 사용해야 하고 method 방식은 POST로 사용

ex)

<form>
  <input type="file" name="" id="">
</form>

type="checkbox"

체크박스
체크박스는 선택 여부를 확인하기 위한 입력 컨트롤이며 입력 상태는 선택과 미선택으로 구분된다.
체크박스는 중복 선택(multi-selection)을 위한 컨트롤이므로 여러 개의 체크박스로 구성할 수 있다.
이때 서로 관련 있는 체크박스라는 사실을 브라우저에 알려주기 위해서는 name 속성이 필요하다.
checked 속성을 이용하면 선택된 상태가 된다.

ex)

<form>
  <input type="checkbox" name="nation" value="korea" checked="checked">한국
  <input type="checkbox" name="nation" value="japan">일본
  <label><input type="checkbox" name="nation" value="korea" checked="checked">동의하시겠습니까?</label>
</form>

type="radio"

라디오 버튼
라디오 버튼은 체크박스와 마찬가지로 선택 여부를 확인하기 위한 컨트롤이다. 다만 중복 선택을 지원하지 않는 단일 선택만 이루어진다.
즉, 여러 항목 중에 한 가지 항목을 선택할 때 사용하는데, 이를 위해서는 항목들이 서로 배타적이어야 한다.

ex)

<form>
  <input type="radio" name="rdo" id="">고양이
  <input type="radio" name="rdo" id="">강아지<br>

  <label><input type="radio" name="gender" id="" checked>남자</ladel>
  <label><input type="radio" name="gender" id="">여자</label>
</form>

list와 datalist

list 속성과 datalist 태그를 사용하면 option의 값을 연결해서 사용할 수 있다.
데이터 목록 요소 컨테이너 컨트롤
내부에 <option> 태그를 사용해 항목을 만든다.

ex)

<form>
  <label>이동할 웹주소<input type="url" list="url_ex" name="user_url" id="user_url"></label>
  <datalist id="url_ex">
    <option value="http://naver.com">네이버</option>
    <option value="http://daum.net">다음</option>
  </datalist>
</form>

type="tel"

ex)

<form>
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
  <small>Format: 123-45-678</small><br><br>
</form>

기타 타입 예시

ex)

<form>
  <p>
    <label>date<input type="date" name="user_date" id=user_date"></label>
  </p>
  <p>
    <label>month<input type="month" name="user_month" id=user_month"></label>
  </p>
  <p>
    <label>week<input type="week" name="user_week" id=user_week"></label>
  </p>
  <p>
    <label>time<input type="time" name="user_time" id=user_time"></label>
  </p>
  <p>
    <label>datetime local<input type="datetime-local" name="user_datetime" id=user_datetime"></label>
  </p>
  <input type="number" name="" id="" value="50" min="10" step="5" max="100"><br>
  <input type="range" name="" id="" value="10" min="10" step="5" max="25"><br><!-- 10,15,20,25(4단계) -->
  <input type="color" name="" id="" value="#f7cc60">
</form>

Button Element

버튼 폼 컨트롤로서 사용자의 인터랙션을 받아 액션을 트리깅(방아쇠) 처리를 한다. 이 버튼 태그는 기본적으로 타입을 지정하지 않으면 type="submit"으로 설정된다.

type유형

submit
button
reset

Select Element

셀렉트 태그는 셀렉트 박스, 콤보박스, 드롭다운 메뉴라고 불리고 여러 항목 중에서 택일할 때 사용한다. select와 option 태그는 함께 사용하고, select 태그는 선택 컨트롤을, option 태그는 옵션 항목을 표시한다. 보통 공간에 제약이 많은 경우에 사용하는 편이며 이는 기획단에서 판단하여 설계한다. 그렇지 않다면 라디오 버튼으로 표현할 수 있다. 선택 컨트롤은 OPTION 태그를 선택하기 위한 컨트롤이며 옵션 리스트를 메뉴처럼 이용할 수 있도록 고안된 것이다.

name : 서버에 전송할 때 필요한 값
multiple : 여러 개의 선택이 가능한 속성
disabled : 비활성화
required : 필수 입력
size : 화면에 보일 옵션 개수를 설정

ex)

<form>
  <label for="user_hobby">취미</label>
  <select name="user_hobby" id="user_hobby" required>
    <option value="0">없음</option>
    <option value="1" selected>축구</option>
    <option value="2" label="basketball" disabled>농구</option>
    <option value="3">독서</option>
    <option value="3">영화관람</option>
  </select>
</form>

option

option 태그는 선택 항목(option list)을 표시한다.
옵션 리스트는 사용자가 선택할 수 있는 항목들을 모아둔 것이다.
다른 요소를 포함할 수 없으며 텍스트만 포함할 수 있다.
<option>을 묶어 그룹으로 만들고자 한다면 <optgroup> 태그를 사용

selected

selected 속성은 미리 선택된 옵션을 지정한다.
옵션 리스트는 일정한 기준에 따라 나열되어 있으며 기본적으로 첫 번째 옵션이 선택된 상태로 제공된다.
이러한 기본 선택을 바꾸고 싶다면 selected 속성을 지정하면 된다.

value

value 속성은 서버로 전송되는 값을 지정한다.
이 속성을 지정하지 않으면 option 태그에 마크업 된 텍스트가 서버로 전송된다.

optgroup 태그

optgroup 태그는 옵션 그룹(Option Group)을 표시한다.
옵션 그룹은 한 개 이상의 옵션이 모여서 만들어진 그룹을 의미한다.
옵션 개수가 많은 경우 비슷한 옵션을 묶어서 구성하면 편의성이 향상된다.
optgroup 태그가 부모 태그, option 태그가 자식 태그로 구성된다.
label 속성을 지정하면 옵션 그룹의 제목(label)이 생긴다.

ex)

<form>
  <select>
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo></option>
      <option value="saab">Saab></option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes" label="벤츠" disabled>Mercedes></option>
      <option value="audi">Audi></option>
    </optgroup>
  </select>
</form>

textarea 태그

textarea 태그는 멀티라인 일반 텍스트 편집 컨트롤을 말한다. 인풋 타입의 text가 한 줄이라면 이 태그는 여러 줄을 설정할 수 있는 입력박스다. 이 태그에서 사용되는 속성으로는 name, placeholder, rows, cols, readonly, required, disabled, minlength, maxlength들이 있다.

cols : 컬럼으로 높이에 해당
rows : 행으로 너비에 해당
maxlength : 사용자가 입력할 수 있는 최대 글자 수를 지정(글자 초과 시 더 이상 글자가 입력되지 않음)

ex)

<form>
  <div>
    <label for="user_comments">코멘트</label>
    <textarea name="user_comments" id=user_comments" cols="30" rows="30">
      남기고 싶은 말을 작성해주세요.
    </textarea>
  </div>
</form>

Fieldset, Legend Element

하나 이상의 폼 컨트롤을 그룹화하는 경우에 사용할 수 있다. fieldset 제목은 legend 태그를 사용해서 컨트롤의 레이블(이름)을 설정할 수 있다.

ex)

<form method="POST" action="/">
  <fieldset>
    <legend>사용자 계정</legend>
    <input type="text" name="user_name" id="user_name" placeholder="이름을 입력해주세요.">
    <input type="password" name="user_pw" id="user_pw" placeholder="비밀번호 6자리를 입력해주세요.">
  </fieldset>
</form>

Output, Progess, Meter Element

output 태그 : 계산된 결과를 출력 제어한다. name, for 속성을 사용할 수 있다.
progress 태그 : 작업의 완료 진행 상황을 시각적으로 표시하는 데 사용된다.
meter 태그 : 알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타내는 제어(게이지(gauge)) 태그로서, 디스크 사용현황, 쿼리 결과의 관련성, 특정 후보에 대한 투표율 등을 표현하고자 할 때 사용한다.

ex)

<form oninput="result_sum.value=parseInt(n1.value,10)+parseInt(n2.value,10)">
  <p>
    <input type="number" name="n1" value="4">+
    <input type="number" name="n2" value="10">=
    <output name="result_sum">14</output>
  </p>

  <!-- max로 설정한 100% 중에 30이 채워진 상태 -->
  <p>
    <progress value="30" max="100">30%</progress>
  </p>
  <p>
    <meter value="30" min="5" max="100">20</meter>
  </p>
</form>

저작자표시 (새창열림)

'스마트팩토리 > HTML' 카테고리의 다른 글

meta Tag (0)	2022.10.20
Interactive, User Interaction, Metadata (0)	2020.09.01
Sections 요소, Main, Text Level, Grouping etc... (0)	2020.08.20
HTML Element (0)	2020.08.19
HTML(Hyper Text Markup Language) (3)	2020.08.19

COMMENT

« 2025/05 »
일	월	화	수	목	금	토
				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

Tables - table, caption, col, tr, th, td, ...

table

caption

tr(table row)

th(header cell in a table)

td(table data)

thead

tbody

tfoot

col

colgroup

폼(양식, Forms) 구성요소들

action 속성

INPUT 태그

레이블(label) 태그

input의 속성 값

type(유형)의 종류

Button Element

Select Element

textarea 태그

Fieldset, Legend Element

Output, Progess, Meter Element

'스마트팩토리 > HTML' 카테고리의 다른 글

티스토리툴바