HTML 사용자 입력 태그 (input tag)

< HTML 사용자 입력 태그 (input tag) >

사용자가 한 줄 짜리 데이터를 입력할 부분을 생성하는 태그이다.

아이디나 비밀번호 등 이메일 주소, 전화번호, 날짜, 시간, 이미지,버튼 등 다양하게 설정 가능

---

* 사용자 입력 태그

• <input type="유형" 속성="속성 값">

  : 입력 항목 만들기

  : 닫는 태그 없음

 

✔ type="유형" 속성

  : 사용자가 입력할 수 있는 형태 지정

  : 모바일 버전 제작 시 필수 요소 → 이메일 주소, 전화번호 등 입력할 때 자동으로 가상 키보드 배열이 변경됨

 

  → hidden

    : 사용자에게 표시되지는 않지만 서버로 넘겨지는 값

    : 사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 히든 필드로 설정한다.

<input type="hidden" name="히든 필드의 이름" value="서버로 넘길 값">

 

  → text

    : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 생성

    : 주로 아이디, 이름, 주소 등에 사용

    ⇒ name 속성

      : 텍스트 필드를 구별할 수 있도록 이름 지정

    ⇒ size 속성

      : 텍스트 필드의 길이 지정, 화면에 보이는 글자 수 지정

    ⇒ value 속성 (text 유형에만 있는 속성!)

      : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용

      : 사용하지 않을 경우 빈 텍스트 필드가 보여진다.

    ⇒ minlength, maxlength 속성

      : 입력할 수 있는 최소, 최대 문자 개수 지정

<input type="text" name="필드 이름" size="50" value="텍스트 필드에 표시 될 내용" maxlength="100">

 

  → search *HTML5에서 추가된 유형

    : 검색 상자 삽입

    : 검색어 입력 시 오른쪽에 X 표시가 나타나 검색어를 손쉽게 지울 수 있다.

<input type="search" 속성="속성 값">

 

  → tel *HTML5에서 추가된 유형

    : 전화번호 입력 필드 생성

    : 사용자가 입력한 정보가 일반 텍스트가 아니라 전화번호라고 인식

<input type="tel">

 

  → url *HTML5에서 추가된 유형

    : URL 주소 입력 필드 생성

    : 공백 없이 영문자, 마침표, 슬래시(/) 로만 이루어져 있는 것을 기준으로 구분

    : http:// 로 시작하는 사이트 주소 입력

<input type="url">

 

  → email *HTML5에서 추가된 유형

    : 메일 주소 입력 필드 생성

    : JS를 이용해 별도로 @가 들어가 있는지 체크하지 않아도 자동으로 메일 주소 형식을 체크한다.

<input type="email">

 

  → password

    : 비밀번호 입력 필드 생성

    : 사용자가 입력하는 내용이 화면에 표시되지 않고 '*' 나 '•' 등으로 표시된다.

    : name, size, maxlength 속성이 있다.

<input type="password" 속성="속성 값">

 

 

시간 유형 예시

  → datetime

    : 국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 삽입

 

  → datetime-local

    : 사용자가 있는 지역을 기준으로 날짜와 시간 삽입

 

  → time

    : 사용자 지역을 기준으로 날짜(시, 분, 초, 분할 초) 삽입

<input type="time | datetime | datetime-local" value="기본 값" 속성="속성 값">

ex)

<h3>원하는 예약 시간을 선택하세요</h3>
<label>시작시간<input type="time" value="00:00" id="start1"></label>
<label>종료시간<input type="time" value="23:59" id="end1"></label>

<h3>원하는 예약 시간을 선택하세요</h3>
<lable>시작<input type="datetime-local" value="2021-10-01T00:00" id="start2"></lable>
<label>종료<input type="datetime-local" value="2021-10-31T23:59" id="end2"></label>

 

 

날짜 유형 예시

  → date

    : 사용자 지역을 기준으로 날짜(연, 월, 일) 삽입

    : 일부 브라우저에서만 지원된다. (미지원 시 js에서 별도의 코드를 작성해야 한다.)

 

  → month

    : 사용자 지역을 기준으로 날짜(연, 월) 삽입

 

  → week

    : 사용자 지역을 기준으로 날짜(연, 주) 삽입

<input type="date | month | week" value="기본 값" 속성="속성 값">
<!-- | 은 또는 의 의미이다 -->

ex)

<label><input type="date" id="start"></label>
<label><input type="date" id="end"></label>

 

  → number

     : 숫자를 조절할 수 있는 화살표(스핀 박스) 생성

     : 사용자가 입력한 내용을 숫자로 인식

     : 스핀 박스는 일부 브라우저에서만 표시된다.

<input type="number" min="~" max="~" step="숫자 간격 지정" value="화면에 기본으로 표시되는 값">

 

  → range

    : 숫자를 조절할 수 있는 슬라이드 막대 생성

<input type="range" min="기본 최솟값 0" max="기본 최댓값 100" step="숫자 간격 지정" value="필드에 표시될 초기값">

 

✔ 날짜, 시간, number, range 공통 속성

⇒ min 속성

  : 날짜나 시간의 최솟값 지정

⇒ max 속성

  : 날짜나 시간의 최댓값 지정

⇒ step 속성

  : 스핀 박스의 화살표를 누를 때마다 날짜 혹은 시간 조절 정도 지정

⇒ value 속성

  : 화면에 표시할 초기값 지정

 

 

  → color

    : 색상 표 삽입

    : 색상 값은 16진수로 표시

 

  → checkbox

    : 주어진 항목에서 2개 이상 선택 가능한 체크박스 삽입

<label> <input type="checkbox" name="계절 1" value="서버로 넘길 값 지정 1" checked> 봄 </label>
<label> <input type="checkbox" name="계절 2" value="서버로 넘길 값 지정 2"> 여름 </label>
<label> <input type="checkbox" name="계절 3" value="서버로 넘길 값 지정 3"> 가을 </label>
<label> <input type="checkbox" name="계절 4" value="서버로 넘길 값 지정 4"> 겨울 </label>

 

  → radio

    : 주어진 항목에서 1개만 선택할 수 있는 라디오버튼 삽입

    : 여러 개 중 하나만 선택하는 것이므로 관련 그룹끼리는 name 속성 값을 똑같이 설정한다.

    : value 속성은 필수 속성이므로 영문 또는 숫자로 서버에 넘길 값을 지정해야 한다.

<label> <input type="radio" name="계절" value="서버로 넘길 값 지정" checked> 봄 </label>
<label> <input type="radio" name="계절" value="서버로 넘길 값 지정"> 여름 </label>
<label> <input type="radio" name="계절" value="서버로 넘길 값 지정"> 가을 </label>
<label> <input type="radio" name="계절" value="서버로 넘길 값 지정"> 겨울 </label>

 

  → file

    : 파일을 첨부할 수 있는 버튼 삽입

<input type="file" 속성="속성 값">

 

  → submit

    : 서버 전송 버튼 생성

 

  → reset

    : 리셋 버튼 생성

<input type="submit | reset" value="버튼 내용" 속성="속성 값">

 

  → image

    : submit 버튼 대신 사용할 이미지 삽입

    : 요즘엔 이미지보다 텍스트로 처리, 브라우저 크기/용량에서 자유롭기 때문이다.

    : height, width 속성으로 이미지 너비와 높이 지정

<input type="image" src="폴더명/파일명.파일유형" alt="이미지 대체 텍스트">

 

  → button

    : 버튼 생성

    : 자체 기능이 없고 오직 버튼만 넣기 때문에 스크립트 함수 등을 연결해 사용

<input type="button" value="버튼에 표시할 내용" onclick="window.open()">
<!--onclick="window.open()" 은 새 브라우저 창을 여는 연결 함수이다.-->
<!--이 외에 window.close() 함수 등 도 있다.-->

 

반응형

 

✔ id 속성

  : 폼 요소가 중복될 경우 id 속성을 이용해 구분 및 css 편집 가능

  : id 속성 값은 최소한 한 개 이상의 문자여야 하고 공백이 존재해서는 안 된다.

ex)

<input type="text" id="user-name">
<input type="text" id="addr">

 

 

✔ autofocus 속성

  : 원하는 요소에 입력 커서 표시

ex)

<input type="text" autofocus required>

 

 

✔ placeholder 속성

  : 사용자 텍스트 입력 시 도움이 되도록 입력란에 내용 표시

<input type="text" placeholder="표시될 내용">

 

 

✔ readonly 속성

  : 읽기 전용 필드

  : 사용자는 내용을 새로 입력할 수도, 삭제할 수도 없다.

<input type="text" value="표시될 내용" readonly>
<!-- readonly는 속성 값이 true(=readonly), false 두 가지 있다.-->

 

 

✔ required 속성

  : 필수 필드 지정 속성

<input type="text" required>
<!-- 속성 값으로는 true(=required), false 가 있다.-->

 

 

✔ formaction 속성

  : 실행할 프로그램 연결

  : type="submit" or type="image"일 때만 사용 가능

 

 

✔ formenctype 속성

  : 서버 전송 시 폼 데이터 해석 방식 지정

  : type="submit" or type="image"일 때만 사용 가능

 

 

✔ formmethod 속성

  : 서버로 폼을 전송하는 방식 지정

  : <form> 태그 안에서 지정한 방식이 있더라도 무시하고 formmenthod 속성 값대로 진행

 

 

✔ formnovalidate 속성

  : 서버 전송 시 데이터 유효 여부 표시

 

 

✔ formtarget 속성

  : 서버 응답 표시 위치 지정

 

 

✔ list 속성

  : <datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열하여 표시

 

 

✔ multiple 속성

  : 두 개 이상의 값 입력

  : type="email | file" 일 때 사용

 

---

😊 Do it! HTML5 + CSS 웹 표준의 정석 책으로
독학하는 코린이의 공부 기록