HTML - input 태그 (사용자 입력, 텍스트 필드, 버튼)

<input> 태그 (사용자 

---

<input> 태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다.

 

type 속성이 굉장히 많다.

종류	설명
text	한 줄짜리 입력 텍스트 박스를 넣는다.
password	패스워드 입력 필드를 넣는다.
serach	검색 입력 필드를 넣는다. 이 필드에 입력시 오른쪽에 x버튼 추가되어 손쉽게 입력내용 지울 수 있게 된다.
url	URL 주소 입력 필드를 넣는다.
email	이메일 주소 입력 필드를 넣는다.
tel	전화번호 입력 필드를 넣는다.
checkbox	선택지가 2개 이상 있는 체크 박스를 넣는다.
radio	선택지가 1개만 있는 라디오 버튼을 넣는다.
number	숫자 조절가능한 스핀 박스를 넣는다.
range	숫자 조절가능한 슬라이드 막대를 넣는다.
date	사용자 지역 기준으로 날짜(연, 월, 일)을 넣는다.
month	사용자 지역 기준으로 날짜(월, 일)을 넣는다.
week	사용자 지역 기준으로 날짜(연, 주)를 넣는다.
time	사용자 지역 기준으로 시간(시,분,초,분할 초)를 넣는다.
datetime	국제 표준시(UTC)로 지정된 날짜, 시간(연,월,일,시,분,분할 초)를 넣는다.
datetime-local	사용자 지역 기준으로 날짜, 시간(연,월,일,시,분,분할 초)를 넣는다.
submit	전송 버튼을 넣는다.
reset	리셋 버튼을 넣는다.
image	submit 버튼 대신 사용할 이미지 넣는다.
button	일반 버튼을 넣는다.
file	파일 첨부할 수 있는 버튼 넣는다.
hidden	사용자에게는 보이지 않는 서버로 넘겨주는 값 있는 필드 만든다.

 

 

type="text", type="password"

---

<form>
  <fieldset>
    <label>아이디: <input type="text" id="user_id" size="10"></label>
    <label>패스워드: <input type="password" id="user_pw" size="10"></label>
    <input type="submit" value="로그인">
  </fieldset>
</form>

종류	설명
size	텍스트, 비밀번호 필드의 길이를 지정한다. 최대 입력 수가 10자이고, size=5이면, 나머지 5글자는 화면에 보이지 않는다.
value	텍스트 필드 부분에 보여질 내용이다. value 속성 사용하지 않으면 빈 문자가 보여진다.
maxlength	텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수

 

type="checkbox", type="radio"

---

<form>
  <fieldset>
    <legend>과일 선택></legend>
    <label><input type="checkbox" value="apple">사과</label>
    <label><input type="checkbox" value="banana">바나나</label>
    <legend>유기농 선택></legend>
    <label><input type="radio" name="organic"value="yes">유기농</label>
    <label><input type="radio" name="organic"value="no">유기농 아님</label>
  </fieldset>
</form>

종류	설명
value	선택한 checkbox 도는 radio 값을 서버로 넘겨줘야 할 때 사용함. 영문 또는 숫자를 사용해야하며, 필수 속성이다.
checked	처음부터 체크해두고 싶은 항목에 사용

※ radio 버튼에서는 name 속성을 동일하게 지정해야한다. 이 속성은 php 등에서 폼 요소 제어하는 용도로 쓰인다. 

 

type="date", type="month", type="week"

---

날짜를 입력할 때 사용된다.

date는 연도, 월, 일

month는 연도, 월

week는 주

<form>
  <fieldset>
    <input type="date">
    <input type="month">
    <input type="week">
  </fieldset>
</form>

 

type="time", type="datetime", type="datetime-local"

---

time은 시간을 지정할 때 사용된다.

datetime과 dattime-local은 날짜+시간을 지정할 때 사용된다.

<form>
  <fieldset>
    <input type="time">
    <input type="datetime">
    <input type="datetime-local">
  </fieldset>
</form>

 

type="submit", type="reset"

---

submit은 폼에 입력한 정보를 서버로 전송한다.

reset은 폼에 입력한 정보를 모두 지운다.

<form>
  <fieldset>
    <input type="submit">
    <input type="reset">
  </fieldset>
</form>

 

type="image" type="button"

---

image는 submit 버튼과 동일 기능을하는 이미지 버튼을 만든다.

button은 submit이나 reset 버튼같은 기능이 없는 그냥 버튼의 형태만 보여준다.

버튼 클릭해서 자바스크립트 실행할 때 사용된다.

<form>
  <fieldset>
    <label>아이디: <input type="text" id="user_id" size="10"></label>
    <label>패스워드: <input type="password" id="user_pw" size="10"></label>
    <input type="image" src="image/login.png" alt="로그인">
  </fieldset>
</form>

<form>
  <fieldset>
    <input type="button" value="창 열기" onclick="window.open('example.html')">
  </fieldset>
</form>

 

type="file"

---

file은 첨부파일을 선택할 때 사용된다.

첨부파일을 서버로 보내려면 자바스크립트 등의 웹 프로그래밍 언어 사용해야 한다.

<form>
  <fieldset>
    <input type="file">
  </fieldset>
</form>

 

type="hidden"

---

hidden은 사용자에게는 보이지 않지만. submit 클릭시 폼과 함께 서버로 보낼 정보를 넘기기 위해 사용한다.

<form>
  <fieldset>
    <input type="hidden" name="이름" value="서버로 넘길 값">
  </fieldset>
</form>

 

input 태그 속성

---

• autofocus
  autofocus 속성은 웹 페이지를 불러오자마자 특정 폼에 마우스 포인터를 표시하여 바로 입력할 수 있게 해준다.
  
  
• placeholder
  입력란에 어떤 정보를 입력해야하는지 연한 글자로 보여준다.
  
  
• readonly
  사용자가 입력은 못하고 읽기만 할 수 있는 읽기 전용 필드
  
  
• required
  필수 입력 항목 지정.

<form>
  <fieldset>
    <input type="text" placeholder="아이디를 입력하세요." autofocus>
    <input type="text" readonly>
    <input type="text" required>
  </fieldset>
</form>

 

<textarea> 태그

---

폼에서 텍스트를 여러 줄 입력하는 영역

cols : 텍스트 영역의 가로 너비를 문자 단위 지정

rows : 텍스트 영역의 세로 길이를 줄 단위 지정. 줄 개수가 더 많아지면 스크롤 막대기가 생김.

<form>
  <fieldset>
    <textarea cols="10" rows="10"></textarea>
  </fieldset>
</form>

 

<select>, <option> 태그

---

드롭다운 목록을 만들어준다.

<select> 태그로 드롭다운 목록 시작/끝을 표시하고,

그 안에 <option> 태그를 이용해 항목 추가한다

value 속성으로 서버에 값을 넘겨준다.

<form>
  <fieldset>
    <select>
      <option value="값1">선택1</option>
      <option value="값2">선택2</option>
    </select>
  </fieldset>
</form>

<select> 태그의 속성

종류	설명
size	화면에 표시할 드롭다운 항목 개수
multiple	드롭다운 목록에서 2개 이상 항목 선택가능

<option> 태그의 속성

종류	설명
value	서버에 넘겨줄 값 지정
selected	기본적으로 선택할 항목

 

<datalist>, <option> 태그

---

텍스트 필드에 값을 입력하지 않고 미리 만들어 놓은 값 중에 선택할 수 있게 해준다.

<datalist> 태그로 목록의 시작/끝 표시하고,

<option> 태그를 사용해 각 데이터의 옵션 표시한다.

value 속성으로 서버에 넘겨줄 값을 지정해주는데, 이 값이 텍스트 필드에도 나타난다.

<input> 태그의 list 값과 <datalist> 태그의 id값을 동일하게 지정해주어 연결해줄 수 있다.

<form>
  <fieldset>
    <input type="text" list="datalist_id">
    <datalist id="datalist_id">
      <option value="서버로 넘길 값1">선택1</option>
      <option value="서버로 넘길 값2">선택2</option>
    </select>
  </fieldset>
</form>

 

<button> 태그

---

<button> 태그를 이용해 폼을 전송하거나 리셋하는 버튼을 생성할 수 있다.

<input type="button">과 다른 것이다. → 이건 자바스크립트 실행용 버튼

 

<form>
  <fieldset>
    <button type="submit">확인</button>
    <button type="reset">취소</button>
  </fieldset>
</form>