Back to feed
web

HTML/ input 태그 속성

text

  • 한 줄 짜리 텍스트 입력 필드
<form>
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" name="fname" /><br />
  <label for="lname">Last name:</label><br />
  <input type="text" id="lname" name="lname" />
</form>

password

  • 비밀번호 입력 필드
<form>
  <label for="username">Username:</label><br />
  <input type="text" id="username" name="username" /><br />
  <label for="pwd">Password:</label><br />
  <input type="password" id="pwd" name="pwd" />
</form>

submit

  • form-handler로 form 데이터를 전송할 때 사용하는 버튼

  • form-handler는 입력 데이터를 처리하는 서버 페이지

  • form 태그의 action 속성으로 form-handler 지정

<form action="/action_page.php">
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" name="fname" value="John" /><br />
  <label for="lname">Last name:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
  <input type="submit" value="Submit" />
</form>

reset

  • 초기화 버튼

  • 클릭시 form 내 input 태그들의 값이 default 값으로 초기화된다.

<form action="/action_page.php">
  <label for="fname">First name:<화label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

radio

  • radio 버튼

  • 선택지 중 한 개만 선택 가능

<form>
  <input type="radio" id="html" name="fav_language" value="HTML" />
  <label for="html">HTML</label><br />
  <input type="radio" id="css" name="fav_language" value="CSS" />
  <label for="css">CSS</label><br />
  <input type="radio" id="javascript" name="fav_language" value="JavaScript" />
  <label for="javascript">JavaScript</label>
</form>

checkbox

  • 선택지 중 0개 이상의 옵션을 선택 가능한 체크박스
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" />
  <label for="vehicle1"> I have a bike</label><br />
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" />
  <label for="vehicle2"> I have a car</label><br />
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" />
  <label for="vehicle3"> I have a boat</label>
</form>

button

  • 일반적인 버튼
<input type="button" onclick="alert('Hello World!')" value="Click Me!" />

color

  • 색을 선택하는 입력 필드

  • 브라우저마다 지원하지 않을 수도 있다.

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor" />
</form>

date

  • 날짜를 선택하는 입력 필드

  • 브라우저마다 지원하지 않을 수도 있다.

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday" />
</form>

datetile-local

  • 날짜와 시간을 입력하는 필드

  • 브라우저마다 지원하지 않을 수도 있다.

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime" />
</form>

email

  • e-mail 주소를 입력하는 필드

  • 브라우저마다 제출시 이메일 주소가 자동으로 유효성 검사를 하기도 한다.

  • 스마트폰 환경일 경우 키보드에 .com 버튼이 표시되기도 한다.

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email" />
</form>

image

  • 전송 버튼으로 이미지를 사용하도록 한다.

  • src 속성으로 이미지를 지정한다.

<form>
  <input
    type="image"
    src="img_submit.gif"
    alt="Submit"
    width="48"
    height="48"
  />
</form>

file

  • 파일 선택 필드
<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile" />
</form>

hidden

  • 사용자에게 보이지 않는 숨겨진 필드이다.

  • 웹 개발자들이 유저에게 보이지 않는 데이터를 서버로 전송하도록 할 때 사용한다.

  • 유저에게 보이지 않는다고 해도 브라우저의 view source 기능을 사용하면 볼 수 있기 때문에 보안 기능으로는 사용하면 안된다.

  • form 데이터를 전송할 때 업데이트 되어야 하는 데이터베이스 레코드를 저장하기도 한다.

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" /><br /><br />
  <input type="hidden" id="custId" name="custId" value="3487" />
  <input type="submit" value="Submit" />
</form>

month

  • 년도와 월을 선택하는 필드

  • 브라우저마다 지원하지 않을 수도 있다.

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth" />
</form>

number

  • 숫자 입력 필드

  • 숫자만 입력하도록 제한한다.

  • min과 max 속성으로 범위를 제한할 수 있다.

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5" />
</form>

input 제약 사항

  • 아래의 속성들로 input의 입력 데이터에 제약을 걸 수 있다.

| 속성 | 설명 | | --------- | --------------------------------------------------------------------------- | | checked | 체크박스나 라디오 버튼 같은 필드를 미리 페이지 로드시 미리 선택되도록 한다. | | disabled | input 필드를 비활성화 | | max | 입력의 최대값 | | maxlength | 입력의 최대 글자 수 | | min | 입력의 최소값 | | pattern | 입력 값이 해당 정규 표현에 맞는지 확인 | | readonly | 읽기 전용 | | size | 입력의 길이 | | step | 숫자 입력 간격 | | value | default 값 |

<form>
  <label for="quantity">Quantity:</label>
  <input
    type="number"
    id="quantity"
    name="quantity"
    min="0"
    max="100"
    step="10"
    value="30"
  />
  // 최소 값은 0, 최대 값은 100, 기본 값은 30, 10의 배수만 입력 가능
</form>

range

  • 정확한 값이 별로 중요하지 않을 때 사용

  • 범위와 간격 지정 가능

  • 슬라이더 컨트롤러로 표시된다.

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50" />
</form>

search

  • 검색 필드 (일반 text 필드처럼 동작)
<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch" />
</form>

tel

  • 전화번호 입력 필드
<form>
  <label for="phone">Enter your phone number:</label>
  <input
    type="tel"
    id="phone"
    name="phone"
    pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"
  />
</form>

time

  • 시간 입력 필드

  • 브라우저에 따라 다르게 표시된다.

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt" />
</form>

url

  • url 주소 입력 필드

  • 브라우저에 따라 유효성 검사를 하기도 한다.

  • 스마트폰 환경에서 키보드에 .com 버튼을 표시하기도 한다.

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage" />
</form>

week

  • 년도와 몇 번째 주인지 입력하는 필드

  • 브라우저에 따라 다르게 표시된다.

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week" />
</form>