수업/수업정리
2024-02-22-오전:table과 input, select
Dev.chandel
2024. 2. 22. 17:33
1. table(테이블)
1) table 구조
- 웹 페이지에서 테이블을 그리는 방법.
- 주로 게시판이나 통계 제작에 사용
2) table의 주요 태그
- <table>: 표를 생성하는 가장 상위 태그
- <tr>: 행을 나타내는 태그
- <td>: 열을 나타내는 태그
- <th>: 표의 제목을 나타내는 태그
3) colspan과 rowspan
- rowspan : 합칠 행의 개수
- colspan : 합칠 열의 개수
- 예시 자료
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2"> 2행 합침</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
<tr>
<td colspan="2">2열 합침</td>
<td>4행 3열</td>
</tr>
</table>
</body>
</html>
4) 주요 속성
5) 참고 링크
2. Input
1) text
- 한 줄의 텍스트만 입력 가능.
- Enter를 입력하는 경우 입력 정보 제출.
- minlength/maxlength : 사용자가 입력할 수 있는 최대/최소 문자 수를 지정.
2) password
- 사용자가 암호를 안전하게 입력 할 수 있는 방법.
- 일반적으로 ＊또는 ● 과 같은 기호로 대체하여 텍스트가 가려져 표시.
3) email
- 자동으로 유효성 검사를 해 제출된 form이 이메일 형식에 맞지 않는 경우 위와 같이 에러 메세지 출력.
4) TEL
전화번호 형식은 전 세계적으로 매우 다양하기 때문에 입력 값이 특정 형식으로 자동 검증 불가
5) number
키보드나 인풋박스 오른쪽의 위아래 버튼을 눌러 숫자 증가/감소 가능
6) range
- 값이 가려진 숫자를 입력하는 막대 컨트롤러.
- 디폴트 값이 중간값인 범위 위젯으로 표시
- 최소/최대값의 범위를 정의
7) date
- 날짜(연월일, 시간X)를 지정할 수 있는 컨트롤.
- 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력을 출력
8) month
- 연과 월을 지정할 수 있는 컨트롤
- 시간대는 지정 불가.
9) time
- 시간대가 없는 시간값을 입력하는 컨트롤
10) button
- 클릭할 수 있는 버튼을 정의
11) checkbox/radio
- 체크박스와 라디오 버튼을 정의
12) color
- 색을 선택할 수 있는 color picker를 출력
13) image
- 제출 버튼으로 사용될 이미지를 정의
14) reset
- 리셋 버튼을 정의
15) search
- 검색어를 입력할 수 있는 텍스트 필드.
16) submit
- 제출 버튼
17) required
- 해당 태그가 필수 태그로 지정
- 필수 태그를 입력하지 않고 submit 버튼을 누르면 에러메시지가 브라우저에 출력
18) placeholder
- 태그에 입력할 값에 대한 힌트를 줍니다.
3. select
1) 정의와 기능
- 사용자가 원하는 값을 선택할 수 있도록 HTML select 태그를 이용해서 드롭다운 메뉴를 생성
- 서버로 전송할 데이터를 수집하는 중요한 기능.
- select 태그는 보통 form 요소 안에서 기능.
- 선택 항목은 또 다른 태그인 <option>에서 코드화.
2) 속성
- name: 데이터가 서버에 제출된 후 데이터를 참조하는 데 사용되므로 모든 form 컨트롤에 name을 넣어야 한다.
- multiple: 이 속성은 사용자가 드롭다운 메뉴에서 여러 옵션을 선택할 수 있도록 한다.
- required: 이 속성은 일반적으로 유효성 검사를 위해 사용됩니다. 이 속성을 통해, 사용자가 드롭다운 메뉴에서 하나 이상의 옵션을 선택하지 않으면 form이 제출되지 않습니다.
- disabled: 사용자가 옵션을 선택할 수 없도록 합니다.
- size: 이 속성은 숫자로 표현되며, 한 번에 표시되는 옵션 수를 정하는데 사용됩니다.
- autofocus: 이 속성은 페이지가 로드 될 때 포커스가 있어야 할 입력 요소를 지정합니다. select를 포함한 모든 form 요소들에 사용될 수 있습니다.
3) 참고링크
4. form
1) 동작원리
- 폼이 있는 웹페이지 방문
- 폼 내용을 입력
- 폼 안에 있는 모든 데이터를 웹 서버로 전송
- 웹서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 이동
- 웹 프로그램은 폼 데이터를 처리
- 처리결과에 따른 새로운 htrml 페이지를 웹 서버로 전송
- 웹서버는 받은 html 페이지를 브라우저에 전송
- 브라우저는 전송받은 html 페이지를 출력
2) 태그 속성
- action : 폼을 전송할 서버 쪽 스크립트 파일을 지정
- name : 폼을 식별하기 위한 이름을 지정
- accept-charset : 폼 전송에 사용할 문자 인코딩을 지정
- target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정
- method : 폼을 서버에 전송할 http 메소드를 정한다.