HTML 입문 | HTML5 시작 | HTML5 입력(input) 요소 속성(attributes)

Tags:

HTML5 form 요소 속성

HTML5에서 새롭게 추가된 form 요소의 속성은 다음과 같다.

  1. autocomplete
  2. novalidate

HTML5 input 요소 속성

HTML5에서 새롭게 추가된 input 요소의 속성은 다음과 같다.

  1. autocomplete
  2. autofocus
  3. form
  4. formaction
  5. formenctype
  6. formmethod
  7. formnovalidate
  8. formtarget
  9. height and width
  10. list
  11. min and max
  12. multiple
  13. pattern
  14. placeholder
  15. required
  16. step

autocomplete 속성

autocomplete 속성은 form 요소나 input 요소에 입력된 정보를 자동 저장할지에 대한 여부를 명시한다.
이 속성의 값이 on으로 설정되면, 브라우저는 사용자가 입력하는 정보를 자동으로 저장한다.
그 이 후에는 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성해 준다.

이 속성은 아래와 같은 input 타입에서만 사용할 수 있다.

  • text, search, url, tel, email, password, datepickers, range, color
<form action="/" autocomplete="on">
  이름 : <input type="text" name="name"><br>
  이메일 : <input type="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

코드 실행

novalidate 속성

novalidate 속성은 input 요소의 속성이 아닌 form 요소의 속성이다.
이 속성은 입력한 정보(data)를 전송할 때, 그 정보가 유효성 검사에 대한 여부를 명시한다. url 타입이나 email 타입과 같이 자동으로 유효성 검사를 하는 input 타입에 이 속성을 기입하면 유효성 검사를 하지 않는다.
즉, 이 속성이 사용된 form 요소로 전달받은 정보(data)는 반드시 서버 사이드에서 따로 유효성 검사를 실시해야 한다.

<form action="/" novalidate>
  이메일 : <input type="email" name="email">
  <input type="submit">
</form>

코드 실행

novalidate 속성은 Internet Explorer 9 이전 버전, Safari 10 버전에서 지원되지 않는다.

autofocus 속성

autofocus 속성은 웹 페이지가 로드(load)될 때, 속성이 적용된 input 요소에 자동으로 포커스(focus)가 가도록 해준다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password" autofocus><br><br>
</form>

autofocus 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

form 속성

form 속성은 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시해 준다.
포함할 form 요소의 id 속성값을 공백으로 연결하여, 둘 이상의 form 요소에 포함할 수도 있다.

<form action="/examples/media/request.php" id="user">
    사용자 : <input type="text" name="username"><br><br>
</form>
...
비밀번호 : <input type="password" name="password" form="user">

form 속성은 익스플로러에서 지원하지 않는다.

formaction 속성

formaction 속성은 입력한 정보(data)를 전송할 때 정보가 전달될 서버 사이드 파일을 명시한다.
즉, formaction 속성은 form 요소의 action 속성을 덮어쓰게 된다.
이 속성을 사용하면 입력된 정보를 넘겨줄 서버 사이드 파일을 input 요소에서 바꿀 수 있게 된다.

이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password"><br><br>
    <input type="submit" value="관리자 권한으로 전송" formaction="/examples/media/request_admin.php"><br>
</form>

formaction 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

formenctype 속성

formenctype 속성은 입력한 정보(data)를 전송할 때 암호화하는 방법을 명시한다.
즉, formaction 속성은 form 요소의 enctype 속성을 덮어쓰게 된다.

formenctype 속성은 form 요소의 method 속성이 post일 때만 적용된다.
이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<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>

formenctype 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

formmethod 속성

formmethod 속성은 입력한 정보(data)를 전송할 때 사용하는 http 메소드(method)를 명시한다.
즉, formmethod 속성은 form 요소의 method 속성을 덮어쓰게 된다.

이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php" method="get">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="post 방식으로 전송" formmethod="post"><br>
</form>

formmethod 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

formnovalidate 속성

formnovalidate 속성은 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시한다.
즉, formnovalidate 속성은 form 요소의 novalidate 속성을 덮어쓰게 된다.

이 속성은 오직 submit 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 : <input type="url" name="url"><br><br>
    <input type="submit" value="novalidate 방식으로 전송" formnovalidate><br>
</form>

formnovalidate 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

formtarget 속성

formtarget 속성은 입력한 정보(data)를 전송한 후, 그 결과로 받은 응답 페이지를 어디에 출력할지를 명시한다.
즉, formtarget 속성은 form 요소의 target 속성을 덮어쓰게 된다.

이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.


<form action="/examples/media/request.php">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="응답 화면을 새창에 표시" formtarget="_blank"><br>
</form>

formtarget 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

height와 width 속성

<input>태그의 type 속성이 “image"일 경우에는 height 속성과 width 속성을 사용하여 이미지의 높이와 너비를 명시할 수 있다.
따라서 이 속성은 오직 image 타입에서만 사용할 수 있다.
또한, 이미지를 클릭하면 클릭한 곳의 x좌표와 y좌표가 x와 y라는 이름으로 같이 전송된다.

<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>

list 속성

list 속성은 해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하는 datalist 요소와 관련이 있다.
input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치해야만 연결이 된다.

<form action="/examples/media/request.php">
    <input list="lectures" name="lecture">
        <datalist id="lectures">
            <option value="HTML">
            <option value="CSS">
        </datalist>
</form>

list 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

min과 max 속성

min속성과 max 속성은 input 요소에 입력할 수 있는 최솟값과 최댓값을 명시한다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

  • number, range, date, time, datetime-local, month, week 타입
<form action="/examples/media/request.php">
    <input type="date" name="theday" min="1977-01-01" max="2020-12-31"><br><br>
    <input type="submit" value="전송">
</form>

min과 max 속성은 파이어폭스, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

multiple 속성

multiple 속성은 사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용한다.

이 속성은 email 타입과 file 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    <input type="file" name="uploadfile" multiple><br><br>
    <input type="submit" value="전송">
</form>

multiple 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

pattern 속성

pattern 속성은 input 요소에 입력된 값을 검사하기 위한 정규 표현식(regular expression)을 명시한다.
정규 표현식이란 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴을 의미한다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

  • text, password, email, tel, url 타입
<form action="/examples/media/request.php">
    <input type="email" name="email"
        pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="이메일 양식">
</form>

위의 예제에서 사용된 정규 표현식의 의미는 다음과 같다.

  1. [a-zA-Z0-9] : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나올 수 있음.
  2. [@] : ‘@’ 문자만이 나와야 함.
  3. [.] : ‘.’ 문자만이 나와야 함.
  4. [.]* : ‘.’ 문자가 나와도 되고 나오지 않아도 됨.
  5. [a-zA-Z0-9]* : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨.

따라서 위와 같은 정규 표현식을 사용하면, 해당 문자열이 이메일 양식에 맞는 문자열인지를 확인할 수 있다.

pattern 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

placeholder 속성

placeholder 속성은 input 요소에 입력되어야 할 값에 대한 힌트를 제공한다. 이러한 힌트는 예시가 될 수도 있고, 입력 형식에 대한 설명이 될 수도 있다. placeholder 속성값은 해당 입력 필드에 포커스가 오게 되면 더 이상 표시되지 않는다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

  • text, password, email, tel, url, search 타입
<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username" placeholder="홍길동"><br>
    비밀번호 : <input type="password" name="password" placeholder="1234"><br><br>
</form>

placeholder 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

required 속성

required 속성은 반드시 입력되어야 할 필수 input 요소를 명시한다. 이 속성이 설정된 모든 input 요소에 입력값이 존재해야만 서버로 전송(submit)할 수 있다.

<form action="/examples/media/request.php">
    이름 : <input type="text" name="name" required> (이름은 반드시 입력해야 해요!)<br>
    나이 : <input type="number" name="age" min="1" max="99"><br><br>
</form>

required 속성은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.

step 속성

step 속성은 input 요소에 입력할 수 있도록 허용된 숫자 간격을 명시한다.
예를 들어, step 속성값이 2이면, 입력이 허용되는 숫자는 …, -4, -2, 0, 2, 4,… 가 된다.

이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.

  • number, range, date, time, datetime-local, month, week 타입
<form action="/examples/media/request.php">
    여러분이 가장 좋아하는 숫자는 몇인가요? (단, -30부터 30사이에서 5단위로 골라주세요!)<br><br>
    <input type="number" name="favnum" min="-30" max="30" step="5"><br><br>
</form>

step 속성은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.




최종 수정 : 2021-08-27