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

Tables – table,caption, col, tr, th, td 등..

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

html

<table>
    <caption>테이블의 제목</caption>
    <col width=“20”><col>
    <thead>
        <tr>
            <th scope="col" ></th>
            <th scope="col" ></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

table 요소

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

caption 요소

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

테이블 내용이 복잡해 설명이 필요하다면 아래 나열된 방법 중 하나를 선택해 기술해야 합니다.

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

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

과거 HTML 4.01 에서는 table 의 속성값으로 summary(표를 한눈에 알아보기 어려운 환경에서 표의 구조나 전체 내용을 요약하기 위한 용도)인 테이블의 요약 정보를 제공해야 했으나 HTML5 규격에는 포함되지 않아 더 이상 사용되지 않습니다. 하지만 국내의 웹접근성 연구소에서는 브라우저들이나 보조기기에서는 그대로 지원하고 있기 때문에 마크업 오류(validation 체크시 나타나는)를 무시하고 사용하셔도 무방하다고 합니다.

tr(table row) 요소

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

th(header cell in a table) 요소

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

th 요소에서 사용할 수 있는 속성은 다음과 같습니다.

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

td(table data) 요소

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

td 요소에서 사용할 수 있는 속성은 다음과 같습니다.

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

thead 요소

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

tbody 요소

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

tfoot 요소

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

col 요소

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

col 요소에서 사용할 수 있는 속성은 다음과 같습니다.

span : 열 묶음 개수 설정

colgroup 요소

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

colgroup 요소에서 사용할 수 있는 속성은 다음과 같습니다.

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

다음과 같은 비주얼 디자인이 있을 경우 어떻게 구조적 디자인을 하는지 간단히 알아보겠습니다.

HTML

<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>

Related Info

HTML 5.2 기술 표준 사양 - Tabular Data

caption, figcaption 중에 어떤 경우에 표의 제목으로 사용하나요?
표 제목은 caption 요소만 사용하고, 다른 요소는 표 제목으로 사용하지 않습니다.

  figure
    ├── figcaption       [id="표설명"] 표를 설명하는 내용
    └── table            [aria-describedby="표설명"]
          └── caption    표제목

figure 내부에 table 을 넣고, 표를 설명하는 내용을 figcaption 에 작성하고, aria-describedby 속성을 사용해
figcaption 과 연결할 수 있습니다.
정리하자면, 비주얼 차이로 caption, figcaption을 사용하는 것이 아니라, 표를 설명하는 내용을 포함하는 피규어로 구조화할 필요가 있다면 figure, figcaption, table을 사용할 수 있다는 것입니다.

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

폼 요소들은 사용자 입력 양식을 표현하기 위해 사용합니다.
일반적으로 회원가입이나 로그인할 때 사용자가 입력하는 컨트롤이 있는 UI(User Interface)를 말합니다.
다시 말해, form 은 텍스트필드, 버튼, 체크박스와 같은 폼 컨트롤을 포함하는 웹 페이지의 컴포넌트입니다.

폼 요소는 웹 문서가 서로 상호작용을 할 수 있도록 하는 역할을 담당하며 form 태그는 폼(Form)의 범위를 표시하고,

폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 form 요소에 의해 정의됩니다.

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

다시 말해, 사용자가 입력한 정보를 보내기 위한 그릇이라고 이해하면 됩니다.

html

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

    </fieldset>
</form>

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

action 속성은 실행 애플리케이션을 지정하는 것입니다.

실행 애플리케이션은 입력된 데이터를 처리하는 서버 또는 프로그램으로 이곳으로 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하며, 이를 위해 action 속성을 사용한다.

프론트엔드단에서는 action 에 대한 속성값을 모르더라도 속성값을 비워둔채 정의해 두도록 합니다.

method 는 어떤 방법으로 데이터를 전송할 지를 정의하는데 두 가지 방법이 있습니다. 예를 들면, 일반 우편이 있고 빠른 등기 우편이 있는 것처럼 이 method 에도 get, post 방식이 있습니다.

데이터를 보내기 위한 방식으로 GET 과 POST 방식이 있습니다.

그래서 action 의 실제 경로를 알지 못하더라도 값을 비워두고 정의해 두도록 한다.

액션을 사용하지 않으면 문서 검사를 하는 validation 에서 오류가 나기 때문에 기본적으로 넣어서 사용한다라고 이해하면 좋습니다.

실제로 웹 서비스가 될 경우에는 두가지가 모두 사용됩니다.

method 속성은 HTTP 메소드(HTTP method)를 지정한다.

HTTP 메소드는 클라이언트와 서버 간 데이터를 주고받기 위한 방식을 의미하는데 주로 사용되는 방식은 GET 과 POST 방식이다.

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

html

<input type=“text”>

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

<textarea cols=“5” rows=“15”> </textarea>

<button type=“button”>도움말</button>

INPUT 요소

input 요소는 웹 페이지에서 입력 영역(Input Field)을 표시하는데 사용합니다.
즉, 사용자의 데이터를 입력 받을 수 있는 폼 컨트롤을 말합니다.

input 영역은 데이터 입력이나 편집을 위한 컨트롤이 위치하는 곳이고, 입력 컨트롤의 종류는 type 속성에 의해 지정됩니다.

그래서 input 요소의 종류을 지정하는 속성값은 입력 컨트롤러의 종류를 나타내며, 이에 따라 지정된 입력 컨트롤의 형태가 만들어집니다.
다시 말해, 다양한 유형(type) 설정이 가능하며, 유형에 맞는 역할을 수행하게 됩니다.

이 중에 몇몇 속성값들은 모바일에도 영향을 미쳐 편리한 키보드 자판을 출력해 주는데 사용합니다.

input 요소

html

<!-- 기본 사용 예시 -->
<input type="text">

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

레이블(label) 요소

인풋 텍스트 요소와 같은 것은 박스만 있기 때문에 어떤 것을 해야할 지 모르기 때문에 인풋 요소에는 label 을 주어야 합니다.

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

레이블 사용 방법

<!-- 명시적인 label -->
<label for="userName">이름 : </label>
<input type="text" name="" id="userName" value="김재희">
<!-- 예를 들어, 테이블과 같은 곳에서 사용할 수 있다. -->

        
<!-- 암묵적인 label -->
<label>암묵적인 레이블<input type="text" name=""></label>
    
        
<!-- 명시적인 레이블과 암묵적인 레이블 함께 사용한 예시 -->
<label for="member">
    <span>회원</span>
    <input type="text" name="" id="member">
</label>
<!--
위와 같은 레이블 처리방식은 회원이란 텍스트가 레이블 텍스트 역할을 하면서 span 요소로 그룹화하여
이 요소에 독립적으로 스타일을 적용할 수 있으며 동시에 스크린 리더의 접근성도 향상되는 장점이 있습니다.
-->

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

html

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

type="submit"

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

type="reset"

속성값 reset은 초기화 버튼이 만들어진다. 초기화는 폼에 입력된 값을 초기값으로 되돌린다.

type="button"

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

type="password"

html

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

type="password" : 속성값 password로 지정하면 패스워드 필드가 만들어진다.
화면 상에서 읽히지 않도록 별이나 원모양의 기호로 표시된다.

type="file"

html

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

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

type="checkbox"

html

<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>

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

type="radio"

html

<input type="radio" name="rdo" id=""> 고양이
<input type="radio" name="rdo" id=""> 강아지
    
<label><input type="radio" name="gender" id="" checked> 남자</label>
<label><input type="radio" name="gender" id=""> 여자</label>

type="radio" : 속성값을 radio로 지정하면 라디오 버튼이 만들어진다.(라디오 버튼의 유래 자동차의 라디오)
라디오 버튼은 체크박스와 마찬가지로 선택 여부를 확인하기 위한 컨트롤이다. 다만 중복 선택을 지원하지 않는 단일 선택만 이루어진다.
즉, 여러 항목중에 한 가지 항목을 선택할 때 사용하는데, 이를 위해서는 항목들이 서로 배타적이어야 한다.

list 와 datalist

list 속성과 datalist 요소를 사용하면 option 의 값을 연결해서 사용할 수 있습니다.

html

<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>

데이터 목록 요소 컨테이너 컨트롤.
내부에 <option> 요소를 사용해 항목을 만든다.

type="tel"

html

<label>전화번호 <input type="tel" name="user_tel" id="user_tel"></label>
<datalist id="user_tel">
    <option value="111">111</option>
    <option value="112">112</option>
    <option value="114">114</option>
    <option value="119">119</option>
</datalist>

기타 타입 사용 예시

html

<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">
<input type="range" name="" id="" value="10" min="10" step="5" max="25"> <!-- 10, 15, 20, 25 (4단계) -->
<input type="color" name="" id="" value="#f7cc60">

Button Element

버튼 폼 컨느롤로서 사용자의 인터랙션을 받아 액션을 트리깅(방아쇠) 처리를 합니다.

이 버튼 요소는 기본적으로 타입을 지정하지 않으면 type="submit" 으로 설정됩니다.

html

<button type="submit">전송</button>
<button type="button">버튼</button>
<button type="reset">초기화</button>

type(유형)은 다음과 같습니다.

submit (초기 값)
button
reset

Select Element

html

<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>

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

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

option

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

selected

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

value

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

html

<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>

optgroup 요소

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

textarea 요소

html

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

이 textarea 요소는 멀티라인 일반 텍스트 편집 컨트롤을 말합니다. 즉, 인풋 타입의 text 가 한 줄이라면 이 요소는 여러 줄을 설정할 수 있는 입력 박스입니다.

이 요소에서 사용되는 속성으로는 name, placeholder, rows, cols, readonly, required, disabled, minlength, maxlength 들이 있습니다.

cols 속성은 컬럼으로 높이에 해당되고 rows 는 행으로 너비라고 볼 수 있습니다.
maxlength 속성은 사용자가 입력할 수 있는 최대 글자 수를 지정합니다
이 속성이 지정되면 최대 글자 수가 초과한 때에는 더이상 글자가 입력되지 않습니다.
그리고 사용자는 글자수 제한 여부를 알 수 없으므로 텍스트 영역 주변에 최대 글자 수를 알려주는 문구를 제공하는 것이 좋습니다.

Fieldset, Legend Element

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

html

<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, Progress, Meter Element

output 요소는 계산된 결과를 출력하는 제어하는 요소입니다.

이 요소에는 name, for 속성을 사용할 수 있습니다.

progress 요소는 작업의 완료 진행 상황을 시각적으로 표시하는데 사용되는 요소입니다.

그리고 meter 요소는 알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타내는 제어((게이지(gauge)) 요소로서, 디스크 사용 현황, 쿼리 결과의 관련성, 특정 후보에 대한 투표율 등을 표현하고자 할 때 사용할 수 있습니다.

html

<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="20" min="5" max="100">20</meter>
    </p>
</form>

Related Info

Jaehee's WebClub

저작자표시 변경금지

'HTMLㆍCSS 기초 강좌 > HTML' 카테고리의 다른 글

#5 Interactive, User Interaction, Metadata (0)	2018.12.26
#3 Sections 요소, Main, Text Level, Grouping etc.. (1)	2018.12.26
#2 HTML Element (1)	2018.12.20
#1 HTML 이란 무엇인가? (5)	2018.12.20

Web Club