12_form
<!DOCTYPE html>
<html lang="ko">
<head>
<title>12_form.html</title>
</head>
<body>
<!-- form 입력양식 -->
<!-- 사용자들이 값(data, value)을 입력할 수 있도록 해줌 -->
<!-- 참조 https://www.w3schools.com/html/html_form_input_types.asp -->
<!-- 요소, element : <table> <img> <a> <audio> ~~ -->
<!-- 속성, property, attribute : src, width, height, border ~ -->
<!-- 다양한 폼 컨트롤 요소 -->
<!-- 1. <input> 요소 -->
<input type="button">
<input type="button" value="로그인">
<input type="button" value="검색">
<input type="button" value="등록">
<input type="button" value="입실">
<hr>
<!-- 사용자가 입력한 정보를 서버로 전송 -->
<input type="submit" value="전송">
<!-- 사용자가 입력한 정보를 취소(원래대로 복귀) -->
<input type="reset" value="취소">
<hr>
<!-- type=button + type=submit의 기능이 같이 있음 -->
<button>회원가입</button>
<hr>
<input type="radio">
<input type="checkbox">
<!-- 2. 여는태그와 닫는태그가 있는 폼 컨트롤 요소 -->
</body>
</html>13_로그인
<!DOCTYPE html>
<html lang="ko">
<head>
<title>13_로그인.html</title>
</head>
<body>
<!-- 참조 : 동행복권 로그인 -->
<!-- https://dhlottery.co.kr/user.do?method=login&returnUrl= -->
<h3><img src="../images/login.png" >LOGIN</h3>
<!-- 사용자 입력한 정보는 <form>단위로 서버로 전송됨 -->
<form>
<table border="1">
<tr>
<th>아이디</th>
<td>
<input type="text">
</td>
<td rowspan="2">
<input type="submit" value="로그인">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="3">
<input type="checkbox" checked>ID저장
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="회원가입">
<input type="button" value="아이디/비번찾기">
</td>
</tr>
</table>
</form>
<!-- 주의 사항
예)잘못된 경우
<form>
<form></form>
</form>
예)잘된 경우
<form></form>
<form></form>
(하나의 문서안에 여러개 올 수 있음, form 안에 form은 x)
-->
</body>
</html>14_회원가입
<!DOCTYPE html>
<html lang="ko">
<head>
<title>14_회원가입.html</title>
</head>
<body>
<!-- 참조 https://www.midasb.co.kr/shop/idinfo.html -->
<h3>회/원/가/입</h3>
<!-- id="JavaScript나 jQuery 접근시 주로 사용" -->
<!-- name="Backend단에서 접근시 주로 사용" -->
<form id="memfrm" name="memfrm"> <!-- 한글, 첫글자 숫자안됨 -->
이름 :
<input type="text" name="uname" id="uname" autofocus><!-- autofocus: 커서를 미리들어가있음 -->
<hr>
아이디:
<input type="text"
name="userid"
id="userid"
size="10"
maxlength="5"
placeholder="아이디 입력해 주세요"
required><!-- 반드시 입력해야 한다 -->
<input type="button" value="중복확인">
<hr>
비밀번호 :
<input type="password"
name="userpw"
id="userpw"
size="12"
maxlength="12"
placeholder="비밀번호입력해주세요"
required>
<hr>
우편번호 :
<input type="text" size="5" readonly><!-- 커서가 못 들어감 -->
<input type="button" value="주소찾기">
<br>
나머지 주소 : <input type="text">
<hr>
나이 :
<!-- type=radio의 name을 동일하게 주면 그룹이 생성되고, 한개만 선택할 수 있다 -->
<input type="radio" name="age" value="10">10대
<input type="radio" name="age" value="20" checked>20대
<input type="radio" name="age" value="30">30대
성별 :
<input type="radio" name="gender" value="m">남
<input type="radio" name="gender" value="f" checked>여
<hr>
취미 :
<input type="checkbox" id="movie" name="movie" value="m">영화
<input type="checkbox" id="cook" name="cook" value="c" checked>요리
<input type="checkbox" id="game" name="game" value="g">게임
</form>
<hr>
<!-- 2. 여는태그와 닫는태그가 있는 폼 컨트롤 요소 -->
<form id="myform" name="myform">
<button>버튼1</button>
<hr>
생년월일 :
<select name="myYear" id="myYear">
<option value="2021">2021년</option>
<option value="2022" selected>2022년</option>
<option value="2023">2023년</option>
</select>
<hr>
<!-- multiple : ctrl이용해서 다중 선택 가능 -->
<select name="myMonth" id="myMonth" multiple>
<option value="JAN">1월</option>
<option value="FEB">2월</option>
<option value="MAR">3월</option>
<option value="APR">4월</option>
<option value="MAY">5월</option>
</select>
<hr>
<!-- text보다 textarea가 더 많이 기재할수있음 -->
<!-- 여는태그와 닫는태그 사이가 value 값임-->
배송메세지 :
<textarea cols="50" rows="3" maxlength="200">200글자이내로 입력해 주세요</textarea>
<hr>
<!-- <form name=myform>이 서버로 전송됨-->
<input type="submit" value="전송">
<input type="reset" value="취소"><!-- reset: 최초의 form상태로 되돌아감 -->
</form>
</body>
</html>15_form
<!DOCTYPE html>
<html lang="ko">
<head>
<title>15_form.html</title>
</head>
<body>
<!-- 참조 https://www.w3schools.com/html/html_forms_attributes.asp -->
<h3>1. 폼 관련 속성들</h3>
<!--
id="" 폼 아이디 ( 주로 Frontend단에서 접근시 사용)
name="" 폼 이름(주로 Backend단에서 접근시 사용)
action="" 사용자가 입력 요청한 정보를 서버측에서 받는 페이지명 또는 명령어
mathod="" 전송방식 get 또는 post
enctype="" 파일 전송
-->
<form id="loginfrm" name="loginfrm" action="ok.jsp">
아이디:<input type="text" name="userid"> <hr>
비밀번호:<input type="password" name="userpw"> <hr>
<input type="submit" value="전송">
</form>
<!-- 파일 첨부해서 전송 -->
<form enctype="multipart/form-data">
첨부 파일 : <input type="file">
</form>
<!-- 전송방식 get 또는 post -->
<form method="get"></form><!--사용자가 입력한 정보가 url에 노출-->
<h3>2. type=image</h3>
<form action="ok2.jsp">
<img src="../images/angel.png" alt="천사">
<hr>
<!-- <img src=''> + type=submit 기능 -->
<input type="image" src="../images/devil.png">
<hr>
검색 : <input type="text" name="search">
<input type="image" src="../images/search.png">
</form>
<hr>
<h3>3. 다양한 Input Types </h3>
<!-- 참조 https://www.w3schools.com/html/html_form_input_types.asp -->
<!-- HTML페이지에서 노출되지는 않지만 form에 포함된 컨트롤 요소 -->
<input type="hidden" id="page" name="page" value="3">
<input type="hidden" id="col" name="col" value="title">
<hr>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="range" id="vo1" name="vo1" min="0" max="50"><hr>
<input type="color"> <hr>
<input type="date" > <hr>
<input type="search"> <hr>
<input type="time"> <hr>
<h3>4. label</h3>
<label for="user">이름 :</label>
<input type="text" id="user">
</body>
</html>16_블럭요소
<!DOCTYPE html>
<html lang="ko">
<head>
<title>16_블럭요소.html</title>
</head>
<body>
<!-- 참조 https://www.w3schools.com/html/html_blocks.asp -->
<!-- 특정영역에 대해서 범위를 지정할 수 있다 -->
<!--<h1></h1>
<p></p>
<ul></ul>
<div></div>
<span></span>-->
<h3>1. 블럭요소 block</h3>
<!-- 블럭요소의 크기는 자신이 감싸는 내용과 상관없이 자신의 영역을 가지고 있음 -->
<!-- 블럭이 없는 경우-->
Text1
Text2
Text3
<hr>
<!-- 블럭이 있는 경우 -->
<div>Text4</div>
<div>Text5</div>
<div>Text6</div>
<hr>
<!-- 블럭인용구 -->
<blockquote>Text7</blockquote>
<blockquote>Text8</blockquote>
<blockquote>Text9</blockquote>
<hr>
<pre>
서울특별시
강남구 테헤란로
삼원 타워 4층 아이티윌
</pre>
<h3>2. 인라인 요소 inline</h3>
<!-- 인라인 요소의 크기는 자신이 감싸는 내용과 밀접하며,
내용의 크기가 자신의 크기가 된다-->
<strong>진하게</strong>
<u>밑줄</u>
<i>기울임</i>
<a>링크</a>
<span>아이티윌</span>
<textarea cols="10" rows="3"></textarea>
<hr>
<h3>3. block요소의 크기</h3>
<div style="background-color: red;">DIV</div>
<blockquote style="background-color: green;">BLOCKQUOTE</blockquote>
<pre style="background-color: blue;">PRE</pre>
<h1 style="background-color: brown;">H1</h1>
<ul style="background-color: chocolate;">
<li>JAVA</li>
<li>PYTHON</li>
</ul>
<hr>
<h3>4. inline요소의 크기</h3>
<strong style="background-color: purple;">손흥민</strong>
<span style="background-color: pink;">김연아</span>
<hr>
<!-- 블럭요소와 인라인요소는 CSS에서 주로 편집한다 -->
<div style="background-color: aqua; width: 250px; height: 200px;"></div>
<!-- 참조 https://www.w3schools.com/html/html_layout.asp -->
</body>
</html>17_레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<title>17_레이아웃.html</title>
</head>
<body>
<!-- 참조 https://www.w3schools.com/html/html_layout.asp -->
<!-- 참조 https://www.w3schools.com/css/css_rwd_intro.asp -->
<!-- 참조 NCS학습모듈(화면구현) https://ncs.go.kr/ -->
<div id="wrap" style="background-color: rgb(255, 59, 59);">#wrap전체블럭
<div id="header" style="background-color: rgb(255, 155, 155);">#header</div><!-- id=header 끝 -->
<div id="main" style="background-color: rgb(38, 194, 237);">#main
<div id="sub" style="background-color: aquamarine;">#sub</div>
<div id="content" style="background-color: rgb(255, 233, 206);">#content</div>
</div><!-- id=main 끝 -->
<div id="footer" style="background-color: rgb(216, 151, 246);">#footer</div><!-- id=footer 끝 -->
</div><!-- id=wrap 끝 -->
</body>
</html>
'Frontend > HTML , CSS' 카테고리의 다른 글
| 2월 7일 CSS, Bootstrap (20~30) (0) | 2023.02.07 |
|---|---|
| 2월 6일 CSS, Bootstrap (07~18) (0) | 2023.02.06 |
| 2월 3일 HTML, CSS (18~20 / 01~06) (0) | 2023.02.06 |
| 2월 1일 HTML (01~11) (0) | 2023.02.06 |
