[Project H4C] 8. HTML5 요소 (2)
- HTML5에서 새롭게 추가된 input 요소들
1. autocomplete
form 요소나 Input 요소에 입력된 정보를 저장할지 안 할지를 명시한다.
속성값이 on이면 브라우저는 사용자가 입력하는 정보를 자동으로 저장한다.
그리고 나서 이후에 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성 시켜준다.
text, password, range, color, date, detetime-local, month, week, email, url, tel, search 에만 적용 가능.
e.g.)
<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>
2. novalidate
novalidate는 input 요소의 속성이 아닌 form 요소의 속성이다.
입력한 정보를 전송할 때 그 정보가 유효한지 아닌지를 검사한다.
url 타입이나 email 타입과 같이 자동으로 유효성 검사를 하는 input 타입에 이 속성을 사용하면 유효성 검사를 하지 않는다.
즉, 이 속성이 사용된 form 요소로 전달받은 정보는 반드시 서버에서 유효성 검사를 실시해야 한다.
e.g.)
<form action="/examples/media/request.php" novalidate>
당신이 자주 들리는 사이트 URL 주소를 입력하시오 : <br><br>
<input type="url" name="url">
</form>
3. autofocus
웹 페이지가 load 될 때, 속성이 적용된 input 요소에 자동으로 포커스가 되도록 한다.
e.g.)
<form action="/examples/media/request/php">
사용자 : <input type="text" name="username"><br>
비밀번호 : <input type="password" name="password autofocus><br><br>
</form>
4. form
form 속성은 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시해준다.
포함할 form 요소의 id 속성값을 공백으로 연결하여, 둘 이상의 form 요소에 포함할 수도 있다.
e.g.)
<form action="/example/media/request.php" id="user">
사용자 : <input type="text" name="username"><br><br>
</form>
...
비밀번호 : <input tyep="password" name="password" form="user">
5. formaction
입력한 정보를 전송할 때 정보가 전달될 서버 측 파일을 명시한다.
form 요소의 action 속성을 덮어쓰게 된다.
이 속성을 사용하면 입력된 정보를 넘겨줄 서버 측 파일을 input 요소에서 바꿀 수 있게 된다.
submit, image 타입에서만 사용할 수 있다.
e.g.)
<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>
6. formenctype
정보를 전송할 때 암호화 하는 방법을 명시.
form요소의 enctype 속성을 덮어쓰게 된다.
formenctype 속성은 form 요소의 method 속성이 post일 때만 적용된다.
submit, image 타입에서만 사용할 수 있다.
e.g.)
<form action="/example/media/request_enctype.php" method="post">
사용자 이름을 입력하시오 : <input type="text" name="username"><br><br>
<input type="submit" value="암호화하여 전송" formenctype="multipart/form-data"><br>
</form>
7. formmethod
입력한 정보를 전송할 때 사용하는 http method를 명시한다.
즉, form 요소의 method 속성을 덮어쓰게 된다.
submit, image 타입에서만 사용할 수 있다.
e.g.)
<form action="/examples/media/requeste.php" method="get">
사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
<input type="submit" value="post 방식으로 전송" formmethod="post"><br>
</form>
8. formnovalidate
입력한 정보를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시한다.
즉, form 요소의 novalidate 속성을 덮어쓰게 된다.
submit 타입에서만 사용 가능.
e.g.)
<form action="/examples/media/request.php">
당신이 자주 들리는 사이트 URL 주소를 입력하시오 : <input type="url" name="url"><br><br>
<input type="submit" value="novalidate 방식으로 전송" formnovalidate><br>
</from>
10. formtarget
입력한 정보를 전송한 후, 그 결과로 받은 응답 페이지를 어디에 출력할지를 명시한다.
즉, formtarget 속성은 form 요소의 target 속성을 덮어쓰게 된다.
submit, image 타입에서만 사용할 수 있다.
e.g.)
<form action="/examples/media/request.php">
사용자의 이름을 입력하시오 : <input type="text" name="username"><br><br>
<input type="submit" value="응답 화면을 새창에 표시" formtarget="_blank"><br>
</form>
11. height & width
input 태그의 type 속성이 "image"일 경우 height 와 width를 사용하여 이미지의 높이와 너비를 명시할 수 있다.
image 타입에서만 사용 가능.
또한, 이미지를 클릭하면 클릭한 곳의 x좌표와 y좌표가 x와 y라는 이름으로 같이 전송된다.
e.g.)
<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>
12. list
해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하여 detalist 요소와 관련이 있다.
input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치해야만 연결이 된다.
e.g.)
<form action='/examples/media/request.php">
<input list="lectures" name="lecture">
<detalist id="lectures">
<option value="HTML">
<option value="CSS">
</detalist>
</form>
13. min & max
최솟값과 최댓값을 명시한다.
number, range, date, time, detetime-local, month, week 타입에서만 사용 가능.
e.g.)
<form action="/examples/media/reequest.php">
<input type="date" name="theday" min="1977-01-01" max="2020-12-31"><br><br>
<input type="submit" value="전송">
</form>
14. multiple
사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용하는 것.
email, file 타입에서만 사용 가능
e.g.)
<form action="/example/media/request.php">
<input type="file" name="uploadfile" multiple><br><br>
<input type="submit" value="전송">
</form>
15. pattern
input 요소에 입력된 값을 검사하기 위한 정규 표현식을 명시한다.
정규 표현식이란 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴을 의미한다.
text, password, email, tel, url 타입에서만 사용 가능
e.g.)
<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>
- 정규 표현식 의미
[a-zA-Z0-9]: 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나올 수 있다
[@]: '@' 문자만이 나와야 한다
[.]: '.' 문자가 나와도 되고 나오지 않아도 된다.
[a-zA-Z0-9]*: 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 된다.
16. placeholder
input 요소에 입력되어야 할 값에 대한 힌트를 제공한다.
text, password, email, tel, url, search 타입에서 사용 가능하다.
e.g.)
<form action="/examples/media/request.php">
사용자 : <input type="text" name="username" placeholder="홍길동"><br>
비밀번호 : <input type="password" name="password" placeholder="1234"><br><br>
</form>
17. required
반드시 입력되어야 할 필수 input 요소를 명시
이 속성이 설정된 모든 input 요소에 입력값이 존재해야만 서버로 전송할 수 있다.
e.g.)
<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>
18. step
input 요소에 입력할 수 있도록 허용된 숫자 간격을 명시한다.
예를 들어, step 속성값이 2이면, 입력이 허용되는 숫자는...-4, -2, 0, 2, 4,.....가 된다.
numberm, range, date, time, datetime-local, month, week 타입에서만 사용 가능하다.
e.g.)
<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>
'1. HTML' 카테고리의 다른 글
| [Project H4C] 회원가입 폼 만들기 (0) | 2020.07.12 |
|---|---|
| [Project H4C] 9. HTML5 멀티미디어 (0) | 2020.07.11 |
| [Project H4C] 8. HTML5 요소 (1) (0) | 2020.07.11 |
| [Project H4C] 7. HTML5 시작 (0) | 2020.07.11 |
| [Project H4C] 6. HTML 확장 (0) | 2020.07.11 |