HTML -6-2
2020. 6. 9. 12:50ㆍWeb(CSS)
| <html> |
| <head> |
| <title>form-2 html5에서 추가된 form 요소들</title> |
| </head> |
| <body> |
| [ <a href="test06.htm">form-1</a> ] |
| <hr> |
| <h1>[ form-2 ] html5에서 추가된 form 요소들 </h1> |
| <hr> |
| <form action="test.jsp" method="POST"> |
| <h2> input type="time" 사용자의 지역을 기준으로 시간(시분초)을 지정 </h2> |
| <input type="time"> |
| <h2> input type="date" 사용자의 지역을 기준으로 날짜(연월일)을 지정</h2> |
| <input type="date"> |
| <h2> input type="datetime-local" 사용자의 지역을 기준으로 날짜와 시간 |
| (연월일시분초)을 지정</h2> |
| <input type="datetime-local"> |
| <h2> input type="week" 사용자의 지역을 기준으로 날짜(연주)을 지정</h2> |
| <input type="week"> |
| <h2> input type="month" 사용자의 지역을 기준으로 날짜(연월)을 지정</h2> |
| <input type="month"> |
| <h2> input type="tel" 전화번호를 입력하는 폼요소 |
| (가상 키패드 변화 가능, 전화연결)</h2> |
| <input type="tel"> |
| <h2> input type="email" email주소 입력하는 폼요소 |
| (브라우저에서 email형식을 체크, 가상 키패드 변화 가능)</h2> |
| <input type="email"> |
| <h2> input type="url" 사이트주소 입력하는 폼요소 |
| (브라우저에서 url형식을 체크, 가상 키패드 변화 가능)</h2> |
| <input type="url"> |
| <h2> input type="number" 숫자값을 지정하는 폼요소(증감버튼)</h2> |
| <input type="number"> <br> |
| <p> |
| min="n" 속성으로 최소값 지정 가능. |
| <input type="number" min="0"> <br> |
| max="n" 속성으로 최대값 지정 가능. |
| <input type="number" max="100"> <br> |
| step="n" 속성으로 증감간격 지정 가능. |
| <input type="number" step="5"> |
| </p> |
| <h2> input type="range" 범위내의 값을 선택하는 폼요소</h2> |
| <input type="range"> |
| <h2> input type="color" 색상을 선택하는 폼요소</h2> |
| <input type="color"> |
| <h2> input type="search" 검색용 입력창(삭제버튼)</h2> |
| <input type="search"> |
| <hr> |
| <h1>html5에서 추가된 속성</h1> |
| <h2>placeholder - 입력 예시를 보여줌</h2> |
| <input type="tel" placeholder="010-5555-7777"> <br> |
| <input type="text" placeholder="영문숫자 조합으로 6~12자"> |
| <h2>required - 필수 입력 요소로 지정</h2> |
| <label>ID <input type="text" required> </label> |
| <label>Password <input type="password" required> </label> |
| <h2>autofocus - 자동 포커싱 된 입력 요소로 지정</h2> |
| <label>Name <input type="text" autofocus> </label> |
| <h2>autocomplete="on/off" - 자동 완성 기능을 켜고 끔 (on이 기본)</h2> |
| <label>Name <input type="text" autocomplete="off"> </label> |
| <h2>readonly - 수정 불가한 (읽기만 가능한) 입력 요소로 지정</h2> |
| <label>Group <input type="text" readonly value="A team"> </label> |
| <h2>disabled - 사용 불가한 입력요소로 지정</h2> |
| <label>Group <input type="text" disabled value="B team"> </label> |
| <hr> |
| <h1> 폼요소들을 그룹화 하여 표현하기 - fieldset, legend</h1> |
| <pre style="background:rgb(255,200,180);color:rgb(55,20,0);"> |
| <fieldset> |
| <legend>폼요소 그룹의 제목</legend>` |
| <input type ... > |
| <input type ... > |
| ... |
| </fieldset> |
| </pre> |
| <fieldset> |
| <legend>Log-In</legend> |
| <label>ID <input type="text" required> </label> <br> |
| <label>Password <input type="password" required> </label> <br> |
| <input type="image" src="img_submit.gif"> |
| </fieldset> |
| <fieldset> |
| <legend>특별 재난지원금 방문신청</legend> |
| <label> 방문하실 날짜는 |
| <input type="date"> </label> <br> |
| <label> 시간대는 |
| <input type="time"> ~ <input type="time"> </label> 입니다. |
| </fieldset> |
| <hr> |
| <button>OK</button> |
| <button type="reset">NO</button> |
| </form> |
| </body> |
| </html> |
링크로 넘어가게 만들었던 두 번째 페이지이다.
여기부터 좀 전문적인걸 배우는 느낌이 났고 집중이 아주 잘되었다.
잊어버리지 않게 복습을 철저히 해서 숙달된 전문가가 되고 싶다.
'Web(CSS)' 카테고리의 다른 글
| CSS - font (0) | 2020.07.27 |
|---|---|
| CSS - basic (0) | 2020.07.27 |
| HTML -6 (0) | 2020.06.09 |
| HTML -5-1 (0) | 2020.06.09 |
| HTML -5 (0) | 2020.06.09 |