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 타입
<form action="///" autocomplete="on">
이름 : <input type="text" name="name"><br>
나이 : <input type="number" name="age" min="1" max="99" autocomplete="off"><br><br>
<input type="submit" value="전송">
</form>
novalidate 속성
novalidate 속성은 input 요소의 속성이 아닌 form 요소의 속성이다.
이 속성은 입력한 정보(data)를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시한다.
url 타입이나 email 타입과 같이 자동으로 유효성 검사를 하는 input 타입에 이 속성을 사용하면 유효성 검사를 하지 않는다.
즉, 이 속성이 사용된 form 요소로 전달받은 정보(data)는 반드시 서버 측에서 따로 유효성 검사를 실시해야 한다.
<form action="///" novalidate>
자주 들리는 사이트의 URL 주소를 입력해 주세요 :<br>
<input type="url" name="url">
<input type="submit" value="전송">
</form>
autofocus 속성
autofocus 속성은 웹 페이지가 로드(load)될 때, 속성이 적용된 input 요소에 자동으로 포커스(focus)가 가도록 해준다.
<form action="///">
사용자 : <input type="text" name="username"><br>
비밀번호 : <input type="password" name="password" autofocus><br><br>
<input type="submit" value="전송">
</form>
/* 페이지 로드 시 자동으로 포커스가 비밀번호를 입력하는 input 요소에 가도록 한다. */
form 속성
form 속성은 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시해 준다.
포함할 form 요소의 id 속성값을 공백으로 연결하여, 둘 이상의 form 요소에 포함할 수도 있다.
<form action="///" 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="///" 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="///">
자주 들리는 사이트의 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="///">
사용자 이름을 입력해주세요 : <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="///">
사용자 : <input type="text" name="username"><br>
비밀번호 : <input type="password" name="password" autofocus><br><br>
<input type="image" src="///.png" alt="전송" height="30" width="30">
그림을 클릭하면 전송된다.
</form>
list 속성
list 속성은 해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하는 datalist 요소와 관련이 있다.
input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치해야만 연결이 된다.
<form action="///">
<input list="lectures" name="lecture">
<datalist id="lectures">
<option value="HTML">
<option value="CSS">
<option value="JAVA">
<option value="C++">
</datalist>
</form>
min과 max 속성
min속성과 max 속성은 input 요소에 입력할 수 있는 최솟값과 최댓값을 명시한다.
이 속성은 다음과 같은 input 타입에서만 사용할 수 있다.
- number, range, date, time, datetime-local, month, week 타입
<form action="///">
<input type="number" name="favnum" min="1" max="9">
<input type="submit" value="전송"><br><br>
<input type="date" name="theday" min="1970-01-01" max="2023-12-31">
<input type="submit" value="전송">
</form>
multiple 속성
multiple 속성은 사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용한다.
이 속성은 email 타입과 file 타입에서만 사용할 수 있다.
<form action="///">
<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="///">
<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="///">
사용자 : <input type="text" name="username" placeholder="홍길동"><br>
비밀번호 : <input type="password" name="password" placeholder="1234"><br><br>
</form>
required 속성
required 속성은 반드시 입력되어야 할 필수 input 요소를 명시한다.
이 속성이 설정된 모든 input 요소에 입력값이 존재해야만 서버로 전송(submit)할 수 있다.
<form action="///">
이름 : <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="///">
가장 좋아하는 숫자는? (단, -50부터 50사이에서 5단위로.)<br><br>
<input type="number" name="favnum" min="-50" max="50" step="5"><br><br>
<input type="submit" value="전송">
</form>
'Language > HTML' 카테고리의 다른 글
[HTML] 비디오(video) (1) | 2022.09.21 |
---|---|
[HTML] 멀티미디어 파일 형식(video, audio) (0) | 2022.09.21 |
[HTML] Input 요소의 타입 (0) | 2022.09.21 |
[HTML] Input 요소 (0) | 2022.09.19 |
[HTML] semantic element (0) | 2022.09.19 |