[HTML] html의 태그(입력양식, 폼) - 3

HTML TAG

입력양식 관련 태그

입력양식 예시

아이디 : <input type="text" /><br />
비밀번호 : <input type="password" /><br />
성별 :
<input type="radio" id="radioX" name="gender" value="X" checked />
<label for="radioX"> 선택안함 </label>
<input type="radio" id="radioM" name="gender" value="M" />
<label for="radioM">남자</label>
<input type="radio" id="radioF" name="gender" value="F" />
<label for="radioF">여자</label>

<select name="national">
  <option value="ko">한국</option>
  <option value="us">미국</option>
  <option value="ch">중국</option>
  <option value="eu">영국</option>
  <option selected>선택안함</option>
</select>

<input type="text" name="color" list="colorList" />
<datalist id="colorList">
  <option value="black">검정색</option>
  <option value="white">흰색</option>
  <option value="skyblue">하늘색</option>
  <option value="pink">핑크색</option>
</datalist>

아이디 :
비밀번호 :

성별 : 선택안함 남자 여자

한국 미국 중국 영국 선택안함

• <input>

  • 사용자에게서 값을 입력받을 수 있게끔 해주는 태그
  • 다양한 type을 가지며 type별로 모양새가 달라지기도 한다

• <label>

  • for 속성에 input 아이디 값을 넣어주면 해당 라벨의 content 클릭 시 지정된 input 요소가 선택된다

• <select>

  • 여러 옵션들 중에서 선택할 수 있게끔 해주는 태그
  • 제출시 현재 선택된(selected) 값이 넘어가게 된다
  • 각각의 option에 value 속성값을 명시했을경우 value 값이 전달된다
  • value를 명시하지 않았으면 option태그의 content영역(시작태그~종료태그 사이)의 값이 넘어가게 된다

• <datalist>

  • 목록에 없더라도 직접 text 상자에 값을 기술해서 넘길 수 있게끔 한다
  • value 속성을 기술하면 해당 값이 리스트에 들어간다
  • 보통 자동완성 기능을 만들고싶은 경우 사용한다
  • value값, content값 모두 검색 가능하다
  • 다만 css를 사용해 원하는 디자인으로 만들기 어렵기 때문에 자주 사용되지 않는다

<input> 속성

속성	설명
type	입력 창의 타입을 결정하는 속성 (text, checkbox, radio 등)
value	input요소의 기본 값 표시
name	input을 구별할 수 있는 명칭
height/width	입력 창의 높이와 너비
readonly	읽기 전용 필드
required	필수 입력 필드 지정
placeholder	사용자 입력 전 입력 창 표시 글(입력hint 표시)
autocomplete	자동 완성 기능
maxlength	사용자가 입력할 수 있는 글자수 제한
size	화면에서 표시하는 글자 수
minlength	최소 입력 글자(최신 크롬, 안드로이드만 지원)
min/max/step	허용하는 범위 최소값/최대값/값의 증감값
accept	파일 타입에 대해 사용자에게 알려주는 기능
multiple	여러 개의 값 입력 가능
autofocus	입력 창 커서 표시

 
type 관련 속성들

type 속성	설명
text	한 줄짜리 텍스트 입력 창이 생김
password	비밀 번호 입력 창, 입력 시 ●●●으로 표시
hidden	사용자에게 보이지는 않지만 값을 넣을 수 있는 창, 관리자에게 필요한 값을 넣을 때 사용
button	버튼 생성, 자체 별도 기능은 없고 스크립트에서 함수 연결하여 활용
checkbox	체크 박스 생성
file	파일 입력 양식 출력
image	이미지 형태 생성
radio	라디오 버튼 생성
submit	입력한 데이터를 다른 페이지로 넘기는 기능
reset	입력한 내용을 지우는 기능
number	숫자값을 받으며 스핀박스가 표시된다, 스핀박스로 한번에 올리고 내릴 값도 지정 가능하다
range	슬라이드 바를 통해 숫자 지정 가능
date, month, week, time	각 속성별로 연도, 날짜, 시간을 제한적으로 입력받을 수 있다
datetime-local	연, 월, 일, 오전/오후, 시, 분을 입력받을 수 있다

• 그 외 : serch, url, email

  
  

폼 관련 태그

속성	설명	속성
<form>	사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정함	method	get : URL창에 데이터를 보내는 방식 data크기에 제한이 있음(256~4096byte) data를 볼 수 있음 post : http request에 data를 넣어 보내는 방식 data크기에 제한이 없음 data를 볼 수 없음
		name	<form>태그의 고유 이름 지정, <form>을 구분하기 위해 사용
		action	데이터를 처리 할 프로그램(페이지)을 지정
		target	action속성의 프로그램(페이지)를 어떻게 열지 지정
		autocomplete	이전 입력내용 출력하는 기능 생략하면 자동으로 출력(default : on)
<fieldset>	그룹을 묶는 태그(기본적으로 테두리에 존재)
<legend>	그룹의 제목을 붙이는 태그

폼 예시

<form action="">
  <fieldset>
    <legend>제목1</legend>
    입력 1 : <input type="text" name="text1" id="text111" class="test-input" />
    <br />
    입력 2 : <input type="text" name="text2" id="text222" class="test-input" />
    <br />
  </fieldset>

  <fieldset>
    <legend>제목2</legend>
    입력 3 : <input type="text" name="text3" class="test-input" /> <br />
    입력 4 : <input type="text" class="test-input" />
  </fieldset>

  <button type="submit">요청</button>
</form>

제목1

입력 1 :
입력 2 :

제목2

입력 3 :
입력 4 :

• <form>

  • 해당 태그 내의 submit 속성을 가진 버튼 클릭시 해당 form 내에 사용자가 입력한 값들을 “서버”로 넘기게된다
  • 서버로 값을 보낼 시 key=value 세트로 전달하게 된다
  • action 속성
    • 해당 form 내에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로 제시
  • method 속성
  • get방식 : 기본값, 사용자가 입력한 값들이 url에 노출되는 방식
  • post방식 : 사용자가 입력한 값들이 url에 노출되지 않는 방식, 로그인 등 정보가 노출되면 안될 때 사용한다

• <fieldset>

  • 그룹을 묶는 태그(기본적으로 테두리에 존재)

• <legend>

  • 해당 그룹의 제목을 붙이는 태그