Input 요소의 속성
input 요소의 속성
input 요소는 다양한 속성을 가질 수 있습니다.
HTML에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같습니다.
1. value
2. readonly
3. disabled
4. maxlength
5. size
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, password, range, color, date, datetime-local, month, week, email, url, tel, search 타입
예제
<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>
</form>
novalidate 속성
novalidate 속성은 input 요소의 속성이 아닌 form 요소의 속성입니다.
이 속성은 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시합니다.
url 타입이나 email 타입과 같이 자동으로 유효성 검사를 하는 input 타입에 이 속성을 사용하면 유효성 검사를 하지 않습니다.
즉, 이 속성이 사용된 form 요소로 전달받은 정보(data)는 반드시 서버 측에서 따로 유효성 검사를 실시해야 합니다.
예제
<form action="/examples/media/request.php" novalidate>
여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 :<br><br>
<input type="url" name="url">
</form>
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>
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">
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>
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>
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>
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>
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>
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="2020-12-31"><br><br>
<input type="submit" value="전송">
</form>
multiple 속성
multiple 속성은 사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용합니다.
이 속성은 email 타입과 file 타입에서만 사용할 수 있습니다.
예제
<form action="/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="/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]* : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨.
따라서 위와 같은 정규 표현식을 사용하면, 해당 문자열이 이메일 양식에 맞는 문자열인지를 확인할 수 있습니다.
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="/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>
</form>
