[HTML] HTML - 26.HTML5 요소 - input 요소의 속성

이번 시간에는 HTML에 input 요소의

속성에 대해 알아보도록 하겠습니다.

 

input 요소의 속성

 

HTML에서 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

<form action="./request.php" autocomplete="on">
      이름: <input type="text" name="name"><br>
      나이: <input type="number" name="age" min="1" max="99" autocomplete="off"><br><br>
      <p>input 요소에 데이터를 입력하고 전송 버튼을 누른 후에 F5키를 눌러 보세요!<br>
        그리고 나서 같은 정보를 입력하려고 하면 이전 데이터가 아래에 팝업될 거에요!</p>
      <input type="submit" value="전송">
</form>

 

novalidate 속성

 

novalidate 속성은 input 요소의

속성이 아닌 form 요소의 속성입니다.

 

이 속성으로는 입력한 정보(data)를 

전송할 때 그 정보가 유효한지 아닌지를

 

검사하지 않았다는 것을 명시합니다.

url 타입이나 email 타입과 같이 자동으로 

 

유효성 검사를 하는 input 타입에

이 속성을 사용하면 유효성 검사를 

하지 않습니다.

 

즉, 이 속성이 사용된 form 요소로 전달받은

정보(data)는 반드시 서버 측에서 따로

유효성 검사를 실시해야 합니다.

<form action="./request.php">
      사주 사용하는 사이트의 URL 주소 <br>
      <input type="url" name="url">
      <input type="submit" value="전송">
</form>

 

autofocus 속성

 

autofocus 속성은 웹 페이지가 로드(load)될 때,

속성이 적용된 input 요소에 자동으로

포커스(focus)가 가도록 해줍니다.

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

 

form 속성

 

form 속성은 해당 input 요소의 위치에

상관 없이 포함될 form 요소를 명시해 줍니다.

 

포함될 form 요소의 id 속성값을

공백으로 연결하여,둘 이상의 form

요소에 포함될 수도 있습니다.

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

 

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="전송">
      <input type="submit" value="관리자 권한으로 전송" formaction="https://tcpschool.com/examples/media/request_admin.php">
 </form>

 

formentype 속성

 

formentype 속성은 입력한 정보(data)를

전송할 때 암호화하는 방법을 명시합니다.

 

즉,formaction 속성은 form 요소의 

enctype 속성을 덮어쓰게 됩니다.

 

formenctype 속성은 form 요소의

method 속성이 post일 때만 적용됩니다.

 

이 속성은 submit 타입과 image 타입에서만

사용할 수 있습니다.

 

 <form action="/examples/media/request.php" method="POST">
     사용자 이름을 입력하세요: <input type="text" name="username"> <br> <br>
     <input type="submit" value="암호화하여 전송" formenctype="multipart/form-data"> <br>
 </form>

 

formmethod 속성

 

formmethod 속성은 입력한 정보(data)를

전송할 때 사용하는 http 메소드(method)를 

명시합니다. 즉, formmethod 속성은 

 

form 요소의 method 속성을 덮어쓰게 됩니다.

이 속성은 submit 타입과 image 타입에서만

사용할 수 있습니다.

 

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

 

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">
</form>

 

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>

 

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="2023-02-08"> <br><br>
   <input type="submit" value="전송">
</form>

 

multiple 속성

 

multiple 속성은 사용자가 input 요소에

값을 두 개 이상 입력하는 것을 허용합니다.

 

이 속성은 email 타입과 file 타입에서만

사용할 수 있습니다.

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

 

pattern 속성

 

pattern 속성은 input 요소에 입력된 값을

검사하기 위한 정규 표현식(regular expression)

을 명시합니다.

 

정규 표현식이란 문자열에서 특정한 

규칙을 가지는 문자열의 집합을 찾아내기

위한 검색 패턴을 의미합니다.

 

이 속성은 다음과 같은 input 타입에서만

사용할 수 있습니다.

• text
• password
• email
• tel
• url

<form action="https://tcpschool.com/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>

위 예제에서 사용된 정규 표현식의

의미는 다음과 같습니다.

 

• [a-zA-Z0-9]: 영문 소문자나 영문 대문자
  숫자 중 어느 것이라도 개수에 상관없이 나올 수 있음.
• [@]: '@' 문자만이 나와야 함.
• [.] : '.' 문자만이 나와야 함.
• [.]* : '.' 문자가 나와도 되고 나오지 않아도 됨.
• [a-zA-Z0-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>

 

required 속성

 

required 속성은 반드시 입력되어아 할 

필수 input 요소를 명시합니다.

 

이 속성이 설정된 모든 input 요소에

입력값이 존재해야만 서버로 전송(submit)

할 수 있습니다.

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

 

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>
    <input type="submit" value="전송">
</form>

---

참고 자료

코딩교육 티씨피스쿨

 

GitHub - HTML5-STR/html-study: html 블로그 작성용 - study1