본문 바로가기
IT/HTML

[32일차] 3강 HTML5 문서 구조화와 웹 폼

by GWLEE 2022. 8. 3.

ex3-01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 문서 구조 시맨틱 태그 사용</title>
<style>
html, body { margin: 0; padding: 0; height: 100%; }
header {
	width: 100%; height: 15%;
	background: yellow;
}
nav {
	width: 15%; height: 70%; float: left;
	background: orange;
}
section {
	width: 70%; height: 70%; float: left;
	background: olivedrab;
}
aside {
	width: 15%; height: 70%; float: left;
	background: orange;
}
footer {
	width: 100%; height: 15%; clear: both;
	background: plum;
}
</style>
</head>
<body>
	<header>header</header>
	<nav>nav</nav>
	<section>section</section>
	<aside>aside</aside>
	<footer>footer</footer>
</body>
</html>

ex3-04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 시맨틱 태그</title></head>
<body>
<h3>인라인 시맨틱 태그 사례</h3>
<hr>
<p>내일 <mark>HTML5 시험</mark><br>
시간은 <time>09:00</time><br>
난이도 <meter value="0.8" max="1.0"></meter> 80%<br>
자료 업로딩(20%)
	<progress value="2" max="10"></progress><br>
</p>
</body>
</html>

ex3-05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title></head>
<body>
<h3>로그인 폼</h3>
<hr>
<!-- 데이터 넘길때 form 사용 여기서는 get/ post로 넘겨준다. -->
<!-- value 초기값  -->

<form name="fo" method="post">
사용자 ID : <input type="text" name="id" size="15" value=""><br>
비밀 번호 : <input type="password" name="pass" size="15" value="">
<input type="submit" value="완료">
</form>
</body>
</html>

ex3-06.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 입력 폼</title></head>
<body>
<h3>자기 소개서 작성</h3>
<hr>
<form>
  이름 : <input type="text" value=""><br>
  암호 : <input type="password" value="" maxlength="4"><br>
  자소서 : <textarea cols="20" rows="5">이곳에 자기소개서 작성</textarea>
</form>
</body>
</html>

 

ex3-07.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>데이터 목록을 가진 텍스트 입력</title></head>
<body>
<h3>가보고 싶은 곳</h3>
<hr>
<form>
나라 : <input type="text" name="country" list="countries"><br>
		<datalist id="countries">
			<option value="가나">
			<option value="스위스">
			<option value="브라질">
		</datalist>
보고싶은것 : <input type="text" list="what"><br>
		<datalist id="what">
			<option value="산">
			<option value="바다">
			<option value="도시">
		</datalist>
</form>
</body>
</html>

ex3-08.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>버튼이 있는 입력 폼</title>
</head>
<body>
<h3>버튼을 만들자</h3>
<hr>
<form>
	검색: <input type="text" size="10" value="">
		  <input type="button" value="Q1">
		  <button type="button">Q2</button><br>
	submit 버튼 : <input type="submit" value="전송1">
				<button type="submit">전송2</button><br>
	reset 버튼 : <input type="reset" value="리셋1">
				<button type="reset">리셋2</button><br>
	이미지버튼 : <input type="image" src="media/button.png" alt="이미지 버튼">
				<button type="button"><img src="media/button.png" alt="이미지 버튼"></button>
</form>
</body>
</html>

 

ex3-09.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>체크 박스 만들기</title></head>
<body>
<h3>먹고 싶은 것 모두 체크하세요</h3>
<hr>
<form>
	짜장면 <input type="checkbox" value="1">
	짬뽕 <input type="checkbox" value="2" checked>
	탕수육 <input type="checkbox" value="3">
</form>
</body>
</html>

ex3-10.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>라디오버튼 만들기</title>
</head>
<body>
<h3>먹고 싶은 것 하나만 선택?</h3>
<hr>
<form>
	<input type="radio" name="china" value="1">
		짜장면<img src="media/jajang.png"><br>
	<input type="radio" name="china" value="2" checked>
		짬뽕<img src="media/jjambbong.png"><br>
	<input type="radio" name="china" value="3">
		탕수육<img src="media/tangsuyuk.png">
</form>
</body>
</html>

ex3-11.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>콤보박스 만들기</title></head>
<body>
<h3>오늘 점심은?</h3>
<hr>
<form method="get">
	<select name="china">
		<option value="1">오늘통닭</option>
		<option value="2" selected>이삭토스트</option>
		<option value="3">한솥도시락</option>
	</select>
  <input type="submit" value="전송" />
</form>
</body>
</html>

ex3-12.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title></head>
<body>
<h3>&lt;label&gt; 태그로 로그인 폼 만들기</h3>
<hr>
<form name="fo" method="get">
	<label>사용자 ID : <input type="text" size="15" value=""></label><br>
	<label for="pass">비밀 번호 : </label>
	<input id="pass" type="password" size="15" value="">
	<input type="submit" value="완료">
</form>
</body>
</html>

ex3-13.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캡션을 가진 라디오버튼</title>
</head>
<body>
<h3>먹고 싶은 것 하나만 선택?(&lt;label&gt;이용)</h3>
<hr>
<form>
	<label>
		<input type="radio" name="china" value="1">
		짜장면 <img src="media/jajang.png">
	</label><br>
  <!-- 이미지나 글자 클릭해도 선택 가능하다 . label의 장점  -->
	<label>
		<input type="radio" name="china" value="2" checked>
		짬뽕 <img src="media/jjambbong.png">
	</label><br>
	<label>
		<input type="radio" name="china" value="3">
		탕수육 <img src="media/tangsuyuk.png">
	</label>
</form>
</body>
</html>

ex3-14.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>색 입력 받기</title></head>
<body>
<h3>컬러다이얼로그로 색 입력</h3>
<hr>
<form>
색 선택 <input type="color" value="#00BFFF"
	onchange="document.body.style.color=this.value">
</form>
</body>
</html>

ex3-15.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시간 정보를 입력하는 폼 활용</title></head>
<body>
<h3>시간 정보 입력 HTML5 폼 요소들</h3>
초기 세팅 : 2022년 3월 1일 밤 9시 30분(10초 32)<br>
시간을 변경해 보세요
<hr>
<form>
<pre>
month :	<input type="month" value="2022-03"><br>
week : 	<input type="week" value="2022-W09"><br>
data : 	<input type="date" value="2022-03-01"><br>
time : 	<input type="time" value="21:30"><br>
local:	<input type="datetime-local"
			value="2022-09-01T21:30:10.32"><br>
</pre>
</form>
</body>
</html>

ex3-16.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시간 정보 입력 응용</title></head>
<body>
<h3>생일축하합니다</h3>
<hr>
당신의 생일은 2003년 2월 9일입니다. 틀리면 수정하시고
파티 시간과 장소를 입력하세요.
<hr>
<form>
<table>
<tr><td>생일</td>
	<td><input type="date" value="2003-02-09"></td></tr>
<tr><td>생일파티시간</td>
	<td><input type="time"></td></tr>
<tr><td>생일파티장소</td>
	<td><input type="text"></td></tr>
</table>
</form>
</body>
</html>

ex3-17.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>편리한 숫자 입력</title></head>
<body>
<h3>홈 제어 시스템 - 온도 조절</h3>
<hr>
<form>
	지속시간 (0.0~10.0시간) :
	<input type="number" min="0.0" max="10.0"
						 step="0.5"><br><br>
	온도 설정 :	10&deg;
	<input type="range" min="10" max="30"
					list="temperatures">30&deg;
	<datalist id="temperatures">
 		<option value="12" label="Low">
 		<option value="20" label="Medium">
 		<option value="28" label="High">
	</datalist>
</form>
</body>
</html>

ex3-18.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형식을 가진 텍스트 입력</title></head>
<body>
<h3>회원 정보를 입력해주세요.</h3>
<hr>
<form>
email : <input type="email" placeholder="id@host"><br>
홈페이지 : <input type="url" placeholder="http://"><br>
전화번호 : <input type="tel" placeholder="010-1234-5678">
		<input type="submit" value="확인"><br><br>
<hr>
검색어 : <input type="search" placeholder="검색어">
		<input type="button" value="검색">
</form>
</body>
</html>

ex3-19.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 입력 그룹으로 묶기</title></head>

<style>
	body {background-color: #ccd6ff;}
	h3 {color: #3957d0; font-size: 20px;}
	form {color: #092595;}
</style>
<body>
<h3>회원 정보를 입력해주세요.</h3>
<hr>
<form>
	<fieldset> <!--묶을때-->
		<legend>회원정보</legend>
		이메일 : <input type="email"><br>
		홈페이지 : <input type="url"><br>
		전화번호 : <input type="tel">
	</fieldset>
	<small>질문 : Tel. 010-111-1111</small>
</form>
</body>
</html>

 

'IT > HTML' 카테고리의 다른 글

[33일차] 5장 CSS3 고급 활용  (0) 2022.08.04
[33일차] HTML  (0) 2022.08.04
[32일차] 4장 CSS3로 웹 페이지 꾸미기  (0) 2022.08.03
[32일차] 2강 HTML5 기본 문서 만들기  (0) 2022.08.03
[32일차] HTML  (0) 2022.08.03

관련글

댓글

티스토리툴바