HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 2] <form> input

1. input

  사용자로부터 데이터 값을 입력받기 위한 태그. type 속성 값에 따라 폼 컨트롤을 생성.

type 속성 값	설명
text	한 줄 글 입력 상자. maxlength 속성으로 글자 수 제한 가능
password	비밀번호 입력 상자. 입력된 내용이 *로 표시된다.
search	검색 입력 상자
date	년-월-일 선택 상자
datetime-local	년-월-일-시분초 선택 상자
month	년-월 선택 상자
week	년-주 선택 상자
time	시간 선택 상자
email	이메일 입력 상자
tel	전화번호 입력 상자
color	색상 선택 상자
number	숫자 선택 상자. min(최솟값), max(최댓값), step(선택 단계), value(시작값) 지정 가능
range	슬라이드바. min(최솟값), max(최댓값), step(선택 단계), value(시작값) 지정 가능
radio	라디오 버튼. 여러 개 radio 중 하나만 선택 가능. (name이 같아야 실행) checked 속성을 정의하면 기본 선택으로 표시
checkbox	체크박스. 다중 선택 가능. checked 속성을 정의하면 기본 선택으로 표시
submit	전송 버튼. value(출력되는 텍스트) 지정
reset	초기화 버튼. value(출력되는 텍스트) 지정
button	범용 버튼. value(출력되는 텍스트) 지정
image	이미지로 된 submit 버튼. alt 속성 반드시 지정(이미지 로드 실패 시 표시되는 설명)
file	첨부파일 업로드 버튼
hidden	노출되지 않는 데이터 지정

<form action="#" method="post">
    <fieldset>
       <legend>type 속성</legend>
          <h4>text</h4>
          <input type="text">
          <h4>password</h4>
          <input type="password">
          <h4>search</h4>
          <input type="search">
          <h4>date</h4>
          <input type="date">
          <h4>datetime-local</h4>
          <input type="datetime-local">
          <h4>month</h4>
          <input type="month">
          <h4>week</h4>
          <input type="week">
          <h4>time</h4>
          <input type="time">
          <h4>email</h4>
          <input type="email">
          <h4>tel</h4>
          <input type="tel">
          <h4>color</h4>
          <input type="color">
          <h4>number - 기본</h4>
          <input type="number">
          <h4>number - 최소값, 최대값, 단계 지정</h4>
          <input type="number" min="2" max="10" value="2" step="2">
          <h4>range</h4>
          <input type="range" min="1" max="10" value="5">
          <h4>radio</h4>
          예<input type="radio" name="yesorno" checked> 아니오<input type="radio" name="yesorno">
          <h4>checkbox</h4>
          html<input type="checkbox" checked> css<input type="checkbox"> java script<input type="checkbox"> jQuery<input type="checkbox">
          <h4>submit</h4>
          <input type="submit" value="전송">
          <h4>reset</h4>
          <input type="reset" value="취소">
          <h4>button</h4>
          <input type="button" value="확인">
          <h4>image</h4>
          <input type="image" src="images/btn_ok.jpg" alt="확인">
          <h4>file</h4>
          <input type="file">
          <h4>hidden</h4>
          <input type="hidden">
   </fieldset>
</form>

 

 

type 속성

text

password

search

date

datetime-local

month

week

time

email

tel

color

number - 기본

number - 최소값, 최대값, 단계 지정

range

radio

예 아니오

checkbox

html css java script jQuery

submit

reset

button

image

file

hidden