고정 헤더 영역
상세 컨텐츠
본문
728x90
2021/01/31 - [IT국비교육] - Index HTML
2021/01/31 - [IT국비교육/HTML] - Table 태그 - HTML
1. 입력 양식 관련 태그
데이터를 입력 또는 선택할 수 있는 태그입니다.
입력한 데이터가 DB에 저장됩니다.
개발자 영역, DB 연동과 밀접한 관련 있습니다.
예 : 회원 가입에 입력되는 데이터들
2. 입력 양식 관련 태그 종류
| 태그 종류 | 설명 |
| form | 여러 입력 양식을 1개의 그룹으로 묶는 태그 |
| input | 데이터를 입력 또는 선택할 수 있는 입력 양식을 출력하는 태그 |
| select | 1개 이상의 목록 중 하나를 선택하는 목록 상자를 출력하는 태그 - list |
| option | select 태그 내부에서 사용되어 목록 상자 내부의 목록을 출력하는 태그 |
| textarea | 다중 행으로 문자열을 입력할 수 있는 입력 양식을 출력하는 태그 예 : e-mail 입력란 |
3. 입력 양식 관련 태그와 속성
| 태그 종류 | 속성 | 속성값 및 설명 |
| form | name | 태그의 이름을 설정 – 가독성을 위해 사용, Jquery에서 접근성을 용이하게 하기 위해 사용, 구분과 부르기 위해 사용 |
| action | 입력(선택)된 데이터를 보낼 서버 쪽 url 주소를 설정 | |
| method | 입력(선택) 데이터를 서버로 보내는 방법을 설정 “get“ – 입력(선택) 데이터가 url 뒤에 붙어 전송 – 보안성 X, 짧은 데이터 “post” – 입력(선택) 데이터가 안보이게 전송 – 보안성 O, 긴 데이터(실무) |
|
| enctype | 전송될 데이터의 형식을 설정 · 속성값 “application/x-www-form-urlencoded“(default)(사용 안함) method=“post”일 경우 서버에 전송할 데이터를 ket-value 형태로 인코딩 multipart/form-data 태그 내부에 <input type=“file”>가 있을 경우 파일도 전송 가능하게 함 text/plain(사용 안함) 전송할 데이터를 인코딩 없이 전송 |
|
| target | 서버에서 보내주는 응답을 받을 화면의 이름 설정 | |
| input | type | 입력 양식 종류를 지정 |
| name | 입력 양식 이름을 지정, name값은 DB의 column이랑 일치해야함 | |
| value | 입력(선택) 값이 저장되는 속성, 서버로 전달되고 최종 DB에 저장 type=“button”,“submit”,“reset”의 경우 버튼에 삽입되는 문자열 설정 서버의 웹프로그래밍 언어로 전달되지 않음 |
|
| size | 좌우 길이를 설정, type=“text”,“password”에만 설정 | |
| maxlength | 입력 가능한 문자열 개수 설정, type=“text”,“password”에만 설정 | |
| checked | 입력 양식이 선택되어 만들어짐, type=“checkbox”.“radio”에만 설정 | |
| select | name | 입력 양식 이름을 지정, name값은 DB의 column이랑 일치해야함 |
| size | 설정한 수만큼 목록이 펼쳐 보임, 목록 개수보다 적으면 자동으로 스크롤바 | |
| multiple | 다중 선택 여부를 지정, multiple 설정 시 ctrl 누르고 다중 선택 가능 | |
| option | value | DB에 저장될 실제값 저장 |
| text | 화면에 출력될 문자열 저장(사용 안함) | |
| selected | 목록을 선택하여 하게함 | |
| textarea | name | 입력 양식 이름을 지정, name값은 DB의 column이랑 일치해야함 |
| rows | 보이는 행의 개수 설정 | |
| cols | 보이는 열의 개수 설정 | |
| value 속성명은 없음, <textarea>DB에 저장되는 값</textarea> |
||
| 속성값 | 설명 |
| type=“text” | 한 줄의 문자열을 입력받는 양식 |
| type=“password” | 한 줄의 암호 문자열을 입력받는 양식 |
| type=“checkbox” | 체크박스 양식 설정, 다중체크 가능, name 속성이 같아도 문제없음 |
| type=“radio” | 라디오버튼 양식 설정, 단일 체크만 가능 |
| type=“file” | 파일박스 양식 설정, 파일 업로드에 사용 |
| type=“image” | 이미지 출력 양식 설정 |
| type=“button” | 버튼 양식 설정, 버튼 이벤트는 개발자가 코딩 |
| type=“submit” | 서버 전송 버튼 양식, 데이터를 서버 쪽으로 보내는 전용 버튼 |
| type=“reset” | 초기화 버튼 양식, 입력양식 데이터를 초기화하는 전용 버튼 |
| type=“hidden” | 보이지 않고 값만 저장하는 양식, 화면에 보이지는 않으나 웹서버로 데이터를 보내고 싶을 때 사용, DB연동에 쓰는 데이터 |
4. 이벤트 관련 속성
이벤트에 따라 지정한 자바스크립트 코드를 실행하는 속성으로 아래와 같이 사용합니다.
<태그명 이벤트관련속성명=“자바스크립트코드;”>| 속성 종류 | 속성기능 |
| onClick | 마우스 왼쪽 버튼을 클릭하는 순간 |
| onMouseover | 마우스를 갖다 대는 순간 |
| onMouseout | 마우스를 갖다 댄 후 떼는 순간 |
| onMousedown | 마우스 버튼을 클릭하는 순간(어느 버튼을 눌렀는지는 자바스크립트에서 제공) |
| onMouseDragged | 마우스를 드래그 하는 순간 |
| onKeydown | 키보드를 누르는 순간 |
| onKeyup | 키보드를 누른 후 떼는 순간(문자인식 후 실행) |
| onSelected | 문자열을 드래그해서 선택하는 순간 |
| onChange | 목록을 바꿔 선택하는 순간 |
| onLoad | <body> 태그 안의 모든 내용을 읽은 후 |
728x90
LIST
'HTML' 카테고리의 다른 글
| Table 태그 - HTML (0) | 2021.01.31 |
|---|---|
| A 태그 / DIV 태그 - HTML (0) | 2021.01.29 |
| 글자 관련 태그 - HTML (0) | 2021.01.28 |
| HTML(Hyper Text Markup Language) 이란? - HTML (0) | 2021.01.28 |
| EditPlus 설치 방법 HTML 개발 툴 (0) | 2021.01.28 |
댓글 영역