[ HTML5 ] table , form 요소

table ,form 요소

 

 

1. table 

 

 

• <table>: 표를 생성하는 최상위 태그입니다.
• <caption>: 표의 제목을 정의합니다. 이 태그는 <table> 태그 내부에서 가장 먼저 나와야 합니다.
• <thead>: 표의 헤더 섹션을 정의합니다. <tr> 태그와 함께 사용됩니다.
• <tbody>: 표의 본문 섹션을 정의합니다. 여러 개의 <tr> 태그를 포함할 수 있습니다.
• <tfoot>: 표의 바닥글 섹션을 정의합니다. 요약 정보 등을 나타낼 때 사용됩니다.
• <tr>: 표의 행을 정의합니다. <thead>, <tbody>, <tfoot> 내부에서 사용됩니다.
• <th>: 표의 헤더 셀을 정의합니다. <tr> 태그 내부에서 사용되며, 기본적으로 굵은 글씨체와 가운데 정렬이 됩니다.
• <td>: 표의 데이터 셀을 정의합니다. <tr> 태그 내부에서 사용됩니다.

 

형식)

 

<table>
        <caption>접근성을 준수한 샘플 표</caption>
        <colgroup>
            <col  class="w1">
            <col  class="w2"  >
            <col  class="w3"  >
        </colgroup>
        
        <thead>
            <tr>
                <th scope="col">헤더 1</th>
                <th scope="col">헤더 2</th>
                <th scope="col">헤더 3</th>
            </tr>
        </thead>
        
         <tfoot>
            <tr>
                <td>합계</td>
                <td>평균</td>
                <td>통계</td>
            </tr>
        </tfoot>
        
        <tbody>
            <tr>
                <td>데이터 1</td>
                <td>데이터 2</td>
                <td>데이터 3</td>
            </tr>
            <tr>
                <td>데이터 4</td>
                <td>데이터 5</td>
                <td>데이터 6</td>
            </tr>
        </tbody>       
    </table>

 

 

 

2. form

 

로그인

 

 

로그인형식

1) 사용자가 [아이디]와 [비밀번호]에 정보 입력 ->  [로그인] 클릭

2) 사용자가 입력한 아이디와 비밀번호가 웹 서버로 보내짐

3) 서버는 자신이 가지고 있는 사용자 데이터베이스를 뒤져서 사용자가 보내온 아이디와 비밀번호가 서로 일치하는 정보인지 확인하 고 그 결과를 브라우저에 보냄.

4) 회원이라면 로그인한 후의 결과 화면이 나타나고, 아니라면 로그인 실패 화면이 나타남.

 

서식내용을 전송하기 위한 form요소 

형식 : <form [ 속성="속성값" ] > 폼요소 </form>

<form [method="get/post"] [action="?.jsp, ?.php, ?.asp..."] [target="_blank"] [name="xx"]>
 폼요소
</form>

 

속성	설명
method	입력값을 백엔드 페이지에게 전송하는 방식 (GET,POST) get : 주소 표시줄에 사용자가 입력한 내용이 나타남 256byte ~ 4,096byte까지 데이터만 서버로 넘김 post : 입력내용의 길이 제한이 없음 , 사용자가 입력한 내용이 나타나지않음
action	서버상의 URL를 지정
target	다른창으로 열리도록 지정

 

 

입력양식 안에서 그룹지정

서식의 내용을 그룹화하는 fieldset요소, 캡션 legend ( 필요한 경우에만 작성 )

서식을 그룹화하려면 fieldset요소를 적용하고 legend요소로 이름을 지정할 수 있으며, fieldset안에 한 번만 올 수 있고 legend 그룹화한 범위의 이름을 캡션으로 표시 한 번만 표시

 

<form action="xx.jsp" method="post" name="form" >
<fieldset>
    <legend>서식의 이름</legend>
</fieldset>
</form>

 

 

입력 양식의 형식

<input type="종류"
 name="백엔드에서의 식별자"
 [id="CSS,JS에서의 식별자"]
 [value="입력값"]
 [placeholder="설명글"]
 [maxlength="최대입력가능한 글자 수"]
 [min="최소값"]
 [max="최대값"]
 [step="입력단위"]
 [checked]
 [required] >

 

 

기본형식

<label for="아이디명">아이디</label>
<input type="text" id="아이디명" name="이름" title="접근성 준수 설명" >

 

 

input 태그의 속성

속성	설명
value= ”기본값”	페이지가 열릴 때 입력되어 있을 값
min= ”최소값”	type속성이 number, range 인 경우 사용
max= ”최대값”	type속성이 number, range 인 경우 사용
step= ”숫자”	type속성이 number, range 인 경우 사용
maxlength= ”숫자”	키보드 상에 검색버튼이 표시되는 입력 요소
checked	type속성이 radio, checkbox 인 경우 선택상태로 지정함
src= ”이미지경로”	image 형태인 경우만 사용
required	필수 입력 항목 지정 (모든 브라우저가 지원하는 것은 아님)
autofocus	페이지로드될때 처음필드에 커서가 자동으로 표시
autocomplete	자동완성제어속성 ( autocomplete="on/off" )

 

 

 

입력 양식의 종류

[ type = "종류" ]

속성	설명
text	텍스트를 입력  (아이디, 글 제목 등)
password	비밀번호를 입력  입력 내용이 *로 표시
checkbox	체크박스를 표시 (여러개 선택)
radio	라디오 버튼을 표시  (1개만 선택)
file	파일 첨부할수있는 버튼
submit	서버 전송 버튼
reset	리셋 버튼
button	기본 버튼
hidden	사용자에게 보이지않고 서버로 넘겨지는값
image	submit 대신 사용할 이미지넣기

 

 

속성	설명
email	이메일을 입력할 수 있는 요소
tel	전화번호 입력을 위한 요소
url	웹 사이트 주소를 입력할 수 있는 요소
range	범위를 지정할 수 있는 slider를 표시
search	키보드 상에 검색버튼이 표시되는 입력 요소
date	날짜를 선택할 수 있는 요소
datetime	국제 표준시로 설정된 날짜와 시간(연,월,일,시,분,초,분할초)
number	숫자를 입력할 수 있는 요소
color	색상표

 

 

1) text 

한 줄 텍스트 입력 필드 주로 아이디나 이름 주소 등입력

<input type="text" 속성="값">

 

속성	설명
name	텍스트 필드를 구별할수 있도록 이름
size	텍스트 필드의 길이를 지정
value	텍스트 필드 부분에 표시되는 값
maxlength	최대 문자 개수를 지정

패스워드는 value 속성이 없음

 

 

2) password

비밀번호 입력 사용자가 입력하는 내용이 ‘ * ’나 ‘•’로 표시

<input type="password" 속성="값">

 

 

3) hidden 

화면상에 폼이 보지 않음

폼을 전송할 때 서보로 함께 전송되는 요소 

<input type="hidden" name="이름" value="서버로 넘겨지는 값" >

 

4) search 

검색필드

검색 창에 X가 표시되어 검색이 삭제가 쉬움

<input type="search" 속성="값">

 

5) email

메일주소 입력 필드

메일 주소 형식 자동 체크

<input type="email" 속성="값">

 

6) url

웹주소 필드

http:// 로 시작하는 사이트 주소 입력 

<input type="url" 속성="값">

 

7) tel

전화번호 필드

사용자 입력을 체크하지 않음

<input type="tel" 속성="값">

 

 

8) number 

우측 스핀박스가 생김

number

<input type="number" >

<input type="number" min="1" max="10" value="2">

 

 

9) range

슬라이드 막대를 이용해 숫자 입력 

<input type="range" 속성="값">

 

10) radio / checkbox

radio : 오직 하나만 선택 

checkbox : 여러 개 선택 

 

<input type="radio" 속성="값">

<input type="checkbox" 속성="값">

 

속성	설명
name	라디오는 이름이 동일해야하고 체크박스는 이름이 달라야함
value	선택한 라이오나 체크박스의 값을 서버에 넘길때
checked	라디오나 체크박스 선택

 

 

11) submit , reset

폼 전송/리셋 버튼 

전송(submit) 버튼 : 사용자 입력 내용을 서버로 전송

리셋(reset) 버튼 : 사용자 입력 내용 전부 삭제

value 속성을 이용해 버튼 표시 내용 지정

 

<form action="register.php" method="post">  
  <input type="submit" value="제출">
  <input type="reset" value="다시입력">
</form>

 

 

속성	설명
autofocus	페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
placeholder	입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐
readonly	내용을 보기만 하고 입력하지 못함
required	필수 필드 체크

 

 

12) select , option , optgroup

여러 옵션 중에서 선택 – 드롭다운 목록
공간을 최소한으로 사용하면서 여러 옵션 표시 가능

 

<select>
  <option value="">월 선택</option>
  <option value="1">1월</option>
  <option value="2">2월</option>
  <option value="3">3월</option>
</select>

 

속성	설명
size	화면에 표시될 드롭다운 메뉴의 항목 개수 지정
multiple	여러개의 옵션이 함께 표시 ctrl 키 누르고 선태하면 여러개선택

 

option 태그의 속성

속성	설명
value	옵션을 선택했을때 서버로 넘겨질 값을 지정
selected	기본으로 선택되어 있는 옵션을 지정

 

 

optgroup 

여러 항목을 그룹으로 묶을때 사용

label 속성을 사용하여 그룹 제목으로 처리

 

<select id="class">
        <optgroup label="공과대학">
          <option value="archi">건축공학과</option>
          <option value="mechanic">기계공학과</option>
          <option value="indust">산업공학과</option>
          <option value="elec">전기전자공학과</option>
          <option value="computer">컴퓨터공학과</option>
          <option value="chemical">화학공학과</option>
        </optgroup>
        <optgroup label="인문대학">
          <option value="history">사학과</option>
          <option value="lang">어문학부</option>
          <option value="philo">철학</option>
        </optgroup>
      </select>

 

 

 

13) datalit , option 

데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨
데이터 목록에 id를 이용해 이름을 붙이고,
<input> 태그의 list 속성에 데이터 목록 id를 지정함.

 

<input type="text" id="interest" list="choices">
<datalist id="데이터목록 아이디">
  <option value="" label=""></option>
  <option value="" label=""></option>
  <option value="" label=""></option>
</datalist>



<input type="text" id="interest" list="choices">
<datalist id="choices">
  <option value="grammar" label="문법"></option>
  <option value="voca" label="어휘"></option>
  <option value="speaking" label="회화"></option>
  <option value="listening" label="리스닝"></option>
  <option value="news" label="뉴스청취"></option>
</datalist>

 

 

datalist

 

14) textarea

텍스트 영역 - 여러줄의 텍스트 입력 

게시판의 게시물 입력창 , 회원 가입 양식의 약관등

<textarea name="식별자" id="식별자" [maxlength="숫자"]>내용</textarea>

 

속성	설명
name	텍스의 영역의 이름
cols	가로 너비를 문자 단위로 지정
rows	세로 길이의 줄단위

 

 

예) text, password

<p>
<label for="id">아이디</label>
    <input type="text" id="id" name="id" required >
    <label for="pass">비밀번호</label>
    <input type="password" id="pass" name="pass" required >
</p>

 

예) email

<form action="go.php" method="post">
    <fieldset>
        <legend>html5 form</legend>
        <p>
            <label for="user_mail">E-mail</label>
            <input type="email" id="user_mail" name="user_mail" value="" 
            placeholder="usermail@host.com" required autofocus>
        </p>
        <p>
            <label for="user_name">Name</label>
            <input type="text" id="user_name" name="user_name" value="" placeholder="홍길동">
        </p>
    </fieldset>
    <button type="submit">Send</button>
</form>

 

 

예) checkbox

<input type="checkbox" name="h1" id="h1" value="a1" checked>
<label for="h1" >낮잠</label>
<input type="checkbox" name="h1" id="h2" value="a2">
<label for="h2" >TV시청</label>
<input type="checkbox" name="h1" id="h3" value="a3" >
<label for="h3" >만화보기</label>

 

 

예) radio

<input type="radio" name="g" id="g" value="m" checked >
<label for="g">남</label>
<input type="radio" name="g" id="g" value="f" >
<label for="g">여</label>

 

 

예) 파일

<label for="id">파일선택:</label>
<input type="file" id="file1" name="file1">

파일 여러개
<label for="id">파일선택: 여러개 </label>
<input type="file" id="file1" name="file1" multiple>

 

예) url

<p>
    <label for="user_url">Url</label>
    <input type="url" id="user_url" name="user_url" value="" 
    placeholder="http://" required>
</p>

 

 

예) number

<p>
    <label for="number">구입할 상품 수</label>
    <input type="number" id="number" name="number" min="1" max="99" value="3"> 개
</p>

 

 <label for="num">나이</label>
<input type="number" id="num" name="num" min="1" max="99" value="20" >

예)

<p>
    <label for="range">길이</label>
    <input type="range" id="range" name="range" min="0" 
    max="100" step="10" value="30"> cm
</p>

 

 

예) date

<p>
    <label for="setdate">Date</label>
    <input type="date" id="setdate" name="setdate" 
    value="2024-02-28" min="2024-02-28" max="2024-06-20">
</p>

 

 

예)

    <p>
        <label for="search">Search</label>
        <input type="search" id="search" name="search" value="" list="item">
        <datalist id="item">
            <option value="html"></option>
            <option value="css"></option>
            <option value="javascript"></option>
        </datalist>
    </p>