• Q&A
  • 회원가입
  • 로그인

[form] HTML - <input> 태그 ★★★ - 입력창 + 입력버튼 (= input태그 = 인풋태그) ※ 자동포커스 (= 오토포커스 = 커서자동 = 자동커서 autofoucs) + 자동완성해제 (autocomplete="off")

목차
  1. <input> 예제 - 입력창
  2. <input> 정의
  3. <input> 구문
  4. <input> 속성
  5. <input type="hidden"> vs. <input type="..." style="display:none"> 차이점
  6. <input> 예제 - placeholder 글자색
  7. <input> 예제 - width, height 속성
  8. <input> 예제 - 비밀번호 입력 시 ●●●●● 특수문자 안 보이는 에러 해결
  9. <input> 예제 - 입력한 비밀번호 보이게 노출 설정
  10. <input> 예제 - IE 브라우저에서 입력창 우측의 x 버튼 제거

 

<input> 예제 - 입력창 

 
<p>홈짱닷컴 (homzzang.com) 로그인</p>
<form action="login.asp">
  <p><label for="id">아이디 : </label><input type="text" name="id" id="id"></p>
  <p><label for="password">비밀번호 : </label><input type="password" name="password" id="password"></p>
  <input type="submit" value="확인">
</form>
 

<input> 정의

 
사용자의 데이터를 입력하는 서식 폼이나, 입력된 테이터를 전송하는 확인 버튼을 만들 때 사용

 


 
1. 
서식을 입력할 때 필요한 입력 서식으로 사용시 <form> 태그 안에 사용.
 
2. 
type 속성의 여러 가지 속성값에 따라, 다양한 용도로 사용 가능. 아래 type 속성 참고.
 
3. 
<label> 태그 : <input> 태그 꼬리표(= 설명문).
 
4. 
전송(=확인) 버튼 만들 때, 
<a> 태그 대신 <input>태그 이용하는 게 브라우저나 스크린 리더기가 읽어들일 때 좋음.
 
5. 
종료 태그 없이 단독 사용. 
cf. XHTML에서는 끝에 / 붙여 <input />처럼 사용. 
 
 

<input> 구문

 
<input 속성="속성값"> 
 
cf. XHTML 경우, <input 속성="속성값" />
 

<input> 속성

 속성 
 속성값  쓰임새  비고
 
 accept
 
 audio/*
 video/*
 image/*
 MIME_type 
 type="file"일 때, 서버에서 받을 파일의 타입 지정
 
 
 align
 
 left
 right
 top
 middle
 bottom
  type="image"일 때, 입력 이미지의 정렬 지정  HTML5 제외
 alt 
 글자
 type="image"일 때, 이미지 대신 사용할 대체 글자 (영문자) 
 
 
 checked
 
  checked
 type="checkbox"이거나  type="radio"일 때,
 웹페이지가 로딩될 때 미리 체크되어 보이게 할 때 사용 
 
 
 disabled
 
  disabled
 사용자가 폼 입력을 선택 수정 못하며, 
 데이터 값도 전송 안됨. 
 
 
 maxlength
 
  숫자
 type="text"이거나  type="password"일 때,
 입력 가능한 최대 글자수 
 
 
 name
 
  글자
 다른 input 입력창과 구별 위해 이름을 붙임. (영문자)
 php나 JavaScript 사용시 변수를 주고 받을 때 사용.  
 
 
 readonly
 
  readonly
 사용자가 input 입력값을 선택 수정 못하나,
 데이터 값은 전송됨. 
 
 size 
 숫자  input 입력창의 문자가 입력될 가로 너비를 지정  
 src 
 URL 주소  type="image"일 때, 버튼으로 사용할 이미지 주소  
 
 type
 
 
 button
 checkbox
 color
 date
 datetime
 datetime-local
 email
 file
 hidden
 image
 month
 number
 password
 radio
 range
 reset
 search
 submit
 tel
 text
 time
 url
 week

 button : 버튼으로 사용
 checkbox : 체크박스로 사용 (여러 개 선택 가능) 자동 함수
 color : 색깔
 date : 날짜
 datetime : 날짜 시간
 datetime-local : 시간대 없는 날짜와 시간
 email : 이메일 (이메일 주소나 이메일 주소 리스트)
 file : 파일 (파일 업로드 버튼 등 만들 때 사용)
 hidden : 사용자에겐 보이지 않는 값
 image : 이미지 (이미지 주소 src 속성과 함께 사용)
 month : 년달 (시간대 없는 년과 달)
 number : 숫자 (특정 숫자 입력받을 때)
 password : 비밀번호 (※ 일부 폰트 경우 ● 특수문자 안 보임)
 radio : 라디오 버튼 (오직 한 개만 선택 가능)
 range : 범위 (정확한 숫자가 필요없을 때 사용)
 reset: 리셋 (입력한 값 모두 사라지게 초기화)
 search : 검색 (줄바꿈 없는 텍스트)
 submit : 전송
 tel : 전화번호
 text : 글자 (줄바꿈 없는 텍스트)
 time : 시간 (시간대 없는 시간)
 url : URL 주소
 week : 년 주 (시간대 없는 년과 주)
 
 value 
 글자  입력 창에 입력되는 입력 값  
 
 autocomplete
 
 
 on (기본값)
 
 off
 
 입력 데이터의 자동 완성 여부 지정.
 보안에 민감하지 않은 사항은 자동 완성되는 속성값 on을 사용하고,
 보안에 민감하지 않은 사항은 자동 완성 안되는 속성값 off 사용. 
 autocomplete='off'  : 크롬자동완성기능 막기
 HTML5 추가
 
 autofocus
 
 autofocus
 입력 페이지가 로딩될 때, 입력 커서가 입력 창에 위치하도록 지정. (= 자동포커스 = 오토포커스) IE10 이상 가능.
 
 HTML5 추가
 
 form
 
 form_id
input 입력창이 <form> 태그 밖에 위치할 때,
 input 태그가 어떤 <form>태그에 속하는지 소속을 지정
 즉, <form>태그에 id 속성을 붙인 후, 그 아이디를 적어주면 됨.
 예를 들어, <form id=login>경우, <input form=login>으로 적음. 
 HTML5 추가
 
 formaction
 
 URL
 type=”submit” 이나 type=”image” 일 때,
  입력된 테이터 값을 처리하는 페이지의 주소를 적어 줌. 
 HTML5 추가
 
 formenctype
 
 application/x-www-form-urlencoded
 
 multipart/form-data
 
 text/plain 
 type=”submit”이거나 type=”image”일 때,
 입력 데이터 값을 어떻게 암호화 시킬건지 지정
 HTML5 추가
 
 formmethod
 
 
get 
post
 
 입력된 폼 데이터를 전송할 때 사용할
 http 방법을 정하는 속성.
 
 get (기본값)
 브라우저에 보이는 방법으로  보안에 취약.  
 일반적인 검색 및 카운트 자료로 시용시
 주로 사용됨.
 
 post
 사용자가 못 보게하는 방법으로
보안에 강함.
 사용자 정보를 DB화 할 때 주로 이용.
 이 방법일 때, 상단의   formenctype 속성 이용. 
 HTML5 추가
 formnovalidate
 formnovalidate
 입력된 테이터의 유효성을 검사할지
 말지를 지정하는 속성 
 HTML5 추가
 
 formtarget
 
 _blank (새 창)
 _self (현재 창)
 _parent (부모 프레임 창)
 _top (최상단 프레임 창)
 framename (별도 프레임 지정) 
 type=”submit” 이나 type=”image”일 때,
 입력된 데이터 처리 결과를 어떤 페이지로
 보여줄지 지정하는 속성
 HTML5 추가
 height 
 px 단위  type=”image”일 때, 이미지의 높이(= 세로길이)
 단위는 적을 필요 없음.
 HTML5 추가
 
 list
 
 datalist_id
 입력 데이터 값의 선택 사항을 제안해주는 속성으로,  HTML5에서 새로 생긴 <datalist> 태그의 id값을
 적어주면 됨.
 
<select> 태그의 option 속성과 비슷하다고 보면 됨.  
 HTML5 추가
 
 max
 
 숫자 
 날짜 
 입력 데이터의 최댓값  HTML5 추가
 maxlength 
 숫자  입력창에 입력 가능한 최대 글자 수  HTML5 추가
 min
 숫자 
 날짜 
 입력 데이터의 최솟값  HTML5 추가
 multiple 
 multiple ① 유저가 하나 이상의 입력 값을 입력 가능.
② emailfile 타입만 multiple 속성 지원.
email 타입 경우, 쉼표( , ) 구분자로 여러 이메일 동시 입력 가능.
file 타입 경우, Ctrl키・Shift 키 이용해 여러 파일 동시 선택 가능.
⑤ multiple 미지정 시, 기본값 false 적용. (※ 지정 시, true 적용.)
 HTML5 추가
 
  pattern
 
 regexp
 입력 값이 다시 체크된다는 규칙적인 표시 지정 
 regexp(regular expression: 규칙적인 표시) 
 HTML5 추가
 
 placeholder
 
 글자  입력 값으로 입력 가능한 데이터 값 힌트 표시
 https://homzzang.com/b/html-145
 HTML5 추가
 
 required
 
  required
 입력 데이터 값 전송 전,
 반드시 채워져야 할 데이터 임을 표시 
 HTML5 추가
 
 step
 
 숫자
 입력 가능한 데이터 값의 입력 간격
 (예)3일 경우, 1 4 7 10...식으로 입력 가능) 
 HTML5 추가
 width 
 px 단위   type=”image”일 때, 이미지 너비 (= 가로길이)
  단위는 적을 필요 없음.
 HTML5 추가
autocapitalize="off"  : 모바일(특히 iOS)에서 첫 글자 대문자 입력 해제
※ <input> 태그는 전역속성과 이벤트속성 지원.
 

<input type="hidden"> vs. <input type="..." style="display:none"> 차이점

<input type="hidden">

 

사용자 입력값을 애시당초 안 받도록 설계됨. (기본 value값 사용)

∴ 입력값 유효성 검사 대상 X

∴ 자동완성 대상 X

∴ 사용자 입력 관련한 이벤트 대상 X

 


<input type="..." style="display:none">

또는, <input type="..." style="visibility:hidden">

 

눈에 보이진 않지만, 사용자 입력값 받도록 설계된 걸로 간주.

∴ 입력 유효성 검사 대상 O

∴ 자동완성 대상 O

∴ 사용자 입력 관련한 이벤트 대상 O

 

 

<input> 예제 - placeholder 글자색


<style>
input:-ms-input-placeholder { color: red; } // IE 10 이상 
input::-webkit-input-placeholder { color: red; } //  Webkit, Blink, Edge
input::-moz-placeholder { color: red; } // Mozilla Firefox 4 부터 18
input::-moz-placeholder { color: red; } // Mozilla Firefox 19 이상
</style>

<input type="text" placeholder="입력 예제" />

결과보기

 

<input> 예제 - width, height 속성

 

<input type="image" src="logo.gif" alt="Submit" width="48" height="48">

 

※ 단위는 따로 적을 필요 없이, px 단위 숫자 기재

 

<input> 예제 - 비밀번호 입력 시 ●●●●● 특수문자 안 보이는 에러 해결

 

에러 증상: 비밀번호 입력 시 ●●●●● 대신 빈 공백으로 보임.

에러 원인: 일부 폰트 (예: Nanum Square)에서 증상 발생.

에러 해결: font-family (폰트 종류) 변경하면 정상 출력 됨.

 


예제 - 정상 출력 X

 

<style>

@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);

input {font-family: 'Nanum Square';}

</style>

 

<input type="password">

 

결과보기


예제 - 정상 출력 O

 

<style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

input {font-family: 'Open Sans', sans-serif;}

</style>

<input type="password">

 

결과보기

 

<input> 예제 - 입력한 비밀번호 보이게 노출 설정

 

수정 전

<input type="password" ...

 

수정 후

<input type="text" ...

 

※ 보안 위해, 되도록이면 변경 자제.

 

<input> 예제 - IE 브라우저에서 입력창 우측의 x 버튼 제거

※ 아래 CSS 추가.

 

input[type=text]::-ms-clear {display:none;}

또는,

input[type=text]:-ms-clear {display:none;}

 

PS. 원칙은 콜론 2개(::)가 맞으나, 콜론 1개(:)가 더 호환성이 좋음.

 

PS.

 

mdn input 강의

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input (영어)

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input (한국어)

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012