[HTML] HTML 입력양식

<form> 태그

사용자와 상호 작용을 위해서 사용자로부터 데이터를 입력 받아 서버로 전달하기 위한 입력양식(폼)을 제공한다.

다양한 형태의 데이터를 입력받기 위한 요소들을 담는 컨테이너 역할을 수행한다.

1. 사용자 데이터 입력
2. 입력된 데이터 서버로 전달 
3. 전달 받은 데이터 서버 스크립트를 이용하여 처리
4. 결과 웹페이지 형태 사용자에게 전달

<form action="URL주소" method="전송방식">
    <input type="입력 타입 유형" 속성="속성값">
    <input type="submit">
    <textarea> </textarea>
    <select 속성="값">
        <option value="값">항목1</option>
        <option value="값">항목n</option>
    <select>
</form>

 

form 태그의 속성

속성	설명
action="URL"	폼이 제출될 때 폼 데이터를 전달받아 처리할 페이지의 주소(경로)를 지정
method="전송방식"	폼 데이터를 제출 할 때 사용하는 HTTP 방법(get, post)을 지정
name="이름"	폼의 이름을 지정
accept-charset="인코딩"	폼 제출을 위해 사용되는 문자 인코딩 방식을 지정
autocomplete="on|off"	input 요소에서 자동완성 기능의 사용 여부 지정
enctype="인코딩"	전송방식이 post인 경우 서버로 제출 될 때 폼 데이터의 인코딩 방식을 지정 기본값 : 'application/x-www-form-urlencoded'
novalidate	제출 시 폼 데이터의 유효성 검사를 하지 않도록 지정
target="창"	처리 결과를 보여 줄 창을 지정 (_blank, _self(기본값), _parent, _top, 프레임명)

 

form 태그의 전송방식

	method="get"	method="post"
전송 형태	기본값. 폼 데이터가 이름과 값이 쌍형태로 URL에 포함되어 전송	HTTP Request 헤더 속에 포함시켜 전송
데이터 길이	최대 2048글자	제약 없음
보안	데이터 내용이 URL에 노출 보안이 중요하지 않은 데이터 전달에 사용(ex.검색어 등) 이전페이지 버튼을 통한 이동이 가능	보안이 필요한 로그인, 회원 정보 등 개인정보 전송에 많이 사용 이전페이지 버튼을 누르면 데이터 다시 보내야 함

<input>

form태그 내에서 사용되는 입력요소로, 가장 빈도 높게 사용하는 태그이다.
사용자가 데이터를 입력 할 수 있는 입력타입을 지정하는 요소로 type속성 값에 따라 다양한 형태의 입력타입을 정할 수 있다.

input 태그의 속성

속성	설명	사용조건
accept="파일유형"	수용할 수 있는 파일의 형식 지정 속성값->.확장자 | audio/* | video/* | image/* | 미디어타입	type="file"인 경우에만 사용
alt="텍스트"	이미지에 대한 대체 텍스트 지정	type="image"인 경우에만 사용
height="픽셀" width="픽셀"	이미지의 폭과 높이 지정
src="URL"	제출 버튼으로 사용할 이미지의 URL을 지정
autocomplete="on|off"	지정한 입력 타입의 값을 자동으로 완성 할 지 여부 지정	type 속성값 => text, password, tel, search, url, email, range, data, pickers, color
autofocus	페이지 로드 시 자동으로 지정한 입력 타입에 포커스를 위치 시킴
cheaked	페이지 로드 시 초깃값으로 선택되는 항목을 지정	type 속성값 => checkbox, radio
disabled	input 요소를 비활성화시킴
form="폼_id"	input 요소가 form 요소 밖에서 사용되는 경우 input 요소가 속하는 폼을 지정
formaction="URL" formenctype="인코딩" formmethod="전송방식" formnovalidate formtarget="창"	form 요소에서 사용되는 속성을 대체하기 위한 속성	type 속성값 => submit, image
list="데이터리스트_id"	텍스트박스에 대한 옵션 리스트를 표시	datalist 태그에 id 지정
min="숫자|날짜" max="숫자|날짜"	최소값과 최댓값을 지정	type 속성값 => number, range, date, datetime, datetime-local, month, time, week
step="숫자"	min과 max 사이에서 유효한 입력값의 간격을 지정
minlength="숫자" maxlength="숫자"	입력 가능한 최소 문자 개수와 최대 문자 개수 지정
multiple	하나 이상의 값을 지정 할 수 있도록 함	type 속성값 => file, email
name="이름"	서버로 전달되는 input요소의 이름을 지정
pattern="정규표현식"	입력값에 대해 유효성 검사를 위한 정규 표현식을 지정	type 속성값 => text, password, tel, search, url, email, data
placeholder="텍스트"	입력값에 대한 힌트를 희미한 텍스트로 보여 줌	type 속성값 => text, password, tel, search, url, email
readonly	읽기 전용
required	반드시 입력되어야 하는 입력 타입	type 속성값 => text, search, url, tel, email, password, date, pickers, number, checkbox, radio, file
size="숫자"	화면에 보이는 텍스트 입력 타입 최대 길이 지정	type 속성값 => text, password, url, search, tel, email
type="유형"	입력 타입을 지정	총 23가지의 유형 존재
value="텍스트"	input 요소의 값을 지정 (button, reset, submit => 버튼 위에 텍스트 password, hidden => 입력 타입에 초기값 checkbox, radio, image => 서버로 전달되는 값)	type 속성값에 따라 사용법 달라짐 file에서는 사용 불가

기존에 사용했던 입력 타입 속성값

1. 텍스트, 비밀번호 타입
   • text : 기본값(기본 필드의 크기는 20글자). 한 줄 짜리 텍스트.
     
   • password : 비밀번호 입력하는 한 줄짜리 타입(입력되는 글자가 다른 글자로 대체되어 표시)
     
2. 라디오버튼, 체크박스 타입
   • radio : 라디오 버튼 생성(하나만 선택 가능)
     남자여자
   • checkbox : 체크박스 생성(0개 이상의 항목 선택 가능)
     HTML JAVA C언어 이산수학
3. 제출버튼, 초기화버튼 타입
   • type="submit" value="버튼표시이름" : 폼태그 action속성에 지정한 서버페이지로 데이터를 전송
     
   • type="reset" value="버튼표시이름" : 입력한 내용을 모두 지우고 초기화 함
     
4. 파일선택버튼, 이미지버튼 타입
   • type="file" [accept="파일유형" multiple] : 파일 업로드를 위한 파일 선택 버튼
     
   • type="image" src="URL" [width="픽셀" height="픽셀" alt="대체텍스트"] : 제출 버튼을 이미지로 만드는 경우
     
5. 버튼 타입과 버튼 태그
   • type="button" value="버튼표시이름" : onClick속성에 JS코드를 지정해서 주로 사용한다.
     
   • <button type="button | submit | reset" name="버튼이름" value="초깃값">버튼표시이름<button>
     
6. 숨겨 진 데이터
   • type="hidden": 사용자에게 보이지 않는 상태로 데이터를 입력받아 서버로 전송

HTML5 추가 된 입력 타입 속성값

1. 검색어, 전화번호
   • search : 텍스트 타입가 동일하게 생겼지만, 입력 대상이 검색어 인 경우
     크롬에서는 입력 내용을 초기화시킬 수 있는 X가 표시된다.
     
   • tel : 텍스트 타입과 동일하게 생겼지만, 입력 대상이 전화번호 인 경우
     input태그에 pattern="^0\d{1,2}\-\d{3,4}\-\d{4}$" 속성을 추가하면 유효성검사가 실행 된다.
     
2. URL, 이메일주소
   • url : 자동으로 유효성 검사를 한다.
     
   • type="email" [multiple] : 자동으로 유효성 검사를 한다. mutiple 속성을 사용하면 각 이메일 구분을 콤마로 해준다.
     
3. 숫자
   • number : 숫자를 입력받기 위해 사용. 스핀버튼을 가진 박스 형태로 표현된다.
     
   • range : 숫자를 입력받기 위해 사용하고 슬라이더 형태로 표시된다.
     
4. 날짜, 시간
   • date : 년, 월, 일
     
   • month : 년, 월
     
   • week : 년, 주차
     
   • time : 시간(시, 분, 초)
     
   • datetime-local : (지역시간대의) 년, 월, 일, 시간
     
5. 색상
   • color : 색상표에서 색상을 선택 할 수 있다.
     

<textarea>

input태그에 text 속성보다 긴 텍스트를 입력 받을 수 있다. 여러 줄에 해당하는 텍스트를 입력받는데 사용한다.
input태그에서처럼 autofocus, disabled, form, maxlength, placeholder, required 등의 속성도 사용된다.

textarea 태그의 주요 속성

속성	설명
name="이름"	텍스트 영역의 이름을 지정
cols="숫자"	영역의 너비(한 줄에 입력할 수 있는 글자 수)를 지정
rows="숫자"	영역의 높이(라인 수)를 지정
wrap="값"	폼으로 전송 될 때 줄바꿈 포함 여부를 지정 soft(기본값) -> 자동으로 줄바꿈이 포함되지 않음 hard -> 전송될 때 자동으로 줄바꿈이 포함되며, cols 속성이 반드시 지정되어야 함
readonly	읽기전용, 입력은 불가하고 내용 출력 용도로 사용

<select>

드롭다운 리스트를 만들 때 사용
옵션을 정의하기 위해 자식태그로 <option> 태그를 사용한다.

사용 형식 <select 속성="값"> <option value="값">항목1</option> <option value="값">항목n</option> <select>

HTML 데이터베이스 운영체제 알고리즘 HTML 데이터베이스 운영체제 알고리즘

select 태그의 주요 속성

속성	설명
name="이름"	드롭다운 리스트의 이름을 지정
size="숫자"	화면에 한 번에 보여지는 개수를 지정
multiple	여러 개의 항목을 한 번에 선택 할 수 있도록 지정 (crlt or shift 키를 누른 상태에서 원하는 항목 클릭)

option 태그의 주요 속성

속성	설명
disabled	해당 옵션 비활성화
label="텍스트"	옵션의 긴 항목을 짧은 레이블로 value의 우측에 표시
selected	페이지 로드시 미리 선택 될 옵션 지정
value="텍스트"	서버로 전달되는 항목 값을 지정