본문 바로가기
공부/HTML

HTML table 과 form 태그

by 726582776982 2022. 3. 6.
  • <img src=“이미지 위치”>
  • Align=top, middle, bottom – 이미지를 기준으로 글자  정렬
  • Align=left, right – 이미지  정렬
  • Width, height – 이미지의 가로와 세로 크기 지정
  • Title – 마우스를 그림 위에 위치시켰을 때 나타나는 설명
  • Hspace, vspace – 이미지의 수평·수직 여백 지정
 
 
  • <TABLE>..</TABLE>
  • 속성
 
  • <A href=“링크 경로”> 브라우저에 표시될 내용… </a>
 
<TABLE ex)>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>** 회원명단 **</title>
</head>
<body>
<table border =5 width = 700 height = 700 bgcolor = LightYellow  >
<caption> ** 회원 명단 **</caption>
<tr><th>번호</th><th>이름</th><th>사진</th><th>속성</th><th>성별</th></tr>
<tr align = "center"><td>1</td><td>꼬북이</td>
<td><img src = ../image/ggobugi1.png width = 50 height = 100></td><td colspan="2">물</td>
<tr align = "center"><td>2</td><td>파이리</td><td><img src = ../image/fa1.png width = 50 height = 100></td><td rowspan = "2">불</td><td>남성</td>
<tr align = "center"><td colspan="2" rowspan ="2">3</td><td><img src = ../image/fa2.png width = 50 height = 100></td><td>남성</td>
<tr align = "center"><td><img src = ../image/frog02.png width = 50 height = 100><br>이상해씨</td><td>풀</td><td>여성</td>
</table>
</body>
</html>
cs
 
<Form ex)>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>** Form Basic **</title>
</head>
<body>
<h2> Form Tag</h2>
<pre>
=> form Tag 는 서버로 정보를 전송하는데 필요한 속성을 가지고 있음
   action="목적지_요청명" method="전송방식_Get/Post"
<!-- get 방식은 name을 통해 외부 DB에 비교 // Get 방식은 폼 내에 전송될 정보를 해당URL 뒤에 붙혀 조인-->
<!-- Post 방식은 URL 에 표시가 따로되지않음. -->
=> id, name 모두 유일성 ,
   id 는 문서내부에서 사용, name 은 문서외부 (특히 서버) 에서 사용  
=> size는 Tag 길이, maxlength는 입력값의 길이
** 하나의 html 문서내에 여러 Form Tag set  사용가능
** 다양한 입력 Tag 소개 => https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input
</pre><br>
<hr><br>
<form action="join" method="get">
I D : <input type ="text" id="id" name = "id" size = 20  maxlength="13">  <br>
<!-- type 은 종류/ id 는 내부값 지칭 / name 은 외부 참조용 네이밍 /  -->
<h5>13 줄 내에 아이디를 입력하세요.</h5>
P W : <input type = "password" id = "password" name ="password" size = 20><br><br>
<input type ="submit" value= "전송"> &nbsp;&nbsp;
<input type = "reset"  value = "초기화" > &nbsp;&nbsp;
<input type = "button" value = "버튼(기능구현)">
<hr>
</form>
 
</body>
</html>
cs
=> form Tag 는 서버로 정보를 전송하는데 필요한 속성을 가지고 있음
   action="목적지_요청명" method="전송방식_Get/Post"
<!-- get 방식은 name을 통해 외부 DB에 비교 // Get 방식은 폼 내에 전송될 정보를 해당URL 뒤에 붙혀 조인-->
<!-- Post 방식은 URL 에 표시가 따로되지않음. -->
=> id, name 모두 유일성 ,
   id 는 문서내부에서 사용, name 은 문서외부 (특히 서버) 에서 사용  
=> size는 Tag 길이, maxlength는 입력값의 길이
** 하나의 html 문서내에 여러 Form Tag set  사용가능
ex)
<form action="join" method="get">
I D : <input type ="text" id="id" name = "id" size = 20  maxlength="13">  <br>

<!-- type 은 종류/ id는 내부 값 지칭 / name 은 외부 참조용 네이밍 /  -->

'공부 > HTML' 카테고리의 다른 글

Semantic 태그  (0) 2022.03.11
Frame 과 UI설계 구현+Div  (0) 2022.03.07
HTML 기본정보  (0) 2022.03.06

관련글

티스토리툴바