2022.12.08 Wep4일차 HTML,CSS(input 추가요소)
2022. 12. 8. 17:13ㆍWep
required > input 필수입력 속성(공백도 값으로 인식)
placeholder="text" > input박스에 보이는 값 설정(input 값으로 인식 안함)
| 추가된<input>type | 설명 |
|---|---|
| date | 날짜를 입력할 수 있는 컨트롤 |
| datetime | UTC날짜/시간 형식을 이용한 날짜와 시간 표시 컨트롤 |
| datrtime-local | 현재 날짜/시간 |
| month | 월/년도 |
| time | 시간 |
| week | 주와 연도를 선택할 수 있는 컨트롤 |
| color | 색상 코드를 입력할 수 있는 컨트롤 |
| 표준 이메일 주소를 입력받아서 검증하는 컨트롤 | |
| tel | 전화번호를 입력받아서 검증하는 컨트롤 |
| search | 검색어 입력 양식을 생성 |
| range | 2개의 숫자 사이의 숫자를 선택할 수 있는 슬라이더 컨트롤 |
| number | 숫자만 입력받는 컨트롤 |
| url | URL만 입력받는 컨트롤 |
예제)추가요소 활용
1.required,placeholder 활용
코드
<!DOCTYPE html>
<html>
<head>
<title>1208_2</title>
<style>
#div1 {
width: 500px;
}
</style>
</head>
<body>
<h1>회원 로그인</h1>
<form name="form1" action="1208.html" method="get">
<p>ID : <input type="text" name="id" size="15" required /></p>
<p>
PW :
<input
type="password"
name="pwd"
size="15"
placeholder="비밀번호 입력"
required
/>
<br />
<input type="submit" value="로그인" />
<input type="reset" value="다시입력" />
</p>
</form>
<br /><br />
<form name="form2" action="1208.html" method="get">
<div id="div1">
<fieldset>
<legend>개인정보 입력</legend>
<p>이름 : <input type="text" name="name" required /></p>
<p>나이 : <input type="text" name="age" required /></p>
<input type="submit" value="등록" />
<input type="reset" value="다시작성" />
</fieldset>
</div>
</form>
</body>
</html>
출력
회원 로그인
2. 날짜관련 추가요소 활용
코드
<!DOCTYPE html>
<html>
<head>
<title>1208_4</title>
</head>
<body>
<h3>선택사항을 직접 입력하세요</h3>
<form name="form1" action="1208_3.html" method="get">
<label
>전공분야를 입력하세요
<input type="text" list="majorlist" name="major" />
<datalist id="majorlist">
<option value="Sotfward">소프트웨어</option>
<option value="Robot">로봇</option>
<option value="System">시스템</option>
<option value="Service">서비스</option>
<option value="Education">교육</option>
</datalist>
<br />
<input type="submit" value="전송" />
<input type="reset" value="다시작성" />
</label>
</form>
<br /><br />
<h3>오늘 날짜 입력</h3>
<form name="form2" action="1208_2.html" method="get">
오늘날짜 : <input type="date" name="today" />
<h3>프로젝트 기간</h3>
시작 :
<input type="date" name="from" min="2023-03-06" max="2023-03-14" /> 끝 :
<input type="date" name="to" min="2023-03-31" max="2023-04-04" />
<input type="submit" value="제출" />
<input type="reset" value="리셋" />
</form>
<br /><br />
<h3>생일(년/월)입력</h3>
<form name="form3" action="1208_3.html" method="get">
생일 : <input type="month" name="birth" />
<h3>주간계획(연/주) 입력</h3>
주간계획 : <input type="week" name="weekend" />
<br />
<input type="submit" value="등록" />
<input type="reset" value="다시작성" />
</form>
<br /><br />
<form name="form4" action="1208.html" method="get">
<h3>현재시간</h3>
시간 : <input type="time" name="now" />
<h3>생일(년,월,일,시간) 입력</h3>
생일 : <input type="datetime-local" name="bdaytime" />
<input type="submit" value="입력" />
<input type="reset" value="리셋" />
</form>
<br /><br />
<ul>
<li>
<label><input type="checkbox" name="test" />체크1</label>
<label><input type="number" value="0" min="0" max="7" />넘버</label>
</li>
</ul>
</body>
</html>
출력
선택사항을 직접 입력하세요
오늘 날짜 입력
생일(년/월)입력
3. color,range,number 활용
코드
<!DOCTYPE html>
<html>
<head>
<title>1208_5</title>
</head>
<body>
<form name="form1" action="1208.html" method="get">
<h3>원하는 색상을 선택하세요.</h3>
<input type="color" name="color_value" value="#0000ff" />
<br />
<input type="submit" value="전송" />
<input type="reset" value="다시선택" />
</form>
<br /><br />
<form name="form2" action="1208.html" method="get">
<h3>나이를 입력하세요</h3>
<input type="number" name="age" id="age" min="1" max="99" />
<br /><br />
<input type="submit" value="전송" />
<input type="reset" value="리셋" />
</form>
<br /><br />
<form name="form3" action="1208.html" method="get">
<h3>0~100사이의 원하는 정수 선택</h3>
<input
type="range"
name="point"
id="point"
min="0"
max="100"
oninput="document.getElementById('value').innerHTML= this.value"
/>
<span id="value"></span>
<br /><br />
<input type="submit" value="전송" />
<input type="reset" value="리셋" />
</form>
</body>
</html>
출력
'Wep' 카테고리의 다른 글
| 2022.12.14 Wep 6일차 JS(JS기초) (0) | 2022.12.14 |
|---|---|
| 2022.12.09 Wep5일차 HTML(text속성 선택자),CSS(box-shadow) (0) | 2022.12.09 |
| 2022.12.07 Wep3일차 HTML,CSS (0) | 2022.12.07 |
| 2022.12.06 Wep2일차 HTML,CSS (0) | 2022.12.06 |
| 2022.12.05 Wep1일차 비주얼 스튜디오 코드 설치,HTML (1) | 2022.12.05 |