본문 바로가기
Study with Yedol/HTML

HTML 사용자로부터 입력받기 input type 속성

by 예돌맨 2023. 12. 18.
반응형

 

 

앞선 포스팅에서 <input> 태그에 대해 배워보았다.

하지만 앞선 포스팅에서는

type = "text"에 대해서만 다뤄보았지만

아래 사이트만 보아도 정말 많은 input type들이 존재한다.

 

오늘 포스팅에서는 

다양한 input type 속성들에 대해 공부해 보겠다.!!!

 

 

1. 텍스트 관련 input type

: HTML의 텍스트 관련 input 타입에는 여러 가지가 있다. 이들은 사용자로부터 텍스트를 입력받는 데 사용되며, 가장 일반적인 것들은 아래 표와 같다. 이러한 텍스트 관련 input 타입들은 각각의 목적에 따라 다양한 형태로 사용된다.

Type 설명
text 기본값으로 한 줄 텍스트를 입력한다.
줄 바꿈은 입력값에서 자동으로 제거된다.
password 값이 가려진 한 줄짜리 텍스트 필드이다.
사이트가 안전하지 않은 경우 사용자에게 경고를 한다.
serach 검색 문자열을 입력하기 위한 한 줄 텍스트 필드이다.
텍스트를 입력하면 X 아이콘이 떠서 텍스트를 지울 수 있다.
 tel 전화번호를 입력하는 필드이다.
모바일로 보았을 때 자동으로 전화 키패드로 넘어가서 숫자를 입력하게 된다.

 

(1) placeholder

: 텍스트를 입력할 때 힌트를 말한다.

ex) "비밀번호를 입려하세요"

 

(2) minlength | maxlength

: 글자 최소, 최대수를 나타낸다.

 

<h1>텍스트 관련 인풋 타입</h1>

  <form action="#">
    <label for="txtIp">text</label> <br>
    <input 
      id="txtIp"
      type="text"
      placeholder="5자 이하"
      maxlength="5"
    >
    <br><br>

    <label for="pwdIp">password</label> <br>
    <input
      id="pwdIp"
      type="password"
      placeholder="4자 이상"
      minlength="4"
    >
    <br><br>

    <!-- 엑스가 뜸 -->
    <label for="srchIp">search</label> <br>
    <input id="srchIp" type="search">
    <br><br>

    <label for="tlIp">tel</label> <br>
    <input id="tlIp" type="tel">
    <br><br>
    <button type="submit">제출</button>
  </form>
<br><br><br>

 

텍스트 관련 인풋 타입
텍스트 관련 인풋 타입

 

 

 

 

 

 

2. 숫자 관련 input type

: HTML의 숫자 관련 input 타입은 주로 숫자를 입력해야 하는 경우에 사용되며, 브라우저는 입력된 값이 숫자가 아닌 경우 경고를 표시하거나 입력을 거부하게 끔 할 수 있다. 이러한 숫자 관련 input 타입들은 숫자를 입력받아야 하는 웹 양식에 자주 사용되며, 브라우저가 입력값을 검증하여 올바른 형식의 숫자만을 허용하도록 한다.

Type 내용
number 숫자를 입력하는 필드이다.
스피너(숫자를 조절하는 기능)를 표시하고 기본값을 추가한다.
range 정확한 값이 표시되지 않은 숫자를 입력한다.
허용되는 값의 범위를 정의하기 위해 min / max를 함께 사용한다.
data 날짜(년,월,일)을 입력하기 위한 기능을 한다.
그 외 datetime-local(현지시간), month(년월만표시), week(몇번째 주인지) 날짜 관련된 input type이 있다.

 

<h1>숫자 관련 인풋 타입</h1>

  <form action="#">
    <label for="numIp">number</label> <br>
    <input 
      id="numIp"
      type="number"
      min="0"
      max="10"
    >
    <br><br>

    <label for="rgIp">range</label> <br>
    <input
      id="rgIp"
      type="range"
      min="0"
      max="100"
      step="20"
    >
    <br><br>

    <label for="dtIp">date</label> <br>
    <input
      id="dtIp"
      type="date"
      min="2020-01-01"
      max="2030-12-31"
    >
    <br><br><br>

 

숫자 관련 인풋 타입
숫자 관련 인풋 타입

 

 

 

 

 

3. 체크 관련 input type

: 사용자로부터 여러 가지 선택지 중 하나 또는 여러 개를 선택할 수 있는 체크박스나 라디오 버튼을 생성하는 데 사용된다. 사용자가 선택할 수 있는 옵션을 제공하고, 웹 양식을 통해 정보를 수집하는 데 사용된다.

예를 들어, 사용자가 관심사를 선택하거나 성별을 지정하는 등의 경웨 사용된다. 또한 선택된 옵션은 웹 양식을 제출할 때 서버로 전송된다.

Type 내용
checkbox 값을 선택/선택 취소할 수 있는 기능이다.
radio 여러 항목 중에서 단일 값을 선택할 수 있는 기능이다.

 

<h1>체크 관련 인풋 타입</h1>

  <form action="#">
    <h2>checkbox</h2>
    <input 
      id="cbIp"
      type="checkbox"
      checked
    >
    <label for="cbIp">유기농</label> <br>

    <h2>radio</h2>
    <input
      type="radio"
      name="fruit"
      id="f_apple"
      value="apple"
      checked
    >
    <label for="f_apple">사과</label>
    <input
      type="radio"
      name="fruit"
      id="f_grape"
      value="grape"
    >
    <label for="f_grape">포도</label>
    <input
      type="radio"
      name="fruit"
      id="f_orange"
      value="orange"
    >
    <label for="f_orange">오렌지</label>
    <br>

    <input
      type="radio"
      name="vege"
      id="v_carrot"
      value="carrot"
      checked
    >
    <label for="v_carrot">당근</label>
    <input
      type="radio"
      name="vege"
      id="v_tomato"
      value="tomato"
    >
    <label for="v_tomato">토마토</label>
    <input
      type="radio"
      name="vege"
      id="v_eggplant"
      value="eggplant"
    >
    <label for="v_eggplant">가지</label>

  </form>

 

체크 관련 인풋 타입
체크 관련 인풋 타입

 

 

 

 

 

 

 

 

4. 기타 input type

Type 내용
file 사용자가 파일을 첨부할 수 있게 해준다.
accept 속성을 사용하여 파일 유형을 정의한다.
ex) accept="image/png, image/jpeg"
hidden 사용자의 등급과 같은 사용자가 보면 안되는 내용에 대한 것들을 숨기기 위한 기능이다.

!주의!
페이지소스보기(원본보기)에서 내용이 보이므로 보여서는 안되는 내용에 대해서는 다른 더 안전한 방법을 사용할 것
email 이메일 주소를 입력받기 위한 필드이다.
text 입력이지만 유효성 검사 매개변수와 관련성이 있다.
color 사용자가 색상을 지정할 수 있도록 한다.

 

<h1>기타 인풋 타입</h1>

  <form action="#">
    <label for="fileIp">file</label> <br>
    <input 
      id="fileIp"
      type="file"
      accept="image/png, image/jpeg"
      multiple
    >
    <br><br>

    <label for="hdnIp">hidden</label> <br>
    <input
      id="hdnIp"
      type="hidden"
    >
  </form>

  <br><hr><br>

  <form action="#">
    <label for="emlIp">email</label> <br>
    <input 
      id="emlIp"
      type="email"
    >
    <br><br>
  <form action="#">
    <label for="colIP">색상</label> <br>
    <input 
    id="colIP"
    type="color"
    >
  </form>

  <br><br>

  <button type="submit">제출</button>
  </form>

  <br>

 

기타 인풋 타입
기타 인풋 타입

 

 

 

 

 

 

5. input type의 공통 속성

: 유형에 관계없이

모든 <input> 요소는 HTML Input Element 인터페이스를 기반으로 하기 때문에

기술적으로 동일한 속성을 공유한다.

예를 들어 id라는 공통 속성은  type = "text" , type="date" , type = "radio" , 등 

텍스트, 날짜, 체크속성 type 상관없이 쓸 수 있다.

 

속성 내용 Type 유형
name 이름값을 부여하는 것이다. 모든 Type
value input의 초기값 image를 제외한 모든 Type
autocomplete 자동완성에 대한 힌트 checkbox, radio, button을 제외한 모든 Type
readonly 읽기 전용으로 편집(입력)을 할 수 없다. hidden, range, color, checkbox, radio 제외 모든 Type
disabled 값을 비활성화한다.
예를 들어 품절항목을  체크 못하게 함		 모든 Type

 

 

 

 

!참고!

readonly와 disabled의 차이점

readonly는 웹페이지를 제출할 때 값이 전송되지만, disabled는 전송이 되지 않는다.

즉, disabled는 '해당되지 않음'을 뜻하고 readonly는 '보이지만 수정할 수 없다'를 의미한다.

 

<h1>인풋 요소 공통(대부분) 속성</h1>

  <form action="#">
    <label for="valIp">value</label> <br>
    <input 
      id="valIp"
      type="text"
      value="지정됨"
    >
    <br><br>

    <label for="afIp">autofocus</label> <br>
    <input 
      id="afIp"
      type="text"
      placeholder="자동 포커스됨"
      autofocus
    >
    <br><br>

    <label for="roIp">readonly</label> <br>
    <input 
      id="roIp"
      type="text"
      value="읽기만 가능, 전송됨"
      readonly
    >
    <br><br>

    <label for="rqIp">required</label> <br>
    <input 
      id="rqIp"
      type="text"
      placeholder="필수입력!"
      required
    >
    <br><br>

    <label for="daIp">disabled</label> <br>
    <input 
      id="daIp"
      type="text"
      placeholder="입력불가, 전송 안됨"
      disabled
    >
    <br><br>
    <input
      type="radio"
      name="fruit"
      id="f_apple"
      value="apple"
      checked
    >
    <label for="f_apple">사과</label>
    <input
      type="radio"
      name="fruit"
      id="f_grape"
      value="grape"
    >
    <label for="f_grape">포도</label>
    <input
      type="radio"
      name="fruit"
      id="f_orange"
      value="orange"
      disabled
    >
    <label for="f_orange">오렌지(품절)</label>
    <br>

    <br><br>

    <button type="submit">제출</button>
  </form>

 

인풋 요소 공통(대부분) 속성
인풋 요소 공통(대부분) 속성

 

 

 

 

이상으로

input type과 input의 공통 속성에 대해 알아보았따~!

 

 

반응형

'Study with Yedol > HTML' 카테고리의 다른 글

CSS 문법 Pesudo-class(가상클래스)  (0) 2023.12.22
HTML 사용자로부터 입력 받기 form input 속성  (0) 2023.12.18
HTML <a>태그 링크 연결하기  (0) 2023.12.18
HTML 테이블(표) 만들기  (0) 2023.12.17
HTML 이미지 태그 <img>와 속성  (0) 2023.12.17

관련글

티스토리툴바