본문 바로가기
웹표준

[HTML]폼과 테이블

by KhyeonS 2022. 6. 30.

폼과 테이블에 대해서 알아보자.


 폼 양식과 테이블 
  회원가입, 로그인, 게시판 글쓰기 등에서 사용하는 폼 양식에는 텍스트 입력 창, 비밀번호 입력 창, 체크 박스, 라디오 버튼, 파일 버튼, 선택 박스, 다중 입력 창 등이 있다. 여기서는 <table>, <tr>, <th>, <td> 등의 탭을 사용한다.

  폼 양식이란 웹 페이지에서 사용자가 키보드로 데이터를 입력하거나 마우스로 선택할 수 있는 서식을 말한다. 사용자가 입력한 데이터를 처리하기 위해서는 JavaScript, PHP, JSP 등과 같은 웹 프로그래밍 언어가 있어야 한다.


 폼 양식

HTML 태그와 속성
텍스트 입력창 <input type=“text”>
비밀번호 입력 창 <input type=“password”>
라디오 버튼 <input type=“radio”>
체크 박스  <input type=“checkbox”>
파일 <input type=“file”>
버튼  <input type=“submit”>, <input type=“button”>, <input  type=“reset”>, <button>
선택 박스  <select>,<option>
다중 입력창 <textarea>

1) 텍스트 입력 창
  HTML에서 모든 입력 폼은 <form> ~ </form>안에 기술해주어야 한다. 여기서 높이와 색상, 두께 등을 CSS에서 지정하면 된다. 
2) 비밀번호 입력 창
  역시 <form> ~ </form> 안에 기술해 주어야 한다.
3) 라디오 버튼
  역시 <form> ~ </form> 안에 기술해 주어야 한다. 여러 개 가운데 원하는 하나만 선택을 하게 한다.
4) 체크박스
  역시 <form> ~ </form> 안에 기술해 주어야 한다. 여러 개 가운데 복수 선택이 가능하다.
5) 파일
  역시 <form> ~ </form> 안에 기술해 주어야 한다. 파일 업로드 등에서 사용되며 자동으로 Windows 탐색기가 열려서 파일을 선택하게 한다.
6) 버튼
  역시 <form> ~ </form> 안에 기술해 주어야 한다. 버튼은 누르면 다른 작업이 일어나게 된다. 
7) <input> 태그의 속성
  역시 <form> ~ </form> 안에 기술해 주어야 한다.
8) 선택박스 - <selection> <option>
  역시 <form> ~ </form> 안에 기술해 주어야 하는데 이 기능은 마우스를 이용해서 목록 중에서 하나를 선택하게 한다. <selection>은 전체 항목을 감싸고, <option>은 각 항목을 감싼다. 
 <input type=" ">에서 " " 속에 
=>이메일 email, 전화번호 tel, 숫자는 number, 검색창은 search, URL 입력은 url, 
  파일 첨부 file, 이미지 첨부 image, 색깔 color, 년월일 date, 년월일시각 datetime-local, 
  month, time, week, 숨겨진 창 hidden, 슬라이드바 range를 입력하면 된다.

 


 테이블 
  웹 페이지에 테이블을 삽입하는 데에는 <table>, <tr>, <th>, <td> 태그를 사용한다. 테이블을 만들고, 행과 열을 병합할 수 있다.
   테이블 삽입 - <table>, <tr>, <th>, <td>
▶ <table> 태그는 전체 테이블을 감싼다. border=“1”식으로 하면 이는 경계선의 두께이다. 테이블 경계선, 셀의 크기, 글자 정렬 등 테이블의 세부 설정은 CSS를 이용하면 된다.
▶ <tr> 태그는 각각의 행을 만들 때 사용된다. <-table row
▶ <th> 태그는 테이블의 첫 번째 행에서 각 열의 제목을 생성하는데 사용된다. <-table header
▶ <td> 태그는 테이블의 행 내에 있는 각각의 셀을 표현하는데 사용된다. <- table division

<th> 태그나 <td> 태그에서 사용하는 colspan 속성을 이용해서 열을 병합. colspan="2"는 두 개의 열을 하나로 합침
<th> 태그나 <td> 태그에서 사용되는 rowspan 속성을 이용해서 행을 병합. rowsapn="2"는 두 개의 행을 하나로 합침 

 

'웹표준' 카테고리의 다른 글

[HTML] URL(Uniform Resource Locator)  (0) 2022.06.20
[HTML] image 태그  (0) 2022.06.20
[HTML] 특수문자  (0) 2022.06.20
[HTML] 주석, 기본태그  (0) 2022.06.20
[HTML] HTML  (0) 2022.06.20

댓글