본문 바로가기
개발일지/Front

input, list 예제(복습)

연습용365 2021. 11. 3. 08:42

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
	html { font-family: 'Gowun Dodum', sans-serif; }
	form { padding:5px; }
	legend { font-size: 20px; align:center; }
</style>
</head>
<body>
  <form action="" method="get">
   <table>
   <legend>자기소개</legend>
   <tr>
   		<td> 이름 </td>
   		<td><input type="text" name="uname"></td>
   <tr>
   <tr>
   		<td> 비밀번호 </td>
   		<td><input type="password" name="upw"></td>
   <tr>
   <tr>
   		<td> 연락처 </td>
   		<td><input type="text" name="uphone1" size="5"> -
   			<input type="text" name="uphone2" size="5"> -
   			<input type="text" name="uphone3" size="5">
   		</td>
   </tr>
   <tr>
   		<td>사진</td>
   		<td><input type="file" name="upic"></td>
   </tr>
   <tr>
   		<td>성별구분</td>
   		<td>
   			<input type="radio" name="gender" value="m">남
   			<input type="radio" name="gender" value="w">여
   		</td>
   </tr>
   <tr>
   		<td>사용언어</td>
   		<td>
   			<input type="checkbox" name="lan" value="kor" checked="checked"> 한글
			<input type="checkbox" name="lan" value="eng"> 영어
			<input type="checkbox" name="lan" value="jap"> 일어
			<input type="checkbox" name="lan" value="chi"> 중국
   		</td>
   </tr>
   <tr>
   		<td>자기소개</td>
   		<td><textarea rows=5 cols=20>간단하게 입력하세요</textarea></td>
   </tr>
	<tr>
		<td>국적</td>
		<td>
			<select>
				<option>KOREA</option>	
				<option>USA</option>
				<option>JAPAN</option>
				<option>CHINA</option>
			</select>
		</td>
	</tr>
	<tr>
		<td>좋아하는 음식</td>
		<td>
			<select multiple="multiple">
					<option>김치</option>
					<option>불고기</option>
					<option>파전</option>
					<option>비빔밥</option>
			</select>
		</td>
	</tr>
	<tr>
		<td><input type="submit"></td>
	</tr>
	 </table>
	</form>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="join.html" method="get" name="form1">
		<table align="center"  bordercolor="#CCDDFF" border="1" cellspacing="0">
			<tr>
				<th colspan="2" bgcolor="#CCDDFF">회원 기본 정보</th>
			</tr>
			<tr>
				<th bgcolor="#EEEEEE" align="center">아이디:</th>
				<td><input type="text" size="15" name="my_id">
				<span class="necessary">4~12자의 영문 대소문자와 숫자로만 입력</span></td>
			</tr>
			<tr>
				<th bgcolor="#EEEEEE" align="center">비밀번호:</th>
				<td><input type="password" size="15" name="my_password">
				<span class="necessary">4~12자의 영문 대소문자와 숫자로만 입력</span></td>
			</tr>
			<tr>
				<th bgcolor="#EEEEEE" align="center">비밀번호 확인:</th>
				<td><input type="password" size="15" name="my_password_confirm"></td>
			</tr>
			<tr>
				<th bgcolor="#EEEEEE" align="center">메일주소:</th>
				<td><input type="text" size="20" name="my_mail">
				<span class="necessary">예)id@domain.com</span></td>
			</tr>
			<tr>
				<th bgcolor="#EEEEEE" align="center">이름:</th>
				<td><input type="text" size="20" name="my_name"></td>
			</tr>
			
			<tr>
				<th colspan="2" colspan="2" bgcolor="#CCDDFF">개인 신상 정보</th>
			</tr>
			<tr>
				<th bgcolor="#EEEEEE" align="center">주민등록번호:</th>
				<td><input type="text" size="20" name="my_address">
				<span class="necessary">예) 1234561234567</span></td>
			</tr>
			<tr>
				<th bgcolor="#EEEEEE" align="center">생일:</th>
				<td><input type="text" size="3" name="my_year"><span>년</span>
					<select name="my_month">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select>
					<span>월</span>
					<select name="my_day">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
						<option value="16">16</option>
						<option value="17">17</option>
						<option value="18">18</option>
						<option value="19">19</option>
						<option value="20">20</option>
						<option value="21">21</option>
						<option value="22">22</option>
						<option value="23">23</option>
						<option value="24">24</option>
						<option value="25">25</option>
						<option value="26">26</option>
						<option value="27">27</option>
						<option value="28">28</option>
						<option value="29">29</option>
						<option value="30">30</option>
						<option value="31">31</option>
					</select>
				</td>
			</tr>
			<tr>
				<th bgcolor="#EEEEEE" align="center">관심분야</th>
				<td>
					<input type="checkbox" size="15" name="my_hobby" value="a"><span>컴퓨터</span>
					<input type="checkbox" size="15" name="my_hobby" value="b"><span>인터넷</span>
					<input type="checkbox" size="15" name="my_hobby" value="c"><span>여행</span>
					<input type="checkbox" size="15" name="my_hobby" value="d"><span>영화감상</span>
					<input type="checkbox" size="15" name="my_hobby" value="e"><span>음악감상</span>
				</td>
			</tr>
			<tr>
				<th bgcolor="#EEEEEE" align="center">자기소개</th>
				<td><textarea rows=5, cols=50 name="my_intro"></textarea></td>
			</tr>
		</table><br>
		<div align="center">
			<input type="submit" value="회원 가입" />
			<input type="reset" value="다시 입력" />
		</div>
	</form>
</body>
</html>

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<link type="text/css" href="./css/style.css" rel="stylesheet">
<style type="text/css">
	#memo 
	{
		color : red;
	}
	.org
	{
		color : orange;
		font-size : 20px;
	}
	
	#navigation li a
	{
		color : pink;
	}
	
	h1, #memo
	{
		color : red; 
	}
	a:link { color:red; }
	a:visited {	color : blue; }
	a:hover { color : green; }
	a:active { color : orange; }
</style>
</head>
<body>
	<h1>CSS란</h1>
	<p>웹프로그래밍을 위한 준비 단계 입니다.</p>
	<p>노력하면 누구나 프로그래밍을 할 수 있다!</p>
	
	<div id="memo">
	red
	</div>
	
	<div class="org">Orange</div>
	<p class="org intro">Hello world.</p>
	
	<div id="navigation">
		<ul>
			<li>홈</li>
			<li><a href="http://www.daum.net">사이트소개</li>
			<li>고객센터</li>
		</ul>
	</div>
	
	<ul>
		<li>홈</li>
		<li>사이트소개</li>
		<li>고객센터</li>
	</ul>
</body>
</html>

 

 

 

'개발일지 > Front' 카테고리의 다른 글

[ 부트스트랩 ] 그리드 크기에 따라 숨기기/보이기  (0) 2022.04.10
부트스트랩 이용해서 회원가입 페이지 수정  (0) 2021.11.21
1101(3) html - input, select 복습  (0) 2021.11.02
1101(2) html - 테이블(table)  (0) 2021.11.01
1101(1) html - 이클립스에서 환경설정 및 문자표현 태그  (2) 2021.11.01

'개발일지/Front' Related Articles

티스토리툴바