티스토리 뷰

DEVELOPE/HTML-HTML5

html5 input 태그

소찾나 2017. 11. 29. 08:58
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

html5 input 태그

html5 input 태그

html5 input 태그



지금까지 폼 태그를 사용하기 위하여 input 태그를 사용하였을 것이다.


기존의 html4에서 input 태그는  텍스트 필드나 단추 같은 폼을 만들고 자바스크립트를 이용하여


입력내용을 확인하는 프로그램을 실행하여야 하였으나 이제 html5 에서는 입력하려는


값에 따라 해당 태그를 사용하면 쉽게 처리할 수 있도록 추가되었다.







1 input 태그 사용


기존 html4 에서 사용하던 폼 태그들이다


 유형

설명 

코드 

 텍스트

 텍스트입력

 <input type="text">

 패스워드

 비밀번호 입력 입력되는값은 *로 표시

 <input type="password">

 체크박스

 클릭시 활성 / 비활성

 <input type="checkbox">

 라이도버튼

 구룹중 선택

 <input type="radio">

 파일

 파일업로드 파일선택버튼

 <input type="file">

 전송

 폼값을 전송

 <input type="submit">


html5 에서 추가된 input 태그



 유형

설명 

코드 

 이메일주소

 이메일 주소 입력

<input type="email">

 웹주소

 웹사이트 주소 입력

 <input type="url">

 숫자 스핀

 숫자 ▲▼ 로 선택

 <input type="number">

 숫자 슬라이드

 슬라이드 박스로 선택

 <input type="range">

 날짜/시간

 달력에서 날짜를 선택

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

 검색

 검색상자 

 <input type="search">

 생상선택

 웹에서 생상표로  색상선택

 <input type="color">



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
<!DOCTYPE html>
<html>
<head>
<title>html5 테스트</title>
<style>
.time-test { 
    
     width:500px;
     height:500px;
     background-color:#008899;
     color:#ffffff;
     text-align:center;
}
 
 
</style>
</head>
</head>
<body>
 
<div class="time-test">
<form name="test-form" method="post" action="test.php">                                            
<p><input type="email"></p>
<p><input type="url"></p>
<p><input type="number"></p>
<p><input type="range"></p>
<p><input type="date"></p>
<p><input type="datetime"></p>
<p><input type="search"></p>
<p><input type="color"></p>
</form>
</div>
</body>
</html>    
cs


html5 input 태그



html5 input 태그



이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^

'DEVELOPE > HTML-HTML5' 카테고리의 다른 글

html5 input tag autofocus  (0) 2017.11.30
html5 time 태그 & 마이크로포맷  (0) 2017.11.29
html5 video audio tag  (0) 2017.11.21
html5 canvas api 사용  (0) 2017.11.20
html5 태그 중 생략가능한 종료태그  (0) 2017.11.18
공유하기 링크
댓글