Programming Storytelling

html table태그와 form태그에 대하여 본문

HTML & CSS & JS

html table태그와 form태그에 대하여

HJdone 2019. 4. 15. 22:40

html/css로 시간표나 설문조사지 같은 간단한  형식을 구현 해 낼 수 있다.

 

먼저 테이블 태그에 대해서 먼저 알아보자.

 

테이블 태그를 활용하려면 아래의 두가지 표를 숙지하고 있어야 한다.

주제 

태그

비고 

 테이블의 구성 요소

<table>

 테이블을 만드는 태그

<th>

 테이블의 헤더부분을 만드는 태그

 <tr>

 테이블의 행을 만드는 태그

 <td>

 테이블의 열을 만드는 태그

 주제

속성

비고 

 테이블 디자인 변경

 border

테이블의 테두리

 bordercolor

테이블의 테두리 색상 

 width

테이블 가로 크기 

height 

테이블 세로 크기 

 align

정렬

 bgcolor

배경색 

 colspan

 가로 합병(열 합병)

 rowspan

 세로 합병(행 합병)

 

자,이젠 html로 시간표를 구현하는 코드로 테이블태그를 익혀 보도록 하자.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    width : 100px;
    height: 40px;
}
th, td {
    padding: 20px;
}
th {
    text-align: center;
}
</style>
</head>
<body>
 
 <h1>OOO의 시간표</h1>
 
<table style="width:100%">
 <caption>OOO의 2018년도 2학기의 시간표 입니다.</caption>
 
  <tr>
    <th> </th>
    <th>월</th> 
    <th>화</th>
    <th>수</th>
    <th>목</th>
    <th>금</th>
  </tr>
    <tr>
    <th>1교시</th>
    <td style = "background : Plum  ;">자료구조</td> 
    <td> </td>
    <td style = "background : LavenderBlush ;"rowspan="2">정보통신융합공학개론</td>
    <td style = "background : Pink ;" rowspan="2">c++프로그래밍</td>
    <td style = "background : LightGoldenRodYellow;" rowspan="2">java 프로그래밍</td>
   </tr>
    <tr>
    <th>2교시</th>
    <td> </td>
    <td> </td>
  </tr>
    <tr>
    <th>3교시</th>
    <td> </td> 
    <td> </td>
    <td style = "background : LightCyan  ;" rowspan="2">프로그래밍언어구조론</td>
    <td style = "background : Lavender;" rowspan="2">웹/xml프로그래밍</td>
    <td> </td>
  </tr>
   <tr>
    <th>4교시</th>
    <td> </td> 
    <td> </td>
    <td> </td>
  </tr>
   <tr>
    <th>5교시</th>
    <td style = "background : Lavender  ;" rowspan="2">웹/xml프로그래밍</td>
    <td style = "background : Salmon  ;" rowspan="4">c++ </td>
    <td style = "background : MintCream  ;" rowspan="4">임베디드프로그래밍실습</td>
    <td style = "background : Wheat   ;" rowspan="4">리눅스컴퓨팅실무</td>
    <td> </td>
  </tr>
   <tr>
    <th>6교시</th>
    <td> </td> 
  </tr>
   <tr>
    <th>7교시</th>
    <td> </td> 
    <td> </td>
  </tr>
  <tr>
   <th>8교시</th>
   <td style = "background : LightCyan  ;">프로그래밍언어구조론</td> 
   <td> </td>
  </tr>
 
</table>
 
</body>
</html>
 
 

 아래의 이미지는 테이블의 구조를 한눈에 볼 수 있게 그림으로 그린것이다.

##테이블에 이미지 추가하는 방법##

<td><img src="파일명" width="픽셀수" height="픽셀수"></td>

 

이제 html의 form 태그에 대해 알아보도록 하자.

  • action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다.
  • name : 폼을 식별하기 위한 이름을 지정합니다.
  • accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다.
  • target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.
  • method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET 또는 POST)
  •  
  • type : 태그 모양을 다양하게 변경할 수 있습니다. type에는 text, radio, checkbox, password, button, hidden, fileupload, submit, reset 등을 지정할 수 있습니다.
  • name : 태그 이름을 지정합니다.
  • readonly : 태그를 읽기전용으로 합니다.
  • maxlength : 해당 태그 최대 글자 수를 지정합니다.
  • required : 해당 태그가 필수태그로 지정됩니다. 필수 태그를 입력하지 않고, submit 버튼을 누르면 에러메시지가 웹 브라우저에 출력됩니다. (HTML5 추가사항)
  • autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됩니다. (HTML5 추가사항)
  • placeholder : 태그에 입력할 값에 대한 힌트를 줍니다. (HTML5 추가사항)
  • pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용합니다. (HTML5 추가사항)

(3) 목록태그 <select>, <optgroup>, <option>

<select>는 항목을 선택할 수 있는 태그입니다. 속성 중에 size와 multiple 속성이 있습니다. size는 한 번에 표시할 항목 수를 의미하고, multiple는 다중선택을 허용할 것인지를 지정하는 속성입니다. <select> 태그 하위에 <optgroup> 태그와 <option> 태그가 있습니다. <optgroup> 태그 는 <select> 태그 안에서 목록들을 그룹화할 경우 사용됩니다. label 속성을 사용하여 그룹 이름을 지정합니다. <optgroup> 태그 하위에 <option> 태그를 포함합니다. <option> 태그는 목록을 나타내는 태그입니다.

(4) 여러 줄 글상자 <textarea>

여러 줄을 입력받는 태그입니다. 속성 중에 rows와 cols가 있습니다. rows는 줄을, cols는 한 줄에 입력될 크기를 지정합니다.

##input 태그의 속성들 ## (<input type="속성값" name="" value="" ...)

1.hidden:사용자에게 보이진 않지만 서버로 보내지곤 한다.

2.text:텍스트 상자

3.search:검색 상자 삽입

4.url:url입력 필드 삽입

5.password:password입력 필드 삽입

6.email:이메일 주소 입력 필드

7.tel:전화번호 입력 필드

8.number,range는 공통의 속성이며 min과 max값을 줄수가있다.또한 value를 통해 필드의 초기값을 명시한다.

number는 스핀박스를 이용하며 range는 슬라이스 박스를 이용한다.

9.radio:여러 항목 중 하나만 선택 할 수 있다.

10.checkbox:항목 중 여러가지 선택이 가능하다.

11.color:색상표에서 색상이 가능하게 해 준다.

12.determine,determine-local:날짜와 시간을 표시한다.

13.date,month,week:날짜 표기법

14.time:시간을 지정하며,스핀 박스를 이용한다.

15.file:파일을 지정 할 경우 이를 사용한다.

16.submit:사용자가 입력한 정보를 서버로 전송한다.

17.reset:사용자가 입력한 정보를 모두 초기화 해 준다.

18.image:submit이미지 버튼 대신 대체할 이미지 버튼이 존재한다.

19.button:어떠한 기능이 없는 버튼이다.(submit이나 reset과는 다르다.)

 

 

 

$자바스크립트로 botton속성만으로도 reset이 구현되도록 코딩을 해 보고 싶다.

 

 

'HTML & CSS & JS' 카테고리의 다른 글

html 공부하기  (0) 2019.06.03
변수 선언 방법 var,let,const 차이점과 특징  (0) 2019.04.20
함수표현식과 함수선언문의 차이점  (0) 2019.04.18
html/css/js로 설문조사지를 구현하기위한 배경지식  (0) 2019.04.15
html/css로 스도쿠 구현하기  (0) 2019.04.15
'HTML & CSS & JS' Related Articles more