티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<title>form-2</title>
</head>
<body>
<hr>
<h1>form-2</h1>
<hr>
<h2>fieldset, leged로 폼 요소를 그룹화</h2>
<p>
<fieldset> ... </fieldset> 서로 관련있는 폼요소들을 묶어줌<br>
<legend> ... </legend> 해당 fieldset의 제목, 주제를 나타냄
</p>
<form action="test.jsp" method="post">
<h2>html5에서 추가된 input값들</h2>
<fieldset>
<legend>html5 추가 input값</legend>
</p>
<h3>1. input type = "time" 시간 (오전/오후 시 분)을 지정하는 요소</h3>
<label> <input type = "time"> </label>
<h3>2. input type = "date" 날짜 (연도 월 일)을 지정하는 요소</h3>
<label> <input type = "date"> </label>
<h3>3. input type = "datetime-local" 날짜와 시간 (연 월 일 오전/오후 시 분)을 지정하는 요소</h3>
<label> <input type = "datetime-local"> </label>
<h3>4. input type = "week" 날짜 (연 주)을 지정하는 요소</h3>
<label> <input type = "week"> </label>
<h3>5. input type = "month" 날짜 (연 월)을 지정하는 요소 </h3>
<label> <input type = "month"> </label> <br>
<label> 생일 <input type="month" min="1900-01-01" max="2200-12-31"></label>
<!-- ? -->
<h3>6. input type = "number" 숫자값을 지정하는 요소 </h3>
<label> <input type = "number"> </label><br>
<label>최소 <input type = "number" min="0">개 </label> (min="0")<br>
<label>최대 <input type = "number" max="1000">개 </label> (max="1000")<br>
<label>증감간격 <input type = "number" step="12">개 </label> (step="12")<br>
<h3>7. input type = "range" 범위 내의 값을 지정하는 요소</h3>
<label> <input type = "range"> </label>
<h3>8. input type = "tel" 전화번호를 지정하는 요소</h3>
<p>모바일에서 가상키패드가 숫자형식에 맞게 바뀌고 전화걸기 가능</p>
<label> <input type = "tel"> </label>
<h3>9. input type = "email" 이메일주소를 지정하는 요소</h3>
<p>모바일에서 가상키패드가 이메일형식에 맞게 바뀔 수 있고<br>
브라우저에서 해당값이 이메일형식(@ 유무, @뒤의 문자 유무)에 맞는지 체크.</p>
<label> <input type = "email"> </label>
<h3>10. input type = "url" 웹주소를 지정하는 요소</h3>
<label> <input type = "url"> </label>
<p>모바일에서 가상키패드가 웹주소형식에 맞게 바뀔 수 있고<br>
브라우저에서 해당 값이 웹주소형식(http//나 https:// 유무)에 맞는지 체크 </p>
<h3>11. input type = "color" 색상 값을 지정하는 요소</h3>
<label> <input type = "color"> </label>
<h3>12. input type = "search" 검색창을 지정하는 요소</h3>
삭제버튼생성<br>
<label> <input type = "search"> </label>
</fieldset>
<br>
<fieldset>
<legend>html5 추가 input 속성</legend>
<h3>1. autofocus (autofocus="autofocus") 자동포커싱, 해당요소가 입력대기상태</h3>
<input type="text" autofocus>
<h3>2. autocomplete="on/off" 자동완성기능</h3>
<p>text, password, 날짜, search, tel, email, url, range, color</p>
<label=for="name"> name </label><input type="text" id="name" autocomplete="on">
<h3>3. required(required="required") 필수입력요소로 지정</h3>
브라우저에서 해당값이 입력되었는지 체크해줌. <br>
<input type="text" required>
<h3>4. placeholder="***" 입력 예시나 설명 등을 지정.</h3>
<input type="text" placeholder="200101-2101111">
<h3>5. readonly (readonly="readonly") 읽기만 가능한 요소로 지정.
(값이 전송됨) </h3>
<input type="text" value="VIP" readonly>
<h3>6. disabled (disabled="disabled") 사용불가한 요소로 지정. (값이 전송 안됨)</h3>
<input type="text" value="A조" disabled>
</fieldset>
<br>
<input type="submit"> <input type="reset">
</form>
</body>
</html>
'배운 것 기록 > web' 카테고리의 다른 글
| 페이지 이동 종류와 차이점 (0) | 2022.07.04 |
|---|---|
| [CSS] CSS 문법, 적용 방식 (0) | 2022.06.27 |
| [html] form 태그 종류 (0) | 2022.05.16 |
| [js] 객체 기능 함수 이벤트(input) (0) | 2022.05.13 |
| [js] 내장객체 입력, 목록 (0) | 2022.05.11 |
댓글