입력 양식 태그

입력 양식 태그

• 입력 양식 (form)을 만들 때 사용하는 태그
• <from>
• <label>
• <input>
• <select> <option>
• <textarea>

모든 입력 태그에서의 name과 id 차이

• name 속성 : 서버에 전달될 때 서버에서 인식하는 이름
• id 속성 : 자바스크립트, jQuery에서 객체로 선택해 올 때 인식하는 이름

<form> 태그

• 입력 양식을 구성하는 기본 골격 제공
• <form method=”post” action=”newMember.jsp”>
• 다양한 입력 양식 태그 포함 
• <input type=”text” name=”id”>
• </form>

<label> 태그

• 폼요소에 캡션(라벨) 붙이기
• <label></label>

<input> 태그

• 데이터를 입력 받기 위한 태그

<input type=”text” id=”id” name=”id”>

속성	속성값	설명
name	문자열	입력 상자의 이름
type	text password checkbox radio	입력 유형
size	숫자	입력 상자의 크기
value	문자열	초기값 / 태그가 지닌 값
maxlength	숫자	최대 길이
placeholder	문자열	입력할 내용의 힌트 표시
readonly		읽기 전용 필드
autocomplete	on / off	자동 완성 기능 제어
required		필수 필드 지정
autofocus		입력 커서 표시
hidden		숨김 (사용자에게는 보이지 않지만 서버로 넘겨지는 값을 갖는 필드)

 

<input> 태그의  type 속성에서 사용 가능한 유형

유형	설명
text	한 줄의 텍스트 입력
password	비밀번호 입력
checkbox	체크박스 (여러 개 선택  가능)
radio	라디오 버튼 (1개만 선택 가능)
button	버튼
file	파일을 첨부할 수 있는 버튼
image	submit 버튼 대신 사용할 이미지 삽입
submit	서버 전송 버튼
reset	리셋 버튼

라디오 버튼 (radio)

• 여러 항목 중에 한 개를 선택할 때 사용
• name : 그룹 이름
• value : 선택한 버튼의 값 (서버로 전송되는 값)
• checked : 처음부터 선택된 상태로 만들기

<input type=”radio” name=”year” value=”1”>1학년
<input type=”radio” name=”year” value=”4” checked>4학년

체크박스(checkbox)

• 여러 항목 중에 여러 개를 선택할 때 사용
• name 속성을 동일하게 사용해도 되고 다른 이름으도 해도 됨
• 일반적으로 동일하게 설정하고 전송 받을 때 배열로 처리 (선택한 갯수만큼의 값이 전달됨)

<input type=”checkbox” name=”hobby” value=”게임” checked>게임
<input type=”checkbox” name=”hobby” value=”영화”>영화

드롭다운 목록 표시

• <select> 태그

<select name="nation">
  <option value="미국">미국</option>
  <option value="중국">중국</option>
  <option value="호주" selected>호주</option>
</select>

여러 라인 입력

• <textarea> 태그
• rows : 텍스트 영역의 세로 길이
• cols : 텍스트 영역의 가로 길이

type = submit

• 입력된 값들을 서버로 전송하게 하는  submit 이벤트 발생