2018. 10. 8. 14:39
HTML5 | CSS3
html5 새로운 input 요소
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>새로운 input</title> </head> <body> <h1>새로운 input</h1> <form> <!-- form 안에서 button type을 안적으면 type은 submit / 밖에서는 button input type 안적으면 type은 text --> <label for="userEmail">이메일</label> <input type=email id="userEmail"> <button type="submit">이메일 전송</button> <br /> </form> <form> <label for="userNo">숫자</label> <input type="number" id="userNo" value="123" min="100" max="300"> <button type="submit">숫자전송</button> </form> <form> <label for="userRange">범위</label> <input type="range" id="userRange"> <button type="submit">범위전송</button> </form> <form> <label for="userSearch">검색</label> <input type="search" id="userSearch"> <button type="submit">검색전송</button> </form> <!-- 입력창에 x (clear) 표시가 안나옴. --> <form role="search"> <label for="userSearc-1">검색1</label> <input type="input" id="userSearch-1"> <button type="submit">검색전송1</button> </form> <form> <!-- ht:/aroomall.com 는 pass --> <label for="userUrl">URL</label> <input type="url" id="userUrl"> <button trpe="submit">URL전송</button> </form> </body> </html> | cs |
html5 새로운 input 요소
유효성검사를 자동으로 해줌.
novalidate : 유효성 검사 안함.
*** xhtml에서는 novalidate="novalidate"로 기재
autofocus : 자동으로 focus 생김. 처음 기재한 1개만 적용.
*** xhtml에서는 autofocus="autofocus"로 기재
*** ios 상에서의 브라우저는 autofocus 적용이 안됨. 자바스크립트로도 안됨. 방법이 없음. auto...로 되어있는 것은 ios에서 거의 안됨.
disabled : 클릭, 입력, 체크, 전송이 안됨
*** xhtml에서는 disabled="disabled"로 기재
*** ie11에서는 disabled 적용됨. bug...
placeholder : 이정표, javasctipt를 대체. label을 대체할 수 없다. 웹접근성!
*** radio, checkbox에는 사용 안 함.
*** apple 사이트 search 칸을 보면 placeholder="Search apple.com" 이라는 문구 있음.
checked : 미리 체크함. checkbox, radio 모두 해당.
spellcheck="false"
autocomplete="off"
autocapitalize="off"
autocorrect="off"
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>새로운 input</title> </head> <body> <h1>새로운 input</h1> <form novalidate> <!-- form 안에서 button type을 안적으면 type은 submit / 밖에서는 button input type 안적으면 type은 text --> <label for="userEmail">이메일</label> <input placeholder="example@example.com" type=email id="userEmail"> <button disabled type="submit">이메일 전송</button> <br /> </form> <form> <label for="userNo">숫자</label> <input type="number" id="userNo" value="123" min="100" max="300"> <button type="submit">숫자전송</button> </form> <form> <label for="userRange">범위</label> <input type="range" id="userRange"> <button type="submit">범위전송</button> </form> <form> <label for="userSearch">검색</label> <input placeholder="검색어입력" type="search" id="userSearch"> <button type="submit">검색전송</button> </form> <!-- 입력창에 x (clear) 표시가 안나옴. 강사님께서 사용하시는 방법 --> <form role="search"> <label for="userSearch-1">검색1</label> <input autofocus type="text" id="userSearch-1"> <button type="submit">검색전송1</button> </form> <form> <!-- ht:/aroomall.com 는 pass --> <label for="userUrl">URL</label> <input autofocus type="url" id="userUrl"> <button trpe="submit">URL전송</button> </form> <form> <label for="gender">여성</label> <input type="radio" id="gender-female" name="gender" value="female" checked> <label for="gender">남성</label> <input type="radio" id="gender-male" name="gender" value="male"> </form> <form> <label for="fruit">과일</label> <input type="checkbox" checked id="banana" name="fruit" id="banana"> </form> </body> </html> | cs |
'HTML5 | CSS3' 카테고리의 다른 글
| 이미지맵 (image map) (0) | 2018.10.19 |
|---|---|
| html css 공부하기 유용한 사이트 (0) | 2018.10.07 |