[HTML/JSP] 입력양식 FORM

입력 양식 (FORM)

입력 양식의 영역 지정

<form [method="get/post"] [action="backend-url"] [enctype="multipart/form-data"]>
</form>

속성 설명

- method : 입력값을 백엔드 페이지에게 전속하는 방식

- action : 입력값을 전송받을 백엔드 페이지의 주소

- enctype : 파일 업로드가 요구될 경우 명시

화면 UI를 구성하는 과정에서는 중요하지 않기 때문에 method, action, enctype 속성은 명시하지 않는 경우가 많다.

입력양식 안에서의 그룹 지정 (필요한 경우만 수행)

  <fieldset>                              <!-- 그룹의 영역 지정-->
    <legend> 제목 </legend>     <!-- 글룹의 제목을 표현-->
    ... 입력 항목들을 표현 ...
</fieldset>

입력 항목

기본

  <input type="종류" name="백엔드에서의 식별자" id="css, js에서의 식별자" />

종류에 지정 가능한 값

type	type설명
text	일반 텍스트를 입력할 수 있는 박스 (엔터 안됨)
password	패스워드 입력 박스 (모두 *표시가 됨)
checkbox	체크 기능이 있는 박스 ( 다중 체크 가능 )
radio	체크 기능이 있는 박스 ( 단일 체크만 가능 )
button	버튼
submit	form태그 안에서 action위치로 값을 보내는 버튼
reset	form 태그 안에 있는 입력 요소 값 초기화
image	submit과 기능 동일 ( 이미지를 넣을 수 있다. )
email	이메일 입력
tel	전화번호 입력
url	주소 입력
number	숫자만 입력할 수 있는 박스
range	값을 조절하는 바가 나타남

<input> 태그에 추가 가능한 속성

속성	속성명
value="기본값"	페이지가 열릴 때 입력되어 있을 값
checked	type속성이 radio, checkbox인 경우 선택상태로 지정함
min="최소값"	type속성이 number,range인 경우 사용
max="최대값"	type속성이 number,range인 경우 사용
step="숫자"	type속성이 number,range인 경우 사용
maxlength="숫자"	키보드로 입력하는 형태에서 최대 글자수
src="이미지경로"	image 형태인 경우만 사용
required	필수 입력 항목 지정 (모든 브라우저가 지원하는 것은

그 밖의 요소

장문 입력

<textarea name="식별자" id="식별자" [maxlength="숫자"]>내용</textarea>

드롭다운

<select name="식별자" id="식별자" [multiple]>
    <option value="값" selected></option>
</select>

버튼

<input> 태그에 대해서...

종류	설명
type="button"	이 자체로는 아무 기능이 없음. 동작할 내용을 JS로 구현
type="submit"	입력한 내용을 백엔드에 전송하는 기능 ( 일반적인 저장버튼 )
type="reset"	입력한 내용을 모두 초기화
type="image"	submit과 기능이 동일 ( 잘 사용하지 않음 )

버튼요소의 다른 형태

<input type="button | submit | reset" value="click me" />

위의 코드는 아래와 같이 변경 가능하다.

<button type="button | submit | reset">click me</button>