폼과 테이블에 대해서 알아보자.
폼 양식과 테이블
회원가입, 로그인, 게시판 글쓰기 등에서 사용하는 폼 양식에는 텍스트 입력 창, 비밀번호 입력 창, 체크 박스, 라디오 버튼, 파일 버튼, 선택 박스, 다중 입력 창 등이 있다. 여기서는 <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 |
댓글