티스토리 뷰

정보 보관 ver1.0

input type

James Wetzel 2012. 12. 12. 10:44

<!DOCTYPE html>

<html>

<head>

<title>input type is date</title>

<meta charset="utf-8" />

</head>

<body>

<h1>date</h1>

input type="date" <input type="date" name="date" />

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<title>input type is email</title>

<meta charset="utf-8" />

</head>

<body>

<h1>email</h1>

input type="email" <input type="email" />

</body>

</html>

*모바일 브라우져에서 해당 요소에 커서가 올 경우 메일 주소를 입력하기에 적합한 스크린 키보드를 띄워줍니다.



<!DOCTYPE html>

<html>

<head>

<title>input type is url</title>

<meta charset="utf-8" />

</head>

<body>

<h1>url</h1>

input type="url" <input type="url" />

</body>

</html>

*모바일 브라우져에서 해당 요소에 커서가 올 경우 주소를 입력하기에 적합한 스크린 키보드를 띄워줍니다.



<!DOCTYPE html>

<html>

<head>

<title>input type is color</title>

<meta charset="utf-8" />

</head>

<body>

<h1>color</h1>

input type="color" <input type="color" />

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<title>input type is search</title>

<meta charset="utf-8" />

</head>

<body>

<h1>search</h1>

input type="search" <input type="search" />

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<title>input type is number</title>

<meta charset="utf-8" />

</head>

<body>

<h1>number</h1>

input type="number" <input type="number" min="1" max="3" />

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<title>input type is range</title>

<meta charset="utf-8" />

</head>

<body>

<h1>range</h1>

input type="range" <input type="range" min="10" max="30" step="10" />

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<title>input type is tel</title>

<meta charset="utf-8" />

</head>

<body>

<h1>tel</h1>

input type="tel" <input type="tel" />

</body>

</html>

*모바일 브라우져에서 해당 요소에 커서가 올 경우 전화번호를 입력하기에 적합한 스크린 키보드를 띄워줍니다.



<!DOCTYPE html>

<html>

<head>

<title>input type is file</title>

<meta charset="utf-8" />

</head>

<body>

<h1>file</h1>

input type="file" <input type="file" accept="image/*" multiple />

</body>

</html>

*accept 속성과 multiple 속성!

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)