HTML 태그 - input type

※ 예제로 작성된 부분의 id와 name, label for 부분은 DB, 서버로 넘어갈 때 필요한 요소로 연습 시에는 생략가능 

 

• <input type="text"> 기본값  : 한 줄 텍스트 입력 칸

<form>
  <label for="fname">이름:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">성:</label><br>
  <input type="text" id="lname" name="lname">
</form>

---

• <input type="password"> : 암호 입력칸(입력 시 보통 동그라미 형태로 가려져서 출력)

<form>
  <label for="username">사용자이름:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">비밀번호:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

---

• <input type="button"> : 버튼

<input type="button" value="입력 시 원하는 문구 출력">

<input type="button" value="클릭 해주세요!">

---

• <input type="submit">  :  서버에 form 데이터를 제출하기 위한 버튼을 정의 (DB와 연관된 부분)

<form action="/action_page.php">
  <label for="fname">이름:</label><br>
  <input type="text" id="fname" name="fname" value="jessy"><br>
  <label for="lname">성:</label><br>
  <input type="text" id="lname" name="lname" value="Lee"><br><br>
  <input type="submit" value="제출하다">
</form>

---

• <input type="reset"> : 모든 양식 값을 기본값으로 재설정하는 재설정 버튼(초기화)

<form action="/action_page.php">
  <label for="fname">이름:</label><br>
  <input type="text" id="fname" name="fname" value="jessy"><br>
  <label for="lname">성:</label><br>
  <input type="text" id="lname" name="lname" value="Lee"><br><br>
  <input type="submit" value="제출하다">
  <input type="reset">
</form>

---

• <input type="radio"> : 라디오 버튼, 하나만 선택 가능

 

<p>위의 HTML 코드가 브라우저에 표시되는 방식은 다음과 같습니다.</p>

<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">자바스크립트</label>
</form>

---

• <input type="checkbox"> : 확인란, 다중 선택 가능

<p>위의 HTML 코드가 브라우저에 표시되는 방식은 다음과 같습니다.</p>

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> 자전거</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> 자동차</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> 비행기</label><br><br>
  <input type="submit" value="제출">
</form>

---

• <input type="number"> : 숫자칸, 칸옆에 자동적으로 스크롤이 생김

<input type="number"  min="최솟값" max="최댓값"> : min과 max 범위를 지정할 수 있음

<form action="/action_page.php">
  <label for="quantity">수량(1에서 5까지만):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

---

• <input type="range"> : 정확한 값이 필요하지 않은 숫자를 입력하기 위한 슬라이더 컨트롤 기본 범위는 0~100

<input type="range" min="최솟값" max="최댓값" step="건너뛸 값"> : min과 max, 건너뛸 값의 범위를 지정할 수 있음

<form action="/action_page.php" method="get">
  <label for="vol">슬라이드 숫자 선택(0 ~ 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit" value="입력">
</form>

---

• <input type="tel"> : 전화번호 입력 칸

<input type="range"   placeholder="보기 표시"> : 입력받아 할 양식을 미리 보기처럼 지정할 수 있음

<input type="range"   pattern="입력받아할 정규식"> : 입력해야 받은 값을 확인할 정규식을 지정합 지정할 수 있음

입력값이 다를 경우 요청한 형식과 일치시키라는 메시지가 뜬다. 예시는 - 하이픈이 포함되지 않아서 뜸.

 

<form action="/action_page.php">
  <label for="phone">전화번호:</label><br><br>
  <input type="tel" id="phone" name="phone" 
  placeholder="000-0000-0000" 
  pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" required>
  <br><br>
  <input type="submit" value="입력">
</form>

---

• <input type="month"> : 년, 월 입력칸
• 브라우저 지원에 따라서 날짜 선택기가 나타날 수 있고, 지원되지 않을 수도 있다.

<form action="/action_page.php">
  <label for="bdaymonth">생일입력(년/월):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="입력">
</form>

---

• <input type="week"> : 주 입력 칸
• 브라우저 지원에 따라서 날짜 선택기가 나타날 수 있고, 지원되지 않을 수도 있다.

 

 

<form action="/action_page.php">
  <label for="week">몇 주인지 입력하기</label>
  <input type="week" id="week" name="week">
  <input type="submit" value="입력">
</form>

 

 

---

• <input type="date"> : 날짜 입력 칸
• 브라우저 지원에 따라서 날짜 선택기가 나타날 수 있고, 지원되지 않을 수도 있다.

<input type="date"  min="2000-01-01"> : 2000년 1월 1일 이후 날짜 선택 가능

<input type="date"max="1995-01-01"> : 1995년 1월 1일 이전 날짜 선택 가능

<form action="/action_page.php">
  <label for="birthday">생일:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit" value="입력">
</form>

---

• <input type="time"> : 시간 입력 칸
• 브라우저 지원에 따라서 시간 선택기가 나타날 수 있고, 지원되지 않을 수도 있다.

 

<form action="/action_page.php">
  <label for="appt">시간선택:</label>
  <input type="time" id="appt" name="appt">
  <input type="submit" value="입력">
</form>

 

 

 

---

• <input type="datetime-local"> : 시간대가 없는 날짜 및 시간 입력 칸
• 브라우저 지원에 따라서 날짜, 시간 선택기가 나타날 수 있고, 지원되지 않을 수도 있다.

 

<form action="/action_page.php">
  <label for="birthdaytime">생일(날짜 시간):</label>
  <input type="datetime-local" 
  id="birthdaytime" name="birthdaytime">
  <input type="submit" value="입력">
</form>

 

 

---

• <input type="color"> : 색상 입력 칸
• 브라우저 지원에 따라서 색상 선택기가 나타나지 않을 수도 있다.

 

<form action="/action_page.php">
  <label for="favcolor">좋아하는 색 선택하기:</label>
  <input type="color" id="favcolor" 
  name="favcolor" value="#ff0000">
  <input type="submit" value="선택">
</form>

---

• <input type="image"> :  이미지 제출 버튼

• 참고 : 이미지 버튼을 누를 때, 마우스 클릭한 이미지의  X와 Y좌표가 서버에 전송된다.

<form action="/action_page.php">
  <label for="fname">이름: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">&nbsp&nbsp&nbsp성: </label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

---

• <input type="email"> : 이메일 입력칸, @를 넣지 않으면 넣으라는 문구가 저절로 마우스포인터에 출력된다.

• 브라우저 지원에 따라 전자 메일 주소는 제출 시 자동으로 확인하며, @를 넣지 않으면 문구가 뜬다.

• 일부 스마트폰은 이메일 유형을 인식하고 이메일 입력과 일치하도록 키보드에 ".com"을 추가해주기도 한다.

<form action="/action_page.php">
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="제출하다">
</form>

---

• <input type="file"> : 내 컴퓨터에 있는 파일을 선택하여 업로드할 수 있는 버튼

 

파일을 선택하면 버튼 옆에 선택된 파일이 보인다.

 

<form action="/action_page.php">
  <label for="myfile">파일 선택하기:</label>
  <input type="file" id="myfile" name="myfile">
</form>

 

 

 

---

• <input type="url"> : URL 주소를 입력받아야 할 때 사용

• 브라우저 지원에 따라 URL 칸은 제출 시 자동으로 검증될 수 있다.
• 일부 스마트폰은 URL 유형을 인식하고 키보드에 ".com"을 추가하여 URL 입력과 일치시킨다.

<form action="/action_page.php">
  <label for="homepage">블로그 주소입력:</label>
  <input type="url" id="homepage" name="homepage">
  <input type="submit" value="입력">
</form>

 

---

• <input type="hidden"> : 숨겨진 입력 칸, text 입력 칸과 모양은 같다.
• 사용자에게 표시되지 않지만 양식이 제출될 때(버튼 클릭 시) 데이터가 전송된다.

참고 :  숨겨진 값은 사용자에게 표시되지 않지만, 모든 브라우저의 개발자 도구 또는 "소스 보기" 기능을 사용하여 볼 수 있고 편집할 수 있다. 보안의 형태로 숨겨진 입력을 사용하면 안 된다!

<form action="/action_page.php">
  <label for="fname">이름:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="입력">
</form>

---

• <input type="search"> : 검색 칸, text 입력칸과 모양이 같다.

<form action="/action_page.php">
  <label for="gsearch">구글 검색:</label>
  <input type="search" id="gsearch" name="gsearch">
  <input type="submit" value="검색">
</form>