KH_HTML_4_입력 양식 작성하기
PUBLISHING
목록 보기숨기기4/6
폼 삽입하기
웹에서 만나는 폼
- 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)
- 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들
- 이런 작업은 모두 데이터베이스를 기반으로 한다.
- 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML태그이다.
- 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용
| 속성 | 설명 |
|---|---|
| method | 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다. get : 데이터를 256 ~ 4096byte 까지만 서버로 넘길 수 있습니다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있습니다. post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않습니다. |
| name | 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정합니다. |
| action | <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다. |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다. |
input 태그의 type 속성들
| 종류 | 설명 |
|---|---|
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣습니다. |
| password | 비밀번호를 입력할 수 있는 필드를 넣습니다. |
| search | 검색할 때 입력하는 필드를 넣습니다. |
| url | URL 주소를 입력할 수 있는 필드를 넣습니다. |
| 이메일 주소를 입력할 수 있는 필드를 넣습니다. | |
| tel | 전화번호를 입력할 수 있는 필드를 넣습니다. |
| checkbox | 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣습니다. |
| radio | 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다. |
| number | 숫자를 조절할 수 있는 스핀 박스를 넣습니다. |
| range | 숫자를 조절할 수 있는 슬라이드 막대를 넣습니다. |
|---|---|
| date | 사용자 지역을 기준으로 날짜(연,월,일)를 넣습니다. |
| month | 사용자 지역을 기준으로 날짜(연,월)를 넣습니다. |
| week | 사용자 지역을 기준으로 날짜(연,주)를 넣습니다. |
| time | 사용자 지역을 기준으로 시간(시,분,초,분할 초)을 넣습니다. |
| datetime | 국제 표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)을 넣습니다. |
| datetime-local | 사용자가 있는 지역을 기준으로 날짜와 시간(연,월,일,시,분,초,분할 초)을 넣습니다. |
| submit | 전송 버튼을 넣습니다. |
| reset | 리셋 버튼을 넣습니다. |
| image | submit 버튼 대신 사용할 이미지를 넣습니다. |
| button | 일반 버튼을 넣습니다. |
|---|---|
| file | 파일을 첨부할 수 있는 버튼을 넣습니다. |
| hidden | 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만듭니다. |
type ="text"
- 한 줄짜리 텍스트 입력 필드
- 주로 아이디나 이름, 주소 등 텍스트 입력
type = "password"
- 비밀번호 입력란
- 사용자가 입력하는 내용이 *나 검은 점으로 표시된다.
텍스트 필드와 비밀번호 필드의 속성
- size : 텍스트와 비밀번호 필드의 길이를 지정한다.
- value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용이다.
- maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다.
type = "search"
- 검색 필드
- 검색 창에 x 표시가 되어 검색어 삭제 쉬움
type = "url"
- 웹 주소 필드
- http://로 시작하는 사이트 주소 입력
type = "email"
- 메일 주소 입력 필드
- 메일 주소 형식 자동 체크
type = "tel"
- 전화번호 입력 필드
- 사용자 입력을 체크하지는 않음
type = "radio"
- 여러 항목 중 하나만 선택할 때
type = "checkbox"
- 여러 항목 중 둘 이상을 선택할 때
type = "number"
- 숫자 입력 필드. 브라우저에 따라 스핀 박스로 표시됨
type = "range"
- 숫자 입력 필드. 슬라이드 막대를 이용해 숫자 입력
type = "date", type = "month", type = "week"
- 달력을 이용해 날짜 입력
type = "time", type = "datetime-local"
- 시간 입력
type = "submit", type = "reset"
- 폼 전송/리셋 버튼
- 전송 버튼(submit) : 사용자 입력 내용을 서버로 전송
- 리셋 버튼(reset) : 사용자 입력 내용 전부 삭제
- value 속성을 이용해 버튼 표시 내용 지정
type = "image"
- submit 버튼 대신 이미지 삽입
type = "button"
- 기능 없이 버튼 형태만 삽입
- 주로 버튼 클릭해서 자바스크립트 실행할 때 사용
- value 속성을 이용해 버튼 표시 내용 지정
type = "file"
- 파일 첨부
- '파일 선택' 이나 '찾아보기' 버튼으로 표시됨
type = "hidden"
- 화면 상의 폼에는 보이지 않는다.
- 폼을 서버로 전송할 때 서버로 함께 전송되는 요소
autofocus
- 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
placeholder
- 입력란에 표시하는 힌트로 필드를 클릭하면 사라짐
readonly
- 내용을 보기만 하고 입력하지 못하게 함
required
- 필수 필드 체크
- 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다르게 나타남
폼에서 사용하는 여러 가지 태그
텍스트 영역 <textarea>
- 여러 줄의 텍스트 입력
- 게시판 글 입력 양식, 사용자 약관 등
textarea 태그의 속성
cols = 텍스트 영역의 가로 너비를 문자 단위로 지정합니다.
rows = 텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생깁니다.
<select>, <optgroup>, <option>
- 여러 옵션 중에서 선택 - 드롭다운 목록
- 공간을 최소한으로 사용하면서 여러 옵션 표시 가능
<select> 태그의 속성
size = 화면에 표시할 드롭다운 항목의 개수를 지정합니다.
multiple = 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용합니다.
<option> 태그의 속성
value = 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정합니다.
selected = 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정합니다.
<datalist>, <option>
- 데이터 목록에 제시된 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨
- 데이터 목록에 id를 이용해 이름을 붙이고, <input> 태그의 list 속성에 데이터 목록 id를 지정함.
<button>
- 다양한 형태의 버튼 삽입
- 화면 낭독기에서 버튼임을 정확히 전달할 수 있음
- CSS를 이용해 원하는 형태로 꾸밀 수 있음
댓글
댓글을 불러오는 중…