-
728x90반응형
Input 요소의 속성
input 요소의 속성
input 요소는 다양한 속성을 가질 수 있다.
HTML 에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같다.
- value
- readonly
- disabled
- maxlength
- size
HTML5 form 요소의 속성
HTML5에서 새롭게 추가된 form요소의 속성은 다음과 같다.
- autocomplete
- novalidate
HTML5 input 요소의 속성
HTML5에서 새롭게 추가된 input 요소의 속성은 다음과 같다.
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern
- placeholder
- required
- step
autocomplete 속성
autocomplete 속성은 form 요소나 input 요소에 입력된 정보를 저장할지 안 할지를 명시한다.
이 속성의 속성값이 on으로 설정되면, 브라우저는 사용자가 입력하는 정보를 자동으로 저장한다.
그리고 나서 이 후에 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성해 준다.
이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.
- text, password, range, color, date, ,datetime-local, month, week, email, url, tel, search 타입
예제123456789101112131415161718192021222324<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>autocomplete 속성을 이용한 자동 완성</h1><form action="/examples/media/request.php" autocomplete="on">이름 : <input type="text" name="name"><br>나이 : <input type="number" name="age" min="1" max="99" autocomplete="off"><br><br><a href="/html/intro">HTML 수업</a><p>input 요소에 데이터를 입력하고 전송 버튼을 누른 후에 F5키를 눌러 보세요!<br>그리고 나서 같은 정보를 입력하려고 하면 이전 데이터가 아래에 팝업될 거에요!</p><input type="submit" value="전송"></form></body></html>cs 실행결과 :
autocomplete 속성을 이용한 자동 완성
이름 :
나이 :
HTML 수업input 요소에 데이터를 입력하고 전송 버튼을 누른 후에 F5키를 눌러 보세요!
그리고 나서 같은 정보를 입력하려고 하면 이전 데이터가 아래에 팝업될 거에요!novalidate 속성
novalidate 속성은 input 요소의 속성이 아닌 form 요소의 속성이다.
이 속성은 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시한다.
url 타입이나 email 타입과 같이 자동으로 유효성 검사를 하는 input 타입에 이 속성을 사용하면 유효성 검사를 하지 않는다.
즉, 이 속성이 사용된 form 요소로 전달받은 정보(data)는 반드시 서버 측에서 따로 유효성 검사를 실시해야 한다.
예제
12345678910111213141516171819202122232425262728<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>novalidate 속성을 이용한 유효성 검사 여부 명시</h1><form action="/examples/media/request.php">여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 :<br><br><input type="url" name="url"><input type="submit" value="전송"><br></form><p><br>novalidate 속성을 적용하면 클라이언트 측의 유효성 검사를 건너뛸 수 있습니다.</p><form action="/examples/media/request.php" novalidate>여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 :<br><br><input type="url" name="url"><input type="submit" value="전송"></form></body></html>cs 실행결과 :
novalidate 속성을 이용한 유효성 검사 여부 명시
novalidate 속성을 적용하면 클라이언트 측의 유효성 검사를 건너뛸 수 있습니다.novalidate 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.
autofocus 속성
autofocus 속성은 웹 페이지가 로드(load)될 때, 속성이 적용된 input 요소에 자동으로 포커스(focus)가 가도록 해준다.
예제
12345678910111213141516171819202122<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>autofocus 속성을 이용한 오토 포커싱</h1><form action="/examples/media/request.php">사용자 : <input type="text" name="username"><br>비밀번호 : <input type="password" name="password" autofocus><br><br><input type="submit" value="전송"></form><p>페이지 로드 시 자동으로 포커스가 비밀번호를 입력하는 input 요소에 가도록 합니다.</p></body></html>cs 실행결과 :
autofocus 속성을 이용한 오토 포커싱
페이지 로드 시 자동으로 포커스가 비밀번호를 입력하는 input 요소에 가도록 합니다.
autofocus 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.
form 속성
form 속성은 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시해 준다.
포함할 form 요소의 id 속성값을 공백으로 연결하여, 둘 이상의 form 요소에 포함할 수도 있다.
예제
123456789101112131415161718192021222324<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>form 속성</h1><form action="/examples/media/request.php" id="user">사용자 : <input type="text" name="username"><br><br><input type="submit" value="전송"></form><p>아래의 비밀번호를 입력하는 input 요소는 위치상으로는 form 요소에 포함되지 않습니다.<br>하지만 form 속성을 이용하여 하나의 form으로 인식할 수 있습니다.</p>비밀번호 : <input type="password" name="password" form="user"><br></body></html>cs 실행결과 :
form 속성
아래의 비밀번호를 입력하는 input 요소는 위치상으로는 form 요소에 포함되지 않습니다.
하지만 form 속성을 이용하여 하나의 form으로 인식할 수 있습니다.비밀번호 :
form 속성은 익스플로러에서 지원하지 않는다.formaction 속성
formaction 속성은 입력한 정보(data)를 전송할 때 정보가 전달될 서버 측 파일을 명시한다.
즉, formaction 속성은 form 요소의 action 속성을 덮어쓰게 된다.
이 속성을 사용하면 입력된 정보를 넘겨줄 서버 측 파일을 input 요소에서 바꿀수 있게 된다.
이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.
예제12345678910111213141516171819202122<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>formaction 속성</h1><form action="/examples/media/request.php">사용자 : <input type="text" name="username"><br>비밀번호 : <input type="password" name="password"><br><br><input type="submit" value="전송"><input type="submit" value="관리자 권한으로 전송" formaction="/examples/media/request_admin.php"><br></form></body></html>cs 실행결과 :
formaction 속성
사용자 :
비밀번호 :
formaction 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.formenctype 속성
formenctype 속성은 입력한 정보(data)를 전송할 때 암호화하는 방법을 명시한다.
즉, formaction 속성은 form 요소의 enctype 속성을 덮어쓰게 된다.
formenctype 속성은 form 요소의 method 속성이 post일 때만 적용된다.
이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.
예제
1234567891011121314151617181920<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>formenctype 속성</h1><form action="/examples/media/request_enctype.php" method="post">사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br><input type="submit" value="암호화하여 전송" formenctype="multipart/form-data"><br></form></body></html>cs 실행결과 :
formenctype 속성
사용자 이름을 입력해주세요 :
formenctype 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.formnovalidate 속성
formnovalidate 속성은 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시한다.
즉, formnovalidate 속성은 form 요소의 novalidate 속성을 덮어쓰세 된다.
이 속성은 오직 submit 타입에서만 사용할 수 있다.
예제
123456789101112131415161718192021<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>formnovalidate 속성</h1><form action="/examples/media/request.php">여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 : <input type="url" name="url"><br><br><input type="submit" value="전송"><input type="submit" value="novalidate 방식으로 전송" formnovalidate><br></form></body></html>cs 실행결과 :
formnovalidate 속성
여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 :
formnovalidate 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.formtarget 속성
formtarget 속성은 입력한 정보(data)를 전송한 후, 그 결과로 받은 응답 페이지를 어디에 출력할지를 명시한다.
즉, formtarget 속성은 form 요소의 target 속성을 덮어쓰게 된다.
이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.
예제
123456789101112131415161718192021<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>formtarget 속성</h1><form action="/examples/media/request.php">사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br><input type="submit" value="전송"><input type="submit" value="응답 화면을 새창에 표시" formtarget="_blank"><br></form></body></html>cs 실행결과 :
formtarget 속성
사용자 이름을 입력해주세요 :
formtarget 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.height와 width 속성
<input>태그의 type 속성이 "image"일 경우에는 height 속성과 width 속성을 사용하여 이미지의 높이와 너비를 명시할 수 있다.
따라서 이 속성은 오직 image 타입에서만 사용할 수 있다.
또한, 이미지를 클릭하면 클릭한 곳의 x좌표와 y좌표가 x와 y라는 이름으로 같이 전송된다.
예제
12345678910111213141516171819202122<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>height와 width 속성을 이용한 이미지의 크기 설정</h1><form action="/examples/media/request.php">사용자 : <input type="text" name="username"><br>비밀번호 : <input type="password" name="password" autofocus><br><br><input type="image" src="/examples/images/img_penguin.png" alt="전송" height="26" width="26">그림을 클릭하시면 전송됩니다!</form></body></html>cs 실행결과 :
height와 width 속성을 이용한 이미지의 크기 설정
사용자 :
비밀번호 :
그림을 클릭하시면 전송됩니다!list 속성
list 속성은 해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하는 datalist 요소와 관련이 있다.
input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치해야만 연결이 된다.
예제
1234567891011121314151617181920212223242526<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>list 속성을 이용한 datalist 요소</h1><form action="/examples/media/request.php"><input list="lectures" name="lecture"><datalist id="lectures"><option value="HTML"><option value="CSS"><option value="JAVA"><option value="C++"></datalist><input type="submit" value="전송"></form></body></html>cs 실행결과 :
list 속성을 이용한 datalist 요소
list 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.min과 max속성
min속성과 max속성은 input 요소에 입력할 수 있는 최소값과 최대값을 명시한다.
이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.
-number, range, date, time, datetime-local, month, week 타입
예제12345678910111213141516171819202122<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>min과 max 속성을 이용한 입력값 제한</h1><form action="/examples/media/request.php">여러분이 가장 좋아하는 숫자는 몇인가요?<br>(단, 1부터 9까지에서 골라주세요!)<br><br><input type="number" name="favnum" min="1" max="9"><br><br><input type="submit" value="전송"></form></body></html>cs 실행결과 :
min과 max 속성을 이용한 입력값 제한
여러분이 가장 좋아하는 숫자는 몇인가요?
(단, 1부터 9까지에서 골라주세요!)min과 max속성은 파이어폭스, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.multiple 속성
multiple 속성은 사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용한다.
이 속성은 email 타입과 file 타입에서만 사용할 수 있다.
예제
12345678910111213141516171819202122<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>multiple 속성을 이용한 다중 파일 전송</h1><form action="/examples/media/request.php">서버로 전송할 파일을 선택해주세요 :<br>(여러 개의 파일 선택도 가능해요!)<br><br><input type="file" name="uploadfile" multiple><br><br><input type="submit" value="전송"></form></body></html>cs 실행결과 :
multiple 속성을 이용한 다중 파일 전송
서버로 전송할 파일을 선택해주세요 :
(여러 개의 파일 선택도 가능해요!)multiple 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.pattern 속성
pattern 속성은 input 요소에 입력된 값을 검사하기 위한 정규 표현식(regular expression)을 명시한다.
정규 표현식이란 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴을 의미한다.
이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.
-text, password, email, tel, url 타입
예제
12345678910111213141516171819202122<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>pattern 속성을 이용한 입력 형식 제한</h1><form action="/examples/media/request.php">여러분의 이메일 주소를 입력해 주세요 :<br><br><input type="email" name="email"pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="이메일 양식"><input type="submit" value="전송"></form></body></html>cs 실행결과 :
pattern 속성을 이용한 입력 형식 제한
여러분의 이메일 주소를 입력해 주세요 :
위의 예제에서 사용된 정규 표현식의 의미는 다음과 같다.- [a-zA-Z0-9] : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나올 수 있음.
- [@] : '@' 문자만이 나와야 함.
- [.] : '.' 문자만이 나와야 함.
- [.]* : '.' 문자가 나와도 되고 나오지 않아도 됨.
- [a-zA-Z0-9]* : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨.
따라서 위와 같은 정규 표현식을 사용하면, 해당 문자열이 이메일 양식에 맞는 문자열인지를 확인할 수 있다.pattern 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.placeholder 속성
placeholder 속성은 input 요소에 입력되어야 할 값에 대한 힌트를 제공한다.
이러한 힌트는 예시가 될 수도 있고, 입력 형식에 대한 설명이 될 수도 있다.
placeholder 속성값은 해당 입력 필드에 포커스가 오게 되면 더 이상 표시되지 않는다.
이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.
-text, password, email, tel, url, search 타입
예제
123456789101112131415161718192021<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>placeholder 속성을 이용한 힌트 제공</h1><form action="/examples/media/request.php">사용자 : <input type="text" name="username" placeholder="홍길동"><br>비밀번호 : <input type="password" name="password" placeholder="1234"><br><br><input type="submit" value="전송"></form></body></html>cs 실행결과 :
placeholder 속성을 이용한 힌트 제공
사용자 :
비밀번호 :required 속성
required 속성은 반드시 입력되어야 할 필수 input 요소를 명시한다.
이 속성이 설정된 모든 input 요소에 입력값이 존재해야만 서버로 전송(submit) 할 수 있다.
예제123456789101112131415161718192021<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>required 속성을 이용한 필수 입력 설정</h1><form action="/examples/media/request.php">이름 : <input type="text" name="name" required> (이름은 반드시 입력해야 해요!)<br>나이 : <input type="number" name="age" min="1" max="99"><br><br><input type="submit" value="전송"></form></body></html>cs 실행결과 :
required 속성을 이용한 필수 입력 설정
이름 : (이름은 반드시 입력해야 해요!)
나이 :required 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.step 속성
step 속성은 input 요소에 입력할 수 있도록 허용된 숫자 간격을 명시한다.
예를 들어, step 속성값이 2이면, 입력이 허용되는 숫자는 ..., -4, -2, 0, 2, 4,... 가 된다.
이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.
- number, range, date, time, datetime-local, month, week 타입
예제12345678910111213141516171819202122<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>HTML5 Input Attributes</title></head><body><h1>step 속성을 이용한 입력 간격 설정</h1><form action="/examples/media/request.php">여러분이 가장 좋아하는 숫자는 몇인가요?<br>(단, -30부터 30사이에서 5단위로 골라주세요!)<br><br><input type="number" name="favnum" min="-30" max="30" step="5"><br><br><input type="submit" value="전송"></form></body></html>cs 실행결과 :
step 속성을 이용한 입력 간격 설정
여러분이 가장 좋아하는 숫자는 몇인가요?
(단, -30부터 30사이에서 5단위로 골라주세요!)step 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.728x90반응형'Mark Up > Html' 카테고리의 다른 글
플러그인 (0) 2018.10.10 멀티미디어 파일 형식/비디오 (video)/오디오(audio) (0) 2018.10.10 Input 요소의 타입 (0) 2018.10.05 HTML과 XHTML (0) 2018.10.05 HTML 과 자바스크립트 (0) 2018.10.05
